Merge pull request #5116 from Expensify/monil-resendLinkCopy

Jag96 · web-flow · commit 2202cc26233c · 2021-10-05T10:23:34.000-07:00
Refactor resend link page
diff --git a/src/languages/en.js b/src/languages/en.js
@@ -26,6 +26,7 @@ export default {
         continue: 'Continue',
         firstName: 'First name',
         lastName: 'Last name',
+        phone: 'Phone',
         phoneNumber: 'Phone number',
         email: 'Email',
         and: 'and',
@@ -376,8 +377,10 @@ export default {
     },
     resendValidationForm: {
         linkHasBeenResent: 'Link has been re-sent',
-        weSentYouMagicSignInLink: ({loginType}) => `We've sent a magic sign in link to your ${loginType}.`,
+        weSentYouMagicSignInLink: ({login}) => `We've sent a magic sign in link to ${login}. Check your Inbox and your Spam folder and wait 5-10 minutes before trying again.`,
         resendLink: 'Resend link',
+        unvalidatedAccount: 'This account exists but isn\'t validated, please check your inbox for your magic link.',
+        newAccount: ({login, loginType}) => `Welcome ${login}, it's always great to see a new face around here! Please check your ${loginType} for a magic link to validate your account.`,
     },
     detailsPage: {
         localTime: 'Local time',
diff --git a/src/languages/es.js b/src/languages/es.js
@@ -26,6 +26,7 @@ export default {
         continue: 'Continuar',
         firstName: 'Primer nombre',
         lastName: 'Apellido',
+        phone: 'teléfono',
         phoneNumber: 'Número de teléfono',
         email: 'Email',
         and: 'y',
@@ -376,8 +377,10 @@ export default {
     },
     resendValidationForm: {
         linkHasBeenResent: 'El enlace se ha reenviado',
-        weSentYouMagicSignInLink: ({loginType}) => `Hemos enviado un enlace mágico de inicio de sesión a tu ${loginType}.`,
+        weSentYouMagicSignInLink: ({login}) => `Hemos enviado un enlace mágico de inicio de sesión a ${login}. Verifica tu bandeja de entrada y tu carpeta de correo no deseado y espera de 5 a 10 minutos antes de intentarlo de nuevo.`,
         resendLink: 'Reenviar enlace',
+        unvalidatedAccount: 'Esta cuenta existe pero no está validada, por favor busca el enlace mágico en tu bandeja de entrada',
+        newAccount: ({login, loginType}) => `¡Bienvenido ${login}, es genial ver una cara nueva por aquí! En tu ${loginType} encontrarás un enlace para validar tu cuenta, por favor, revísalo`,
     },
     detailsPage: {
         localTime: 'Hora local',
diff --git a/src/pages/SetPasswordPage.js b/src/pages/SetPasswordPage.js
@@ -113,7 +113,10 @@ class SetPasswordPage extends Component {
         const error = this.state.error || this.props.account.error;
         return (
             <SafeAreaView style={[styles.signInPage]}>
-                <SignInPageLayout welcomeText={this.props.translate('setPasswordPage.passwordFormTitle')}>
+                <SignInPageLayout
+                    shouldShowWelcomeText
+                    welcomeText={this.props.translate('setPasswordPage.passwordFormTitle')}
+                >
                     <View style={[styles.mb4]}>
                         <NewPasswordForm
                             password={this.state.password}
diff --git a/src/pages/signin/ResendValidationForm.js b/src/pages/signin/ResendValidationForm.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {View} from 'react-native';
+import {TouchableOpacity, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
@@ -9,9 +9,11 @@ import Button from '../../components/Button';
 import Text from '../../components/Text';
 import {reopenAccount, resendValidationLink, resetPassword} from '../../libs/actions/Session';
 import ONYXKEYS from '../../ONYXKEYS';
-import ChangeExpensifyLoginLink from './ChangeExpensifyLoginLink';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import compose from '../../libs/compose';
+import redirectToSignIn from '../../libs/actions/SignInRedirect';
+import Avatar from '../../components/Avatar';
+import {getDefaultAvatar} from '../../libs/OptionsListUtils';
 
 const propTypes = {
     /* Onyx Props */
@@ -32,6 +34,9 @@ const propTypes = {
 
         /** Whether or not the account is closed */
         closed: PropTypes.bool,
+
+        /** Whether or not the account already exists */
+        accountExists: PropTypes.bool,
     }),
 
     ...withLocalizePropTypes,
@@ -80,31 +85,59 @@ class ResendValidationForm extends React.Component {
     }
 
     render() {
+        const isNewAccount = !this.props.account.accountExists;
+        const isOldUnvalidatedAccount = this.props.account.accountExists && !this.props.account.validated;
+        const isSMSLogin = Str.isSMSLogin(this.props.credentials.login);
+        const login = isSMSLogin ? this.props.toLocalPhone(Str.removeSMSDomain(this.props.credentials.login)) : this.props.credentials.login;
+        const loginType = (isSMSLogin ? this.props.translate('common.phone') : this.props.translate('common.email')).toLowerCase();
+        let message = '';
+
+        if (isNewAccount) {
+            message = this.props.translate('resendValidationForm.newAccount', {
+                login,
+                loginType,
+            });
+        } else if (isOldUnvalidatedAccount) {
+            message = this.props.translate('resendValidationForm.unvalidatedAccount');
+        } else {
+            message = this.props.translate('resendValidationForm.weSentYouMagicSignInLink', {
+                login,
+            });
+        }
+
         return (
             <>
-                <View>
+                <View style={[styles.mt3, styles.flexRow, styles.alignItemsCenter, styles.justifyContentStart]}>
+                    <Avatar
+                        source={getDefaultAvatar(this.props.credentials.login)}
+                        imageStyles={[styles.mr2]}
+                    />
+                    <Text style={[styles.textStrong]}>
+                        {login}
+                    </Text>
+                </View>
+                <View style={[styles.mv5]}>
                     <Text>
-                        {this.props.translate('resendValidationForm.weSentYouMagicSignInLink', {
-                            loginType: (Str.isSMSLogin(this.props.credentials.login)
-                                ? this.props.translate('common.phoneNumber').toLowerCase()
-                                : this.props.translate('common.email')).toLowerCase(),
-                        })}
+                        {message}
                     </Text>
                 </View>
                 {!_.isEmpty(this.state.formSuccess) && (
                     <Text style={[styles.formSuccess]}>
                         {this.state.formSuccess}
                     </Text>
                 )}
-                <View style={[styles.mt4]}>
+                <View style={[styles.mb4, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
+                    <TouchableOpacity onPress={() => redirectToSignIn()}>
+                        <Text>
+                            {this.props.translate('common.back')}
+                        </Text>
+                    </TouchableOpacity>
                     <Button
                         success
-                        style={[styles.mb2]}
                         text={this.props.translate('resendValidationForm.resendLink')}
                         isLoading={this.props.account.loading}
                         onPress={this.validateAndSubmitForm}
                     />
-                    <ChangeExpensifyLoginLink />
                 </View>
             </>
         );
diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js
@@ -92,7 +92,7 @@ class SignInPage extends Component {
                 <SafeAreaView style={[styles.signInPage]}>
                     <SignInPageLayout
                         welcomeText={welcomeText}
-                        shouldShowWelcomeText={showLoginForm}
+                        shouldShowWelcomeText={showLoginForm || showPasswordForm || !showResendValidationLinkForm}
                         shouldShowWelcomeScreenshot={showLoginForm}
                     >
                         {showLoginForm && <LoginForm />}
diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js
@@ -16,6 +16,9 @@ const propTypes = {
      * on form type (set password, sign in, etc.) */
     welcomeText: PropTypes.string.isRequired,
 
+    /** Whether to show welcome text on a particular page */
+    shouldShowWelcomeText: PropTypes.bool.isRequired,
+
     ...withLocalizePropTypes,
 };
 
@@ -47,9 +50,11 @@ const SignInPageLayoutNarrow = props => (
                             height={variables.componentSizeLarge}
                         />
                     </View>
-                    <Text style={[styles.mv5, styles.textLabel, styles.h3]}>
-                        {props.welcomeText}
-                    </Text>
+                    {props.shouldShowWelcomeText && (
+                        <Text style={[styles.mv5, styles.textLabel, styles.h3]}>
+                            {props.welcomeText}
+                        </Text>
+                    )}
                     {props.children}
                 </View>
             </View>
diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js
@@ -22,6 +22,9 @@ const propTypes = {
     /* Flag to check medium screen with device */
     isMediumScreenWidth: PropTypes.bool.isRequired,
 
+    /** Whether to show welcome text on a particular page */
+    shouldShowWelcomeText: PropTypes.bool.isRequired,
+
     ...withLocalizePropTypes,
 };
 
@@ -45,9 +48,11 @@ const SignInPageLayoutWide = props => (
                                 height={variables.componentSizeLarge}
                             />
                         </View>
-                        <Text style={[styles.mv5, styles.textLabel, styles.h3]}>
-                            {props.welcomeText}
-                        </Text>
+                        {props.shouldShowWelcomeText && (
+                            <Text style={[styles.mv5, styles.textLabel, styles.h3]}>
+                                {props.welcomeText}
+                            </Text>
+                        )}
                         <View>
                             {props.children}
                         </View>
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
@@ -1,9 +1,20 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import SignInPageLayoutNarrow from './SignInPageLayoutNarrow';
 import SignInPageLayoutWide from './SignInPageLayoutWide';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 
 const propTypes = {
+    /** The children to show inside the layout */
+    children: PropTypes.node.isRequired,
+
+    /** Welcome text to show in the header of the form, changes depending
+     * on form type (set password, sign in, etc.) */
+    welcomeText: PropTypes.string.isRequired,
+
+    /** Whether to show welcome text on a particular page */
+    shouldShowWelcomeText: PropTypes.bool.isRequired,
+
     ...windowDimensionsPropTypes,
 };
 
@@ -13,11 +24,19 @@ const SignInPageLayout = props => (
             <SignInPageLayoutWide
                 welcomeText={props.welcomeText}
                 isMediumScreenWidth={props.isMediumScreenWidth}
+                shouldShowWelcomeText={props.shouldShowWelcomeText}
             >
                 {props.children}
             </SignInPageLayoutWide>
         )
-        : <SignInPageLayoutNarrow welcomeText={props.welcomeText}>{props.children}</SignInPageLayoutNarrow>
+        : (
+            <SignInPageLayoutNarrow
+                welcomeText={props.welcomeText}
+                shouldShowWelcomeText={props.shouldShowWelcomeText}
+            >
+                {props.children}
+            </SignInPageLayoutNarrow>
+        )
 );
 
 SignInPageLayout.propTypes = propTypes;

Original file line number	Diff line number	Diff line change
`@@ -92,7 +92,7 @@ class SignInPage extends Component {`
`92`	`92`	`<SafeAreaView style={[styles.signInPage]}>`
`93`	`93`	`<SignInPageLayout`
`94`	`94`	`welcomeText={welcomeText}`
`95`		`- shouldShowWelcomeText={showLoginForm}`
	`95`	`+ shouldShowWelcomeText={showLoginForm \|\| showPasswordForm \|\| !showResendValidationLinkForm}`
`96`	`96`	`shouldShowWelcomeScreenshot={showLoginForm}`
`97`	`97`	`>`
`98`	`98`	`{showLoginForm && <LoginForm />}`