diff --git a/src/app/Scenes/ArtworkList/ArtworkList.tsx b/src/app/Scenes/ArtworkList/ArtworkList.tsx index 18892967e4e..a50e477a3a7 100644 --- a/src/app/Scenes/ArtworkList/ArtworkList.tsx +++ b/src/app/Scenes/ArtworkList/ArtworkList.tsx @@ -185,7 +185,7 @@ export const ArtworkListScreen: FC = (props) => { diff --git a/src/app/Scenes/Favorites/Components/FavoritesLearnMore.tsx b/src/app/Scenes/Favorites/Components/FavoritesLearnMore.tsx index a0b0d7e7c75..503c9926a2e 100644 --- a/src/app/Scenes/Favorites/Components/FavoritesLearnMore.tsx +++ b/src/app/Scenes/Favorites/Components/FavoritesLearnMore.tsx @@ -100,7 +100,7 @@ const SECTIONS = [ ] export const FavoritesLearnMore = () => { - const { activeTab } = FavoritesContextStore.useStoreState((state) => state) + const activeTab = FavoritesContextStore.useStoreState((state) => state.activeTab) const [showBottomSheet, setShowBottomSheet] = useState(false) const { bottom } = useSafeAreaInsets() const { trackTappedInfoBubble } = useFavoritesTracking() diff --git a/src/app/Scenes/Favorites/Favorites.tsx b/src/app/Scenes/Favorites/Favorites.tsx index b646f02ad42..64b0c28c3ce 100644 --- a/src/app/Scenes/Favorites/Favorites.tsx +++ b/src/app/Scenes/Favorites/Favorites.tsx @@ -1,3 +1,4 @@ +import { ContextModule } from "@artsy/cohesion" import { BellIcon, Flex, @@ -24,29 +25,34 @@ import { useFavoritesTracking } from "app/Scenes/Favorites/useFavoritesTracking" import { prefetchQuery } from "app/utils/queryPrefetching" import { useEffect } from "react" -const Pills: { +export const Pills: { Icon: React.FC<{ fill: string }> title: string key: FavoritesTab + contextModule: ContextModule }[] = [ { Icon: HeartIcon, title: "Saves", key: "saves", + contextModule: ContextModule.favoritesSaves, }, { Icon: MultiplePersonsIcon, title: "Follows", key: "follows", + contextModule: ContextModule.favoritesFollows, }, { Icon: BellIcon, title: "Alerts", key: "alerts", + contextModule: ContextModule.favoritesAlerts, }, ] const FavoritesHeaderTapBar: React.FC = ({ state, navigation }) => { + const activeTab = FavoritesContextStore.useStoreState((state) => state.activeTab) const setActiveTab = FavoritesContextStore.useStoreActions((actions) => actions.setActiveTab) const { trackTappedNavigationTab } = useFavoritesTracking() @@ -68,6 +74,8 @@ const FavoritesHeaderTapBar: React.FC = ({ state, naviga { + // Make sure to track the tap before changing the active tab + trackTappedNavigationTab(key, activeTab) setActiveTab(key) // We are manually emitting the tabPress event here because @@ -80,7 +88,6 @@ const FavoritesHeaderTapBar: React.FC = ({ state, naviga }) navigation.navigate(key) - trackTappedNavigationTab(key) }} Icon={() => ( diff --git a/src/app/Scenes/Favorites/useFavoritesTracking.ts b/src/app/Scenes/Favorites/useFavoritesTracking.ts index 5a58d934a19..18ca97d6548 100644 --- a/src/app/Scenes/Favorites/useFavoritesTracking.ts +++ b/src/app/Scenes/Favorites/useFavoritesTracking.ts @@ -15,6 +15,7 @@ import { TappedOfferSettings, } from "@artsy/cohesion/dist/Schema/Events/Favorites" import { useIsFocused } from "@react-navigation/native" +import { Pills } from "app/Scenes/Favorites/Favorites" import { FavoritesTab } from "app/Scenes/Favorites/FavoritesContextStore" import { screen } from "app/utils/track/helpers" import { useEffect } from "react" @@ -23,10 +24,10 @@ import { useTracking } from "react-tracking" export const useFavoritesTracking = () => { const { trackEvent } = useTracking() - const trackTappedNavigationTab = (key: FavoritesTab) => { + const trackTappedNavigationTab = (key: FavoritesTab, activeTab: FavoritesTab) => { const payload = { action: ActionType.tappedNavigationTab, - context_module: key, + context_module: activeTab, subject: key, } @@ -34,23 +35,12 @@ export const useFavoritesTracking = () => { } const trackTappedInfoBubble = (activeTab: FavoritesTab) => { - let contextScreen: ContextModule - switch (activeTab) { - case "saves": - contextScreen = ContextModule.favoritesSaves - break - case "follows": - contextScreen = ContextModule.favoritesFollows - break - case "alerts": - contextScreen = ContextModule.favoritesAlerts - break - } + const contextModule = Pills.find((pill) => pill.key === activeTab)?.contextModule const payload: TappedInfoBubble = { action: ActionType.tappedInfoBubble, context_screen_owner_type: OwnerType.favorites, - context_module: contextScreen, + context_module: contextModule as ContextModule, subject: "favoritesHeader", }