diff --git a/package.json b/package.json index bea096309c4..07723f21447 100644 --- a/package.json +++ b/package.json @@ -106,7 +106,7 @@ "braces": "in the resolutions - needed to resolve a security dependency issue - need to remove this when the issue is resolved and packages are updated" }, "dependencies": { - "@artsy/cohesion": "4.241.0", + "@artsy/cohesion": "4.243.0", "@artsy/palette-mobile": "14.0.30", "@artsy/to-title-case": "1.1.0", "@braze/react-native-sdk": "11.0.0", diff --git a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingAlertFilters.tsx b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingAlertFilters.tsx index ef2a659d996..914034926b2 100644 --- a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingAlertFilters.tsx +++ b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingAlertFilters.tsx @@ -1,5 +1,7 @@ +import { ContextModule, OwnerType } from "@artsy/cohesion" import { Flex, Popover, Text } from "@artsy/palette-mobile" import { useIsFocused } from "@react-navigation/native" +import { useProgressiveOnboardingTracking } from "app/Components/ProgressiveOnboarding/useProgressiveOnboardingTracking" import { useSetActivePopover } from "app/Components/ProgressiveOnboarding/useSetActivePopover" import { GlobalStore } from "app/store/GlobalStore" import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag" @@ -12,6 +14,11 @@ export const ProgressiveOnboardingAlertFilters: React.FC = ({ children }) => { const { dismiss, setIsReady } = GlobalStore.actions.progressiveOnboarding const isFocused = useIsFocused() const progressiveOnboardingAlerts = useFeatureFlag("AREnableProgressiveOnboardingAlerts") + const { trackEvent } = useProgressiveOnboardingTracking({ + name: "alert-select-filters", + contextScreenOwnerType: OwnerType.artist, + contextModule: ContextModule.artistArtworksFilterHeader, + }) const isDisplayable = isReady && @@ -26,12 +33,15 @@ export const ProgressiveOnboardingAlertFilters: React.FC = ({ children }) => { dismiss("alert-select-filters") } + const isVisible = !!isDisplayable && isActive + return ( diff --git a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingAlertFinish.tsx b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingAlertFinish.tsx index 39e51a72e24..be859cf185f 100644 --- a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingAlertFinish.tsx +++ b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingAlertFinish.tsx @@ -1,6 +1,9 @@ +import { ContextModule, OwnerType } from "@artsy/cohesion" import { ToolTip } from "@artsy/palette-mobile" +import { useProgressiveOnboardingTracking } from "app/Components/ProgressiveOnboarding/useProgressiveOnboardingTracking" import { GlobalStore } from "app/store/GlobalStore" import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag" +import { useEffect } from "react" export const ProgressiveOnboardingAlertFinish: React.FC = ({ children }) => { const { @@ -9,6 +12,11 @@ export const ProgressiveOnboardingAlertFinish: React.FC = ({ children }) => { } = GlobalStore.useAppState((state) => state.progressiveOnboarding) const { dismiss } = GlobalStore.actions.progressiveOnboarding const progressiveOnboardingAlerts = useFeatureFlag("AREnableProgressiveOnboardingAlerts") + const { trackEvent } = useProgressiveOnboardingTracking({ + name: "alert-finish", + contextScreenOwnerType: OwnerType.artist, + contextModule: ContextModule.filterScreen, + }) const isDisplayable = isReady && @@ -20,6 +28,12 @@ export const ProgressiveOnboardingAlertFinish: React.FC = ({ children }) => { dismiss("alert-finish") } + useEffect(() => { + if (!!isDisplayable) { + trackEvent() + } + }, [isDisplayable]) + return ( = ({ children, visible }) => { + const { isDismissed } = GlobalStore.useAppState((state) => state.progressiveOnboarding) + + const { trackEvent } = useProgressiveOnboardingTracking({ + name: !isDismissed("alert-create-reminder-1").status + ? "alert-create-reminder-1" + : "alert-create-reminder-2", + contextScreenOwnerType: OwnerType.artist, + contextModule: ContextModule.artistArtworksFilterHeader, + }) + const { setActivePopover } = GlobalStore.actions.progressiveOnboarding const { isDisplayable, dismissNextCreateAlertReminder } = useDismissAlertReminder() @@ -17,16 +29,19 @@ export const ProgressiveOnboardingAlertReminder: React.FC< const { isActive } = useSetActivePopover(shouldDisplayReminder) + const isVisible = shouldDisplayReminder && isActive + const handleDismiss = () => { dismissNextCreateAlertReminder() } return ( setActivePopover(undefined)} + onOpenComplete={trackEvent} placement="bottom" title={ diff --git a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingLongPressContextMenu.tsx b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingLongPressContextMenu.tsx index fd3d2ba59e0..d78740809bf 100644 --- a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingLongPressContextMenu.tsx +++ b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingLongPressContextMenu.tsx @@ -1,5 +1,7 @@ +import { ContextModule, OwnerType } from "@artsy/cohesion" import { Flex, Popover, Text } from "@artsy/palette-mobile" import { useIsFocused } from "@react-navigation/native" +import { useProgressiveOnboardingTracking } from "app/Components/ProgressiveOnboarding/useProgressiveOnboardingTracking" import { useSetActivePopover } from "app/Components/ProgressiveOnboarding/useSetActivePopover" import { getCurrentEmissionState, GlobalStore } from "app/store/GlobalStore" import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag" @@ -33,22 +35,36 @@ export const ProgressiveOnboardingLongPressContextMenu: React.FC = ({ children } isFocused const { isActive, clearActivePopover } = useSetActivePopover(isDisplayable) + const { trackEvent } = useProgressiveOnboardingTracking({ + name: "long-press-artwork-context-menu", + contextScreenOwnerType: OwnerType.home, + /** + * Setting contextModule to newWorksForYouRail + * we display the tooltip on the first rail of the home screen + * at the moment it is newWorksForYouRail + * see isFirstArtworkSection variable in HomeViewSectionArtworks.tsx + */ + contextModule: ContextModule.newWorksForYouRail, + }) + const handleDismiss = () => { setIsReady(false) dismiss("long-press-artwork-context-menu") } + const isVisible = + !!enableLongPressContextMenu && + !!enableLongPressContextMenuOnboarding && + !!isDisplayable && + isActive + return ( diff --git a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingOfferSettings.tsx b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingOfferSettings.tsx index 895ec58eba7..7af4a72cff2 100644 --- a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingOfferSettings.tsx +++ b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingOfferSettings.tsx @@ -1,5 +1,7 @@ +import { ContextModule, OwnerType } from "@artsy/cohesion" import { Flex, Popover, Text } from "@artsy/palette-mobile" import { useIsFocused } from "@react-navigation/native" +import { useProgressiveOnboardingTracking } from "app/Components/ProgressiveOnboarding/useProgressiveOnboardingTracking" import { useSetActivePopover } from "app/Components/ProgressiveOnboarding/useSetActivePopover" import { GlobalStore } from "app/store/GlobalStore" import { useDebouncedValue } from "app/utils/hooks/useDebouncedValue" @@ -13,6 +15,11 @@ export const ProgressiveOnboardingOfferSettings: React.FC = ({ children }) => { const { dismiss, setIsReady } = GlobalStore.actions.progressiveOnboarding const isFocused = useIsFocused() const isArtworkListOfferabilityEnabled = useFeatureFlag("AREnableArtworkListOfferability") + const { trackEvent } = useProgressiveOnboardingTracking({ + name: "offer-settings", + contextScreenOwnerType: OwnerType.saves, + contextModule: ContextModule.saves, + }) const isDisplayable = isArtworkListOfferabilityEnabled && @@ -33,12 +40,15 @@ export const ProgressiveOnboardingOfferSettings: React.FC = ({ children }) => { dismiss("offer-settings") } + const isVisible = !!debouncedIsDisplayable.debouncedValue && isActive + return ( diff --git a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingSaveAlert.tsx b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingSaveAlert.tsx index a8dc1f4921e..55e37ebd707 100644 --- a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingSaveAlert.tsx +++ b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingSaveAlert.tsx @@ -1,5 +1,7 @@ +import { ContextModule, OwnerType } from "@artsy/cohesion" import { Button, Flex, Join, Popover, Spacer, Text } from "@artsy/palette-mobile" import { useIsFocused } from "@react-navigation/native" +import { useProgressiveOnboardingTracking } from "app/Components/ProgressiveOnboarding/useProgressiveOnboardingTracking" import { useSetActivePopover } from "app/Components/ProgressiveOnboarding/useSetActivePopover" import { GlobalStore } from "app/store/GlobalStore" import { PROGRESSIVE_ONBOARDING_ALERT_CHAIN } from "app/store/ProgressiveOnboardingModel" @@ -13,6 +15,11 @@ export const ProgressiveOnboardingSaveAlert: React.FC = ({ children }) => { const { dismiss, setIsReady } = GlobalStore.actions.progressiveOnboarding const isFocused = useIsFocused() const progressiveOnboardingAlerts = useFeatureFlag("AREnableProgressiveOnboardingAlerts") + const { trackEvent } = useProgressiveOnboardingTracking({ + name: "alert-create", + contextScreenOwnerType: OwnerType.artist, + contextModule: ContextModule.artistArtworksFilterHeader, + }) const isDisplayable = isReady && @@ -38,6 +45,7 @@ export const ProgressiveOnboardingSaveAlert: React.FC = ({ children }) => { onDismiss={handleDismiss} onPressOutside={handleDismiss} onCloseComplete={clearActivePopover} + onOpenComplete={trackEvent} variant="light" placement="right" title={ diff --git a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingSaveArtwork.tsx b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingSaveArtwork.tsx index 669c1fab52d..549b9a91ddb 100644 --- a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingSaveArtwork.tsx +++ b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingSaveArtwork.tsx @@ -1,5 +1,7 @@ +import { ContextModule, OwnerType } from "@artsy/cohesion" import { Flex, Popover, Text } from "@artsy/palette-mobile" import { ProgressiveOnboardingSaveArtwork_Query } from "__generated__/ProgressiveOnboardingSaveArtwork_Query.graphql" +import { useProgressiveOnboardingTracking } from "app/Components/ProgressiveOnboarding/useProgressiveOnboardingTracking" import { useSetActivePopover } from "app/Components/ProgressiveOnboarding/useSetActivePopover" import { GlobalStore } from "app/store/GlobalStore" import { Sentinel } from "app/utils/Sentinel" @@ -7,7 +9,9 @@ import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag" import { useState } from "react" import { graphql, useLazyLoadQuery } from "react-relay" -export const ProgressiveOnboardingSaveArtwork: React.FC = ({ children }) => { +export const ProgressiveOnboardingSaveArtwork: React.FC<{ contextScreenOwnerType?: OwnerType }> = ({ + children, +}) => { const [isInView, setIsInView] = useState(false) const { dismiss, setIsReady } = GlobalStore.actions.progressiveOnboarding const { @@ -15,6 +19,10 @@ export const ProgressiveOnboardingSaveArtwork: React.FC = ({ children }) => { sessionState: { isReady }, } = GlobalStore.useAppState((state) => state.progressiveOnboarding) const data = useLazyLoadQuery(query, {}) + const { trackEvent } = useProgressiveOnboardingTracking({ + name: "save-artwork", + contextModule: ContextModule.saveWorksCTA, + }) const savedArtworks = data?.me.counts.savedArtworks const isDismissed = _isDismissed("save-artwork").status @@ -28,8 +36,10 @@ export const ProgressiveOnboardingSaveArtwork: React.FC = ({ children }) => { dismiss("save-artwork") } + const isVisible = !!isDisplayable && isActive + // all conditions met we show the popover - if (isDisplayable && isActive) { + if (isVisible) { const content = ( {isPartnerOfferEnabled @@ -40,10 +50,11 @@ export const ProgressiveOnboardingSaveArtwork: React.FC = ({ children }) => { return ( Like what you see? diff --git a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingSignalInterest.tsx b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingSignalInterest.tsx index b15d7a5aec6..d7e38753fe4 100644 --- a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingSignalInterest.tsx +++ b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingSignalInterest.tsx @@ -1,5 +1,7 @@ +import { ContextModule, OwnerType } from "@artsy/cohesion" import { Flex, Popover, Text } from "@artsy/palette-mobile" import { useIsFocused } from "@react-navigation/native" +import { useProgressiveOnboardingTracking } from "app/Components/ProgressiveOnboarding/useProgressiveOnboardingTracking" import { useSetActivePopover } from "app/Components/ProgressiveOnboarding/useSetActivePopover" import { GlobalStore } from "app/store/GlobalStore" import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag" @@ -12,6 +14,11 @@ export const ProgressiveOnboardingSignalInterest: React.FC = ({ children }) => { const { dismiss, setIsReady } = GlobalStore.actions.progressiveOnboarding const isFocused = useIsFocused() const isPartnerOfferEnabled = useFeatureFlag("AREnablePartnerOffer") + const { trackEvent } = useProgressiveOnboardingTracking({ + name: "signal-interest", + contextScreenOwnerType: OwnerType.saves, + contextModule: ContextModule.saves, + }) const isDisplayable = isPartnerOfferEnabled && isReady && !isDismissed("signal-interest").status && isFocused @@ -23,12 +30,15 @@ export const ProgressiveOnboardingSignalInterest: React.FC = ({ children }) => { dismiss("signal-interest") } + const isVisible = !!isDisplayable && isActive + return ( diff --git a/src/app/Components/ProgressiveOnboarding/useProgressiveOnboardingTracking.tsx b/src/app/Components/ProgressiveOnboarding/useProgressiveOnboardingTracking.tsx new file mode 100644 index 00000000000..05c8b8d38b7 --- /dev/null +++ b/src/app/Components/ProgressiveOnboarding/useProgressiveOnboardingTracking.tsx @@ -0,0 +1,36 @@ +import { + ActionType, + ContextModule, + OwnerType, + ProgressiveOnboardingTooltipViewed, +} from "@artsy/cohesion" +import { ProgressiveOnboardingKey } from "app/store/ProgressiveOnboardingModel" +import { useCallback } from "react" +import { useTracking } from "react-tracking" + +interface UseProgressiveOnboardingTracking { + name: ProgressiveOnboardingKey + contextScreenOwnerType?: OwnerType + contextModule: ContextModule +} + +export const useProgressiveOnboardingTracking = ({ + name, + contextScreenOwnerType, + contextModule, +}: UseProgressiveOnboardingTracking) => { + const tracking = useTracking() + + const trackEvent = useCallback(() => { + const payload: ProgressiveOnboardingTooltipViewed = { + action: ActionType.tooltipViewed, + context_owner_type: contextScreenOwnerType, + context_module: contextModule, + type: name, + } + + tracking.trackEvent(payload) + }, [contextScreenOwnerType, name]) + + return { trackEvent } +} diff --git a/yarn.lock b/yarn.lock index 86a7f507279..11441913078 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10,10 +10,10 @@ "@jridgewell/gen-mapping" "^0.3.0" "@jridgewell/trace-mapping" "^0.3.9" -"@artsy/cohesion@4.241.0": - version "4.241.0" - resolved "https://registry.yarnpkg.com/@artsy/cohesion/-/cohesion-4.241.0.tgz#112041c0b428ae590a4a6d5cfbb6f9f0d448c124" - integrity sha512-xdMev5offCbyP9jEzpX4Fk4f/uR+fb8bOrsfgYyDoxbkmts+/dMhDnUWMW1I2D/ZxC8OTAjnwAYpTeVbXyfvtw== +"@artsy/cohesion@4.243.0": + version "4.243.0" + resolved "https://registry.yarnpkg.com/@artsy/cohesion/-/cohesion-4.243.0.tgz#ea8189ec812c136602de47b5f81ca1bce2bad217" + integrity sha512-w6xFm8EolgpubQEqJX8wB0r35aMhfFYLNwXfG6n+wknaBz7kZg+klWntkGFS/BBtOW9LBOVSDJA/UkeUVzTJXQ== dependencies: core-js "3"