test: improve email testing

.storybook/storybook.requires.js

@@ -69,7 +69,7 @@ const getStories = () => {
     "./app/screens/earns-screen/earns-sections.stories.tsx": require("../app/screens/earns-screen/earns-sections.stories.tsx"),
     "./app/screens/earns-screen/section-completed.stories.tsx": require("../app/screens/earns-screen/section-completed.stories.tsx"),
     "./app/screens/email-login-screen/email-login-flow.stories.tsx": require("../app/screens/email-login-screen/email-login-flow.stories.tsx"),
-    "./app/screens/email-login-screen/email-login-validation.stories.tsx": require("../app/screens/email-login-screen/email-login-validation.stories.tsx"),
+    "./app/screens/email-login-screen/email-login-validate.stories.tsx": require("../app/screens/email-login-screen/email-login-validate.stories.tsx"),
     "./app/screens/email-registration-screen/email-registration-initiate.stories.tsx": require("../app/screens/email-registration-screen/email-registration-initiate.stories.tsx"),
     "./app/screens/email-registration-screen/email-registration-validate.stories.tsx": require("../app/screens/email-registration-screen/email-registration-validate.stories.tsx"),
     "./app/screens/error-screen/error-screen.stories.tsx": require("../app/screens/error-screen/error-screen.stories.tsx"),

android/fastlane/Fastfile

@@ -110,6 +110,6 @@ platform :android do
       browserstack_access_key: ENV["BROWSERSTACK_ACCESS_KEY"],
       file_path: ENV["GRADLE_APK_OUTPUT_PATH"]
     )
-    sh("GALOY_TEST_TOKENS=$GALOY_TEST_TOKENS && GALOY_TOKEN_2=$GALOY_TOKEN_2 && yarn test:browserstack:android")
+    sh("GALOY_TEST_TOKENS=$GALOY_TEST_TOKENS && GALOY_TOKEN_2=$GALOY_TOKEN_2 && MAILSLURP_API_KEY=$MAILSLURP_API_KEY && yarn test:browserstack:android")
   end
 end

app/i18n/en/index.ts

