feat: Add Interested in Selling tooltip to MyC

src/app/Components/ArtworkGrids/InfiniteScrollArtworksGrid.tsx

@@ -12,8 +12,11 @@ import { InfiniteScrollArtworksGrid_myCollectionConnection$data } from "__genera
 import ParentAwareScrollView from "app/Components/ParentAwareScrollView"
 import { PAGE_SIZE } from "app/Components/constants"
 import { MyCollectionArtworkGridItemFragmentContainer } from "app/Scenes/MyCollection/Screens/ArtworkList/MyCollectionArtworkGridItem"
+import { GlobalStore } from "app/store/GlobalStore"
+import { PROGRESSIVE_ONBOARDING_MY_COLLECTION_SELL_THIS_WORK } from "app/store/ProgressiveOnboardingModel"
 import { AnalyticsContextProvider } from "app/system/analytics/AnalyticsContext"
 import { extractNodes } from "app/utils/extractNodes"
+import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
 import { isCloseToBottom } from "app/utils/isCloseToBottom"
 import { ArtworkActionTrackingProps } from "app/utils/track/ArtworkActions"
 import React, { useState } from "react"
@@ -200,6 +203,11 @@ const InfiniteScrollArtworksGrid: React.FC<Props & PrivateProps> = ({
 }) => {
   const artworks = extractNodes(connection)
 
+  const enableMyCollectionSellOnboarding = useFeatureFlag(
+    "AREnableMyCollectionInterestedInSellingTooltip"
+  )
+  const { isDismissed } = GlobalStore.useAppState((state) => state.progressiveOnboarding)
+
   const getSectionDimension = (gridWidth: number | null | undefined) => {
     // Setting the dimension to 1 for tests to avoid adjusting the screen width
     if (__TEST__) {
@@ -292,6 +300,7 @@ const InfiniteScrollArtworksGrid: React.FC<Props & PrivateProps> = ({
     }
 
     const artworks = extractNodes(connection)
+
     const sectionedArtworks = getSectionedArtworks()
     const sections: JSX.Element[] = []
     const columnCount = sectionCount ?? 0
@@ -314,6 +323,15 @@ const InfiniteScrollArtworksGrid: React.FC<Props & PrivateProps> = ({
         const aspectRatio = artwork.image?.aspectRatio ?? 1
         const imgWidth = sectionDimension
         const imgHeight = imgWidth / aspectRatio
+
+        // Display "Interested in Selling?" tooltip if the first artwork is from a P1 artist in the list
+        const displayToolTip =
+          enableMyCollectionSellOnboarding &&
+          isMyCollection &&
+          !isDismissed(PROGRESSIVE_ONBOARDING_MY_COLLECTION_SELL_THIS_WORK).status &&
+          itemIndex === 0 &&
+          !!artwork.artist?.targetSupply?.priority
+
         artworkComponents.push(
           <ItemComponent
             contextScreenOwnerType={contextScreenOwnerType}
@@ -331,6 +349,7 @@ const InfiniteScrollArtworksGrid: React.FC<Props & PrivateProps> = ({
             {...itemComponentProps}
             height={imgHeight}
             {...componentSpecificProps}
+            displayToolTip={displayToolTip}
           />
         )
         // Setting a marginBottom on the artwork component didn’t work, so using a spacer view instead.
@@ -475,6 +494,11 @@ export const InfiniteScrollArtworksGridContainer = createFragmentContainer(
               aspectRatio
               blurhash
             }
+            artist {
+              targetSupply {
+                priority
+              }
+            }
             ...ArtworkGridItem_artwork @arguments(includeAllImages: false)
             ...MyCollectionArtworkGridItem_artwork
               @skip(if: $skipMyCollection)
@@ -510,6 +534,9 @@ export const InfiniteScrollMyCollectionArtworksGridContainer = createFragmentCon
             artistNames
             medium
             artist {
+              targetSupply {
+                priority
+              }
               internalID
               name
             }

src/app/Scenes/MyCollection/Screens/ArtworkList/MyCollectionArtworkGridItem.tsx

@@ -1,10 +1,13 @@
 import { tappedCollectedArtwork } from "@artsy/cohesion"
-import { Flex, Box, Text } from "@artsy/palette-mobile"
+import { Flex, Box, Text, Popover } from "@artsy/palette-mobile"
 import { themeGet } from "@styled-system/theme-get"
 import { MyCollectionArtworkGridItem_artwork$data } from "__generated__/MyCollectionArtworkGridItem_artwork.graphql"
 import { DEFAULT_SECTION_MARGIN } from "app/Components/ArtworkGrids/InfiniteScrollArtworksGrid"
 import HighDemandIcon from "app/Components/Icons/HighDemandIcon"
+import { useSetActivePopover } from "app/Components/ProgressiveOnboarding/useSetActivePopover"
 import { MyCollectionImageView } from "app/Scenes/MyCollection/Components/MyCollectionImageView"
+import { GlobalStore } from "app/store/GlobalStore"
+import { PROGRESSIVE_ONBOARDING_MY_COLLECTION_SELL_THIS_WORK } from "app/store/ProgressiveOnboardingModel"
 import { navigate } from "app/system/navigation/navigate"
 import { useLocalImage } from "app/utils/LocalImageStore"
 import { useScreenDimensions } from "app/utils/hooks"
@@ -17,9 +20,13 @@ import styled from "styled-components/native"
 
 interface MyCollectionArtworkGridItemProps {
   artwork: MyCollectionArtworkGridItem_artwork$data
+  displayToolTip?: boolean
 }
 
-const MyCollectionArtworkGridItem: React.FC<MyCollectionArtworkGridItemProps> = ({ artwork }) => {
+const MyCollectionArtworkGridItem: React.FC<MyCollectionArtworkGridItemProps> = ({
+  artwork,
+  displayToolTip,
+}) => {
   const { trackEvent } = useTracking()
   const displayImage = artwork.images?.find((i: any) => i?.isDefault) || artwork.images?.[0]
   const { width } = useScreenDimensions()
@@ -50,6 +57,13 @@ const MyCollectionArtworkGridItem: React.FC<MyCollectionArtworkGridItemProps> =
 
   const showHighDemandIcon = isP1Artist && isHighDemand
 
+  const { dismiss } = GlobalStore.actions.progressiveOnboarding
+  const { isActive, clearActivePopover } = useSetActivePopover(!!displayToolTip)
+
+  const handleDismissPopover = () => {
+    dismiss(PROGRESSIVE_ONBOARDING_MY_COLLECTION_SELL_THIS_WORK)
+  }
+
   return (
     <TouchElement
       accessibilityLabel="Go to artwork details"
@@ -69,35 +83,59 @@ const MyCollectionArtworkGridItem: React.FC<MyCollectionArtworkGridItemProps> =
         }
       }}
     >
-      <View>
-        <MyCollectionImageView
-          imageWidth={imageWidth}
-          imageURL={(localImage?.path || displayImage?.url) ?? undefined}
-          aspectRatio={localImage?.aspectRatio || image?.aspectRatio}
-          artworkSlug={slug}
-          artworkSubmissionId={submissionId}
-          useRawURL={!!localImage}
-          blurhash={showBlurhash ? image?.blurhash : undefined}
-        />
-        <Box maxWidth={width} mt={1} style={{ flex: 1 }}>
-          <Text lineHeight="18px" weight="regular" variant="xs" numberOfLines={2}>
-            {artistNames}
-            {!!showHighDemandIcon && (
-              <Flex testID="test-high-demand-icon">
-                <HighDemandIcon style={{ marginLeft: 2, marginBottom: -2 }} />
-              </Flex>
-            )}
+      <Popover
+        visible={!!displayToolTip && isActive}
+        onDismiss={handleDismissPopover}
+        onPressOutside={handleDismissPopover}
+        onCloseComplete={clearActivePopover}
+        placement="top"
+        title={
+          <Text variant="xs" color="white100" fontWeight="500">
+            Interested in Selling This Work?
           </Text>
-          {!!title ? (
-            <Text lineHeight="18px" variant="xs" weight="regular" numberOfLines={1} color="black60">
-              <Text lineHeight="18px" variant="xs" weight="regular" italic>
-                {title}
-              </Text>
-              {date ? `, ${date}` : ""}
+        }
+        content={
+          <Text variant="xs" color="white100">
+            Let our experts find the best sales option for you.
+          </Text>
+        }
+      >
+        <View>
+          <MyCollectionImageView
+            imageWidth={imageWidth}
+            imageURL={(localImage?.path || displayImage?.url) ?? undefined}
+            aspectRatio={localImage?.aspectRatio || image?.aspectRatio}
+            artworkSlug={slug}
+            artworkSubmissionId={submissionId}
+            useRawURL={!!localImage}
+            blurhash={showBlurhash ? image?.blurhash : undefined}
+          />
+          <Box maxWidth={width} mt={1} style={{ flex: 1 }}>
+            <Text lineHeight="18px" weight="regular" variant="xs" numberOfLines={2}>
+              {artistNames}
+              {!!showHighDemandIcon && (
+                <Flex testID="test-high-demand-icon">
+                  <HighDemandIcon style={{ marginLeft: 2, marginBottom: -2 }} />
+                </Flex>
+              )}
             </Text>
-          ) : null}
-        </Box>
-      </View>
+            {!!title ? (
+              <Text
+                lineHeight="18px"
+                variant="xs"
+                weight="regular"
+                numberOfLines={1}
+                color="black60"
+              >
+                <Text lineHeight="18px" variant="xs" weight="regular" italic>
+                  {title}
+                </Text>
+                {date ? `, ${date}` : ""}
+              </Text>
+            ) : null}
+          </Box>
+        </View>
+      </Popover>
     </TouchElement>
   )
 }

src/app/store/ProgressiveOnboardingModel.ts

@@ -83,6 +83,9 @@ export const PROGRESSIVE_ONBOARDING_ALERT_CHAIN = [
   PROGRESSIVE_ONBOARDING_ALERT_FINISH,
 ] as const
 
+// My Collection
+export const PROGRESSIVE_ONBOARDING_MY_COLLECTION_SELL_THIS_WORK = "my-collection-sell-this-work"
+
 // Partner Offer
 export const PROGRESSIVE_ONBOARDING_SIGNAL_INTEREST = "signal-interest"
 export const PROGRESSIVE_ONBOARDING_OFFER_SETTINGS = "offer-settings"
@@ -92,6 +95,7 @@ export const PROGRESSIVE_ONBOARDING_PARTNER_OFFER_CHAIN = [
 ]
 
 export const PROGRESSIVE_ONBOARDING_KEYS = [
+  PROGRESSIVE_ONBOARDING_MY_COLLECTION_SELL_THIS_WORK,
   PROGRESSIVE_ONBOARDING_SAVE_ARTWORK,
   PROGRESSIVE_ONBOARDING_FIND_SAVED_ARTWORK,
   PROGRESSIVE_ONBOARDING_SAVE_HIGHLIGHT,

src/app/store/config/features.ts

@@ -257,6 +257,12 @@ export const features = {
     showInDevMenu: true,
     echoFlagKey: "AREnablePartnerOfferOnArtworkScreen",
   },
+  AREnableMyCollectionInterestedInSellingTooltip: {
+    description: "Enable My Collection 'Interested in Selling?' tooltip",
+    readyForRelease: true,
+    showInDevMenu: true,
+    echoFlagKey: "AREnableMyCollectionInterestedInSellingTooltip",
+  },
 } satisfies { [key: string]: FeatureDescriptor }
 
 export interface DevToggleDescriptor {