feat(ExploreBy): fix and add missing tracking (artsy#11019)

* feat: fix and add missing tracking

* fix: broken test provider

* fix: argument naming

Co-authored-by: Dejan <1176374+egdbear@users.noreply.github.com>

* feat: address requested changes

* feat: address requested changes

* feat: add destination path to the cards element

* feat: expand tracking to track y position and check href with OwnerType

* feat: adjust tap tracking and enable the feature flag

---------

Co-authored-by: Dejan <1176374+egdbear@users.noreply.github.com>

Author: araujobarret

src/app/Scenes/CollectionsByCategory/CollectionRail.tsx

@@ -7,10 +7,12 @@ import {
   Spacer,
   useScreenDimensions,
 } from "@artsy/palette-mobile"
+import { ArtworkRail_artworks$data } from "__generated__/ArtworkRail_artworks.graphql"
 import { CollectionRailCollectionsByCategoryQuery } from "__generated__/CollectionRailCollectionsByCategoryQuery.graphql"
 import { CollectionRail_marketingCollection$key } from "__generated__/CollectionRail_marketingCollection.graphql"
 import { ArtworkRail, ArtworkRailPlaceholder } from "app/Components/ArtworkRail/ArtworkRail"
 import { SectionTitle } from "app/Components/SectionTitle"
+import { useCollectionByCategoryTracking } from "app/Scenes/CollectionsByCategory/hooks/useCollectionByCategoryTracking"
 import { navigate } from "app/system/navigation/navigate"
 import { ElementInView } from "app/utils/ElementInView"
 import { extractNodes } from "app/utils/extractNodes"
@@ -24,24 +26,31 @@ interface CollectionRailProps {
 
 export const CollectionRail: FC<CollectionRailProps> = ({ collection: _collection }) => {
   const collection = useFragment(fragment, _collection)
+  const { trackArtworkRailItemTap, trackArtworkRailViewAllTap } = useCollectionByCategoryTracking()
 
   if (!collection || collection.artworksConnection?.counts.total === 0) {
     return null
   }
 
   const artworks = extractNodes(collection.artworksConnection)
 
+  const handleArtworkPress = (artwork: ArtworkRail_artworks$data[0], index: number) => {
+    trackArtworkRailItemTap(artwork.internalID, index)
+    navigate(artwork.href ?? "")
+  }
+
+  const handleTitlePress = () => {
+    trackArtworkRailViewAllTap(collection.slug)
+    navigate(`/collection/${collection.slug}`)
+  }
+
   return (
     <Flex px={2}>
       <Flex justifyContent="center">
-        <SectionTitle
-          title={collection.title}
-          titleVariant="md"
-          onPress={() => navigate(`/collection/${collection.slug}`)}
-        />
+        <SectionTitle title={collection.title} titleVariant="md" onPress={handleTitlePress} />
       </Flex>
       <ArtworkRail
-        onPress={(artwork) => navigate(artwork.href ?? "")}
+        onPress={handleArtworkPress}
         artworks={artworks}
         ListHeaderComponent={null}
         showSaveIcon

src/app/Scenes/CollectionsByCategory/CollectionsByCategory.tsx

@@ -1,8 +1,11 @@
+import { OwnerType } from "@artsy/cohesion"
 import { Flex, Screen, useSpace } from "@artsy/palette-mobile"
 import { RouteProp, useRoute } from "@react-navigation/native"
 import { BodyWithSuspense } from "app/Scenes/CollectionsByCategory/Body"
 import { FooterWithSuspense } from "app/Scenes/CollectionsByCategory/Footer"
 import { goBack } from "app/system/navigation/navigate"
+import { ProvideScreenTrackingWithCohesionSchema } from "app/utils/track"
+import { screen } from "app/utils/track/helpers"
 import { FC } from "react"
 
 type CollectionsByCategoriesNavigationRoutes = {
@@ -27,17 +30,24 @@ export const CollectionsByCategory: FC = () => {
   const category = params.props.category
 
   return (
-    <Screen>
-      <Screen.Header onBack={goBack} title={category} animated />
-      <Screen.Body fullwidth flex={1}>
-        <Screen.ScrollView>
-          <Flex gap={space(4)}>
-            <BodyWithSuspense />
+    <ProvideScreenTrackingWithCohesionSchema
+      info={screen({
+        context_screen_owner_type: OwnerType.collectionsCategory,
+        context_screen_owner_slug: category,
+      })}
+    >
+      <Screen>
+        <Screen.Header onBack={goBack} title={category} animated />
+        <Screen.Body fullwidth flex={1}>
+          <Screen.ScrollView>
+            <Flex gap={space(4)}>
+              <BodyWithSuspense />
 
-            <FooterWithSuspense homeViewSectionId={params.props.homeViewSectionId} />
-          </Flex>
-        </Screen.ScrollView>
-      </Screen.Body>
-    </Screen>
+              <FooterWithSuspense homeViewSectionId={params.props.homeViewSectionId} />
+            </Flex>
+          </Screen.ScrollView>
+        </Screen.Body>
+      </Screen>
+    </ProvideScreenTrackingWithCohesionSchema>
   )
 }

src/app/Scenes/CollectionsByCategory/CollectionsChips.tsx

@@ -1,5 +1,6 @@
 import { Chip, Flex, SkeletonBox, SkeletonText, Spacer, useSpace } from "@artsy/palette-mobile"
 import { CollectionsChips_marketingCollections$key } from "__generated__/CollectionsChips_marketingCollections.graphql"
+import { useCollectionByCategoryTracking } from "app/Scenes/CollectionsByCategory/hooks/useCollectionByCategoryTracking"
 import { navigate } from "app/system/navigation/navigate"
 import { Dimensions, FlatList, ScrollView } from "react-native"
 import { isTablet } from "react-native-device-info"
@@ -17,6 +18,7 @@ export const CollectionsChips: React.FC<CollectionsChipsProps> = ({
 }) => {
   const marketingCollections = useFragment(fragment, _marketingCollections)
   const space = useSpace()
+  const { trackChipTap } = useCollectionByCategoryTracking()
 
   if (!marketingCollections) {
     return null
@@ -26,6 +28,11 @@ export const CollectionsChips: React.FC<CollectionsChipsProps> = ({
 
   const snapToOffsets = getSnapToOffsets(numColumns, space(1), space(2))
 
+  const handleChipPress = (slug: string, index: number) => {
+    trackChipTap(slug, index)
+    navigate(`/collection/${slug}`)
+  }
+
   return (
     <Flex>
       <ScrollView
@@ -45,13 +52,15 @@ export const CollectionsChips: React.FC<CollectionsChipsProps> = ({
           numColumns={numColumns}
           data={marketingCollections}
           keyExtractor={(item, index) => `item_${index}_${item.internalID}`}
-          renderItem={({ item }) => (
+          renderItem={({ item, index }) => (
             <Flex minWidth={CHIP_WIDTH}>
               <Chip
                 key={item.internalID}
                 title={item.title}
                 onPress={() => {
-                  if (item?.slug) navigate(`/collection/${item.slug}`)
+                  if (item?.slug) {
+                    handleChipPress(item.slug, index)
+                  }
                 }}
               />
             </Flex>

src/app/Scenes/CollectionsByCategory/__tests__/CollectionRail.tests.tsx

@@ -1,15 +1,14 @@
-import { screen } from "@testing-library/react-native"
+import { fireEvent, screen } from "@testing-library/react-native"
 import { CollectionRailHomeViewSectionCardsTestQuery } from "__generated__/CollectionRailHomeViewSectionCardsTestQuery.graphql"
 import { CollectionRail } from "app/Scenes/CollectionsByCategory/CollectionRail"
+import { navigate } from "app/system/navigation/navigate"
 import { setupTestWrapper } from "app/utils/tests/setupTestWrapper"
 import { graphql } from "react-relay"
-
-jest.mock("app/Components/ArtworkRail/ArtworkRail", () => ({
-  ArtworkRail: () => null,
-  ArtworkRailPlaceholder: () => null,
-}))
+import { useTracking } from "react-tracking"
 
 describe("CollectionRail", () => {
+  const trackEvent = useTracking().trackEvent
+
   const { renderWithRelay } = setupTestWrapper<CollectionRailHomeViewSectionCardsTestQuery>({
     Component: ({ marketingCollection }) => <CollectionRail collection={marketingCollection} />,
     query: graphql`
@@ -26,4 +25,43 @@ describe("CollectionRail", () => {
 
     expect(screen.getByText(/mock-Value-for-Field-"Title"/)).toBeOnTheScreen()
   })
+
+  it("when tapping on an artwork", () => {
+    renderWithRelay({
+      FilterArtworksConnection: () => ({ edges, counts: { total: 2 } }),
+    })
+
+    fireEvent.press(screen.getByTestId(`artwork-${edges[0].node.slug}`))
+
+    expect(navigate).toHaveBeenCalledWith(`/artwork/${edges[0].node.internalID}`)
+    expect(trackEvent).toHaveBeenLastCalledWith({
+      action: "tappedArtworkGroup",
+      context_module: "collectionRail",
+      context_screen_owner_type: "collectionsCategory",
+      destination_screen_owner_slug: "1",
+      destination_screen_owner_type: "artwork",
+      horizontal_slide_position: 0,
+      type: "thumbnail",
+    })
+  })
+
+  it("when tapping on the title", () => {
+    renderWithRelay({
+      FilterArtworksConnection: () => ({ edges, counts: { total: 1 } }),
+    })
+
+    fireEvent.press(screen.getByText(/mock-Value-for-Field-"Title"/))
+
+    expect(navigate).toHaveBeenCalledWith('/collection/<mock-value-for-field-"slug">')
+    expect(trackEvent).toHaveBeenLastCalledWith({
+      action: "tappedArtworkGroup",
+      context_module: "collectionRail",
+      context_screen_owner_type: "collectionsCategory",
+      destination_screen_owner_slug: '<mock-value-for-field-"slug">',
+      destination_screen_owner_type: "collection",
+      type: "viewAll",
+    })
+  })
 })
+
+const edges = [{ node: { internalID: "1", href: "/artwork/1", slug: "1-slug" } }]

src/app/Scenes/CollectionsByCategory/__tests__/CollectionsChips.tests.tsx

@@ -1,10 +1,14 @@
-import { screen } from "@testing-library/react-native"
+import { fireEvent, screen } from "@testing-library/react-native"
 import { CollectionsChipsTestQuery } from "__generated__/CollectionsChipsTestQuery.graphql"
 import { CollectionsChips } from "app/Scenes/CollectionsByCategory/CollectionsChips"
+import { navigate } from "app/system/navigation/navigate"
 import { setupTestWrapper } from "app/utils/tests/setupTestWrapper"
 import { graphql } from "react-relay"
+import { useTracking } from "react-tracking"
 
 describe("CollectionsChips", () => {
+  const trackEvent = useTracking().trackEvent
+
   const { renderWithRelay } = setupTestWrapper<CollectionsChipsTestQuery>({
     Component: CollectionsChips,
     query: graphql`
@@ -21,4 +25,21 @@ describe("CollectionsChips", () => {
 
     expect(screen.getByText(/mock-value-for-field-"title"/)).toBeOnTheScreen()
   })
+
+  it("when tapping on a chip", () => {
+    renderWithRelay()
+
+    fireEvent.press(screen.getByText(/mock-value-for-field-"title"/))
+
+    expect(navigate).toHaveBeenCalledWith('/collection/<mock-value-for-field-"slug">')
+    expect(trackEvent).toHaveBeenCalledWith({
+      action: "tappedCollectionGroup",
+      context_module: "collectionRail",
+      context_screen_owner_type: "collectionsCategory",
+      destination_screen_owner_slug: '<mock-value-for-field-"slug">',
+      destination_screen_owner_type: "collection",
+      horizontal_slide_position: 0,
+      type: "thumbnail",
+    })
+  })
 })

src/app/Scenes/CollectionsByCategory/hooks/useCollectionByCategoryTracking.ts

@@ -0,0 +1,56 @@
+import {
+  ActionType,
+  ContextModule,
+  OwnerType,
+  TappedArtworkGroup,
+  TappedCollectionGroup,
+} from "@artsy/cohesion"
+import { useTracking } from "react-tracking"
+
+export const useCollectionByCategoryTracking = () => {
+  const { trackEvent } = useTracking()
+
+  const trackChipTap = (slug: string, index: number) => {
+    const payload: TappedCollectionGroup = {
+      action: ActionType.tappedCollectionGroup,
+      context_module: ContextModule.collectionRail,
+      context_screen_owner_type: OwnerType.collectionsCategory,
+      destination_screen_owner_type: OwnerType.collection,
+      destination_screen_owner_slug: slug,
+      horizontal_slide_position: index,
+      type: "thumbnail",
+    }
+    trackEvent(payload)
+  }
+
+  const trackArtworkRailItemTap = (slug: string, index: number) => {
+    const payload: TappedArtworkGroup = {
+      action: ActionType.tappedArtworkGroup,
+      context_module: ContextModule.collectionRail,
+      context_screen_owner_type: OwnerType.collectionsCategory,
+      destination_screen_owner_slug: slug,
+      destination_screen_owner_type: OwnerType.artwork,
+      horizontal_slide_position: index,
+      type: "thumbnail",
+    }
+    trackEvent(payload)
+  }
+
+  const trackArtworkRailViewAllTap = (slug: string) => {
+    const payload: TappedArtworkGroup = {
+      action: ActionType.tappedArtworkGroup,
+      context_module: ContextModule.collectionRail,
+      context_screen_owner_type: OwnerType.collectionsCategory,
+      destination_screen_owner_slug: slug,
+      destination_screen_owner_type: OwnerType.collection,
+      type: "viewAll",
+    }
+    trackEvent(payload)
+  }
+
+  return {
+    trackChipTap,
+    trackArtworkRailItemTap,
+    trackArtworkRailViewAllTap,
+  }
+}