feat: overwrite public pricing after fetching offers

src/Components/Artwork/Details/Details.tsx

@@ -16,6 +16,7 @@ import HighDemandIcon from "@artsy/icons/HighDemandIcon"
 import { BidTimerLine } from "./BidTimerLine"
 import { PrimaryLabelLine } from "Components/Artwork/Details/PrimaryLabelLine"
 import { PartnerOfferLineQueryRenderer } from "./PartnerOfferLine"
+import { PartnerOfferedPriceQueryRenderer } from "./PartnerOfferedPrice"
 
 export interface DetailsProps {
   artwork: Details_artwork$data
@@ -194,7 +195,11 @@ const SaleInfoLine: React.FC<DetailsProps> = props => {
         fontWeight="bold"
         overflowEllipsis
       >
-        <SaleMessage {...props} /> <BidInfo {...props} />
+        <PartnerOfferedPriceQueryRenderer
+          {...props}
+          id={props.artwork.internalID}
+        />{" "}
+        <BidInfo {...props} />
       </Text>
     </Flex>
   )
@@ -218,7 +223,7 @@ const HighDemandInfo = () => {
 
 const NBSP = " "
 
-const SaleMessage: React.FC<DetailsProps> = props => {
+export const SaleMessage: React.FC<DetailsProps> = props => {
   const {
     artwork: { sale, sale_message, sale_artwork },
   } = props

src/Components/Artwork/Details/PartnerOfferedPrice.tsx

@@ -0,0 +1,80 @@
+import { FC } from "react"
+import { createFragmentContainer, graphql } from "react-relay"
+import { Flex, Text } from "@artsy/palette"
+import { SystemQueryRenderer } from "System/Relay/SystemQueryRenderer"
+import { SaleMessage } from "./Details"
+import { PartnerOfferedPriceQuery } from "__generated__/PartnerOfferedPriceQuery.graphql"
+import { PartnerOfferedPrice_artwork$data } from "__generated__/PartnerOfferedPrice_artwork.graphql"
+import { Details_artwork$data } from "__generated__/Details_artwork.graphql"
+
+interface PartnerOfferedPriceProps {
+  artwork: PartnerOfferedPrice_artwork$data
+  fallback: object
+}
+
+const PartnerOfferedPrice: React.FC<PartnerOfferedPriceProps> = ({
+  artwork,
+  fallback,
+}) => {
+  const partnerOffer = artwork?.collectorSignals?.partnerOffer
+  const offeredPrice = partnerOffer?.priceWithDiscount?.display
+
+  return partnerOffer ? <Text lineHeight="22px">{offeredPrice}</Text> : fallback
+}
+
+const PartnerOfferedPriceFragmentContainer = createFragmentContainer(
+  PartnerOfferedPrice,
+  {
+    artwork: graphql`
+      fragment PartnerOfferedPrice_artwork on Artwork {
+        collectorSignals {
+          partnerOffer {
+            endAt
+            priceWithDiscount {
+              display
+            }
+          }
+        }
+      }
+    `,
+  }
+)
+
+interface PartnerOfferedPriceQueryRendererProps {
+  id: string
+  artwork: Details_artwork$data
+}
+
+export const PartnerOfferedPriceQueryRenderer: FC<PartnerOfferedPriceQueryRendererProps> = ({
+  id,
+  artwork,
+}) => {
+  return (
+    <SystemQueryRenderer<PartnerOfferedPriceQuery>
+      lazyLoad
+      query={graphql`
+        query PartnerOfferedPriceQuery($id: String!) {
+          artwork(id: $id) {
+            ...PartnerOfferedPrice_artwork
+          }
+        }
+      `}
+      placeholder={<SaleMessage artwork={artwork} />}
+      variables={{ id }}
+      render={({ error, props }) => {
+        const publicPrice = <SaleMessage artwork={artwork} />
+
+        if (error || !props?.artwork) {
+          return publicPrice
+        }
+
+        return (
+          <PartnerOfferedPriceFragmentContainer
+            artwork={props.artwork}
+            fallback={publicPrice}
+          />
+        )
+      }}
+    />
+  )
+}