From 0ce38863724d6ab0ae1f3e50553e9addf1572954 Mon Sep 17 00:00:00 2001
From: Brian Beckerle <49686530+brainbicycle@users.noreply.github.com>
Date: Mon, 29 Apr 2024 16:30:54 -0400
Subject: [PATCH] fix: update contact gallery for private artwork to match spec
 (#10174)

---
 src/app/Scenes/Artwork/Artwork.tsx            |  4 +-
 .../Scenes/Artwork/Components/PartnerCard.tsx | 18 +++++--
 .../Components/ShortContactGallery.tsx        | 48 +++++++++++++++++++
 3 files changed, 64 insertions(+), 6 deletions(-)
 create mode 100644 src/app/Scenes/Artwork/Components/ShortContactGallery.tsx

diff --git a/src/app/Scenes/Artwork/Artwork.tsx b/src/app/Scenes/Artwork/Artwork.tsx
index 0a61aebc80b..0ebd80384c5 100644
--- a/src/app/Scenes/Artwork/Artwork.tsx
+++ b/src/app/Scenes/Artwork/Artwork.tsx
@@ -367,7 +367,7 @@ export const Artwork: React.FC<ArtworkProps> = (props) => {
           element: (
             <PartnerCard
               artwork={artworkBelowTheFold}
-              onlyShowQuestions={
+              showShortContactGallery={
                 !!artworkAboveTheFold?.isUnlisted && !!artworkBelowTheFold.partner?.isInquireable
               }
             />
@@ -455,7 +455,7 @@ export const Artwork: React.FC<ArtworkProps> = (props) => {
           <PartnerCard
             shouldShowQuestions={!!artworkBelowTheFold.partner?.isInquireable}
             artwork={artworkBelowTheFold}
-            onlyShowQuestions={
+            showShortContactGallery={
               !!artworkAboveTheFold?.isUnlisted && !!artworkBelowTheFold.partner?.isInquireable
             }
           />
diff --git a/src/app/Scenes/Artwork/Components/PartnerCard.tsx b/src/app/Scenes/Artwork/Components/PartnerCard.tsx
index 6c30e1b70ee..43c2eefd3b5 100644
--- a/src/app/Scenes/Artwork/Components/PartnerCard.tsx
+++ b/src/app/Scenes/Artwork/Components/PartnerCard.tsx
@@ -1,5 +1,6 @@
 import { Spacer, Flex, Text, EntityHeader } from "@artsy/palette-mobile"
 import { PartnerCard_artwork$data } from "__generated__/PartnerCard_artwork.graphql"
+import { ShortContactGallery } from "app/Scenes/Artwork/Components/ShortContactGallery"
 import { navigateToPartner } from "app/system/navigation/navigate"
 import { limitWithCount } from "app/utils/limitWithCount"
 import { compact } from "lodash"
@@ -12,13 +13,13 @@ interface PartnerCardProps {
   artwork: PartnerCard_artwork$data
   relay: RelayProp
   shouldShowQuestions?: boolean
-  onlyShowQuestions?: boolean
+  showShortContactGallery?: boolean
 }
 
 export const PartnerCard: React.FC<PartnerCardProps> = ({
   artwork,
   shouldShowQuestions,
-  onlyShowQuestions,
+  showShortContactGallery,
 }) => {
   const handleTap = (href: string) => navigateToPartner(href)
 
@@ -48,8 +49,16 @@ export const PartnerCard: React.FC<PartnerCardProps> = ({
 
   const partnerTypeDisplayText = partner.type === "Gallery" ? partner.type : "Institution"
 
-  if (onlyShowQuestions) {
-    return <Questions artwork={artwork} />
+  if (showShortContactGallery) {
+    return (
+      <ShortContactGallery
+        artwork={artwork}
+        showPartnerType={showPartnerType}
+        partnerName={partner.name}
+        partnerHref={partner.href ?? undefined}
+        locationNames={locationNames}
+      />
+    )
   }
 
   return (
@@ -84,6 +93,7 @@ export const PartnerCardFragmentContainer = createFragmentContainer(PartnerCard,
   artwork: graphql`
     fragment PartnerCard_artwork on Artwork {
       ...Questions_artwork
+      ...ShortContactGallery_artwork
       sale {
         isBenefit
         isGalleryAuction
diff --git a/src/app/Scenes/Artwork/Components/ShortContactGallery.tsx b/src/app/Scenes/Artwork/Components/ShortContactGallery.tsx
new file mode 100644
index 00000000000..c6ac119ad95
--- /dev/null
+++ b/src/app/Scenes/Artwork/Components/ShortContactGallery.tsx
@@ -0,0 +1,48 @@
+import { EntityHeader, EnvelopeIcon, Flex } from "@artsy/palette-mobile"
+import { ShortContactGallery_artwork$key } from "__generated__/ShortContactGallery_artwork.graphql"
+import { navigateToPartner } from "app/system/navigation/navigate"
+import { TouchableWithoutFeedback } from "react-native"
+import { graphql, useFragment } from "react-relay"
+import { InquiryButtonsFragmentContainer } from "./CommercialButtons/InquiryButtons"
+
+interface ShortContactGalleryProps {
+  artwork: ShortContactGallery_artwork$key
+  partnerHref?: string
+  partnerName?: string | null
+  locationNames?: string | null
+  showPartnerType?: boolean
+}
+
+export const ShortContactGallery: React.FC<ShortContactGalleryProps> = (props) => {
+  const artworkData = useFragment(artworkFragment, props.artwork)
+
+  return (
+    <Flex flexDirection="row" flexWrap="wrap" justifyContent="space-between" alignItems="center">
+      <TouchableWithoutFeedback
+        onPress={() => {
+          if (props.partnerHref) {
+            navigateToPartner(props.partnerHref)
+          }
+        }}
+      >
+        <EntityHeader
+          name={props.partnerName ?? ""}
+          meta={props.locationNames ?? ""}
+          style={{ flex: 1 }}
+        />
+      </TouchableWithoutFeedback>
+      <InquiryButtonsFragmentContainer
+        artwork={artworkData}
+        variant="outline"
+        size="small"
+        icon={<EnvelopeIcon fill="black100" width="16px" height="16px" />}
+      />
+    </Flex>
+  )
+}
+
+const artworkFragment = graphql`
+  fragment ShortContactGallery_artwork on Artwork {
+    ...InquiryButtons_artwork
+  }
+`