Merge pull request #38726 from dukenv0307/fix/33035

feature: Add validation flow to bank account set up
Expensify · Jun 7, 2024 · fbd51e4 · fbd51e4
2 parents c03552b + 392252f
commit fbd51e4
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 9 deletions.
diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -1553,7 +1553,9 @@ export default {
         checkHelpLine: 'Your routing number and account number can be found on a check for the account.',
         validateAccountError: {
             phrase1: 'Hold up! We need you to validate your account first. To do so, ',
-            phrase2: 'sign back in with a magic code',
+            phrase2: 'sign back in with a magic code ',
+            phrase3: 'or ',
+            phrase4: 'verify your account here',
         },
         hasPhoneLoginError: 'To add a verified bank account please ensure your primary login is a valid email and try again. You can add your phone number as a secondary login.',
         hasBeenThrottledError: 'There was an error adding your bank account. Please wait a few minutes and try again.',

diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -1571,6 +1571,8 @@ export default {
         validateAccountError: {
             phrase1: '¡Un momento! Primero necesitas validar tu cuenta. Para hacerlo, ',
             phrase2: 'vuelve a iniciar sesión con un código mágico',
+            phrase3: 'o',
+            phrase4: 'verifique tu cuenta aquí',
         },
         hasPhoneLoginError:
             'Para añadir una cuenta bancaria verificada, asegúrate de que tu nombre de usuario principal sea un correo electrónico válido y vuelve a intentarlo. Puedes añadir tu número de teléfono como nombre de usuario secundario.',

diff --git a/src/libs/actions/User.ts b/src/libs/actions/User.ts
@@ -22,6 +22,7 @@ import type {
     ValidateSecondaryLoginParams,
 } from '@libs/API/parameters';
 import {READ_COMMANDS, WRITE_COMMANDS} from '@libs/API/types';
+import DateUtils from '@libs/DateUtils';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
@@ -399,6 +400,7 @@ function validateSecondaryLogin(contactMethod: string, validateCode: string) {
             key: ONYXKEYS.LOGIN_LIST,
             value: {
                 [contactMethod]: {
+                    validatedDate: DateUtils.getDBTime(),
                     pendingFields: {
                         validateLogin: null,
                     },
@@ -413,6 +415,13 @@ function validateSecondaryLogin(contactMethod: string, validateCode: string) {
             key: ONYXKEYS.ACCOUNT,
             value: {isLoading: false},
         },
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.USER,
+            value: {
+                validated: true,
+            },
+        },
     ];
 
     const failureData: OnyxUpdate[] = [

diff --git a/src/pages/ReimbursementAccount/BankAccountStep.tsx b/src/pages/ReimbursementAccount/BankAccountStep.tsx
@@ -18,6 +18,7 @@ import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import getPlaidDesktopMessage from '@libs/getPlaidDesktopMessage';
+import Navigation from '@libs/Navigation/Navigation';
 import variables from '@styles/variables';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as Link from '@userActions/Link';
@@ -38,6 +39,9 @@ type BankAccountStepOnyxProps = {
 
     /** If the plaid button has been disabled */
     isPlaidDisabled: OnyxEntry<boolean>;
+
+    /** Login list for the user that is signed in */
+    loginList: OnyxEntry<OnyxTypes.LoginList>;
 };
 
 type BankAccountStepProps = BankAccountStepOnyxProps & {
@@ -70,6 +74,7 @@ function BankAccountStep({
     receivedRedirectURI,
     reimbursementAccount,
     onBackButtonPress,
+    loginList,
     isPlaidDisabled = false,
 }: BankAccountStepProps) {
     const theme = useTheme();
@@ -82,6 +87,7 @@ function BankAccountStep({
     }
     const plaidDesktopMessage = getPlaidDesktopMessage();
     const bankAccountRoute = `${CONFIG.EXPENSIFY.NEW_EXPENSIFY_URL}${ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute('new', policyID, ROUTES.WORKSPACE_INITIAL.getRoute(policyID))}`;
+    const loginNames = Object.keys(loginList ?? {});
 
     const removeExistingBankAccountDetails = () => {
         const bankAccountData: Partial<ReimbursementAccountForm> = {
@@ -178,6 +184,16 @@ function BankAccountStep({
                                 >
                                     {translate('bankAccount.validateAccountError.phrase2')}
                                 </TextLink>
+                                {translate('bankAccount.validateAccountError.phrase3')}
+                                <TextLink
+                                    fontSize={variables.fontSizeLabel}
+                                    onPress={() => {
+                                        const login = loginList?.[loginNames?.[0]] ?? {};
+                                        Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHOD_DETAILS.getRoute(login?.partnerUserID ?? loginNames?.[0]));
+                                    }}
+                                >
+                                    {translate('bankAccount.validateAccountError.phrase4')}
+                                </TextLink>
                                 .
                             </Text>
                         </View>
@@ -215,4 +231,7 @@ export default withOnyx<BankAccountStepProps, BankAccountStepOnyxProps>({
     isPlaidDisabled: {
         key: ONYXKEYS.IS_PLAID_DISABLED,
     },
+    loginList: {
+        key: ONYXKEYS.LOGIN_LIST,
+    },
 })(BankAccountStep);
diff --git a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx
@@ -23,7 +23,6 @@ import {canUseTouchScreen} from '@libs/DeviceCapabilities';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
-import * as Session from '@userActions/Session';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -156,13 +155,6 @@ function ContactMethodDetailsPage({route}: ContactMethodDetailsPageProps) {
             return;
         }
 
-        // If the selected contactMethod is the current session['login'] and the account is unvalidated,
-        // the current authToken is invalid after the successful magic code verification.
-        // So we need to sign out the user and redirect to the sign in page.
-        if (isDefaultContactMethod) {
-            Session.signOutAndRedirectToSignIn();
-            return;
-        }
         // Navigate to methods page on successful magic code verification
         // validatedDate property is responsible to decide the status of the magic code verification
         Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.route);