@@ -429,10 +429,9 @@ const en: BaseTranslation = {
     logInCreateAccount: "Log in / create account",
     createAccount: "Create new account",
     exploreWallet: "Explore wallet",
-    loginBackInWith: "Login back in with",
+    logBackInWith: "Log back in with",
     headline: "Wallet powered by Galoy",
     startTrialAccount: "Start with a trial account",
-    iUnderstand: "I understand, continue",
     startWithTrialAccount: "Start with trial account",
     registerPhoneAccount: "Register phone account",
     trialAccountCreationFailed: "Trial account creation failed",
@@ -670,7 +669,7 @@ const en: BaseTranslation = {
     removePhone: "Remove phone",
     removeEmail: "Remove email",
     unverified: " - Unverified",
-    emailUnverified: "Your email is not verified",
+    emailUnverified: "Your email is unverified",
     emailUnverifiedContent: "Ensure you can log back into your account by verifying your email. Do you want to do the verification now?",
   },
   DefaultWalletScreen: {
@@ -796,13 +795,13 @@ const en: BaseTranslation = {
     header: "To confirm your email address, enter the code we just sent you on {email: string}",
     success: "Email {email: string} confirmed successfully",
   },
-  EmailLoginInputScreen: {
+  EmailLoginInitiateScreen: {
     title: "Login via email",
     header: "Enter your email address, and we'll send you an access code.",
     invalidEmail: "Invalid email address. Are you sure you entered the right email?",
     send: "Send code",
   },
-  EmailLoginValidationScreen: {
+  EmailLoginValidateScreen: {
     title: "Code confirmation",
     header: "If there is an account attached to {email: string}, you should have received 6 digits code to enter below.\n\nIf you are not receiving anything, it's probably either because this is not the right email, the email is in your spam folder.",
     success: "Email {email: string} confirmed successfully",

app/i18n/i18n-types.ts

@@ -1397,9 +1397,9 @@ type RootTranslation = {
 		 */
 		exploreWallet: string
 		/**
-		 * L​o​g​i​n​ ​b​a​c​k​ ​i​n​ ​w​i​t​h
+		 * L​o​g​ ​b​a​c​k​ ​i​n​ ​w​i​t​h
 		 */
-		loginBackInWith: string
+		logBackInWith: string
 		/**
 		 * W​a​l​l​e​t​ ​p​o​w​e​r​e​d​ ​b​y​ ​G​a​l​o​y
 		 */
@@ -1408,10 +1408,6 @@ type RootTranslation = {
 		 * S​t​a​r​t​ ​w​i​t​h​ ​a​ ​t​r​i​a​l​ ​a​c​c​o​u​n​t
 		 */
 		startTrialAccount: string
-		/**
-		 * I​ ​u​n​d​e​r​s​t​a​n​d​,​ ​c​o​n​t​i​n​u​e
-		 */
-		iUnderstand: string
 		/**
 		 * S​t​a​r​t​ ​w​i​t​h​ ​t​r​i​a​l​ ​a​c​c​o​u​n​t
 		 */
@@ -2282,7 +2278,7 @@ type RootTranslation = {
 		 */
 		unverified: string
 		/**
-		 * Y​o​u​r​ ​e​m​a​i​l​ ​i​s​ ​n​o​t​ ​v​e​r​i​f​i​e​d
+		 * Y​o​u​r​ ​e​m​a​i​l​ ​i​s​ ​u​n​v​e​r​i​f​i​e​d
 		 */
 		emailUnverified: string
 		/**
@@ -2684,7 +2680,7 @@ type RootTranslation = {
 		 */
 		success: RequiredParams<'email'>
 	}
-	EmailLoginInputScreen: {
+	EmailLoginInitiateScreen: {
 		/**
 		 * L​o​g​i​n​ ​v​i​a​ ​e​m​a​i​l
 		 */
@@ -2702,7 +2698,7 @@ type RootTranslation = {
 		 */
 		send: string
 	}
-	EmailLoginValidationScreen: {
+	EmailLoginValidateScreen: {
 		/**
 		 * C​o​d​e​ ​c​o​n​f​i​r​m​a​t​i​o​n
 		 */
@@ -4661,9 +4657,9 @@ export type TranslationFunctions = {
 		 */
 		exploreWallet: () => LocalizedString
 		/**
-		 * Login back in with
+		 * Log back in with
 		 */
-		loginBackInWith: () => LocalizedString
+		logBackInWith: () => LocalizedString
 		/**
 		 * Wallet powered by Galoy
 		 */
@@ -4672,10 +4668,6 @@ export type TranslationFunctions = {
 		 * Start with a trial account
 		 */
 		startTrialAccount: () => LocalizedString
-		/**
-		 * I understand, continue
-		 */
-		iUnderstand: () => LocalizedString
 		/**
 		 * Start with trial account
 		 */
@@ -5509,7 +5501,7 @@ export type TranslationFunctions = {
 		 */
 		unverified: () => LocalizedString
 		/**
-		 * Your email is not verified
+		 * Your email is unverified
 		 */
 		emailUnverified: () => LocalizedString
 		/**
@@ -5901,7 +5893,7 @@ export type TranslationFunctions = {
 		 */
 		success: (arg: { email: string }) => LocalizedString
 	}
-	EmailLoginInputScreen: {
+	EmailLoginInitiateScreen: {
 		/**
 		 * Login via email
 		 */
@@ -5919,7 +5911,7 @@ export type TranslationFunctions = {
 		 */
 		send: () => LocalizedString
 	}
-	EmailLoginValidationScreen: {
+	EmailLoginValidateScreen: {
 		/**
 		 * Code confirmation
 		 */

app/i18n/raw-i18n/source/en.json

@@ -429,10 +429,9 @@
         "logInCreateAccount": "Log in / create account",
         "createAccount": "Create new account",
         "exploreWallet": "Explore wallet",
-        "loginBackInWith": "Login back in with",
+        "logBackInWith": "Log back in with",
         "headline": "Wallet powered by Galoy",
         "startTrialAccount": "Start with a trial account",
-        "iUnderstand": "I understand, continue",
         "startWithTrialAccount": "Start with trial account",
         "registerPhoneAccount": "Register phone account",
         "trialAccountCreationFailed": "Trial account creation failed",
@@ -659,7 +658,7 @@
         "removePhone": "Remove phone",
         "removeEmail": "Remove email",
         "unverified": " - Unverified",
-        "emailUnverified": "Your email is not verified",
+        "emailUnverified": "Your email is unverified",
         "emailUnverifiedContent": "Ensure you can log back into your account by verifying your email. Do you want to do the verification now?"
     },
     "DefaultWalletScreen": {
@@ -782,13 +781,13 @@
         "header": "To confirm your email address, enter the code we just sent you on {email: string}",
         "success": "Email {email: string} confirmed successfully"
     },
-    "EmailLoginInputScreen": {
+    "EmailLoginInitiateScreen": {
         "title": "Login via email",
         "header": "Enter your email address, and we'll send you an access code.",
         "invalidEmail": "Invalid email address. Are you sure you entered the right email?",
         "send": "Send code"
     },
-    "EmailLoginValidationScreen": {
+    "EmailLoginValidateScreen": {
         "title": "Code confirmation",
         "header": "If there is an account attached to {email: string}, you should have received 6 digits code to enter below.\n\nIf you are not receiving anything, it's probably either because this is not the right email, the email is in your spam folder.",
         "success": "Email {email: string} confirmed successfully"

app/navigation/root-navigator.tsx

@@ -62,8 +62,8 @@ import {
   EmailRegistrationValidateScreen,
 } from "@app/screens/email-registration-screen"
 import {
-  EmailLoginInputScreen,
-  EmailLoginValidationScreen,
+  EmailLoginInitiateScreen,
+  EmailLoginValidateScreen,
 } from "@app/screens/email-login-screen"
 
 const useStyles = makeStyles(({ colors }) => ({
@@ -337,19 +337,19 @@ export const RootStack = () => {
         }}
       />
       <RootNavigator.Screen
-        name="emailLoginInput"
-        component={EmailLoginInputScreen}
+        name="emailLoginInitiate"
+        component={EmailLoginInitiateScreen}
         options={{
           headerShown: true,
-          title: LL.EmailRegistrationInitiateScreen.title(),
+          title: LL.EmailLoginValidateScreen.title(),
         }}
       />
       <RootNavigator.Screen
-        name="emailLoginValidation"
-        component={EmailLoginValidationScreen}
+        name="emailLoginValidate"
+        component={EmailLoginValidateScreen}
         options={{
           headerShown: true,
-          title: LL.EmailRegistrationInitiateScreen.title(),
+          title: LL.EmailLoginValidateScreen.title(),
         }}
       />
     </RootNavigator.Navigator>

app/navigation/stack-param-lists.ts

@@ -79,8 +79,8 @@ export type RootStackParamList = {
   transactionLimitsScreen: undefined
   emailRegistrationInitiate: undefined
   emailRegistrationValidate: { email: string; emailRegistrationId: string }
-  emailLoginInput: undefined
-  emailLoginValidation: { email: string; emailLoginId: string }
+  emailLoginInitiate: undefined
+  emailLoginValidate: { email: string; emailLoginId: string }
 }
 
 export type ContactStackParamList = {

app/screens/email-login-screen/email-login-flow.stories.tsx

@@ -7,7 +7,7 @@ import {
   CaptchaRequestAuthCodeDocument,
   UserEmailRegistrationInitiateDocument,
 } from "../../graphql/generated"
-import { EmailLoginInputScreen } from "./email-login-input"
+import { EmailLoginInitiateScreen } from "./email-login-initiate"
 
 const mocks = [
   {
@@ -79,7 +79,7 @@ const mocks = [
 
 export default {
   title: "EmailLoginFlow",
-  component: EmailLoginInputScreen,
+  component: EmailLoginInitiateScreen,
   decorators: [
     (Story) => (
       <MockedProvider mocks={mocks} cache={createCache()}>
@@ -89,4 +89,4 @@ export default {
   ],
 }
 
-export const Default = () => <EmailLoginInputScreen />
+export const Default = () => <EmailLoginInitiateScreen />

app/screens/email-login-screen/email-login-input.tsx → app/screens/email-login-screen/email-login-initiate.tsx

@@ -11,8 +11,8 @@ import { View } from "react-native"
 import validator from "validator"
 import { Screen } from "../../components/screen"
 import { useAppConfig } from "@app/hooks"
+import { testProps } from "@app/utils/testProps"
 
-const PLACEHOLDER_EMAIL = "[email protected]"
 const useStyles = makeStyles(({ colors }) => ({
   screenStyle: {
     padding: 20,
@@ -47,7 +47,7 @@ const useStyles = makeStyles(({ colors }) => ({
   },
 }))
 
-export const EmailLoginInputScreen: React.FC = () => {
+export const EmailLoginInitiateScreen: React.FC = () => {
   const styles = useStyles()
   const {
     appConfig: {
@@ -58,7 +58,7 @@ export const EmailLoginInputScreen: React.FC = () => {
   const urlEmailCodeRequest = `${authUrl}/auth/email/code`
 
   const navigation =
-    useNavigation<StackNavigationProp<RootStackParamList, "emailRegistrationInitiate">>()
+    useNavigation<StackNavigationProp<RootStackParamList, "emailLoginInitiate">>()
 
   const [emailInput, setEmailInput] = React.useState<string>("")
   const [errorMessage, setErrorMessage] = React.useState<string>("")
@@ -73,7 +73,7 @@ export const EmailLoginInputScreen: React.FC = () => {
 
   const submit = async () => {
     if (!validator.isEmail(emailInput)) {
-      setErrorMessage(LL.EmailLoginInputScreen.invalidEmail())
+      setErrorMessage(LL.EmailLoginInitiateScreen.invalidEmail())
       return
     }
 
@@ -92,7 +92,8 @@ export const EmailLoginInputScreen: React.FC = () => {
       const emailLoginId = res.data.result
 
       if (emailLoginId) {
-        navigation.navigate("emailLoginValidation", { emailLoginId, email: emailInput })
+        console.log({ emailLoginId })
+        navigation.navigate("emailLoginValidate", { emailLoginId, email: emailInput })
       } else {
         console.warn("no flow returned")
       }
@@ -124,13 +125,14 @@ export const EmailLoginInputScreen: React.FC = () => {
     >
       <View style={styles.viewWrapper}>
         <View style={styles.textContainer}>
-          <Text type={"p1"}>{LL.EmailLoginInputScreen.header()}</Text>
+          <Text type={"p1"}>{LL.EmailLoginInitiateScreen.header()}</Text>
         </View>
 
         <View style={styles.inputContainer}>
           <Input
+            {...testProps(LL.EmailRegistrationInitiateScreen.placeholder())}
+            placeholder={LL.EmailRegistrationInitiateScreen.placeholder()}
             autoCapitalize="none"
-            placeholder={PLACEHOLDER_EMAIL}
             inputContainerStyle={styles.inputContainerStyle}
             renderErrorMessage={false}
             textContentType="emailAddress"
@@ -148,7 +150,7 @@ export const EmailLoginInputScreen: React.FC = () => {
 
         <View style={styles.buttonsContainer}>
           <GaloyPrimaryButton
-            title={LL.EmailLoginInputScreen.send()}
+            title={LL.EmailLoginInitiateScreen.send()}
             loading={loading}
             disabled={!emailInput}
             onPress={submit}

app/screens/email-login-screen/email-login-validation.stories.tsx → app/screens/email-login-screen/email-login-validate.stories.tsx

@@ -3,29 +3,29 @@ import { Meta } from "@storybook/react"
 import { MockedProvider } from "@apollo/client/testing"
 import { createCache } from "../../graphql/cache"
 import { StoryScreen } from "../../../.storybook/views"
-import { EmailLoginValidationScreen } from "./email-login-validation"
+import { EmailLoginValidateScreen } from "./email-login-validate"
 
 const mocks = []
 
 const route = {
-  key: "EmailLoginValidationScreen",
-  name: "emailLoginValidation",
+  key: "EmailLoginValidateScreen",
+  name: "emailLoginValidate",
   params: {
     phone: "+50365055543",
     channel: "SMS",
   },
 } as const
 
 export default {
-  title: "EmailLoginValidationScreen",
-  component: EmailLoginValidationScreen,
+  title: "EmailLoginValidateScreen",
+  component: EmailLoginValidateScreen,
   decorators: [
     (Story) => (
       <MockedProvider mocks={mocks} cache={createCache()}>
         <StoryScreen>{Story()}</StoryScreen>
       </MockedProvider>
     ),
   ],
-} as Meta<typeof EmailLoginValidationScreen>
+} as Meta<typeof EmailLoginValidateScreen>
 
-export const Main = () => <EmailLoginValidationScreen route={route} />
+export const Main = () => <EmailLoginValidateScreen route={route} />