From e316fd7da9643cebfc00048a727948fb54e7b563 Mon Sep 17 00:00:00 2001
From: Adam Iskounen <adam.iskounen@artsymail.com>
Date: Fri, 25 Oct 2024 15:48:02 -0400
Subject: [PATCH 1/3] conditionally display email enrollment checkbox during
 sign-up

---
 .../Onboarding/Auth2/hooks/useCountryCode.tsx | 77 +++++++++++++++++++
 .../Auth2/scenes/SignUpNameStep.tsx           | 22 ++++--
 2 files changed, 94 insertions(+), 5 deletions(-)
 create mode 100644 src/app/Scenes/Onboarding/Auth2/hooks/useCountryCode.tsx

diff --git a/src/app/Scenes/Onboarding/Auth2/hooks/useCountryCode.tsx b/src/app/Scenes/Onboarding/Auth2/hooks/useCountryCode.tsx
new file mode 100644
index 00000000000..e25c2e51eff
--- /dev/null
+++ b/src/app/Scenes/Onboarding/Auth2/hooks/useCountryCode.tsx
@@ -0,0 +1,77 @@
+import { useCountryCodeQuery } from "__generated__/useCountryCodeQuery.graphql"
+import { useClientQuery } from "app/utils/useClientQuery"
+import { useEffect, useState } from "react"
+import { getIpAddress } from "react-native-device-info"
+import { graphql } from "react-relay"
+
+const USE_COUNTRY_CODE_QUERY = graphql`
+  query useCountryCodeQuery($ip: String!) {
+    requestLocation(ip: $ip) {
+      countryCode
+    }
+  }
+`
+
+export const useCountryCode = () => {
+  const [ip, setIp] = useState("0.0.0.0")
+
+  useEffect(() => {
+    getIpAddress().then((ip) => {
+      setIp(ip)
+    })
+  }, [])
+
+  const { data, loading, error } = useClientQuery<useCountryCodeQuery>({
+    query: USE_COUNTRY_CODE_QUERY,
+    variables: {
+      ip,
+    },
+    cacheConfig: {
+      networkCacheConfig: {
+        force: false,
+      },
+    },
+  })
+
+  const countryCode = data?.requestLocation?.countryCode
+
+  const isAutomaticallySubscribed = !!(countryCode && !GDPR_COUNTRY_CODES.includes(countryCode))
+
+  return {
+    countryCode,
+    error,
+    isAutomaticallySubscribed,
+    loading,
+  }
+}
+
+export const GDPR_COUNTRY_CODES = [
+  "AT",
+  "BE",
+  "BG",
+  "CY",
+  "CZ",
+  "DE",
+  "DK",
+  "EE",
+  "ES",
+  "FI",
+  "FR",
+  "GB",
+  "GR",
+  "HR",
+  "HU",
+  "IE",
+  "IT",
+  "LT",
+  "LU",
+  "LV",
+  "MT",
+  "NL",
+  "PL",
+  "PT",
+  "RO",
+  "SE",
+  "SI",
+  "SK",
+]
diff --git a/src/app/Scenes/Onboarding/Auth2/scenes/SignUpNameStep.tsx b/src/app/Scenes/Onboarding/Auth2/scenes/SignUpNameStep.tsx
index 8927a7e6fa8..0f8be9d77d9 100644
--- a/src/app/Scenes/Onboarding/Auth2/scenes/SignUpNameStep.tsx
+++ b/src/app/Scenes/Onboarding/Auth2/scenes/SignUpNameStep.tsx
@@ -4,6 +4,7 @@ import {
   useAuthNavigation,
   useAuthScreen,
 } from "app/Scenes/Onboarding/Auth2/hooks/useAuthNavigation"
+import { useCountryCode } from "app/Scenes/Onboarding/Auth2/hooks/useCountryCode"
 import { useInputAutofocus } from "app/Scenes/Onboarding/Auth2/hooks/useInputAutofocus"
 import { OnboardingNavigationStack } from "app/Scenes/Onboarding/Onboarding"
 import { EmailSubscriptionCheckbox } from "app/Scenes/Onboarding/OnboardingCreateAccount/EmailSubscriptionCheckbox"
