feat(ONYX-1604): track progressive onboarding tooltips

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",

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 (
     <Popover
-      visible={!!isDisplayable && isActive}
+      visible={isVisible}
       onDismiss={handleDismiss}
       onPressOutside={handleDismiss}
       onCloseComplete={clearActivePopover}
+      onOpenComplete={trackEvent}
       placement="bottom"
       title={
         <Text variant="xs" color="white100">

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,5 +1,7 @@
+import { ContextModule, OwnerType } from "@artsy/cohesion"
 import { Flex, Popover, Text } from "@artsy/palette-mobile"
 import { useDismissAlertReminder } from "app/Components/ProgressiveOnboarding/useDismissAlertReminder"
+import { useProgressiveOnboardingTracking } from "app/Components/ProgressiveOnboarding/useProgressiveOnboardingTracking"
 import { useSetActivePopover } from "app/Components/ProgressiveOnboarding/useSetActivePopover"
 import { GlobalStore } from "app/store/GlobalStore"
 
@@ -9,6 +11,16 @@ interface ProgressiveOnboardingAlertReminderProps {
 export const ProgressiveOnboardingAlertReminder: React.FC<
   ProgressiveOnboardingAlertReminderProps
 > = ({ 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 (
     <Popover
-      visible={!!shouldDisplayReminder && isActive}
+      visible={isVisible}
       onDismiss={handleDismiss}
       onPressOutside={handleDismiss}
       onCloseComplete={() => setActivePopover(undefined)}
+      onOpenComplete={trackEvent}
       placement="bottom"
       title={
         <Text variant="xs" color="white100" fontWeight="bold">

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 (
     <Popover
-      visible={
-        !!enableLongPressContextMenu &&
-        !!enableLongPressContextMenuOnboarding &&
-        !!isDisplayable &&
-        isActive
-      }
+      visible={isVisible}
       onDismiss={handleDismiss}
       onPressOutside={handleDismiss}
       onCloseComplete={clearActivePopover}
+      onOpenComplete={trackEvent}
       placement="top"
       title={
         <Text variant="xs" color="white100" fontWeight={500}>

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 (
     <Popover
-      visible={!!debouncedIsDisplayable.debouncedValue && isActive}
+      visible={isVisible}
       onDismiss={handleDismiss}
       onPressOutside={handleDismiss}
       onCloseComplete={clearActivePopover}
+      onOpenComplete={trackEvent}
       placement="top"
       title={
         <Text variant="xs" color="white100">

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={

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 { 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,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 = (
       <Text color="white100">
         {isPartnerOfferEnabled
@@ -40,10 +50,11 @@ export const ProgressiveOnboardingSaveArtwork: React.FC = ({ children }) => {
 
     return (
       <Popover
-        visible={isActive}
+        visible={isVisible}
         onDismiss={handleDismiss}
         onPressOutside={handleDismiss}
         onCloseComplete={clearActivePopover}
+        onOpenComplete={trackEvent}
         title={
           <Text weight="medium" color="white100">
             Like what you see?

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 (
     <Popover
-      visible={!!isDisplayable && isActive}
+      visible={isVisible}
       onDismiss={handleDismiss}
       onPressOutside={handleDismiss}
       onCloseComplete={clearActivePopover}
+      onOpenComplete={trackEvent}
       placement="top"
       title={
         <Text variant="xs" color="white100">

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 }
+}

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"