fix(DIA-815): add AuthImpression and ResetYourPassword events (and mo…

…re!) (#10978)

* make errors appear when forgot password fails

* fire authimpression event

* updated some copy

* undid changes committed by accident

* added trigger property to authimpression event

* fire resetyourpassword event

* moved forgotYourPassword into AuthModel

* added tracking hook for auth2

src/app/Scenes/Onboarding/Auth2/components/AuthModal.tsx

@@ -1,7 +1,8 @@
 import { Box, Flex, useTheme } from "@artsy/palette-mobile"
 import { AuthContext } from "app/Scenes/Onboarding/Auth2/AuthContext"
+import { useOnboardingAuth2Tracking } from "app/Scenes/Onboarding/Auth2/hooks/useOnboardingAuth2Tracking"
 import { MotiView } from "moti"
-import { useMemo } from "react"
+import { useEffect, useMemo } from "react"
 import { Dimensions } from "react-native"
 import { Easing } from "react-native-reanimated"
 import { useSafeAreaInsets } from "react-native-safe-area-context"
@@ -24,6 +25,12 @@ export const AuthModal: React.FC = ({ children }) => {
   const { color, space } = useTheme()
   const insets = useSafeAreaInsets()
 
+  const tracking = useOnboardingAuth2Tracking()
+
+  useEffect(() => {
+    tracking.authImpression()
+  }, [])
+
   const screenHeight = Dimensions.get("window").height
 
   const height = useMemo(() => {

src/app/Scenes/Onboarding/Auth2/hooks/useOnboardingAuth2Tracking.tsx

@@ -0,0 +1,17 @@
+import { ActionType, AuthImpression } from "@artsy/cohesion"
+import { useTracking } from "react-tracking"
+
+export const useOnboardingAuth2Tracking = () => {
+  const { trackEvent } = useTracking()
+
+  return {
+    authImpression: () => {
+      const payload: Partial<AuthImpression> = {
+        action: ActionType.authImpression,
+        trigger: "tap",
+      }
+
+      trackEvent(payload)
+    },
+  }
+}

src/app/Scenes/Onboarding/Auth2/scenes/ForgotPasswordStep.tsx

@@ -28,7 +28,7 @@ export const ForgotPasswordStep: React.FC = () => {
         if (!res) {
           setErrors({
             email:
-              "Couldn’t send reset password link. Please try again, or contact support@artsy.net",
+              "Couldn't send reset password link. Please try again, or contact support@artsy.net",
           })
         } else {
           navigation.setParams({ requestedPasswordReset: true })
@@ -48,6 +48,7 @@ export const ForgotPasswordStep: React.FC = () => {
 const ForgotPasswordStepForm: React.FC = () => {
   const {
     dirty,
+    errors,
     handleChange,
     handleSubmit,
     isSubmitting,
@@ -86,7 +87,7 @@ const ForgotPasswordStepForm: React.FC = () => {
       <Spacer y={1} />
 
       <Flex flex={1} justifyContent="flex-start">
-        <Text variant="lg-display">Forgot Password?</Text>
+        <Text variant="sm-display">Forgot Password?</Text>
 
         {!requestedPasswordReset && (
           <Text pt={0.5} color="black100" variant="xs">
@@ -97,7 +98,8 @@ const ForgotPasswordStepForm: React.FC = () => {
 
         {!!requestedPasswordReset ? (
           <Text color="blue100" mt={1} variant="sm">
-            Password reset link sent. Please check your email.
+            Password reset link set—check your email. Please note, you must wait 5 minutes to
+            receive another link.
           </Text>
         ) : (
           <>
@@ -117,6 +119,7 @@ const ForgotPasswordStepForm: React.FC = () => {
               testID="email-address"
               textContentType="emailAddress"
               value={values.email}
+              error={errors.email}
               onChangeText={(text) => {
                 handleChange("email")(text.trim())
               }}

src/app/Scenes/Onboarding/OnboardingCreateAccount/EmailSubscriptionCheckbox.tsx

@@ -1,4 +1,5 @@
 import { Flex, Text, Touchable, Checkbox } from "@artsy/palette-mobile"
+import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
 
 interface EmailSubscriptionCheckboxProps {
   checked: boolean
@@ -11,14 +12,24 @@ export const EmailSubscriptionCheckbox: React.FC<EmailSubscriptionCheckboxProps>
   checked,
   error,
 }) => {
+  const signupLoginFusionEnabled = useFeatureFlag("AREnableSignupLoginFusion")
+
   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}>
-          <Text variant="xs">
-            Dive deeper into the art market with Artsy emails. Subscribe to hear about our products,
-            services, editorials, and other promotional content. Unsubscribe at any time.
-          </Text>
+          {signupLoginFusionEnabled ? (
+            <Text variant="xs">
+              Get Artsy's emails on the art market, products, services, editorial, and promotional
+              content. Unsubscribe at any time.
+            </Text>
+          ) : (
+            <Text variant="xs">
+              Dive deeper into the art market with Artsy emails. Subscribe to hear about our
+              products, services, editorials, and other promotional content. Unsubscribe at any
+              time.
+            </Text>
+          )}
         </Checkbox>
       </Flex>
     </Touchable>

src/app/store/AuthModel.ts

@@ -1,4 +1,4 @@
-import { ActionType, AuthService, CreatedAccount } from "@artsy/cohesion"
+import { ActionType, AuthService, CreatedAccount, ResetYourPassword } from "@artsy/cohesion"
 import Braze from "@braze/react-native-sdk"
 import { appleAuth } from "@invertase/react-native-apple-authentication"
 import CookieManager from "@react-native-cookies/cookies"
@@ -278,6 +278,8 @@ export const getAuthModel = (): AuthModel => ({
     // For security purposes we don't want to disclose when a user is not found
     // this is indicated by 400 on gravity side, treat as success
     if (result.ok || result.status === 400) {
+      postEventToProviders(tracks.resetYourPassword())
+
       return true
     }
     return false
@@ -880,4 +882,8 @@ const tracks = {
     action: ActionType.successfullyLoggedIn,
     service,
   }),
+  resetYourPassword: (): Partial<ResetYourPassword> => ({
+    action: ActionType.resetYourPassword,
+    trigger: "tap",
+  }),
 }