From 0cb8a6d972197531c2cabcbf9f6697df6e98cfb0 Mon Sep 17 00:00:00 2001 From: dariakoko Date: Wed, 12 Mar 2025 11:55:30 +0100 Subject: [PATCH 1/4] feat: track pregressive onboarding tooltips --- .../ProgressiveOnboardingAlertFilters.tsx | 18 +++++++- .../ProgressiveOnboardingAlertFinish.tsx | 14 +++++++ .../ProgressiveOnboardingAlertReminder.tsx | 37 +++++++++++++++- ...gressiveOnboardingLongPressContextMenu.tsx | 42 ++++++++++++++++--- .../ProgressiveOnboardingOfferSettings.tsx | 18 +++++++- .../ProgressiveOnboardingSaveAlert.tsx | 16 +++++++ .../ProgressiveOnboardingSaveArtwork.tsx | 24 +++++++++-- .../ProgressiveOnboardingSignalInterest.tsx | 18 +++++++- .../useProgressiveOnboardingTracking.tsx | 41 ++++++++++++++++++ 9 files changed, 214 insertions(+), 14 deletions(-) create mode 100644 src/app/Components/ProgressiveOnboarding/useProgressiveOnboardingTracking.tsx diff --git a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingAlertFilters.tsx b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingAlertFilters.tsx index ef2a659d996..8405baf2215 100644 --- a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingAlertFilters.tsx +++ b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingAlertFilters.tsx @@ -1,8 +1,11 @@ +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" +import { useEffect } from "react" export const ProgressiveOnboardingAlertFilters: React.FC = ({ children }) => { const { @@ -12,6 +15,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: "artistArtworksFilterHeader" as ContextModule, + }) const isDisplayable = isReady && @@ -26,9 +34,17 @@ export const ProgressiveOnboardingAlertFilters: React.FC = ({ children }) => { dismiss("alert-select-filters") } + const isVisible = !!isDisplayable && isActive + + useEffect(() => { + if (isVisible) { + trackEvent() + } + }, [isVisible]) + return ( { 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) + + let nameToTrack: ProgressiveOnboardingTrackedName = "unknown" + if ( + !isDismissed("alert-create-reminder-1").status && + !isDismissed("alert-create-reminder-2").status + ) { + nameToTrack = "alert-create-reminder-1" + } else if ( + isDismissed("alert-create-reminder-1").status && + !isDismissed("alert-create-reminder-2").status + ) { + nameToTrack = "alert-create-reminder-2" + } + + const { trackEvent } = useProgressiveOnboardingTracking({ + name: nameToTrack, + contextScreenOwnerType: OwnerType.artist, + contextModule: "artistArtworksFilterHeader" as ContextModule, + }) + const { setActivePopover } = GlobalStore.actions.progressiveOnboarding const { isDisplayable, dismissNextCreateAlertReminder } = useDismissAlertReminder() @@ -17,13 +44,21 @@ export const ProgressiveOnboardingAlertReminder: React.FC< const { isActive } = useSetActivePopover(shouldDisplayReminder) + const isVisible = shouldDisplayReminder && isActive + + useEffect(() => { + if (isVisible) { + trackEvent() + } + }, [isVisible]) + const handleDismiss = () => { dismissNextCreateAlertReminder() } return ( setActivePopover(undefined)} diff --git a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingLongPressContextMenu.tsx b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingLongPressContextMenu.tsx index fd3d2ba59e0..068837b5585 100644 --- a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingLongPressContextMenu.tsx +++ b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingLongPressContextMenu.tsx @@ -1,8 +1,11 @@ +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" +import { useEffect } from "react" import { Platform } from "react-native" // We don't want to show the onboarding popover on the first launch @@ -33,19 +36,46 @@ 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 + + useEffect(() => { + if (isVisible) { + trackEvent() + /** + * dismissing the popover without waiting for interaction + * spesific for the home view screen because on the home view screen we set + * isReady to true (indicates that the alert is ready to be shown) + * which makes the popover show up every time the user navigates to the home screen if the + * popover has not beeb manually dismissed + * */ + dismiss("long-press-artwork-context-menu") + } + }, [isVisible]) + return ( { const { @@ -13,6 +16,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,9 +41,17 @@ export const ProgressiveOnboardingOfferSettings: React.FC = ({ children }) => { dismiss("offer-settings") } + const isVisible = !!debouncedIsDisplayable.debouncedValue && isActive + + useEffect(() => { + if (isVisible) { + trackEvent() + } + }, [isVisible]) + return ( { const { @@ -13,6 +16,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: "artistArtworksFilterHeader" as ContextModule, + }) const isDisplayable = isReady && @@ -32,6 +40,14 @@ export const ProgressiveOnboardingSaveAlert: React.FC = ({ children }) => { dismiss(PROGRESSIVE_ONBOARDING_ALERT_CHAIN) } + const isVisible = !!isDisplayable && isActive + + useEffect(() => { + if (isVisible) { + trackEvent() + } + }, [isVisible]) + return ( { +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,16 @@ export const ProgressiveOnboardingSaveArtwork: React.FC = ({ children }) => { dismiss("save-artwork") } + const isVisible = !!isDisplayable && isActive + + useEffect(() => { + if (isVisible) { + trackEvent() + } + }, [isVisible]) + // all conditions met we show the popover - if (isDisplayable && isActive) { + if (isVisible) { const content = ( {isPartnerOfferEnabled @@ -40,7 +56,7 @@ export const ProgressiveOnboardingSaveArtwork: React.FC = ({ children }) => { return ( { const { @@ -12,6 +15,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,9 +31,17 @@ export const ProgressiveOnboardingSignalInterest: React.FC = ({ children }) => { dismiss("signal-interest") } + const isVisible = !!isDisplayable && isActive + + useEffect(() => { + if (isVisible) { + trackEvent() + } + }, [isVisible]) + return ( { + const tracking = useTracking() + + const trackEvent = useCallback(() => { + const payload: TooltipViewedApp = { + action: ActionType.tooltipViewed, + context_owner_type: contextScreenOwnerType, + context_module: contextModule, + type: name, + } + + tracking.trackEvent(payload) + }, [contextScreenOwnerType, name]) + + return { trackEvent } +} From 27c221c4e142e4a112435d58ee266961d5d0c1c1 Mon Sep 17 00:00:00 2001 From: dariakoko Date: Thu, 13 Mar 2025 17:01:10 +0100 Subject: [PATCH 2/4] chore: address review comments --- package.json | 2 +- .../ProgressiveOnboardingAlertFilters.tsx | 8 +------- .../ProgressiveOnboardingAlertReminder.tsx | 8 +------- ...ProgressiveOnboardingLongPressContextMenu.tsx | 16 +--------------- .../ProgressiveOnboardingOfferSettings.tsx | 8 +------- .../ProgressiveOnboardingSaveAlert.tsx | 10 +--------- .../ProgressiveOnboardingSaveArtwork.tsx | 9 ++------- .../ProgressiveOnboardingSignalInterest.tsx | 8 +------- yarn.lock | 8 ++++---- 9 files changed, 13 insertions(+), 64 deletions(-) diff --git a/package.json b/package.json index aeea1777786..2982aeba321 100644 --- a/package.json +++ b/package.json @@ -107,7 +107,7 @@ }, "dependencies": { "@artsy/cohesion": "4.238.0", - "@artsy/palette-mobile": "14.0.29", + "@artsy/palette-mobile": "14.0.30", "@artsy/to-title-case": "1.1.0", "@braze/react-native-sdk": "13.1.1", "@expo/react-native-action-sheet": "4.0.1", diff --git a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingAlertFilters.tsx b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingAlertFilters.tsx index 8405baf2215..a29c4b672f5 100644 --- a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingAlertFilters.tsx +++ b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingAlertFilters.tsx @@ -5,7 +5,6 @@ import { useProgressiveOnboardingTracking } from "app/Components/ProgressiveOnbo import { useSetActivePopover } from "app/Components/ProgressiveOnboarding/useSetActivePopover" import { GlobalStore } from "app/store/GlobalStore" import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag" -import { useEffect } from "react" export const ProgressiveOnboardingAlertFilters: React.FC = ({ children }) => { const { @@ -36,18 +35,13 @@ export const ProgressiveOnboardingAlertFilters: React.FC = ({ children }) => { const isVisible = !!isDisplayable && isActive - useEffect(() => { - if (isVisible) { - trackEvent() - } - }, [isVisible]) - return ( diff --git a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingAlertReminder.tsx b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingAlertReminder.tsx index d3b4794882b..87d5f663cf4 100644 --- a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingAlertReminder.tsx +++ b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingAlertReminder.tsx @@ -7,7 +7,6 @@ import { } from "app/Components/ProgressiveOnboarding/useProgressiveOnboardingTracking" import { useSetActivePopover } from "app/Components/ProgressiveOnboarding/useSetActivePopover" import { GlobalStore } from "app/store/GlobalStore" -import { useEffect } from "react" interface ProgressiveOnboardingAlertReminderProps { visible: boolean @@ -46,12 +45,6 @@ export const ProgressiveOnboardingAlertReminder: React.FC< const isVisible = shouldDisplayReminder && isActive - useEffect(() => { - if (isVisible) { - trackEvent() - } - }, [isVisible]) - const handleDismiss = () => { dismissNextCreateAlertReminder() } @@ -62,6 +55,7 @@ export const ProgressiveOnboardingAlertReminder: React.FC< onDismiss={handleDismiss} onPressOutside={handleDismiss} onCloseComplete={() => setActivePopover(undefined)} + onOpenComplete={trackEvent} placement="bottom" title={ diff --git a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingLongPressContextMenu.tsx b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingLongPressContextMenu.tsx index 068837b5585..d78740809bf 100644 --- a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingLongPressContextMenu.tsx +++ b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingLongPressContextMenu.tsx @@ -5,7 +5,6 @@ import { useProgressiveOnboardingTracking } from "app/Components/ProgressiveOnbo import { useSetActivePopover } from "app/Components/ProgressiveOnboarding/useSetActivePopover" import { getCurrentEmissionState, GlobalStore } from "app/store/GlobalStore" import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag" -import { useEffect } from "react" import { Platform } from "react-native" // We don't want to show the onboarding popover on the first launch @@ -59,26 +58,13 @@ export const ProgressiveOnboardingLongPressContextMenu: React.FC = ({ children } !!isDisplayable && isActive - useEffect(() => { - if (isVisible) { - trackEvent() - /** - * dismissing the popover without waiting for interaction - * spesific for the home view screen because on the home view screen we set - * isReady to true (indicates that the alert is ready to be shown) - * which makes the popover show up every time the user navigates to the home screen if the - * popover has not beeb manually dismissed - * */ - dismiss("long-press-artwork-context-menu") - } - }, [isVisible]) - return ( diff --git a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingOfferSettings.tsx b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingOfferSettings.tsx index 315ea09737e..7af4a72cff2 100644 --- a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingOfferSettings.tsx +++ b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingOfferSettings.tsx @@ -6,7 +6,6 @@ import { useSetActivePopover } from "app/Components/ProgressiveOnboarding/useSet import { GlobalStore } from "app/store/GlobalStore" import { useDebouncedValue } from "app/utils/hooks/useDebouncedValue" import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag" -import { useEffect } from "react" export const ProgressiveOnboardingOfferSettings: React.FC = ({ children }) => { const { @@ -43,18 +42,13 @@ export const ProgressiveOnboardingOfferSettings: React.FC = ({ children }) => { const isVisible = !!debouncedIsDisplayable.debouncedValue && isActive - useEffect(() => { - if (isVisible) { - trackEvent() - } - }, [isVisible]) - return ( diff --git a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingSaveAlert.tsx b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingSaveAlert.tsx index 23f619e4f62..70ba071d5ff 100644 --- a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingSaveAlert.tsx +++ b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingSaveAlert.tsx @@ -6,7 +6,6 @@ import { useSetActivePopover } from "app/Components/ProgressiveOnboarding/useSet import { GlobalStore } from "app/store/GlobalStore" import { PROGRESSIVE_ONBOARDING_ALERT_CHAIN } from "app/store/ProgressiveOnboardingModel" import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag" -import { useEffect } from "react" export const ProgressiveOnboardingSaveAlert: React.FC = ({ children }) => { const { @@ -40,20 +39,13 @@ export const ProgressiveOnboardingSaveAlert: React.FC = ({ children }) => { dismiss(PROGRESSIVE_ONBOARDING_ALERT_CHAIN) } - const isVisible = !!isDisplayable && isActive - - useEffect(() => { - if (isVisible) { - trackEvent() - } - }, [isVisible]) - return ( = ({ @@ -38,12 +38,6 @@ export const ProgressiveOnboardingSaveArtwork: React.FC<{ contextScreenOwnerType const isVisible = !!isDisplayable && isActive - useEffect(() => { - if (isVisible) { - trackEvent() - } - }, [isVisible]) - // all conditions met we show the popover if (isVisible) { const content = ( @@ -60,6 +54,7 @@ export const ProgressiveOnboardingSaveArtwork: React.FC<{ contextScreenOwnerType onDismiss={handleDismiss} onPressOutside={handleDismiss} onCloseComplete={clearActivePopover} + onOpenComplete={trackEvent} title={ Like what you see? diff --git a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingSignalInterest.tsx b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingSignalInterest.tsx index 050e481ff3e..d7e38753fe4 100644 --- a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingSignalInterest.tsx +++ b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingSignalInterest.tsx @@ -5,7 +5,6 @@ import { useProgressiveOnboardingTracking } from "app/Components/ProgressiveOnbo import { useSetActivePopover } from "app/Components/ProgressiveOnboarding/useSetActivePopover" import { GlobalStore } from "app/store/GlobalStore" import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag" -import { useEffect } from "react" export const ProgressiveOnboardingSignalInterest: React.FC = ({ children }) => { const { @@ -33,18 +32,13 @@ export const ProgressiveOnboardingSignalInterest: React.FC = ({ children }) => { const isVisible = !!isDisplayable && isActive - useEffect(() => { - if (isVisible) { - trackEvent() - } - }, [isVisible]) - return ( diff --git a/yarn.lock b/yarn.lock index 137f313b642..78401152ca9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -17,10 +17,10 @@ dependencies: core-js "3" -"@artsy/palette-mobile@14.0.29": - version "14.0.29" - resolved "https://registry.yarnpkg.com/@artsy/palette-mobile/-/palette-mobile-14.0.29.tgz#9daa8fb3430bba35f1275dca4fc430a57cc12a2c" - integrity sha512-FBjoeT6FNgw4JAGFhI0sdtcLpQukWjSiCtnL60dpIGZaphQI+YSvZ7zrLLbSyhosIXfkB3APc6LxG6fKfoMSiw== +"@artsy/palette-mobile@14.0.30": + version "14.0.30" + resolved "https://registry.yarnpkg.com/@artsy/palette-mobile/-/palette-mobile-14.0.30.tgz#031f119fea2bc5d681d6863533e51e2132a79241" + integrity sha512-BEYGrS0J2J8NGS7u0TOB5zqU2hUUxx4MeCYI0o0G9n+RWR5XleNTFizS2baiC7f/h6QPPkueC32FXVnXR9nFMw== dependencies: "@artsy/palette-tokens" "^6.3.0" "@shopify/flash-list" "1.7.1" From 31291722ca39f6a5c65e0b2f152c4fc53b660ff6 Mon Sep 17 00:00:00 2001 From: dariakoko Date: Thu, 13 Mar 2025 17:13:30 +0100 Subject: [PATCH 3/4] chore: address review comments --- .../ProgressiveOnboardingAlertReminder.tsx | 22 ++++--------------- .../useProgressiveOnboardingTracking.tsx | 4 +--- 2 files changed, 5 insertions(+), 21 deletions(-) diff --git a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingAlertReminder.tsx b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingAlertReminder.tsx index 87d5f663cf4..ae2f6763d8a 100644 --- a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingAlertReminder.tsx +++ b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingAlertReminder.tsx @@ -1,10 +1,7 @@ import { ContextModule, OwnerType } from "@artsy/cohesion" import { Flex, Popover, Text } from "@artsy/palette-mobile" import { useDismissAlertReminder } from "app/Components/ProgressiveOnboarding/useDismissAlertReminder" -import { - ProgressiveOnboardingTrackedName, - useProgressiveOnboardingTracking, -} from "app/Components/ProgressiveOnboarding/useProgressiveOnboardingTracking" +import { useProgressiveOnboardingTracking } from "app/Components/ProgressiveOnboarding/useProgressiveOnboardingTracking" import { useSetActivePopover } from "app/Components/ProgressiveOnboarding/useSetActivePopover" import { GlobalStore } from "app/store/GlobalStore" @@ -16,21 +13,10 @@ export const ProgressiveOnboardingAlertReminder: React.FC< > = ({ children, visible }) => { const { isDismissed } = GlobalStore.useAppState((state) => state.progressiveOnboarding) - let nameToTrack: ProgressiveOnboardingTrackedName = "unknown" - if ( - !isDismissed("alert-create-reminder-1").status && - !isDismissed("alert-create-reminder-2").status - ) { - nameToTrack = "alert-create-reminder-1" - } else if ( - isDismissed("alert-create-reminder-1").status && - !isDismissed("alert-create-reminder-2").status - ) { - nameToTrack = "alert-create-reminder-2" - } - const { trackEvent } = useProgressiveOnboardingTracking({ - name: nameToTrack, + name: !isDismissed("alert-create-reminder-1").status + ? "alert-create-reminder-1" + : "alert-create-reminder-2", contextScreenOwnerType: OwnerType.artist, contextModule: "artistArtworksFilterHeader" as ContextModule, }) diff --git a/src/app/Components/ProgressiveOnboarding/useProgressiveOnboardingTracking.tsx b/src/app/Components/ProgressiveOnboarding/useProgressiveOnboardingTracking.tsx index 5fb829fc4c0..8b90bb4055c 100644 --- a/src/app/Components/ProgressiveOnboarding/useProgressiveOnboardingTracking.tsx +++ b/src/app/Components/ProgressiveOnboarding/useProgressiveOnboardingTracking.tsx @@ -3,10 +3,8 @@ import { ProgressiveOnboardingKey } from "app/store/ProgressiveOnboardingModel" import { useCallback } from "react" import { useTracking } from "react-tracking" -export type ProgressiveOnboardingTrackedName = ProgressiveOnboardingKey | "unknown" - interface UseProgressiveOnboardingTracking { - name: ProgressiveOnboardingTrackedName + name: ProgressiveOnboardingKey contextScreenOwnerType?: OwnerType contextModule: ContextModule } From d5f6c6ab8ccdb3b0e85cdb0fa0424befc0071880 Mon Sep 17 00:00:00 2001 From: dariakoko Date: Fri, 14 Mar 2025 14:48:06 +0100 Subject: [PATCH 4/4] chore: update cohesion version --- package.json | 2 +- .../ProgressiveOnboardingAlertFilters.tsx | 2 +- .../ProgressiveOnboardingAlertReminder.tsx | 2 +- .../ProgressiveOnboardingSaveAlert.tsx | 2 +- .../useProgressiveOnboardingTracking.tsx | 17 +++++++---------- yarn.lock | 8 ++++---- 6 files changed, 15 insertions(+), 18 deletions(-) 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 a29c4b672f5..914034926b2 100644 --- a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingAlertFilters.tsx +++ b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingAlertFilters.tsx @@ -17,7 +17,7 @@ export const ProgressiveOnboardingAlertFilters: React.FC = ({ children }) => { const { trackEvent } = useProgressiveOnboardingTracking({ name: "alert-select-filters", contextScreenOwnerType: OwnerType.artist, - contextModule: "artistArtworksFilterHeader" as ContextModule, + contextModule: ContextModule.artistArtworksFilterHeader, }) const isDisplayable = diff --git a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingAlertReminder.tsx b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingAlertReminder.tsx index ae2f6763d8a..3f5f0ea9adc 100644 --- a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingAlertReminder.tsx +++ b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingAlertReminder.tsx @@ -18,7 +18,7 @@ export const ProgressiveOnboardingAlertReminder: React.FC< ? "alert-create-reminder-1" : "alert-create-reminder-2", contextScreenOwnerType: OwnerType.artist, - contextModule: "artistArtworksFilterHeader" as ContextModule, + contextModule: ContextModule.artistArtworksFilterHeader, }) const { setActivePopover } = GlobalStore.actions.progressiveOnboarding diff --git a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingSaveAlert.tsx b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingSaveAlert.tsx index 70ba071d5ff..55e37ebd707 100644 --- a/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingSaveAlert.tsx +++ b/src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingSaveAlert.tsx @@ -18,7 +18,7 @@ export const ProgressiveOnboardingSaveAlert: React.FC = ({ children }) => { const { trackEvent } = useProgressiveOnboardingTracking({ name: "alert-create", contextScreenOwnerType: OwnerType.artist, - contextModule: "artistArtworksFilterHeader" as ContextModule, + contextModule: ContextModule.artistArtworksFilterHeader, }) const isDisplayable = diff --git a/src/app/Components/ProgressiveOnboarding/useProgressiveOnboardingTracking.tsx b/src/app/Components/ProgressiveOnboarding/useProgressiveOnboardingTracking.tsx index 8b90bb4055c..05c8b8d38b7 100644 --- a/src/app/Components/ProgressiveOnboarding/useProgressiveOnboardingTracking.tsx +++ b/src/app/Components/ProgressiveOnboarding/useProgressiveOnboardingTracking.tsx @@ -1,4 +1,9 @@ -import { ActionType, ContextModule, OwnerType } from "@artsy/cohesion" +import { + ActionType, + ContextModule, + OwnerType, + ProgressiveOnboardingTooltipViewed, +} from "@artsy/cohesion" import { ProgressiveOnboardingKey } from "app/store/ProgressiveOnboardingModel" import { useCallback } from "react" import { useTracking } from "react-tracking" @@ -9,14 +14,6 @@ interface UseProgressiveOnboardingTracking { contextModule: ContextModule } -// TODO: move to cohesion when approved by data -interface TooltipViewedApp { - action: ActionType.tooltipViewed - context_owner_type?: OwnerType - context_module: string - type: string -} - export const useProgressiveOnboardingTracking = ({ name, contextScreenOwnerType, @@ -25,7 +22,7 @@ export const useProgressiveOnboardingTracking = ({ const tracking = useTracking() const trackEvent = useCallback(() => { - const payload: TooltipViewedApp = { + const payload: ProgressiveOnboardingTooltipViewed = { action: ActionType.tooltipViewed, context_owner_type: contextScreenOwnerType, context_module: contextModule, 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"