Merge pull request Expensify#45456 from nkdengineer/fix/45242

Update the magic code expired page
tienifr · Jul 26, 2024 · 2b36366 · 2b36366
2 parents 0559307 + b543401
commit 2b36366
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 5 deletions.
diff --git a/src/CONST.ts b/src/CONST.ts
@@ -627,6 +627,8 @@ const CONST = {
 
     SIGN_IN_FORM_WIDTH: 300,
 
+    REQUEST_CODE_DELAY: 30,
+
     DEEPLINK_PROMPT_DENYLIST: [SCREENS.HOME, SCREENS.SIGN_IN_WITH_APPLE_DESKTOP, SCREENS.SIGN_IN_WITH_GOOGLE_DESKTOP],
 
     SIGN_IN_METHOD: {

diff --git a/src/components/ValidateCode/ExpiredValidateCodeModal.tsx b/src/components/ValidateCode/ExpiredValidateCodeModal.tsx
@@ -1,17 +1,23 @@
 import React from 'react';
 import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
 import Text from '@components/Text';
+import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@libs/Navigation/Navigation';
 import variables from '@styles/variables';
+import * as Session from '@userActions/Session';
+import ONYXKEYS from '@src/ONYXKEYS';
 
 function ExpiredValidateCodeModal() {
     const theme = useTheme();
     const styles = useThemeStyles();
+    const [credentials] = useOnyx(ONYXKEYS.CREDENTIALS);
     const {translate} = useLocalize();
     return (
         <View style={styles.deeplinkWrapperContainer}>
@@ -25,7 +31,18 @@ function ExpiredValidateCodeModal() {
                 </View>
                 <Text style={[styles.textHeadline, styles.textXXLarge, styles.textAlignCenter]}>{translate('validateCodeModal.expiredCodeTitle')}</Text>
                 <View style={[styles.mt2, styles.mb2]}>
-                    <Text style={styles.textAlignCenter}>{translate('validateCodeModal.expiredCodeDescription')}</Text>
+                    <Text style={styles.textAlignCenter}>
+                        {translate('validateCodeModal.expiredCodeDescription')}
+                        {translate('validateCodeModal.or')}{' '}
+                        <TextLink
+                            onPress={() => {
+                                Session.beginSignIn(credentials?.login ?? '');
+                                Navigation.setNavigationActionToMicrotaskQueue(Navigation.goBack);
+                            }}
+                        >
+                            {translate('validateCodeModal.requestOneHere')}
+                        </TextLink>
+                    </Text>
                 </View>
             </View>
             <View style={styles.deeplinkWrapperFooter}>

diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -438,10 +438,11 @@ export default {
         or: ', or',
         signInHere: 'just sign in here',
         expiredCodeTitle: 'Magic code expired',
-        expiredCodeDescription: 'Go back to the original device and request a new code.',
+        expiredCodeDescription: 'Go back to the original device and request a new code',
         successfulNewCodeRequest: 'Code requested. Please check your device.',
         tfaRequiredTitle: 'Two-factor authentication\nrequired',
         tfaRequiredDescription: "Please enter the two-factor authentication code\nwhere you're trying to sign in.",
+        requestOneHere: 'request one here.',
     },
     moneyRequestConfirmationList: {
         paidBy: 'Paid by',

diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -429,10 +429,11 @@ export default {
         description: 'Por favor, introduce el código utilizando el dispositivo\nen el que se solicitó originalmente',
         signInHere: 'simplemente inicia sesión aquí',
         expiredCodeTitle: 'Código mágico caducado',
-        expiredCodeDescription: 'Vuelve al dispositivo original y solicita un código nuevo.',
+        expiredCodeDescription: 'Vuelve al dispositivo original y solicita un código nuevo',
         successfulNewCodeRequest: 'Código solicitado. Por favor, comprueba tu dispositivo.',
         tfaRequiredTitle: 'Se requiere autenticación\nde dos factores',
         tfaRequiredDescription: 'Por favor, introduce el código de autenticación de dos factores\ndonde estás intentando iniciar sesión.',
+        requestOneHere: 'solicite uno aquí.',
     },
     moneyRequestConfirmationList: {
         paidBy: 'Pagado por',

diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx
@@ -64,7 +64,7 @@ function BaseValidateCodeForm({account, credentials, session, autoComplete, isUs
     const [formError, setFormError] = useState<FormError>({});
     const [validateCode, setValidateCode] = useState(credentials?.validateCode ?? '');
     const [twoFactorAuthCode, setTwoFactorAuthCode] = useState('');
-    const [timeRemaining, setTimeRemaining] = useState(30);
+    const [timeRemaining, setTimeRemaining] = useState(CONST.REQUEST_CODE_DELAY as number);
     const [recoveryCode, setRecoveryCode] = useState('');
     const [needToClearError, setNeedToClearError] = useState<boolean>(!!account?.errors);
 
@@ -91,6 +91,7 @@ function BaseValidateCodeForm({account, credentials, session, autoComplete, isUs
         if (!inputValidateCodeRef.current || !canFocusInputOnScreenFocus() || !isVisible || !isFocused) {
             return;
         }
+        setTimeRemaining(CONST.REQUEST_CODE_DELAY);
         inputValidateCodeRef.current.focus();
     }, [isVisible, isFocused]);
 
@@ -161,7 +162,7 @@ function BaseValidateCodeForm({account, credentials, session, autoComplete, isUs
         User.resendValidateCode(credentials?.login ?? '');
         inputValidateCodeRef.current?.clear();
         // Give feedback to the user to let them know the email was sent so that they don't spam the button.
-        setTimeRemaining(30);
+        setTimeRemaining(CONST.REQUEST_CODE_DELAY);
     };
 
     /**