@@ -23,13 +24,19 @@ interface SignUpNameStepFormValues {
 
 export const SignUpNameStep: React.FC = () => {
   const screen = useAuthScreen()
+  const { loading, isAutomaticallySubscribed } = useCountryCode()
+
+  // TODO: Show a skeleton loader
+  if (loading) {
+    return null
+  }
 
   return (
     <Formik<SignUpNameStepFormValues>
       initialValues={{
         name: "",
         acceptedTerms: false,
-        agreedToReceiveEmails: false,
+        agreedToReceiveEmails: isAutomaticallySubscribed,
       }}
       validationSchema={Yup.object().shape({
         name: Yup.string().trim().required("Full name field is required"),
@@ -84,6 +91,7 @@ const SignUpNameStepForm: React.FC = () => {
 
   const navigation = useAuthNavigation()
   const parentNavigation = useNavigation<NavigationProp<OnboardingNavigationStack>>()
+  const { isAutomaticallySubscribed } = useCountryCode()
   const { color } = useTheme()
   const nameRef = useRef<Input>(null)
 
@@ -146,10 +154,14 @@ const SignUpNameStepForm: React.FC = () => {
           error={highlightTerms}
           navigation={parentNavigation}
         />
-        <EmailSubscriptionCheckbox
-          setChecked={() => setFieldValue("agreedToReceiveEmails", !values.agreedToReceiveEmails)}
-          checked={values.agreedToReceiveEmails}
-        />
+        {!isAutomaticallySubscribed ? (
+          <EmailSubscriptionCheckbox
+            setChecked={() => setFieldValue("agreedToReceiveEmails", !values.agreedToReceiveEmails)}
+            checked={values.agreedToReceiveEmails}
+          />
+        ) : (
+          <Spacer y={2} />
+        )}
       </Flex>
 
       <Button

From 2d01a9c442652cef0c22d7cecbf2eb68658d72f2 Mon Sep 17 00:00:00 2001
From: Adam Iskounen <adam.iskounen@artsymail.com>
Date: Mon, 28 Oct 2024 12:54:58 -0400
Subject: [PATCH 2/3] added tests for automatic email subscription

---
 e2e/flows/onboarding/signup.yml               |  2 +-
 .../Auth2/scenes/SignUpNameStep.tsx           |  2 +-
 .../scenes/__tests__/SignUpNameStep.test.tsx  |  5 -
 .../scenes/__tests__/SignUpNameStep.tests.tsx | 97 +++++++++++++++++++
 .../EmailSubscriptionCheckbox.tsx             | 16 ++-
 .../TermsOfServiceCheckbox.tsx                |  5 +-
 6 files changed, 116 insertions(+), 11 deletions(-)
 delete mode 100644 src/app/Scenes/Onboarding/Auth2/scenes/__tests__/SignUpNameStep.test.tsx
 create mode 100644 src/app/Scenes/Onboarding/Auth2/scenes/__tests__/SignUpNameStep.tests.tsx

diff --git a/e2e/flows/onboarding/signup.yml b/e2e/flows/onboarding/signup.yml
index 68714ce7efe..b9955ac828d 100644
--- a/e2e/flows/onboarding/signup.yml
+++ b/e2e/flows/onboarding/signup.yml
@@ -21,5 +21,5 @@ appId: ${MAESTRO_APP_ID}
     when:
       platform: Android
     commands:
-      - tapOn: "checkbox of consent, Check this element to consent with the Terms of Service"
+      - tapOn: "Accept terms and privacy policy, Check this element to accept Artsy's terms and privacy policy"
 - tapOn: "Next.*"
diff --git a/src/app/Scenes/Onboarding/Auth2/scenes/SignUpNameStep.tsx b/src/app/Scenes/Onboarding/Auth2/scenes/SignUpNameStep.tsx
index 0f8be9d77d9..8b31f2e1a83 100644
--- a/src/app/Scenes/Onboarding/Auth2/scenes/SignUpNameStep.tsx
+++ b/src/app/Scenes/Onboarding/Auth2/scenes/SignUpNameStep.tsx
@@ -26,7 +26,6 @@ export const SignUpNameStep: React.FC = () => {
   const screen = useAuthScreen()
   const { loading, isAutomaticallySubscribed } = useCountryCode()
 
-  // TODO: Show a skeleton loader
   if (loading) {
     return null
   }
@@ -114,6 +113,7 @@ const SignUpNameStepForm: React.FC = () => {
       <Text variant="sm-display">Welcome to Artsy</Text>
 
       <Input
+        accessibilityHint="Enter your full name"
         autoCapitalize="words"
         autoComplete="name"
         autoCorrect={false}
diff --git a/src/app/Scenes/Onboarding/Auth2/scenes/__tests__/SignUpNameStep.test.tsx b/src/app/Scenes/Onboarding/Auth2/scenes/__tests__/SignUpNameStep.test.tsx
deleted file mode 100644
index 28b1b9db523..00000000000
--- a/src/app/Scenes/Onboarding/Auth2/scenes/__tests__/SignUpNameStep.test.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-describe("SignUpNameStep", () => {
-  it("renders correctly", () => {
-    // TODO
-  })
-})
diff --git a/src/app/Scenes/Onboarding/Auth2/scenes/__tests__/SignUpNameStep.tests.tsx b/src/app/Scenes/Onboarding/Auth2/scenes/__tests__/SignUpNameStep.tests.tsx
new file mode 100644
index 00000000000..17dd965936e
--- /dev/null
+++ b/src/app/Scenes/Onboarding/Auth2/scenes/__tests__/SignUpNameStep.tests.tsx
@@ -0,0 +1,97 @@
+import { fireEvent, screen, waitFor } from "@testing-library/react-native"
+import { useCountryCode } from "app/Scenes/Onboarding/Auth2/hooks/useCountryCode"
+import { SignUpNameStep } from "app/Scenes/Onboarding/Auth2/scenes/SignUpNameStep"
+import { GlobalStore } from "app/store/GlobalStore"
+import { renderWithWrappers } from "app/utils/tests/renderWithWrappers"
+
+jest.mock("@artsy/palette-mobile", () => ({
+  ...jest.requireActual("@artsy/palette-mobile"),
+  useTheme: jest.fn().mockReturnValue({
+    color: jest.fn(),
+  }),
+}))
+
+jest.mock("app/Scenes/Onboarding/Auth2/hooks/useCountryCode", () => ({
+  useCountryCode: jest.fn().mockReturnValue({
+    loading: false,
+    isAutomaticallySubscribed: false,
+  }),
+}))
+
+jest.mock("app/Scenes/Onboarding/Auth2/hooks/useAuthNavigation", () => ({
+  useAuthNavigation: jest.fn(),
+  useAuthScreen: jest.fn().mockReturnValue({
+    currentScreen: "SignUpNameStep",
+  }),
+}))
+
+jest.mock("app/store/GlobalStore", () => ({
+  ...jest.requireActual("app/store/GlobalStore"),
+  GlobalStore: {
+    ...jest.requireActual("app/store/GlobalStore").GlobalStore,
+    actions: {
+      auth: {
+        signUp: jest.fn(),
+      },
+    },
+  },
+}))
+
+describe("SignUpNameStep", () => {
+  it("renders the full name input", () => {
+    renderWithWrappers(<SignUpNameStep />)
+
+    expect(screen.getByA11yHint("Enter your full name")).toBeTruthy()
+  })
+
+  it("renders the terms and privacy policy checkbox", () => {
+    renderWithWrappers(<SignUpNameStep />)
+
+    expect(
+      screen.getByA11yHint("Check this element to accept Artsy's terms and privacy policy")
+    ).toBeTruthy()
+  })
+
+  it("renders the email subscription checkbox", () => {
+    renderWithWrappers(<SignUpNameStep />)
+
+    expect(screen.getByA11yHint("Check this element to receive Artsy's emails")).toBeTruthy()
+  })
+
+  describe("user is automatically subscribed", () => {
+    beforeEach(() => {
+      ;(useCountryCode as jest.Mock).mockReturnValue({
+        isAutomaticallySubscribed: true,
+      })
+    })
+
+    afterEach(() => {
+      jest.clearAllMocks()
+    })
+
+    it("does not render the email opt-in checkbox if the user is automatically subscribed", () => {
+      renderWithWrappers(<SignUpNameStep />)
+
+      expect(screen.queryByA11yHint("Check this element to receive Artsy's emails")).toBeNull()
+    })
+
+    it("agrees to receive emails if the user is automatically ", async () => {
+      renderWithWrappers(<SignUpNameStep />)
+
+      fireEvent.changeText(screen.getByA11yHint("Enter your full name"), "Percy Cat")
+      fireEvent.press(
+        screen.getByA11yHint("Check this element to accept Artsy's terms and privacy policy")
+      )
+
+      fireEvent.press(screen.getByText("Continue"))
+
+      await waitFor(() => {
+        expect(GlobalStore.actions.auth.signUp).toHaveBeenCalledWith(
+          expect.objectContaining({
+            agreedToReceiveEmails: true,
+          })
+        )
+      })
+    })
+  })
+})
diff --git a/src/app/Scenes/Onboarding/OnboardingCreateAccount/EmailSubscriptionCheckbox.tsx b/src/app/Scenes/Onboarding/OnboardingCreateAccount/EmailSubscriptionCheckbox.tsx
index f4c9d37d24c..685c01b1dbb 100644
--- a/src/app/Scenes/Onboarding/OnboardingCreateAccount/EmailSubscriptionCheckbox.tsx
+++ b/src/app/Scenes/Onboarding/OnboardingCreateAccount/EmailSubscriptionCheckbox.tsx
@@ -17,7 +17,21 @@ export const EmailSubscriptionCheckbox: React.FC<EmailSubscriptionCheckboxProps>
   return (
     <Touchable haptic onPress={() => setChecked(!checked)}>
       <Flex my={2} flexDirection="row" alignItems="flex-start">
-        <Checkbox error={error} checked={checked} onPress={() => setChecked(!checked)} mt={0.5}>
+        <Checkbox
+          error={error}
+          checked={checked}
+          onPress={() => setChecked(!checked)}
+          mt={0.5}
+          checkboxAccessibilityProps={{
+            accessible: true,
+            accessibilityRole: "checkbox",
+            accessibilityLabel: "Agree to receive Artsy's emails",
+            accessibilityHint: "Check this element to receive Artsy's emails",
+            accessibilityState: {
+              checked,
+            },
+          }}
+        >
           {signupLoginFusionEnabled ? (
             <Text variant="xs">
               Get Artsy's emails on the art market, products, services, editorial, and promotional
diff --git a/src/app/Scenes/Onboarding/OnboardingCreateAccount/TermsOfServiceCheckbox.tsx b/src/app/Scenes/Onboarding/OnboardingCreateAccount/TermsOfServiceCheckbox.tsx
index c8c552dee26..54b116e6aa6 100644
--- a/src/app/Scenes/Onboarding/OnboardingCreateAccount/TermsOfServiceCheckbox.tsx
+++ b/src/app/Scenes/Onboarding/OnboardingCreateAccount/TermsOfServiceCheckbox.tsx
@@ -28,13 +28,12 @@ export const TermsOfServiceCheckbox: React.FC<TermsOfServiceCheckboxProps> = ({
           checkboxAccessibilityProps={{
             accessible: true,
             accessibilityRole: "checkbox",
-            accessibilityLabel: "checkbox of consent",
-            accessibilityHint: "Check this element to consent with the Terms of Service",
+            accessibilityLabel: "Accept terms and privacy policy",
+            accessibilityHint: "Check this element to accept Artsy's terms and privacy policy",
             accessibilityState: {
               checked,
             },
           }}
-          testID="termsCheckbox"
         >
           {showNewDisclaimer ? (
             <Text variant="xs" testID="disclaimer">

From be07d009d00ec89f2340f498b1219ea4d4af27db Mon Sep 17 00:00:00 2001
From: Adam Iskounen <adam.iskounen@artsymail.com>
Date: Mon, 28 Oct 2024 13:31:44 -0400
Subject: [PATCH 3/3] code review

---
 .../Auth2/scenes/__tests__/SignUpNameStep.tests.tsx           | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/Scenes/Onboarding/Auth2/scenes/__tests__/SignUpNameStep.tests.tsx b/src/app/Scenes/Onboarding/Auth2/scenes/__tests__/SignUpNameStep.tests.tsx
index 17dd965936e..1d152dfb34c 100644
--- a/src/app/Scenes/Onboarding/Auth2/scenes/__tests__/SignUpNameStep.tests.tsx
+++ b/src/app/Scenes/Onboarding/Auth2/scenes/__tests__/SignUpNameStep.tests.tsx
@@ -11,6 +11,8 @@ jest.mock("@artsy/palette-mobile", () => ({
   }),
 }))
 
+const mockUseCountryCode = useCountryCode as jest.Mock
+
 jest.mock("app/Scenes/Onboarding/Auth2/hooks/useCountryCode", () => ({
   useCountryCode: jest.fn().mockReturnValue({
     loading: false,
@@ -60,7 +62,7 @@ describe("SignUpNameStep", () => {
 
   describe("user is automatically subscribed", () => {
     beforeEach(() => {
-      ;(useCountryCode as jest.Mock).mockReturnValue({
+      mockUseCountryCode.mockReturnValue({
         isAutomaticallySubscribed: true,
       })
     })