refactor: extract SaleMessage component and query renderer

src/Components/Artwork/Details/Details.tsx

@@ -15,7 +15,7 @@ import { ConsignmentSubmissionStatusFragmentContainer } from "Components/Artwork
 import HighDemandIcon from "@artsy/icons/HighDemandIcon"
 import { BidTimerLine } from "./BidTimerLine"
 import { PrimaryLabelLineQueryRenderer } from "Components/Artwork/Details/PrimaryLabelLine"
-import { PartnerOfferedPriceQueryRenderer } from "./PartnerOfferedPrice"
+import { SaleMessageQueryRenderer } from "./SaleMessage"
 
 export interface DetailsProps {
   artwork: Details_artwork$data
@@ -194,10 +194,7 @@ const SaleInfoLine: React.FC<DetailsProps> = props => {
         fontWeight="bold"
         overflowEllipsis
       >
-        <PartnerOfferedPriceQueryRenderer
-          {...props}
-          id={props.artwork.internalID}
-        />{" "}
+        <SaleMessageQueryRenderer {...props} id={props.artwork.internalID} />{" "}
         <BidInfo {...props} />
       </Text>
     </Flex>
@@ -220,24 +217,6 @@ const HighDemandInfo = () => {
   )
 }
 
-const NBSP = " "
-
-export const SaleMessage: React.FC<DetailsProps> = props => {
-  const {
-    artwork: { sale, sale_message, sale_artwork },
-  } = props
-
-  if (sale?.is_auction && !sale?.is_closed) {
-    const highestBid_display = sale_artwork?.highest_bid?.display
-    const openingBid_display = sale_artwork?.opening_bid?.display
-
-    return <>{highestBid_display || openingBid_display || ""}</>
-  }
-
-  // NBSP is used to prevent un-aligned carousels
-  return <>{sale_message ?? NBSP}</>
-}
-
 const BidInfo: React.FC<DetailsProps> = ({
   artwork: { collectorSignals, sale, sale_artwork },
 }) => {

src/Components/Artwork/Details/PrimaryLabelLine.tsx

@@ -1,14 +1,14 @@
 import { useArtworkGridContext } from "Components/ArtworkGrid/ArtworkGridContext"
 import { Text } from "@artsy/palette"
 import { graphql, createFragmentContainer } from "react-relay"
-import { PrimaryLabelLine_artwork$key } from "__generated__/PrimaryLabelLine_artwork.graphql"
+import { PrimaryLabelLine_artwork$data } from "__generated__/PrimaryLabelLine_artwork.graphql"
 import { FC } from "react"
 import { SystemQueryRenderer } from "System/Relay/SystemQueryRenderer"
 import { PrimaryLabelLineQuery } from "__generated__/PrimaryLabelLineQuery.graphql"
 
 interface PrimaryLabelLineProps {
   label: string | null | undefined
-  artwork?: PrimaryLabelLine_artwork$key
+  artwork?: PrimaryLabelLine_artwork$data
 }
 
 export const PrimaryLabelLine: React.FC<PrimaryLabelLineProps> = ({

src/Components/Artwork/Details/SaleMessage.tsx

@@ -0,0 +1,132 @@
+import { FC, ReactElement } from "react"
+import { createFragmentContainer, graphql } from "react-relay"
+import { Flex, Text } from "@artsy/palette"
+import { SystemQueryRenderer } from "System/Relay/SystemQueryRenderer"
+import { useTimer } from "Utils/Hooks/useTimer"
+import { SaleMessageQuery } from "__generated__/SaleMessageQuery.graphql"
+import { SaleMessage_artwork$data } from "__generated__/SaleMessage_artwork.graphql"
+import { Details_artwork$data } from "__generated__/Details_artwork.graphql"
+
+interface PublicSaleMessageProps {
+  artwork: Details_artwork$data
+}
+
+interface ActivePartnerOfferTimerProps {
+  artwork: SaleMessage_artwork$data
+}
+
+interface SaleMessageProps {
+  artwork: SaleMessage_artwork$data
+  publicSaleMessage: ReactElement
+}
+
+const PublicSaleMessage: React.FC<PublicSaleMessageProps> = props => {
+  const {
+    artwork: { sale, sale_message, sale_artwork },
+  } = props
+
+  if (sale?.is_auction && !sale?.is_closed) {
+    const highestBid_display = sale_artwork?.highest_bid?.display
+    const openingBid_display = sale_artwork?.opening_bid?.display
+
+    return <>{highestBid_display || openingBid_display || ""}</>
+  }
+
+  // NBSP is used to prevent un-aligned carousels
+  return <>{sale_message ?? " "}</>
+}
+
+const ActivePartnerOfferTimer: React.FC<ActivePartnerOfferTimerProps> = ({
+  artwork: { collectorSignals },
+}) => {
+  const SEPARATOR = <>&nbsp;</>
+  const { endAt } = collectorSignals?.partnerOffer ?? {}
+  const { time } = useTimer(endAt ?? "")
+  const { days, hours } = time
+
+  return (
+    <Text
+      variant="sm-display"
+      lineHeight="22px"
+      color="blue100"
+      alignSelf="flex-start"
+      fontWeight="normal"
+    >
+      Exp.{SEPARATOR}
+      {Number(days)}d{SEPARATOR}
+      {Number(hours)}h{SEPARATOR}
+    </Text>
+  )
+}
+
+const SaleMessage: React.FC<SaleMessageProps> = ({
+  artwork,
+  publicSaleMessage,
+}) => {
+  const partnerOffer = artwork?.collectorSignals?.partnerOffer
+  const offeredPrice = partnerOffer?.priceWithDiscount?.display
+
+  return partnerOffer ? (
+    <Flex flexDirection="row" alignItems="center">
+      <Text lineHeight="22px">{offeredPrice}</Text>
+      &nbsp;
+      <ActivePartnerOfferTimer artwork={artwork} />
+    </Flex>
+  ) : (
+    publicSaleMessage
+  )
+}
+
+const SaleMessageFragmentContainer = createFragmentContainer(SaleMessage, {
+  artwork: graphql`
+    fragment SaleMessage_artwork on Artwork {
+      collectorSignals {
+        partnerOffer {
+          endAt
+          priceWithDiscount {
+            display
+          }
+        }
+      }
+    }
+  `,
+})
+
+interface SaleMessageQueryRendererProps {
+  id: string
+  artwork: Details_artwork$data
+}
+
+export const SaleMessageQueryRenderer: FC<SaleMessageQueryRendererProps> = ({
+  id,
+  artwork,
+}) => {
+  const publicSaleMessage = <PublicSaleMessage artwork={artwork} />
+
+  return (
+    <SystemQueryRenderer<SaleMessageQuery>
+      lazyLoad
+      query={graphql`
+        query SaleMessageQuery($id: String!) {
+          artwork(id: $id) {
+            ...SaleMessage_artwork
+          }
+        }
+      `}
+      placeholder={publicSaleMessage}
+      variables={{ id }}
+      render={({ error, props }) => {
+        if (error || !props?.artwork) {
+          return publicSaleMessage
+        }
+
+        return (
+          <SaleMessageFragmentContainer
+            artwork={props.artwork}
+            publicSaleMessage={publicSaleMessage}
+          />
+        )
+      }}
+    />
+  )
+}