feat(DIA-181): add tracking when tapping verified representative (#9373)

* feat: add tracking when tapping verified representative

* refactor: use the right type and move track object outside of the component

* test: use mockTrackEvent

src/app/Components/Artist/ArtistHeader.tests.tsx

@@ -1,8 +1,9 @@
 import { fireEvent, screen } from "@testing-library/react-native"
 import { ArtistHeaderTestsQuery } from "__generated__/ArtistHeaderTestsQuery.graphql"
-import { ArtistHeaderFragmentContainer } from "app/Components/Artist/ArtistHeader"
+import { ArtistHeaderFragmentContainer, tracks } from "app/Components/Artist/ArtistHeader"
 import { __globalStoreTestUtils__ } from "app/store/GlobalStore"
 import { navigate } from "app/system/navigation/navigate"
+import { mockTrackEvent } from "app/utils/tests/globallyMockedStuff"
 import { setupTestWrapper } from "app/utils/tests/setupTestWrapper"
 import { graphql } from "react-relay"
 
@@ -29,19 +30,16 @@ describe("ArtistHeader", () => {
   })
 
   it("displays represented by list given verifiedRepresentatives", () => {
+    const partner = {
+      internalID: "representative-id",
+      name: "Test representative",
+      href: "representative-href",
+      profile: { icon: { url: "image-url" } },
+    }
     renderWithRelay({
       Artist: () => ({
         ...mockArtist,
-        verifiedRepresentatives: [
-          {
-            partner: {
-              internalID: "representative-id",
-              name: "Test representative",
-              href: "representative-href",
-              profile: { icon: { url: "image-url" } },
-            },
-          },
-        ],
+        verifiedRepresentatives: [{ partner }],
       }),
     })
 
@@ -50,6 +48,9 @@ describe("ArtistHeader", () => {
 
     fireEvent.press(representative)
     expect(navigate).toHaveBeenCalledWith("representative-href")
+    expect(mockTrackEvent).toHaveBeenCalledWith(
+      tracks.tappedVerifiedRepresentative(mockArtist as any, partner)
+    )
   })
 
   describe("alerts set", () => {
@@ -98,6 +99,7 @@ describe("ArtistHeader", () => {
 const mockArtist = {
   internalID: "some-id",
   id: "marcel-duchamp",
+  slug: "marcel-duchamp",
   name: "Marcel",
   nationality: "French",
   birthday: "11/17/1992",

src/app/Components/Artist/ArtistHeader.tsx

@@ -1,3 +1,4 @@
+import { ActionType, ContextModule, OwnerType, TappedVerifiedRepresentative } from "@artsy/cohesion"
 import {
   Box,
   Flex,
@@ -17,6 +18,7 @@ import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
 import { pluralize } from "app/utils/pluralize"
 import { FlatList, LayoutChangeEvent, ViewProps } from "react-native"
 import { RelayProp, createFragmentContainer, graphql } from "react-relay"
+import { useTracking } from "react-tracking"
 
 export const ARTIST_HEADER_HEIGHT = 156
 export const ARTIST_IMAGE_TABLET_HEIGHT = 375
@@ -47,6 +49,7 @@ export const ArtistHeader: React.FC<Props> = ({ artist, me, onLayoutChange }) =>
   const { width, height, aspectRatio } = useArtistHeaderImageDimensions()
   const { updateScrollYOffset } = useScreenScrollContext()
   const showArtistsAlertsSetFeatureFlag = useFeatureFlag("ARShowArtistsAlertsSet")
+  const tracking = useTracking()
 
   const getBirthdayString = () => {
     const birthday = artist.birthday
@@ -80,9 +83,12 @@ export const ArtistHeader: React.FC<Props> = ({ artist, me, onLayoutChange }) =>
     }
   }
 
-  const handleRepresentativePress = (href: string | null) => {
-    if (href) {
-      navigate(href)
+  const handleRepresentativePress = (
+    partner: ArtistHeader_artist$data["verifiedRepresentatives"][number]["partner"]
+  ) => {
+    if (partner?.href && partner?.internalID) {
+      tracking.trackEvent(tracks.tappedVerifiedRepresentative(artist, partner))
+      navigate(partner.href)
     }
   }
 
@@ -129,7 +135,7 @@ export const ArtistHeader: React.FC<Props> = ({ artist, me, onLayoutChange }) =>
               <Pill
                 variant="profile"
                 src={item.partner.profile?.icon?.url!}
-                onPress={() => handleRepresentativePress(item.partner.href)}
+                onPress={() => handleRepresentativePress(item.partner)}
               >
                 {item.partner.name}
               </Pill>
@@ -162,6 +168,7 @@ export const ArtistHeader: React.FC<Props> = ({ artist, me, onLayoutChange }) =>
 export const ArtistHeaderFragmentContainer = createFragmentContainer(ArtistHeader, {
   artist: graphql`
     fragment ArtistHeader_artist on Artist {
+      slug
       birthday
       coverArtwork {
         image {
@@ -193,3 +200,17 @@ export const ArtistHeaderFragmentContainer = createFragmentContainer(ArtistHeade
     }
   `,
 })
+
+export const tracks = {
+  tappedVerifiedRepresentative: (
+    artist: ArtistHeader_artist$data,
+    partner: ArtistHeader_artist$data["verifiedRepresentatives"][number]["partner"]
+  ): TappedVerifiedRepresentative => ({
+    action: ActionType.tappedVerifiedRepresentative,
+    context_module: ContextModule.artistHeader,
+    context_screen_owner_type: OwnerType.artist,
+    context_screen_owner_id: artist.internalID,
+    destination_screen_owner_id: partner.internalID,
+    destination_screen_owner_type: OwnerType.partner,
+  }),
+}