Chore: [EMI-1804] show unavailable banner for unavailable partner off…

…er (#13722)

* show unavailable banner for unavailable partner offer
* restructure ArtworkPageBanner: now shows only one banner

src/Apps/Artwork/Components/ArtworkPageBanner.tsx

@@ -26,77 +26,80 @@ export const ArtworkPageBanner: FC<ArtworkPageBannerProps> = props => {
   const privateArtworksEnabled = useFeatureFlag(
     "amber_artwork_visibility_unlisted"
   )
-
-  // Show unlisted artwork banner if the artwork is unlisted and associated with
-  // a partner (i.e. not a user's private collection artwork)
-  const showUnlistedArtworkBanner = !!(
-    privateArtworksEnabled &&
-    artwork?.visibilityLevel == "UNLISTED" &&
-    artwork?.partner
-  )
-
-  const expectedPartnerOfferID = match?.location?.query?.partner_offer_id as
-    | string
-    | undefined
+  const expectedPartnerOfferID = partnerOfferVisibilityEnabled
+    ? (match?.location?.query?.partner_offer_id as string | undefined)
+    : undefined
 
   const partnerOffer = expectedPartnerOfferID
     ? extractNodes(me?.partnerOffersConnection)[0]
     : null
 
-  // show expired if query param says to expect one and it's not found
-  const expectedPartnerOfferNotFound =
-    partnerOfferVisibilityEnabled &&
-    expectedPartnerOfferID &&
-    (!partnerOffer || partnerOffer.internalID !== expectedPartnerOfferID)
-
-  // show expired imperatively if the query param is present
-  const showExpiredOfferBanner =
-    expectedPartnerOfferNotFound || !!match?.location?.query?.expired_offer
-
-  // show unavailable artwork imperatively if the query param is present
-  const showUnavailableArtworkBanner = !!match?.location?.query?.unavailable
-
-  // [Maybe] show banners associated with auction closing times
-  const showCascadingEndTimesBanner = !!artwork.sale
-
-  const showUnpublishedArtworkBanner = !artwork.published
-
-  return (
-    <>
-      {showUnpublishedArtworkBanner && (
-        <FullBleedBanner variant="error">
-          <Text>This work is not currently published on Artsy.</Text>
-        </FullBleedBanner>
-      )}
-
-      {showCascadingEndTimesBanner && (
-        <CascadingEndTimesBannerFragmentContainer sale={artwork.sale} />
-      )}
-      {showUnlistedArtworkBanner && artwork.partner && (
-        <UnlistedArtworkBannerFragmentContainer partner={artwork.partner} />
-      )}
-
-      {showExpiredOfferBanner && (
-        <FullBleedBanner variant="brand">
-          <Text>
-            This offer has expired. Please make an offer, purchase, or contact
-            the gallery.
-          </Text>
-        </FullBleedBanner>
-      )}
-
-      {showUnavailableArtworkBanner && (
-        <FullBleedBanner variant="brand">
-          <Text>
-            Sorry, this artwork is no longer available. Please create an alert
-            or contact the gallery to find similar artworks.
-          </Text>
-        </FullBleedBanner>
-      )}
-    </>
-  )
+  const queryParams = match.location.query
+
+  // First show banners requested imperatively from the query string
+  if (!!queryParams.unavailable) {
+    return <ArtworkUnavailableBanner />
+  }
+
+  if (!!queryParams.expired_offer) {
+    return <ExpiredOfferBanner />
+  }
+
+  if (!!artwork.sale) {
+    return <CascadingEndTimesBannerFragmentContainer sale={artwork.sale} />
+  }
+
+  if (!artwork.published) {
+    return <UnpublishedArtworkBanner />
+  }
+
+  if (
+    !!(
+      privateArtworksEnabled &&
+      artwork?.visibilityLevel == "UNLISTED" &&
+      artwork?.partner
+    )
+  ) {
+    return <UnlistedArtworkBannerFragmentContainer partner={artwork.partner} />
+  }
+
+  if (expectedPartnerOfferID) {
+    if (!artwork.isPurchasable) {
+      return <ArtworkUnavailableBanner />
+    }
+
+    if (!partnerOffer || partnerOffer.internalID !== expectedPartnerOfferID) {
+      return <ExpiredOfferBanner />
+    }
+  }
+
+  return null
 }
 
+const ArtworkUnavailableBanner = () => (
+  <FullBleedBanner variant="brand">
+    <Text>
+      Sorry, this artwork is no longer available. Please create an alert or
+      contact the gallery to find similar artworks.
+    </Text>
+  </FullBleedBanner>
+)
+
+const ExpiredOfferBanner = () => (
+  <FullBleedBanner variant="brand">
+    <Text>
+      This offer has expired. Please make an offer, purchase, or contact the
+      gallery.
+    </Text>
+  </FullBleedBanner>
+)
+
+const UnpublishedArtworkBanner = () => (
+  <FullBleedBanner variant="error">
+    <Text>This work is not currently published on Artsy.</Text>
+  </FullBleedBanner>
+)
+
 const ME_FRAGMENT = graphql`
   fragment ArtworkPageBanner_me on Me
     @argumentDefinitions(artworkID: { type: "String!" }) {
@@ -114,6 +117,7 @@ const ARTWORK_FRAGMENT = graphql`
   fragment ArtworkPageBanner_artwork on Artwork {
     published
     visibilityLevel
+    isPurchasable
     partner {
       __typename
       ...UnlistedArtworkBanner_partner

src/Apps/Artwork/Components/__tests__/ArtworkPageBanner.jest.tsx

@@ -33,6 +33,7 @@ beforeEach(() => {
   mockUseRouter.mockClear()
   artworkMock = {
     sale: null,
+    isPurchasable: true,
   }
   meMock = {}
 })
@@ -197,6 +198,60 @@ describe("ArtworkPageBanner", () => {
       })
     })
 
+    it("shows the partner offer banner if the user has a matching partner offer but it is not purchasable", async () => {
+      renderWithRelay({
+        Artwork: () => ({ ...artworkMock, isPurchasable: false }),
+        Me: () => ({
+          ...meMock,
+          partnerOffersConnection: {
+            edges: [
+              {
+                node: {
+                  internalID: "123",
+                },
+              },
+            ],
+          },
+        }),
+      })
+
+      await waitFor(() => {
+        expect(
+          screen.getByText(
+            "Sorry, this artwork is no longer available. Please create an alert or contact the gallery to find similar artworks."
+          )
+        ).toBeInTheDocument()
+
+        expect(getAllBannerTexts()).toEqual([
+          "Sorry, this artwork is no longer available. Please create an alert or contact the gallery to find similar artworks.",
+        ])
+      })
+    })
+
+    it("shows the partner offer banner if the user has no matching partner offer and it is not purchasable", async () => {
+      renderWithRelay({
+        Artwork: () => ({ ...artworkMock, isPurchasable: false }),
+        Me: () => ({
+          ...meMock,
+          partnerOffersConnection: {
+            edges: [],
+          },
+        }),
+      })
+
+      await waitFor(() => {
+        expect(
+          screen.getByText(
+            "Sorry, this artwork is no longer available. Please create an alert or contact the gallery to find similar artworks."
+          )
+        ).toBeInTheDocument()
+
+        expect(getAllBannerTexts()).toEqual([
+          "Sorry, this artwork is no longer available. Please create an alert or contact the gallery to find similar artworks.",
+        ])
+      })
+    })
+
     it("does not show the partner offer banner if the user has a matching partner offer", async () => {
       renderWithRelay({
         Artwork: () => artworkMock,