From 89bebfa8793899ac4703a918c9556b8c5d97369b Mon Sep 17 00:00:00 2001
From: Ole <ole.richter91@gmail.com>
Date: Mon, 29 Apr 2024 13:40:27 +0200
Subject: [PATCH 1/2] feat: Reorganize sell screen

---
 .../SellWithArtsy/Components/Footer.tsx       | 39 +---------
 .../SellWithArtsy/Components/Header.tsx       | 64 +---------------
 .../SellWithArtsy/Components/HowItWorks.tsx   | 27 +------
 .../Components/SellWithArtsyRecentlySold.tsx  |  2 +-
 .../Components/StickySWAHeader.tsx            | 76 +++++++++++++++++++
 .../SellWithArtsy/SellWithArtsyHome.tsx       | 39 ++++++++--
 6 files changed, 118 insertions(+), 129 deletions(-)
 create mode 100644 src/app/Scenes/SellWithArtsy/Components/StickySWAHeader.tsx

diff --git a/src/app/Scenes/SellWithArtsy/Components/Footer.tsx b/src/app/Scenes/SellWithArtsy/Components/Footer.tsx
index 2cb5a97b063..8e73db9a327 100644
--- a/src/app/Scenes/SellWithArtsy/Components/Footer.tsx
+++ b/src/app/Scenes/SellWithArtsy/Components/Footer.tsx
@@ -1,34 +1,10 @@
-import { ContextModule, OwnerType, TappedConsignArgs } from "@artsy/cohesion"
-import { Flex, Spacer, Text, Separator, Button } from "@artsy/palette-mobile"
+import { Flex, Text, Separator } from "@artsy/palette-mobile"
 import { navigate } from "app/system/navigation/navigate"
 import { isTablet } from "react-native-device-info"
 
