Deploy

data/schema.graphql

@@ -3051,6 +3051,9 @@ type Artwork implements Node & Searchable & Sellable {
   # Whether a user can make an offer on the work through inquiry
   isOfferableFromInquiry: Boolean
   isOnHold: String
+
+  # Whether a partner can send an offer for this work
+  isPartnerOfferable: Boolean!
   isPartnerPromoted: Boolean
 
   # Whether a work is available for pickup
@@ -9947,6 +9950,19 @@ type Conversation implements Node {
     states: [CommerceOrderStateEnum!]
   ): CommerceOrderConnectionWithTotalCount
 
+  # Partner offers for this conversation's artwork, scoped to the user who initiated the conversation (from_id).
+  partnerOffersConnection(
+    after: String
+    before: String
+    first: Int
+    last: Int
+
+    # Filter by offer type(s). Gravity defaults to bulk offers when omitted.
+    offerType: [PartnerOfferTypeEnum]
+    page: Int
+    size: Int
+  ): PartnerOfferConnection
+
   # A connection of orders for artworks in this conversation from the partner's perspective.
   partnerOrdersConnection(
     after: String
@@ -17895,6 +17911,9 @@ type Me implements Node {
     before: String
     first: Int
     last: Int
+
+    # Filter by offer type(s). Gravity defaults to all a users partner offers when omitted.
+    offerType: [PartnerOfferTypeEnum]
     page: Int
     size: Int
     sort: PartnerOfferToCollectorSorts

src/Apps/Conversations/ConversationsContext.tsx

@@ -112,7 +112,7 @@ export const useConversationsContext = () => {
 const VIEWER_FRAGMENT = graphql`
   fragment ConversationsContext_viewer on Viewer {
     me {
-      partnerOffersConnection(first: 100) {
+      partnerOffersConnection(first: 100, offerType: [PERSONALIZED]) {
         edges {
           node {
             artworkId

src/Apps/Conversations/components/ConversationCTA/ConversationCTA.tsx

@@ -1,6 +1,7 @@
 import VerifiedIcon from "@artsy/icons/VerifiedIcon"
 import { Box, Flex, type FlexProps, Spacer, Text } from "@artsy/palette"
 import { themeGet } from "@styled-system/theme-get"
+import { useFlag } from "@unleash/proxy-client-react"
 import { useConversationsContext } from "Apps/Conversations/ConversationsContext"
 import { ConversationConfirmModal } from "Apps/Conversations/components/ConversationCTA/ConversationConfirmModal"
 import { ConversationMakeOfferButton } from "Apps/Conversations/components/ConversationCTA/ConversationMakeOfferButton"
@@ -31,6 +32,8 @@ export const ConversationCTA: React.FC<
     partnerOffer?.endAt ?? new Date(0).toISOString(),
   )
 
+  const isPartnerOfferConvoEnabled = useFlag("topaz_partner-offer-convo")
+
   const activeOrder = extractNodes(data.activeOrderCTA)[0]
   const activePartnerOffer =
     !activeOrder && partnerOffer && !partnerOfferTimer.hasEnded
@@ -50,7 +53,12 @@ export const ConversationCTA: React.FC<
   const canPurchase = artwork.isAcquireable || !!activePartnerOffer
   const canMakeOffer = artwork.isOfferable || artwork.isOfferableFromInquiry
   const showTransactionButtons =
-    !activeOrder && artwork.published && (canPurchase || canMakeOffer)
+    !activeOrder &&
+    // When the new convo offer UI is on, an active offer is shown via the CTA
+    // bar instead, so the transaction buttons are suppressed.
+    !(isPartnerOfferConvoEnabled && activePartnerOffer) &&
+    artwork.published &&
+    (canPurchase || canMakeOffer)
 
   return (
     <>

src/Apps/Conversations/components/ConversationCTA/__tests__/ConversationCTA.jest.tsx

@@ -1,4 +1,5 @@
 import { screen } from "@testing-library/react"
+import { useFlag } from "@unleash/proxy-client-react"
 import { ConversationsProvider } from "Apps/Conversations/ConversationsContext"
 import { ConversationCTA } from "Apps/Conversations/components/ConversationCTA/ConversationCTA"
 import { setupTestWrapperTL } from "DevTools/setupTestWrapperTL"
@@ -10,6 +11,8 @@ jest.unmock("react-relay")
 jest.mock("react-tracking")
 jest.mock("System/Hooks/useSystemContext")
 
+const mockUseFlag = useFlag as jest.Mock
+
 describe("ConversationCTA", () => {
   const { renderWithRelay } = setupTestWrapperTL({
     Component: (props: any) => (
@@ -190,34 +193,61 @@ describe("ConversationCTA", () => {
       expect(screen.queryByText("Purchase")).not.toBeInTheDocument()
       expect(screen.queryByText("Make an Offer")).not.toBeInTheDocument()
     })
-    it("renders purchase button on orders with an active partner offer", () => {
+    const offerViewer = () => {
       const futureTime = new Date()
       futureTime.setHours(futureTime.getHours() + 1)
 
-      renderWithRelay({
-        Conversation: mockConversationWithArtwork({
-          internalID: "artwork-id",
-          isAcquireable: false,
-        }),
-        Viewer: () => ({
-          me: {
-            partnerOffersConnection: {
-              edges: [
-                {
-                  node: {
-                    internalID: "partner-offer-id",
-                    artworkId: "artwork-id",
-                    endAt: futureTime.toISOString(),
-                  },
+      return () => ({
+        me: {
+          partnerOffersConnection: {
+            edges: [
+              {
+                node: {
+                  internalID: "partner-offer-id",
+                  artworkId: "artwork-id",
+                  endAt: futureTime.toISOString(),
                 },
-              ],
-            },
+              },
+            ],
           },
-        }),
+        },
       })
+    }
 
-      expect(screen.queryByText("Purchase")).toBeInTheDocument()
-      expect(screen.queryByText("Make an Offer")).not.toBeInTheDocument()
+    describe("with the partner-offer-convo flag on", () => {
+      beforeEach(() => {
+        mockUseFlag.mockImplementation(() => true)
+      })
+
+      it("hides the transaction buttons when there is an active partner offer", () => {
+        renderWithRelay({
+          Conversation: mockConversationWithArtwork({
+            internalID: "artwork-id",
+            isAcquireable: true,
+          }),
+          Viewer: offerViewer(),
+        })
+
+        expect(screen.queryByText("Purchase")).not.toBeInTheDocument()
+        expect(screen.queryByText("Make an Offer")).not.toBeInTheDocument()
+      })
+    })
+
+    describe("with the partner-offer-convo flag off", () => {
+      beforeEach(() => {
+        mockUseFlag.mockImplementation(() => false)
+      })
+
+      it("ignores the partner offer and shows the normal transaction buttons", () => {
+        renderWithRelay({
+          Conversation: mockConversationWithArtwork({
+            internalID: "artwork-id",
+            isAcquireable: true,
+          }),
+          Viewer: offerViewer(),
+        })
+        expect(screen.queryByText("Purchase")).toBeInTheDocument()
+      })
     })
 
     it("renders Make Offer button on MO-only artworks", () => {

src/Apps/Conversations/components/ConversationReply.tsx

@@ -1,6 +1,7 @@
 import { sentConversationMessage } from "@artsy/cohesion"
 import { Button, Flex, TextArea, useToasts } from "@artsy/palette"
 import { ConversationCTA } from "Apps/Conversations/components/ConversationCTA/ConversationCTA"
+import { ConversationPartnerOfferCTA } from "Apps/Conversations/components/Message/ConversationPartnerOfferCTA"
 import { useSendConversationMessage } from "Apps/Conversations/mutations/useSendConversationMessage"
 import { useRouter } from "System/Hooks/useRouter"
 import { useSystemContext } from "System/Hooks/useSystemContext"
@@ -53,6 +54,7 @@ export const ConversationReply: FC<
           item {
             ... on Artwork {
               id
+              ...ConversationPartnerOfferCTA_artwork
             }
           }
         }
@@ -172,6 +174,8 @@ export const ConversationReply: FC<
       backgroundColor="mono5"
       flexDirection="column"
     >
+      <ConversationPartnerOfferCTA artwork={data.items?.[0]?.item} />
+
       <ConversationCTA conversation={data} px={1} pt={1} />
 
       <form name="reply" onSubmit={handleSubmit}>

src/Apps/Conversations/components/Message/ConversationPartnerOfferCTA.tsx

@@ -0,0 +1,79 @@
+import ChevronRightIcon from "@artsy/icons/ChevronRightIcon"
+import { Clickable, Flex, Message, Text } from "@artsy/palette"
+import { useFlag } from "@unleash/proxy-client-react"
+import { useConversationsContext } from "Apps/Conversations/ConversationsContext"
+import { RouterLink } from "System/Components/RouterLink"
+import { useTimer } from "Utils/Hooks/useTimer"
+import type { ConversationPartnerOfferCTA_artwork$key } from "__generated__/ConversationPartnerOfferCTA_artwork.graphql"
+import type { FC } from "react"
+import { graphql, useFragment } from "react-relay"
+
+interface ConversationPartnerOfferCTAProps {
+  artwork?: ConversationPartnerOfferCTA_artwork$key | null
+}
+
+export const ConversationPartnerOfferCTA: FC<
+  React.PropsWithChildren<ConversationPartnerOfferCTAProps>
+> = ({ artwork }) => {
+  const isPartnerOfferConvoEnabled = useFlag("topaz_partner-offer-convo")
+
+  const data = useFragment(ARTWORK_FRAGMENT, artwork)
+
+  const { findPartnerOffer } = useConversationsContext()
+
+  const partnerOffer = data?.internalID
+    ? findPartnerOffer(data.internalID)
+    : null
+
+  const { hasEnded } = useTimer(partnerOffer?.endAt ?? "")
+
+  if (!isPartnerOfferConvoEnabled || !partnerOffer || !data?.href) {
+    return null
+  }
+
+  if (hasEnded || !partnerOffer.isAvailable) {
+    return null
+  }
+
+  const message = partnerOffer.priceWithDiscount?.display
+    ? `Offer Received for ${partnerOffer.priceWithDiscount.display}`
+    : "Offer Received"
+
+  const href = `${data.href}?partner_offer_id=${partnerOffer.internalID}`
+
+  return (
+    <Clickable width="100%">
+      <RouterLink
+        to={href}
+        target="_blank"
+        textDecoration="none"
+        data-testid="partnerOfferActionLink"
+      >
+        <Flex
+          flexDirection="row"
+          justifyContent="space-between"
+          alignContent="center"
+          alignItems="center"
+        >
+          <Message variant="info" title={message} width="100%">
+            <Text variant="sm">Tap to review the offer from the gallery</Text>
+          </Message>
+
+          <ChevronRightIcon
+            fill="mono100"
+            position="absolute"
+            right={0}
+            pr={4}
+          />
+        </Flex>
+      </RouterLink>
+    </Clickable>
+  )
+}
+
+const ARTWORK_FRAGMENT = graphql`
+  fragment ConversationPartnerOfferCTA_artwork on Artwork {
+    internalID
+    href
+  }
+`