fix: refactor, adjust the trackTappedNavigationTab event

Author: dariakoko

src/app/Scenes/Favorites/Components/FavoritesLearnMore.tsx

@@ -16,7 +16,6 @@ import {
 import { BottomSheetScrollView } from "@gorhom/bottom-sheet"
 import { AutomountedBottomSheetModal } from "app/Components/BottomSheet/AutomountedBottomSheetModal"
 import { CallapseWithTitle } from "app/Scenes/Favorites/Components/CollapseWithTitle"
-import { FavoritesContextStore } from "app/Scenes/Favorites/FavoritesContextStore"
 import { useFavoritesTracking } from "app/Scenes/Favorites/useFavoritesTracking"
 import React, { useState } from "react"
 import { Dimensions } from "react-native"
@@ -100,7 +99,6 @@ const SECTIONS = [
 ]
 
 export const FavoritesLearnMore = () => {
-  const { activeTab } = FavoritesContextStore.useStoreState((state) => state)
   const [showBottomSheet, setShowBottomSheet] = useState(false)
   const { bottom } = useSafeAreaInsets()
   const { trackTappedInfoBubble } = useFavoritesTracking()
@@ -113,7 +111,7 @@ export const FavoritesLearnMore = () => {
       <Touchable
         onPress={() => {
           setShowBottomSheet(true)
-          trackTappedInfoBubble(activeTab)
+          trackTappedInfoBubble()
         }}
       >
         <QuestionCircleIcon height={ICON_SIZE} width={ICON_SIZE} hitSlop={DEFAULT_HIT_SLOP} />

src/app/Scenes/Favorites/Favorites.tsx

@@ -68,6 +68,8 @@ const FavoritesHeaderTapBar: React.FC<MaterialTopTabBarProps> = ({ state, naviga
             <Pill
               selected={isActive}
               onPress={() => {
+                // Make sure to track the tap before changing the active tab
+                trackTappedNavigationTab(key)
                 setActiveTab(key)
 
                 // We are manually emitting the tabPress event here because
@@ -80,7 +82,6 @@ const FavoritesHeaderTapBar: React.FC<MaterialTopTabBarProps> = ({ state, naviga
                 })
 
                 navigation.navigate(key)
-                trackTappedNavigationTab(key)
               }}
               Icon={() => (
                 <Flex mr={0.5} justifyContent="center" bottom="1px">

src/app/Scenes/Favorites/useFavoritesTracking.ts

@@ -15,42 +15,44 @@ import {
   TappedOfferSettings,
 } from "@artsy/cohesion/dist/Schema/Events/Favorites"
 import { useIsFocused } from "@react-navigation/native"
-import { FavoritesTab } from "app/Scenes/Favorites/FavoritesContextStore"
+import { FavoritesContextStore, FavoritesTab } from "app/Scenes/Favorites/FavoritesContextStore"
 import { screen } from "app/utils/track/helpers"
 import { useEffect } from "react"
 import { useTracking } from "react-tracking"
 
 export const useFavoritesTracking = () => {
+  const activeTab = FavoritesContextStore.useStoreState((state) => state.activeTab)
+
   const { trackEvent } = useTracking()
 
   const trackTappedNavigationTab = (key: FavoritesTab) => {
     const payload = {
       action: ActionType.tappedNavigationTab,
-      context_module: key,
+      context_module: activeTab,
       subject: key,
     }
 
     trackEvent(payload)
   }
 
-  const trackTappedInfoBubble = (activeTab: FavoritesTab) => {
-    let contextScreen: ContextModule
+  const trackTappedInfoBubble = () => {
+    let contextModule: ContextModule
     switch (activeTab) {
       case "saves":
-        contextScreen = ContextModule.favoritesSaves
+        contextModule = ContextModule.favoritesSaves
         break
       case "follows":
-        contextScreen = ContextModule.favoritesFollows
+        contextModule = ContextModule.favoritesFollows
         break
       case "alerts":
-        contextScreen = ContextModule.favoritesAlerts
+        contextModule = ContextModule.favoritesAlerts
         break
     }
 
     const payload: TappedInfoBubble = {
       action: ActionType.tappedInfoBubble,
       context_screen_owner_type: OwnerType.favorites,
-      context_module: contextScreen,
+      context_module: contextModule,
       subject: "favoritesHeader",
     }