-export const Footer: React.FC<{
-  onConsignPress: (tappedConsignArgs: TappedConsignArgs) => void
-}> = ({ onConsignPress }) => {
-  const buttonText = "Start Selling"
-
+export const Footer: React.FC = () => {
   return (
     <Flex mx={2} alignItems={isTablet() ? "center" : undefined}>
-      <Text variant="lg-display" textAlign="center">
-        Meet your new art advisor.{"\n"}It’s Artsy.
-      </Text>
-
-      <Spacer y={2} />
-
-      <Button
-        testID="footer-consign-CTA"
-        block={!isTablet()}
-        minWidth={isTablet() ? "50%" : undefined}
-        onPress={() => {
-          onConsignPress(tracks.consignArgs(buttonText))
-        }}
-      >
-        {buttonText}
-      </Button>
-
-      <Spacer y={4} />
-
       <Separator />
 
       <Flex my={2}>
@@ -41,20 +17,13 @@ export const Footer: React.FC<{
             onPress={() => navigate("https://partners.artsy.net/")}
             style={{ textDecorationLine: "underline" }}
           >
-            {" "}
             Become a partner
           </Text>{" "}
           to access the world’s largest online art marketplace.
         </Text>
       </Flex>
+
+      <Separator />
     </Flex>
   )
 }
-
-const tracks = {
-  consignArgs: (subject: string): TappedConsignArgs => ({
-    contextModule: ContextModule.sellFooter,
-    contextScreenOwnerType: OwnerType.sell,
-    subject,
-  }),
-}
diff --git a/src/app/Scenes/SellWithArtsy/Components/Header.tsx b/src/app/Scenes/SellWithArtsy/Components/Header.tsx
index caacd512b6e..e58c0002157 100644
--- a/src/app/Scenes/SellWithArtsy/Components/Header.tsx
+++ b/src/app/Scenes/SellWithArtsy/Components/Header.tsx
@@ -1,32 +1,11 @@
-import {
-  ActionType,
-  ContextModule,
-  OwnerType,
-  TappedConsignArgs,
-  TappedConsignmentInquiry,
-} from "@artsy/cohesion"
-import { Flex, Text, Button } from "@artsy/palette-mobile"
+import { Flex, Text } from "@artsy/palette-mobile"
 import { useScreenDimensions } from "app/utils/hooks"
 import { Image } from "react-native"
 import { isTablet } from "react-native-device-info"
 
-interface HeaderProps {
-  onConsignPress: (tappedConsignArgs: TappedConsignArgs) => void
-  onInquiryPress: (inquiryTrackingArgs?: TappedConsignmentInquiry) => void
-}
-
-export const Header: React.FC<HeaderProps> = ({ onConsignPress, onInquiryPress }) => {
-  const buttonText = "Start Selling"
+export const Header: React.FC = () => {
   const { width } = useScreenDimensions()
 
-  const handleSubmitPress = (subject: string) => {
-    onConsignPress(tracks.consignArgs(subject))
-  }
-
-  const handleInquiryPress = () => {
-    onInquiryPress(tracks.consignmentInquiryTapped())
-  }
-
   return (
     <Flex>
       <Image
@@ -39,48 +18,11 @@ export const Header: React.FC<HeaderProps> = ({ onConsignPress, onInquiryPress }
         <Text variant="xl" mb={1}>
           Sell art from your collection
         </Text>
-        <Text variant="xs" mb={2}>
+        <Text variant="xs">
           With our global reach and art market expertise, our specialists will find the best sales
           option for your work.
         </Text>
-        <Flex justifyContent="center" alignItems="center">
-          <Button
-            testID="header-consign-CTA"
-            block
-            onPress={() => {
-              handleSubmitPress(buttonText)
-            }}
-            my={1}
-            variant="fillDark"
-          >
-            {buttonText}
-          </Button>
-          <Button
-            testID="Header-inquiry-CTA"
-            block
-            onPress={handleInquiryPress}
-            my={1}
-            variant="outline"
-          >
-            Get in Touch
-          </Button>
-        </Flex>
       </Flex>
     </Flex>
   )
 }
-
-const tracks = {
-  consignArgs: (subject: string): TappedConsignArgs => ({
-    contextModule: ContextModule.sellHeader,
-    contextScreenOwnerType: OwnerType.sell,
-    subject,
-  }),
-  consignmentInquiryTapped: (): TappedConsignmentInquiry => ({
-    action: ActionType.tappedConsignmentInquiry,
-    context_module: ContextModule.sellHeader,
-    context_screen: OwnerType.sell,
-    context_screen_owner_type: OwnerType.sell,
-    subject: "Get in Touch",
-  }),
-}
diff --git a/src/app/Scenes/SellWithArtsy/Components/HowItWorks.tsx b/src/app/Scenes/SellWithArtsy/Components/HowItWorks.tsx
index cbe399a89ce..84167fe1a70 100644
--- a/src/app/Scenes/SellWithArtsy/Components/HowItWorks.tsx
+++ b/src/app/Scenes/SellWithArtsy/Components/HowItWorks.tsx
@@ -1,5 +1,4 @@
-import { ContextModule, OwnerType, TappedConsignArgs } from "@artsy/cohesion"
-import { Spacer, Flex, Text, Join, Button } from "@artsy/palette-mobile"
+import { Spacer, Flex, Text, Join } from "@artsy/palette-mobile"
 
 const STEPS = [
   {
@@ -20,11 +19,7 @@ const STEPS = [
   },
 ]
 
-export const HowItWorks: React.FC<{
-  onConsignPress: (tappedConsignArgs: TappedConsignArgs) => void
-}> = ({ onConsignPress }) => {
-  const buttonText = "Start Selling"
-
+export const HowItWorks: React.FC = () => {
   return (
     <Flex mx={2}>
       <Text variant="lg-display">How it works</Text>
@@ -38,25 +33,7 @@ export const HowItWorks: React.FC<{
             <Text variant="xs">{step.text}</Text>
           </Flex>
         ))}
-        <Spacer y={2} />
-        <Button
-          testID="HowItWorks-consign-CTA"
-          block
-          onPress={() => {
-            onConsignPress(tracks.consignArgs(buttonText))
-          }}
-        >
-          {buttonText}
-        </Button>
       </Join>
     </Flex>
   )
 }
-
-const tracks = {
-  consignArgs: (subject: string): TappedConsignArgs => ({
-    contextModule: ContextModule.sellHowItWorks,
-    contextScreenOwnerType: OwnerType.sell,
-    subject,
-  }),
-}
diff --git a/src/app/Scenes/SellWithArtsy/Components/SellWithArtsyRecentlySold.tsx b/src/app/Scenes/SellWithArtsy/Components/SellWithArtsyRecentlySold.tsx
index 7f44618c95e..0839c5e19ce 100644
--- a/src/app/Scenes/SellWithArtsy/Components/SellWithArtsyRecentlySold.tsx
+++ b/src/app/Scenes/SellWithArtsy/Components/SellWithArtsyRecentlySold.tsx
@@ -32,7 +32,7 @@ export const SellWithArtsyRecentlySold: React.FC<SellWithArtsyRecentlySoldProps>
   return (
     <Flex>
       <Text px={2} variant="lg-display">
-        Sold Recently on Artsy
+        Previously sold on Artsy
       </Text>
 
       <Spacer y={2} />
diff --git a/src/app/Scenes/SellWithArtsy/Components/StickySWAHeader.tsx b/src/app/Scenes/SellWithArtsy/Components/StickySWAHeader.tsx
new file mode 100644
index 00000000000..c1fe380a4a0
--- /dev/null
+++ b/src/app/Scenes/SellWithArtsy/Components/StickySWAHeader.tsx
@@ -0,0 +1,76 @@
+import {
+  ActionType,
+  ContextModule,
+  OwnerType,
+  TappedConsignArgs,
+  TappedConsignmentInquiry,
+} from "@artsy/cohesion"
+import { Flex, Text, Button, Spacer, LinkText, useScreenDimensions } from "@artsy/palette-mobile"
+import { Platform } from "react-native"
+
+interface StickySWAHeaderProps {
+  onConsignPress: (tappedConsignArgs: TappedConsignArgs) => void
+  onInquiryPress: (inquiryTrackingArgs?: TappedConsignmentInquiry) => void
+}
+
+export const StickySWAHeader: React.FC<StickySWAHeaderProps> = ({
+  onConsignPress,
+  onInquiryPress,
+}) => {
+  const { bottom } = useScreenDimensions().safeAreaInsets
+
+  const handleSubmitPress = (subject: string) => {
+    onConsignPress(tracks.consignArgs(subject))
+  }
+
+  const handleInquiryPress = () => {
+    onInquiryPress(tracks.consignmentInquiryTapped())
+  }
+
+  return (
+    <>
+      <Flex
+        p={2}
+        mb={`${bottom}px`}
+        pb={Platform.OS === "android" ? 2 : 0}
+        borderTopWidth={1}
+        borderTopColor="black10"
+      >
+        <Button
+          testID="header-consign-CTA"
+          block
+          onPress={() => {
+            handleSubmitPress("Start Selling")
+          }}
+          variant="fillDark"
+        >
+          Start Selling
+        </Button>
+
+        <Spacer y={1} />
+
+        <Text variant="xs" mb={1}>
+          Not sure what you’re looking for?{" "}
+          <LinkText testID="StickySWAHeader-inquiry-CTA" onPress={handleInquiryPress}>
+            <Text variant="xs">Speak to an advisor</Text>
+          </LinkText>
+        </Text>
+      </Flex>
+    </>
+  )
+}
+
+const tracks = {
+  consignArgs: (subject: string): TappedConsignArgs => ({
+    contextModule: ContextModule.sellHeader,
+    contextScreenOwnerType: OwnerType.sell,
+    subject,
+  }),
+  consignmentInquiryTapped: (): TappedConsignmentInquiry => ({
+    action: ActionType.tappedConsignmentInquiry,
+    context_module: ContextModule.sellHeader,
+    context_screen: OwnerType.sell,
+    context_screen_owner_type: OwnerType.sell,
+    subject: "Get in Touch",
+  }),
+}
diff --git a/src/app/Scenes/SellWithArtsy/SellWithArtsyHome.tsx b/src/app/Scenes/SellWithArtsy/SellWithArtsyHome.tsx
index d56414e263e..a4a89f01f4b 100644
--- a/src/app/Scenes/SellWithArtsy/SellWithArtsyHome.tsx
+++ b/src/app/Scenes/SellWithArtsy/SellWithArtsyHome.tsx
@@ -1,4 +1,11 @@
-import { tappedConsign, TappedConsignArgs, TappedConsignmentInquiry } from "@artsy/cohesion"
+import {
+  ActionType,
+  ContextModule,
+  OwnerType,
+  tappedConsign,
+  TappedConsignArgs,
+  TappedConsignmentInquiry,
+} from "@artsy/cohesion"
 import { Flex, Join, LegacyScreen, Spacer } from "@artsy/palette-mobile"
 import { SellWithArtsyHomeQuery } from "__generated__/SellWithArtsyHomeQuery.graphql"
 import { SellWithArtsyHome_me$data } from "__generated__/SellWithArtsyHome_me.graphql"
@@ -25,6 +32,7 @@ import { Footer } from "./Components/Footer"
 import { Header } from "./Components/Header"
 import { HowItWorks } from "./Components/HowItWorks"
 import { SellWithArtsyRecentlySold } from "./Components/SellWithArtsyRecentlySold"
+import { StickySWAHeader } from "app/Scenes/SellWithArtsy/Components/StickySWAHeader"
 
 interface SellWithArtsyHomeProps {
   recentlySoldArtworks?: SellWithArtsyHome_recentlySoldArtworksTypeConnection$data
@@ -97,15 +105,15 @@ export const SellWithArtsyHome: React.FC<SellWithArtsyHomeProps> = ({
       >
         <ScrollView showsVerticalScrollIndicator={false} ref={scrollViewRef}>
           <Join separator={<Spacer y={6} />}>
-            <Header onConsignPress={handleConsignPress} onInquiryPress={handleInquiryPress} />
+            <Header />
 
             <Highlights />
 
             <WaysWeSell />
 
-            <HowItWorks onConsignPress={handleConsignPress} />
+            <HowItWorks />
 
-            <SpeakToTheTeam onInquiryPress={handleInquiryPress} />
+            <FAQSWA />
 
             <MeetTheSpecialists onInquiryPress={handleInquiryPress} />
 
@@ -117,13 +125,15 @@ export const SellWithArtsyHome: React.FC<SellWithArtsyHomeProps> = ({
 
             <Testimonials />
 
-            <FAQSWA />
+            <SpeakToTheTeam onInquiryPress={handleInquiryPress} />
 
-            <Footer onConsignPress={handleConsignPress} />
+            <Footer />
           </Join>
 
-          <Spacer y={4} />
+          <Spacer y={2} />
         </ScrollView>
+
+        <StickySWAHeader onConsignPress={handleConsignPress} onInquiryPress={handleInquiryPress} />
       </Flex>
     </LegacyScreen.Background>
   )
@@ -175,3 +185,18 @@ export const SellWithArtsyHomeQueryRenderer: React.FC<SellWithArtsyHomeQueryRend
     />
   )
 }
+
+const tracks = {
+  consignArgs: (subject: string): TappedConsignArgs => ({
+    contextModule: ContextModule.sellHeader,
+    contextScreenOwnerType: OwnerType.sell,
+    subject,
+  }),
+  consignmentInquiryTapped: (): TappedConsignmentInquiry => ({
+    action: ActionType.tappedConsignmentInquiry,
+    context_module: ContextModule.sellHeader,
+    context_screen: OwnerType.sell,
+    context_screen_owner_type: OwnerType.sell,
+    subject: "Get in Touch",
+  }),
+}

From dacdeeb2ea47a62e3079891a4af70e91d61ff6fe Mon Sep 17 00:00:00 2001
From: Ole <ole.richter91@gmail.com>
Date: Mon, 29 Apr 2024 16:33:34 +0200
Subject: [PATCH 2/2] tests

---
 .../Components/MeetTheSpecialists.tsx         |  1 +
 .../SellWithArtsy/SellWithArtsyHome.tsx       | 26 ++-----------------
 src/app/Scenes/SellWithArtsy/index.tests.tsx  | 26 +++----------------
 3 files changed, 6 insertions(+), 47 deletions(-)

diff --git a/src/app/Scenes/SellWithArtsy/Components/MeetTheSpecialists.tsx b/src/app/Scenes/SellWithArtsy/Components/MeetTheSpecialists.tsx
index 0283750679c..aea71c03f99 100644
--- a/src/app/Scenes/SellWithArtsy/Components/MeetTheSpecialists.tsx
+++ b/src/app/Scenes/SellWithArtsy/Components/MeetTheSpecialists.tsx
@@ -192,6 +192,7 @@ const Specialist: React.FC<SpecialistProps> = ({ specialist, onInquiryPress }) =
         <Button
           size="small"
           variant="outlineLight"
+          testID="MeetTheSpecialists-contact-CTA"
           onPress={() => {
             onInquiryPress(
               tracks.consignmentInquiryTapped(buttonText),
diff --git a/src/app/Scenes/SellWithArtsy/SellWithArtsyHome.tsx b/src/app/Scenes/SellWithArtsy/SellWithArtsyHome.tsx
index a4a89f01f4b..fd67aad0533 100644
--- a/src/app/Scenes/SellWithArtsy/SellWithArtsyHome.tsx
+++ b/src/app/Scenes/SellWithArtsy/SellWithArtsyHome.tsx
@@ -1,11 +1,4 @@
-import {
-  ActionType,
-  ContextModule,
-  OwnerType,
-  tappedConsign,
-  TappedConsignArgs,
-  TappedConsignmentInquiry,
-} from "@artsy/cohesion"
+import { tappedConsign, TappedConsignArgs, TappedConsignmentInquiry } from "@artsy/cohesion"
 import { Flex, Join, LegacyScreen, Spacer } from "@artsy/palette-mobile"
 import { SellWithArtsyHomeQuery } from "__generated__/SellWithArtsyHomeQuery.graphql"
 import { SellWithArtsyHome_me$data } from "__generated__/SellWithArtsyHome_me.graphql"
@@ -15,6 +8,7 @@ import { FAQSWA } from "app/Scenes/SellWithArtsy/Components/FAQSWA"
 import { Highlights } from "app/Scenes/SellWithArtsy/Components/Highlights"
 import { MeetTheSpecialists } from "app/Scenes/SellWithArtsy/Components/MeetTheSpecialists"
 import { SpeakToTheTeam } from "app/Scenes/SellWithArtsy/Components/SpeakToTheTeam"
+import { StickySWAHeader } from "app/Scenes/SellWithArtsy/Components/StickySWAHeader"
 import { Testimonials } from "app/Scenes/SellWithArtsy/Components/Testimonials"
 import { WaysWeSell } from "app/Scenes/SellWithArtsy/Components/WaysWeSell"
 import { GlobalStore } from "app/store/GlobalStore"
@@ -32,7 +26,6 @@ import { Footer } from "./Components/Footer"
 import { Header } from "./Components/Header"
 import { HowItWorks } from "./Components/HowItWorks"
 import { SellWithArtsyRecentlySold } from "./Components/SellWithArtsyRecentlySold"
-import { StickySWAHeader } from "app/Scenes/SellWithArtsy/Components/StickySWAHeader"
 
 interface SellWithArtsyHomeProps {
   recentlySoldArtworks?: SellWithArtsyHome_recentlySoldArtworksTypeConnection$data
@@ -185,18 +178,3 @@ export const SellWithArtsyHomeQueryRenderer: React.FC<SellWithArtsyHomeQueryRend
     />
   )
 }
-
-const tracks = {
-  consignArgs: (subject: string): TappedConsignArgs => ({
-    contextModule: ContextModule.sellHeader,
-    contextScreenOwnerType: OwnerType.sell,
-    subject,
-  }),
-  consignmentInquiryTapped: (): TappedConsignmentInquiry => ({
-    action: ActionType.tappedConsignmentInquiry,
-    context_module: ContextModule.sellHeader,
-    context_screen: OwnerType.sell,
-    context_screen_owner_type: OwnerType.sell,
-    subject: "Get in Touch",
-  }),
-}
diff --git a/src/app/Scenes/SellWithArtsy/index.tests.tsx b/src/app/Scenes/SellWithArtsy/index.tests.tsx
index 6499fb93dd2..1484ed39a93 100644
--- a/src/app/Scenes/SellWithArtsy/index.tests.tsx
+++ b/src/app/Scenes/SellWithArtsy/index.tests.tsx
@@ -76,37 +76,17 @@ describe("New SellWithArtsyLandingPage", () => {
 
       it("tracks Inquiry Events", () => {
         renderWithWrappers(<TestWrapper />)
-        const headerInquiryButton = screen.getByTestId("Header-inquiry-CTA")
+        const headerInquiryButton = screen.getByTestId("MeetTheSpecialists-contact-CTA")
 
         fireEvent(headerInquiryButton, "onPress")
         expect(mockTrackEvent).toHaveBeenCalledTimes(1)
         expect(mockTrackEvent).toHaveBeenLastCalledWith(
           expect.objectContaining({
             action: "tappedConsignmentInquiry",
-            context_module: "sellHeader",
+            context_module: "sellMeetTheSpecialists",
             context_screen: "sell",
             context_screen_owner_type: "sell",
-            subject: "Get in Touch",
-          })
-        )
-      })
-    })
-
-    // HOWITWORKS
-    describe("HowItWorks Events", () => {
-      it("tracks Consign Events", () => {
-        renderWithWrappers(<TestWrapper />)
-        const headerConsignButton = screen.getByTestId("HowItWorks-consign-CTA")
-
-        fireEvent(headerConsignButton, "onPress")
-        expect(mockTrackEvent).toHaveBeenCalledTimes(1)
-        expect(mockTrackEvent).toHaveBeenLastCalledWith(
-          expect.objectContaining({
-            action: "tappedConsign",
-            context_module: "sellHowItWorks",
-            context_screen_owner_type: "sell",
-            destination_screen_owner_type: "consignmentSubmission",
-            subject: "Start Selling",
+            subject: "Contact Dana",
           })
         )
       })