feat(ONYX-1604): track progressive onboarding tooltips

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 (
     <Popover
-      visible={!!isDisplayable && isActive}
+      visible={isVisible}
       onDismiss={handleDismiss}
       onPressOutside={handleDismiss}
       onCloseComplete={clearActivePopover}

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 (
     <ToolTip
       enabled={!!isDisplayable}

src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingAlertReminder.tsx

@@ -1,14 +1,41 @@
+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 { useSetActivePopover } from "app/Components/ProgressiveOnboarding/useSetActivePopover"
 import { GlobalStore } from "app/store/GlobalStore"
+import { useEffect } from "react"
 
 interface ProgressiveOnboardingAlertReminderProps {
   visible: boolean
 }
 export const ProgressiveOnboardingAlertReminder: React.FC<
   ProgressiveOnboardingAlertReminderProps
 > = ({ 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 (
     <Popover
-      visible={!!shouldDisplayReminder && isActive}
+      visible={isVisible}
       onDismiss={handleDismiss}
       onPressOutside={handleDismiss}
       onCloseComplete={() => setActivePopover(undefined)}

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 (
     <Popover
-      visible={
-        !!enableLongPressContextMenu &&
-        !!enableLongPressContextMenuOnboarding &&
-        !!isDisplayable &&
-        isActive
-      }
+      visible={isVisible}
       onDismiss={handleDismiss}
       onPressOutside={handleDismiss}
       onCloseComplete={clearActivePopover}

src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingOfferSettings.tsx

@@ -1,9 +1,12 @@
+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"
 import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
+import { useEffect } from "react"
 
 export const ProgressiveOnboardingOfferSettings: React.FC = ({ children }) => {
   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 (
     <Popover
-      visible={!!debouncedIsDisplayable.debouncedValue && isActive}
+      visible={isVisible}
       onDismiss={handleDismiss}
       onPressOutside={handleDismiss}
       onCloseComplete={clearActivePopover}

src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingSaveAlert.tsx

@@ -1,9 +1,12 @@
+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"
 import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
+import { useEffect } from "react"
 
 export const ProgressiveOnboardingSaveAlert: React.FC = ({ children }) => {
   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 (
     <Popover
       visible={!!isDisplayable && isActive}

src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingSaveArtwork.tsx

@@ -1,20 +1,28 @@
+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"
 import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
-import { useState } from "react"
+import { useEffect, 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 {
     isDismissed: _isDismissed,
     sessionState: { isReady },
   } = GlobalStore.useAppState((state) => state.progressiveOnboarding)
   const data = useLazyLoadQuery<ProgressiveOnboardingSaveArtwork_Query>(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 = (
       <Text color="white100">
         {isPartnerOfferEnabled
@@ -40,7 +56,7 @@ export const ProgressiveOnboardingSaveArtwork: React.FC = ({ children }) => {
 
     return (
       <Popover
-        visible={isActive}
+        visible={isVisible}
         onDismiss={handleDismiss}
         onPressOutside={handleDismiss}
         onCloseComplete={clearActivePopover}

src/app/Components/ProgressiveOnboarding/ProgressiveOnboardingSignalInterest.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 ProgressiveOnboardingSignalInterest: React.FC = ({ children }) => {
   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 (
     <Popover
-      visible={!!isDisplayable && isActive}
+      visible={isVisible}
       onDismiss={handleDismiss}
       onPressOutside={handleDismiss}
       onCloseComplete={clearActivePopover}