feat(ONYX-1012): add tips for taking photos info modal to photo uploa…

…d step (#10369)

* feat: add tips step

* chore: adjust top navigation

* feat: add pictires, adjust layout

* chore: adjust back navigation on the top navigation component

* chore: address review comments

Co-authored-by: Ole <ole.richter91@gmail.com>
Co-authored-by: dariakoko <nargle30@gmail.com>

* chore: adjust link size

---------

Co-authored-by: Mounir Dhahri <soussouheros@gmail.com>
Co-authored-by: Ole <ole.richter91@gmail.com>

src/app/Scenes/SellWithArtsy/ArtworkForm/Components/SubmitArtworkAddPhotos.tsx

@@ -1,14 +1,18 @@
 import { OwnerType } from "@artsy/cohesion"
-import { Flex, Join, Message, Spacer, Text } from "@artsy/palette-mobile"
+import { Flex, Join, LinkButton, Message, Spacer, Text } from "@artsy/palette-mobile"
+import { TipsForTakingPhotos } from "app/Scenes/SellWithArtsy/ArtworkForm/Components/SubmitArtworkTipsForTakingPhotos"
 import { ArtworkDetailsFormModel } from "app/Scenes/SellWithArtsy/ArtworkForm/Utils/validation"
+import { InfoModal } from "app/Scenes/SellWithArtsy/SubmitArtwork/ArtworkDetails/InfoModal/InfoModal"
 import { UploadPhotosForm } from "app/Scenes/SellWithArtsy/SubmitArtwork/UploadPhotos/UploadPhotosForm"
 import { ProvideScreenTrackingWithCohesionSchema } from "app/utils/track"
 import { screen } from "app/utils/track/helpers"
 import { useFormikContext } from "formik"
+import { useState } from "react"
 import { ScrollView } from "react-native"
 
 export const SubmitArtworkAddPhotos = () => {
   const { values } = useFormikContext<ArtworkDetailsFormModel>()
+  const [isModalVisible, setIsModalVisible] = useState(false)
 
   return (
     <ProvideScreenTrackingWithCohesionSchema
@@ -30,6 +34,16 @@ export const SubmitArtworkAddPhotos = () => {
               high-quality photos of the work's front and back.
             </Text>
 
+            <LinkButton
+              color="black60"
+              variant="xs"
+              onPress={() => {
+                setIsModalVisible(true)
+              }}
+            >
+              Tips for taking photos
+            </LinkButton>
+
             {(values.photos.length === 1 || values.photos.length === 2) && (
               <Message
                 title="Increase your chance of selling"
@@ -41,6 +55,14 @@ export const SubmitArtworkAddPhotos = () => {
             <UploadPhotosForm />
           </Join>
         </ScrollView>
+        <InfoModal
+          visible={isModalVisible}
+          onDismiss={() => setIsModalVisible(false)}
+          buttonVariant="outline"
+          containerStyle={{ margin: 0 }}
+        >
+          <TipsForTakingPhotos onDismiss={() => setIsModalVisible(false)} />
+        </InfoModal>
       </Flex>
     </ProvideScreenTrackingWithCohesionSchema>
   )

src/app/Scenes/SellWithArtsy/ArtworkForm/Components/SubmitArtworkTipsForTakingPhotos.tsx

@@ -0,0 +1,105 @@
+import { Button, Flex, Join, Spacer, Text, useSpace } from "@artsy/palette-mobile"
+import { Image, ScrollView } from "react-native"
+
+export const TipsForTakingPhotos: React.FC<{ onDismiss: () => void }> = ({ onDismiss }) => {
+  const space = useSpace()
+
+  return (
+    <Flex>
+      <ScrollView contentContainerStyle={{ paddingBottom: 120 }}>
+        <Text variant="lg-display" mb={4} px={2}>
+          Three tips to improve your chances of selling
+        </Text>
+        <Join separator={<Spacer y={4} />}>
+          <>
+            <ScrollView
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              contentContainerStyle={{ paddingHorizontal: space(2) }}
+            >
+              <Join separator={<Spacer x={1} />}>
+                <Image
+                  source={require("images/photo-takingtips-example-01-01.webp")}
+                  resizeMode="contain"
+                />
+                <Image
+                  source={require("images/photo-takingtips-example-01-02.webp")}
+                  resizeMode="contain"
+                />
+                <Image
+                  source={require("images/photo-takingtips-example-01-03.webp")}
+                  resizeMode="contain"
+                />
+              </Join>
+            </ScrollView>
+            <Spacer y={0.5} />
+            <Text variant="sm-display" px={2}>
+              Upload high-quality photos of the artwork’s front and back using natural light and a
+              neutral backdrop. Shoot from various angles.
+            </Text>
+          </>
+          <>
+            <ScrollView
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              contentContainerStyle={{ paddingHorizontal: space(2) }}
+            >
+              <Join separator={<Spacer x={1} />}>
+                <Image
+                  source={require("images/photo-takingtips-example-02-01.webp")}
+                  resizeMode="contain"
+                />
+                <Image
+                  source={require("images/photo-takingtips-example-02-02.webp")}
+                  resizeMode="contain"
+                />
+                <Image
+                  source={require("images/photo-takingtips-example-02-03.webp")}
+                  resizeMode="contain"
+                />
+              </Join>
+            </ScrollView>
+            <Spacer y={0.5} />
+            <Text variant="sm-display" px={2}>
+              Include signatures, edition numbers or close-ups of details to give confidence to
+              buyers.
+            </Text>
+          </>
+          <>
+            <ScrollView
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              contentContainerStyle={{ paddingHorizontal: space(2) }}
+            >
+              <Join separator={<Spacer x={1} />}>
+                <Image
+                  source={require("images/photo-takingtips-example-03-01.webp")}
+                  resizeMode="contain"
+                />
+                <Image
+                  source={require("images/photo-takingtips-example-03-02.webp")}
+                  resizeMode="contain"
+                />
+                <Image
+                  source={require("images/photo-takingtips-example-03-03.webp")}
+                  resizeMode="contain"
+                />
+              </Join>
+            </ScrollView>
+            <Spacer y={0.5} />
+            <Text variant="sm-display" px={2}>
+              Include framed images or display the artwork in real-life settings to help buyers
+              visualize how it will look in their own spaces.
+            </Text>
+          </>
+        </Join>
+
+        <Flex p={2}>
+          <Button block haptic onPress={onDismiss} variant="outline">
+            Close
+          </Button>
+        </Flex>
+      </ScrollView>
+    </Flex>
+  )
+}

src/app/Scenes/SellWithArtsy/ArtworkForm/Components/SubmitArtworkTopNavigation.tsx

@@ -91,11 +91,19 @@ export const SubmitArtworkTopNavigation: React.FC<{}> = () => {
   const showProgressBar = !["StartFlow", "ArtistRejected"].includes(currentStep)
   const showSaveAndExit = !["StartFlow", "ArtistRejected", "SelectArtist"].includes(currentStep)
 
+  const handleBackPress = () => {
+    goBack()
+  }
+
   return (
     <Flex mx={2} mb={2} height={HEADER_HEIGHT}>
       <Flex flexDirection="row" justifyContent="space-between" height={30} mb={1}>
         {!!showXButton && (
-          <BackButton showX style={{ zIndex: 100, overflow: "visible" }} onPress={goBack} />
+          <BackButton
+            showX
+            style={{ zIndex: 100, overflow: "visible" }}
+            onPress={() => handleBackPress()}
+          />
         )}
         {!!showSaveAndExit && (
           <Flex style={{ flexGrow: 1, alignItems: "flex-end" }}>

src/app/Scenes/SellWithArtsy/SubmitArtwork/ArtworkDetails/InfoModal/InfoModal.tsx

@@ -1,30 +1,34 @@
-import { Spacer, Flex, Text, Button, ButtonProps } from "@artsy/palette-mobile"
+import { Spacer, Flex, Text, Button, ButtonProps, useSpace } from "@artsy/palette-mobile"
 import { FancyModal } from "app/Components/FancyModal/FancyModal"
 import { FancyModalHeader } from "app/Components/FancyModal/FancyModalHeader"
+import { ViewStyle } from "react-native"
 
 interface Props {
   buttonVariant?: ButtonProps["variant"]
+  containerStyle?: ViewStyle
   onDismiss: () => void
-  title: string
+  title?: string
   visible: boolean
 }
 
 export const InfoModal: React.FC<Props> = ({
+  buttonVariant,
   children,
+  containerStyle,
   onDismiss,
-  visible,
-  buttonVariant,
   title,
+  visible,
 }) => {
+  const space = useSpace()
   return (
     <FancyModal visible={visible} onBackgroundPressed={onDismiss}>
       <FancyModalHeader onRightButtonPress={onDismiss} hideBottomDivider rightCloseButton>
-        <Text fontSize={24}>{title}</Text>
+        {!!title && <Text fontSize={24}>{title}</Text>}
       </FancyModalHeader>
 
-      <Flex m={2}>{children}</Flex>
+      <Flex style={[{ margin: space(2) }, containerStyle]}>{children}</Flex>
       <Spacer y={2} />
-      <Flex justifyContent="center" alignSelf="center" width="90%">
+      <Flex justifyContent="center" alignSelf="center" px={2}>
         <Button block haptic onPress={onDismiss} variant={buttonVariant}>
           Close
         </Button>