chore: Activity screen refactoring & code decoupling

src/app/Components/ArtworkGrids/ArtworkGridItem.tsx

@@ -27,7 +27,7 @@ import { DurationProvider } from "app/Components/Countdown"
 import { Disappearable, DissapearableArtwork } from "app/Components/Disappearable"
 import { ProgressiveOnboardingSaveArtwork } from "app/Components/ProgressiveOnboarding/ProgressiveOnboardingSaveArtwork"
 import { HEART_ICON_SIZE } from "app/Components/constants"
-import { PartnerOffer } from "app/Scenes/Activity/components/NotificationArtworkList"
+import { PartnerOffer } from "app/Scenes/Activity/components/PartnerOfferCreatedNotification"
 import { GlobalStore } from "app/store/GlobalStore"
 import { navigate } from "app/system/navigation/navigate"
 import { useArtworkBidding } from "app/utils/Websockets/auctions/useArtworkBidding"
@@ -73,7 +73,7 @@ export interface ArtworkProps extends ArtworkActionTrackingProps {
   /** Overrides onPress and prevents the default behaviour. */
   onPress?: (artworkID: string, artwork?: ArtworkGridItem_artwork$data) => void
   partnerNameTextStyle?: TextProps
-  partnerOffer?: PartnerOffer
+  partnerOffer?: PartnerOffer | null
   priceOfferMessage?: PriceOfferMessage
   saleInfoTextStyle?: TextProps
   /** Show the lot number (Lot 213) */

src/app/Components/ArtworkGrids/MasonryArtworkGridItem.tsx

@@ -2,7 +2,7 @@ import { ContextModule, ScreenOwnerType } from "@artsy/cohesion"
 import { Flex, useScreenDimensions, useSpace } from "@artsy/palette-mobile"
 import { ArtworkGridItem_artwork$data } from "__generated__/ArtworkGridItem_artwork.graphql"
 import ArtworkGridItem, { PriceOfferMessage } from "app/Components/ArtworkGrids/ArtworkGridItem"
-import { PartnerOffer } from "app/Scenes/Activity/components/NotificationArtworkList"
+import { PartnerOffer } from "app/Scenes/Activity/components/PartnerOfferCreatedNotification"
 import { NUM_COLUMNS_MASONRY } from "app/utils/masonryHelpers"
 import { ViewProps } from "react-native"
 import { FragmentRefs } from "relay-runtime"
@@ -31,7 +31,7 @@ interface MasonryArtworkGridItemProps {
   item: Artwork
   numColumns?: number
   onPress?: (artworkID: string, artwork?: ArtworkGridItem_artwork$data) => void
-  partnerOffer?: PartnerOffer
+  partnerOffer?: PartnerOffer | null
   priceOfferMessage?: PriceOfferMessage
   hideSaveIcon?: boolean
   hideSaleInfo?: boolean

src/app/Components/ArtworkGrids/MasonryInfiniteScrollArtworkGrid.tsx

@@ -3,7 +3,7 @@ import { useSpace } from "@artsy/palette-mobile"
 import { MasonryFlashList, MasonryFlashListProps } from "@shopify/flash-list"
 import { PriceOfferMessage } from "app/Components/ArtworkGrids/ArtworkGridItem"
 import { MasonryArtworkGridItem } from "app/Components/ArtworkGrids/MasonryArtworkGridItem"
-import { PartnerOffer } from "app/Scenes/Activity/components/NotificationArtworkList"
+import { PartnerOffer } from "app/Scenes/Activity/components/PartnerOfferCreatedNotification"
 import {
   ESTIMATED_MASONRY_ITEM_SIZE,
   MASONRY_LIST_PAGE_SIZE,
@@ -36,7 +36,7 @@ interface MasonryInfiniteScrollArtworkGridProps extends MasonryFlashListOmittedP
   loadMore?: (pageSize: number) => void
   onPress?: (artworkID: string) => void
   pageSize?: number
-  partnerOffer?: PartnerOffer
+  partnerOffer?: PartnerOffer | null
   priceOfferMessage?: PriceOfferMessage
 }
 

src/app/Scenes/Activity/components/NotificationArtworkList.tsx

@@ -1,39 +1,29 @@
 import { OwnerType } from "@artsy/cohesion"
-import { Flex, Screen, Text, useColor } from "@artsy/palette-mobile"
+import { Flex, Screen } from "@artsy/palette-mobile"
 import { NotificationArtworkList_artworksConnection$key } from "__generated__/NotificationArtworkList_artworksConnection.graphql"
 import { PriceOfferMessage } from "app/Components/ArtworkGrids/ArtworkGridItem"
 import { MasonryInfiniteScrollArtworkGrid } from "app/Components/ArtworkGrids/MasonryInfiniteScrollArtworkGrid"
-import { CommercialButtonsQueryRenderer } from "app/Scenes/Activity/components/NotificationCommercialButtons"
+import { PartnerOffer } from "app/Scenes/Activity/components/PartnerOfferCreatedNotification"
 import { extractNodes } from "app/utils/extractNodes"
 import { FC } from "react"
-import { ImageBackground } from "react-native"
 import { graphql, useFragment } from "react-relay"
 
-export interface PartnerOffer {
-  internalID: string
-  endAt: string
-  isAvailable: boolean
-  note?: string
-}
-
 interface NotificationArtworkListProps {
   artworksConnection?: NotificationArtworkList_artworksConnection$key | null
   priceOfferMessage?: PriceOfferMessage
-  showArtworkCommercialButtons?: boolean
-  partnerOffer?: PartnerOffer
+  partnerOffer?: PartnerOffer | null
 }
 
-export const NotificationArtworkList: FC<NotificationArtworkListProps> = (props) => {
-  const { artworksConnection, priceOfferMessage, showArtworkCommercialButtons, partnerOffer } =
-    props
+export const NotificationArtworkList: FC<NotificationArtworkListProps> = ({
+  artworksConnection,
+  priceOfferMessage,
+  partnerOffer,
+}) => {
   const { scrollHandler } = Screen.useListenForScreenScroll()
 
   const artworksConnectionData = useFragment(notificationArtworkListFragment, artworksConnection)
 
   const artworks = extractNodes(artworksConnectionData)
-  const note = partnerOffer?.note
-  const partnerIcon = artworks[0].partner?.profile?.icon?.url
-  const color = useColor()
 
   return (
     // Setting the min heiht here because Flashlist needs a container with a valid height.
@@ -50,37 +40,6 @@ export const NotificationArtworkList: FC<NotificationArtworkListProps> = (props)
         partnerOffer={partnerOffer}
         priceOfferMessage={priceOfferMessage}
       />
-
-      {!!showArtworkCommercialButtons && (
-        <CommercialButtonsQueryRenderer
-          artworkID={artworks[0].internalID}
-          partnerOffer={partnerOffer}
-        />
-      )}
-
-      {!!note && (
-        <Flex width="100%" flexDirection="row" p={2}>
-          <Flex width="100%" flexDirection="row" bg="black5" p={1}>
-            {!!partnerIcon && (
-              <Flex mr={1}>
-                <ImageBackground
-                  source={{ uri: partnerIcon }}
-                  style={{ width: 30, height: 30 }}
-                  imageStyle={{ borderRadius: 15, borderColor: color("black30"), borderWidth: 1 }}
-                />
-              </Flex>
-            )}
-            <Flex flex={1}>
-              <Text variant="sm" color="black100" fontWeight="bold">
-                Note from the gallery
-              </Text>
-              <Text variant="sm" color="black100">
-                "{note}"
-              </Text>
-            </Flex>
-          </Flex>
-        </Flex>
-      )}
     </Flex>
   )
 }
@@ -93,13 +52,6 @@ export const notificationArtworkListFragment = graphql`
         id
         slug
         href
-        partner {
-          profile {
-            icon {
-              url(version: "square140")
-            }
-          }
-        }
         image(includeAll: false) {
           aspectRatio
         }

src/app/Scenes/Activity/components/NotificationCommercialButtons.tsx

@@ -6,7 +6,7 @@ import { NotificationCommercialButtonsQuery } from "__generated__/NotificationCo
 import { NotificationCommercialButtons_artwork$key } from "__generated__/NotificationCommercialButtons_artwork.graphql"
 import { useSendInquiry_me$key } from "__generated__/useSendInquiry_me.graphql"
 import { CreateArtworkAlertModal } from "app/Components/Artist/ArtistArtworks/CreateArtworkAlertModal"
-import { PartnerOffer } from "app/Scenes/Activity/components/NotificationArtworkList"
+import { PartnerOffer } from "app/Scenes/Activity/components/PartnerOfferCreatedNotification"
 import { BuyNowButton } from "app/Scenes/Artwork/Components/CommercialButtons/BuyNowButton"
 import { ContactGalleryButton } from "app/Scenes/Artwork/Components/CommercialButtons/ContactGalleryButton"
 import { MakeOfferButtonFragmentContainer } from "app/Scenes/Artwork/Components/CommercialButtons/MakeOfferButton"
@@ -15,13 +15,13 @@ import { getRelayEnvironment } from "app/system/relay/defaultEnvironment"
 import { getTimer } from "app/utils/getTimer"
 import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
 import { renderWithPlaceholder } from "app/utils/renderWithPlaceholder"
-import { useState, Children } from "react"
+import { Children, useState } from "react"
 import { QueryRenderer, graphql, useFragment } from "react-relay"
 import { useTracking } from "react-tracking"
 
 export const CommercialButtonsQueryRenderer: React.FC<{
   artworkID: string
-  partnerOffer?: PartnerOffer
+  partnerOffer?: PartnerOffer | null
 }> = ({ artworkID, partnerOffer }) => {
   return (
     <QueryRenderer<NotificationCommercialButtonsQuery>

src/app/Scenes/Activity/components/PartnerOfferCreatedNotification.tsx

@@ -1,26 +1,46 @@
-import { DEFAULT_HIT_SLOP, Flex, Screen, Spacer, Text, Touchable } from "@artsy/palette-mobile"
+import {
+  DEFAULT_HIT_SLOP,
+  Flex,
+  Screen,
+  Spacer,
+  Text,
+  Touchable,
+  useColor,
+} from "@artsy/palette-mobile"
 import { PartnerOfferCreatedNotification_notification$key } from "__generated__/PartnerOfferCreatedNotification_notification.graphql"
 import {
   ExpiresInTimer,
   shouldDisplayExpiresInTimer,
 } from "app/Scenes/Activity/components/ExpiresInTimer"
 import { NotificationArtworkList } from "app/Scenes/Activity/components/NotificationArtworkList"
+import { CommercialButtonsQueryRenderer } from "app/Scenes/Activity/components/NotificationCommercialButtons"
 import { PartnerOfferBadge } from "app/Scenes/Activity/components/PartnerOffeBadge"
 import { goBack, navigate } from "app/system/navigation/navigate"
 import { extractNodes } from "app/utils/extractNodes"
 import { getTimer } from "app/utils/getTimer"
+import { ImageBackground } from "react-native"
 import { graphql, useFragment } from "react-relay"
 
+export interface PartnerOffer {
+  internalID: string
+  endAt: string | null | undefined
+  isAvailable: boolean | null | undefined
+  note: string | null | undefined
+}
+
 interface PartnerOfferCreatedNotificationProps {
   notification: PartnerOfferCreatedNotification_notification$key
 }
 
 export const PartnerOfferCreatedNotification: React.FC<PartnerOfferCreatedNotificationProps> = ({
   notification,
 }) => {
-  const notificationData = useFragment(PartnerOfferCreatedNotificationFragment, notification)
+  const { headline, item, notificationType, artworksConnection } = useFragment(
+    PartnerOfferCreatedNotificationFragment,
+    notification
+  )
 
-  const { headline, item, notificationType, artworksConnection } = notificationData
+  const color = useColor()
 
   const { hasEnded } = getTimer(item?.partnerOffer?.endAt || "")
   const noLongerAvailable = !item?.partnerOffer?.isAvailable
@@ -37,6 +57,11 @@ export const PartnerOfferCreatedNotification: React.FC<PartnerOfferCreatedNotifi
     subtitle = "This offer has expired. Please make a new offer or contact the gallery"
   }
 
+  const note = item?.partnerOffer?.note
+  const artworks = extractNodes(artworksConnection)
+
+  const partnerIcon = artworks[0]?.partner?.profile?.icon?.url
+
   const handleManageSaves = () => {
     navigate("/settings/saves")
   }
@@ -78,18 +103,44 @@ export const PartnerOfferCreatedNotification: React.FC<PartnerOfferCreatedNotifi
           <NotificationArtworkList
             artworksConnection={artworksConnection}
             priceOfferMessage={{
-              priceListedMessage:
-                extractNodes(artworksConnection)[0]?.price || "Not publicly listed",
+              priceListedMessage: artworks[0]?.price || "Not publicly listed",
               priceWithDiscountMessage: item?.partnerOffer?.priceWithDiscount?.display || "",
             }}
-            partnerOffer={{
-              internalID: item?.partnerOffer?.internalID || "",
-              endAt: item?.partnerOffer?.endAt || "",
-              isAvailable: item?.partnerOffer?.isAvailable || false,
-              note: item?.partnerOffer?.note || "",
-            }}
-            showArtworkCommercialButtons
+            partnerOffer={item?.partnerOffer}
+          />
+
+          <CommercialButtonsQueryRenderer
+            artworkID={extractNodes(artworksConnection)[0]?.internalID}
+            partnerOffer={item?.partnerOffer}
           />
+
+          {!!item?.partnerOffer?.note && (
+            <Flex width="100%" flexDirection="row" p={2}>
+              <Flex width="100%" flexDirection="row" bg="black5" p={1}>
+                {!!partnerIcon && (
+                  <Flex mr={1}>
+                    <ImageBackground
+                      source={{ uri: partnerIcon }}
+                      style={{ width: 30, height: 30 }}
+                      imageStyle={{
+                        borderRadius: 15,
+                        borderColor: color("black30"),
+                        borderWidth: 1,
+                      }}
+                    />
+                  </Flex>
+                )}
+                <Flex flex={1}>
+                  <Text variant="sm" color="black100" fontWeight="bold">
+                    Note from the gallery
+                  </Text>
+                  <Text variant="sm" color="black100">
+                    "{note}"
+                  </Text>
+                </Flex>
+              </Flex>
+            </Flex>
+          )}
         </Flex>
       </Screen.Body>
     </Screen>
@@ -121,6 +172,14 @@ export const PartnerOfferCreatedNotificationFragment = graphql`
       ...NotificationArtworkList_artworksConnection
       edges {
         node {
+          internalID
+          partner {
+            profile {
+              icon {
+                url(version: "square140")
+              }
+            }
+          }
           price
         }
       }