feat: Reorganize sell screen (#10165)

* feat: Reorganize sell screen

* tests

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,
-  }),
-}

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",
-  }),
-}

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,
-  }),
-}

src/app/Scenes/SellWithArtsy/Components/MeetTheSpecialists.tsx

@@ -151,6 +151,7 @@ const Specialist: React.FC<SpecialistProps> = ({ specialist, onInquiryPress }) =
         <Button
           size="small"
           variant="outlineLight"
+          testID="MeetTheSpecialists-contact-CTA"
           onPress={() => {
             onInquiryPress(
               tracks.consignmentInquiryTapped(buttonText),

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} />

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",
+  }),
+}

src/app/Scenes/SellWithArtsy/SellWithArtsyHome.tsx

@@ -8,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"
@@ -97,15 +98,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 +118,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>
   )

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",
           })
         )
       })