feat: Interested in selling tooltip

artsy · Apr 29, 2024 · 1c20780 · 1c20780
1 parent 5e9d4cc
commit 1c20780
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 32 deletions.
diff --git a/src/app/Components/ArtworkGrids/InfiniteScrollArtworksGrid.tsx b/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"
@@ -198,7 +201,18 @@ const InfiniteScrollArtworksGrid: React.FC<Props & PrivateProps> = ({
   useParentAwareScrollView = Platform.OS === "android",
   width,
 }) => {
-  const artworks = extractNodes(connection)
+  let artworks = extractNodes(connection)
+
+  // My Collection: This code moves the first P1 artwork to the top of the list in My Collection and displays a tooltip
+  const enableMyCollectionSellOnboarding = useFeatureFlag(
+    "AREnableMyCollectionInterestedInSellingTooltip"
+  )
+  const { isDismissed } = GlobalStore.useAppState((state) => state.progressiveOnboarding)
+
+  const displaySellThisWorkTooltip =
+    enableMyCollectionSellOnboarding &&
+    isMyCollection &&
+    !isDismissed(PROGRESSIVE_ONBOARDING_MY_COLLECTION_SELL_THIS_WORK).status
 
   const getSectionDimension = (gridWidth: number | null | undefined) => {
     // Setting the dimension to 1 for tests to avoid adjusting the screen width
@@ -292,6 +306,7 @@ const InfiniteScrollArtworksGrid: React.FC<Props & PrivateProps> = ({
     }
 
     const artworks = extractNodes(connection)
+
     const sectionedArtworks = getSectionedArtworks()
     const sections: JSX.Element[] = []
     const columnCount = sectionCount ?? 0
@@ -331,6 +346,12 @@ const InfiniteScrollArtworksGrid: React.FC<Props & PrivateProps> = ({
             {...itemComponentProps}
             height={imgHeight}
             {...componentSpecificProps}
+            displayToolTip={
+              // Display "Interested in Selling?" tooltip if the first artwork is from a P1 artist in the list
+              !!displaySellThisWorkTooltip &&
+              itemIndex === 0 &&
+              !!artwork.artist?.targetSupply?.priority
+            }
           />
         )
         // Setting a marginBottom on the artwork component didn’t work, so using a spacer view instead.
@@ -475,6 +496,11 @@ export const InfiniteScrollArtworksGridContainer = createFragmentContainer(
               aspectRatio
               blurhash
             }
+            artist {
+              targetSupply {
+                priority
+              }
+            }
             ...ArtworkGridItem_artwork @arguments(includeAllImages: false)
             ...MyCollectionArtworkGridItem_artwork
               @skip(if: $skipMyCollection)
@@ -510,6 +536,9 @@ export const InfiniteScrollMyCollectionArtworksGridContainer = createFragmentCon
             artistNames
             medium
             artist {
+              targetSupply {
+                priority
+              }
               internalID
               name
             }

diff --git a/src/app/Scenes/MyCollection/MyCollectionArtworks.tsx b/src/app/Scenes/MyCollection/MyCollectionArtworks.tsx
@@ -13,7 +13,6 @@ import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
 import { refreshMyCollection } from "app/utils/refreshHelpers"
 import { useEffect, useState } from "react"
 import { Alert, InteractionManager } from "react-native"
-
 import { RelayPaginationProp, graphql } from "react-relay"
 import { MyCollectionArtworkList } from "./Components/MyCollectionArtworkList"
 import { MyCollectionSearchBar } from "./Components/MyCollectionSearchBar"
@@ -60,7 +59,7 @@ export const MyCollectionArtworks: React.FC<MyCollectionArtworksProps> = ({ me,
 
   return (
     <Flex minHeight={minHeight} px={2}>
-      <Flex mb={1}>
+      <Flex>
         {!enableCollectedArtists && artworks.length > 4 && (
           <MyCollectionSearchBar
             searchString={keywordFilter}
@@ -71,6 +70,9 @@ export const MyCollectionArtworks: React.FC<MyCollectionArtworksProps> = ({ me,
           />
         )}
       </Flex>
+
+      <Spacer y={1} />
+
       {!!showMyCollectionDeleteAllArtworks && artworks.length > 0 && (
         <Button
           onPress={() => {
@@ -114,6 +116,7 @@ export const MyCollectionArtworks: React.FC<MyCollectionArtworksProps> = ({ me,
           <Text color="red100">Delete all artworks</Text>
         </Button>
       )}
+
       {filteredArtworks.length > 0 ? (
         viewOption === "grid" ? (
           <InfiniteScrollMyCollectionArtworksGridContainer

diff --git a/src/app/Scenes/MyCollection/Screens/ArtworkList/MyCollectionArtworkGridItem.tsx b/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>
   )
 }

diff --git a/src/app/store/ProgressiveOnboardingModel.ts b/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,

diff --git a/src/app/store/config/features.ts b/src/app/store/config/features.ts
@@ -262,6 +262,11 @@ export const features = {
     showInDevMenu: true,
     echoFlagKey: "AREnablePartnerOfferOnArtworkScreen",
   },
+  AREnableMyCollectionInterestedInSellingTooltip: {
+    description: "Enable My Collection 'Interested in Selling?' tooltip",
+    readyForRelease: false,
+    showInDevMenu: true,
+  },
 } satisfies { [key: string]: FeatureDescriptor }
 
 export interface DevToggleDescriptor {