Merge pull request #33838 from Expensify/nat-vbba111

Use new vbba 111 commands and swap order of company step and requestor steps

src/CONST.ts

@@ -189,7 +189,6 @@ const CONST = {
     BANK_ACCOUNT: {
         BANK_INFO_STEP: {
             INPUT_KEY: {
-                BANK_ACCOUNT_ID: 'bankAccountID',
                 ROUTING_NUMBER: 'routingNumber',
                 ACCOUNT_NUMBER: 'accountNumber',
                 PLAID_MASK: 'plaidMask',
@@ -201,7 +200,6 @@ const CONST = {
         },
         PERSONAL_INFO_STEP: {
             INPUT_KEY: {
-                BANK_ACCOUNT_ID: 'bankAccountID',
                 FIRST_NAME: 'firstName',
                 LAST_NAME: 'lastName',
                 DOB: 'dob',
@@ -266,7 +264,6 @@ const CONST = {
         },
         COMPLETE_VERIFICATION: {
             INPUT_KEY: {
-                BANK_ACCOUNT_ID: 'bankAccountID',
                 IS_AUTHORIZED_TO_USE_BANK_ACCOUNT: 'isAuthorizedToUseBankAccount',
                 CERTIFY_TRUE_INFORMATION: 'certifyTrueInformation',
                 ACCEPT_TERMS_AND_CONDITIONS: 'acceptTermsAndConditions',
@@ -281,8 +278,9 @@ const CONST = {
         STEP: {
             // In the order they appear in the VBA flow
             BANK_ACCOUNT: 'BankAccountStep',
-            COMPANY: 'CompanyStep',
             REQUESTOR: 'RequestorStep',
+            COMPANY: 'CompanyStep',
+            BENEFICIAL_OWNERS: 'BeneficialOwnersStep',
             ACH_CONTRACT: 'ACHContractStep',
             VALIDATION: 'ValidationStep',
             ENABLE: 'EnableStep',

src/ONYXKEYS.ts

@@ -127,6 +127,7 @@ const ONYXKEYS = {
 
     /** Token needed to initialize Onfido */
     ONFIDO_TOKEN: 'onfidoToken',
+    ONFIDO_APPLICANT_ID: 'onfidoApplicantID',
 
     /** Indicates which locale should be used */
     NVP_PREFERRED_LOCALE: 'preferredLocale',
@@ -398,6 +399,7 @@ type OnyxValues = {
     [ONYXKEYS.IS_PLAID_DISABLED]: boolean;
     [ONYXKEYS.PLAID_LINK_TOKEN]: string;
     [ONYXKEYS.ONFIDO_TOKEN]: string;
+    [ONYXKEYS.ONFIDO_APPLICANT_ID]: string;
     [ONYXKEYS.NVP_PREFERRED_LOCALE]: OnyxTypes.Locale;
     [ONYXKEYS.USER_WALLET]: OnyxTypes.UserWallet;
     [ONYXKEYS.WALLET_ONFIDO]: OnyxTypes.WalletOnfido;

src/components/ReimbursementAccountLoadingIndicator.js

@@ -4,17 +4,13 @@ import {StyleSheet, View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import FullPageOfflineBlockingView from './BlockingViews/FullPageOfflineBlockingView';
-import FullScreenLoadingIndicator from './FullscreenLoadingIndicator';
 import HeaderWithBackButton from './HeaderWithBackButton';
 import Lottie from './Lottie';
 import LottieAnimations from './LottieAnimations';
 import ScreenWrapper from './ScreenWrapper';
 import Text from './Text';
 
 const propTypes = {
-    /** Whether the user is submitting verifications data */
-    isSubmittingVerificationsData: PropTypes.bool.isRequired,
-
     /** Method to trigger when pressing back button of the header */
     onBackButtonPress: PropTypes.func.isRequired,
 };
@@ -33,22 +29,18 @@ function ReimbursementAccountLoadingIndicator(props) {
                 onBackButtonPress={props.onBackButtonPress}
             />
             <FullPageOfflineBlockingView>
-                {props.isSubmittingVerificationsData ? (
-                    <View style={[styles.pageWrapper]}>
-                        <Lottie
-                            source={LottieAnimations.ReviewingBankInfo}
-                            autoPlay
-                            loop
-                            style={styles.loadingVBAAnimation}
-                            webStyle={styles.loadingVBAAnimationWeb}
-                        />
-                        <View style={[styles.ph6]}>
-                            <Text style={[styles.textAlignCenter]}>{translate('reimbursementAccountLoadingAnimation.explanationLine')}</Text>
-                        </View>
+                <View style={[styles.pageWrapper]}>
+                    <Lottie
+                        source={LottieAnimations.ReviewingBankInfo}
+                        autoPlay
+                        loop
+                        style={styles.loadingVBAAnimation}
+                        webStyle={styles.loadingVBAAnimationWeb}
+                    />
+                    <View style={[styles.ph6]}>
+                        <Text style={[styles.textAlignCenter]}>{translate('reimbursementAccountLoadingAnimation.explanationLine')}</Text>
                     </View>
-                ) : (
-                    <FullScreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />
-                )}
+                </View>
             </FullPageOfflineBlockingView>
         </ScreenWrapper>
     );

src/hooks/useSubStep/index.ts

@@ -15,23 +15,26 @@ export default function useSubStep<T>({bodyContent, onFinished, startFrom = 0}:
         setScreenIndex(prevScreenIndex);
     }, [screenIndex]);
 
-    const nextScreen = useCallback(() => {
-        if (isEditing.current) {
-            isEditing.current = false;
-
-            setScreenIndex(bodyContent.length - 1);
-
-            return;
-        }
-
-        const nextScreenIndex = screenIndex + 1;
-
-        if (nextScreenIndex === bodyContent.length) {
-            onFinished();
-        } else {
-            setScreenIndex(nextScreenIndex);
-        }
-    }, [screenIndex, bodyContent.length, onFinished]);
+    const nextScreen = useCallback(
+        (data?: Record<string, unknown>) => {
+            if (isEditing.current) {
+                isEditing.current = false;
+
+                setScreenIndex(bodyContent.length - 1);
+
+                return;
+            }
+
+            const nextScreenIndex = screenIndex + 1;
+
+            if (nextScreenIndex === bodyContent.length) {
+                onFinished(data);
+            } else {
+                setScreenIndex(nextScreenIndex);
+            }
+        },
+        [screenIndex, bodyContent.length, onFinished],
+    );
 
     const moveTo = useCallback((step: number) => {
         isEditing.current = true;

src/languages/en.ts

@@ -1464,9 +1464,6 @@ export default {
         headerTitle: 'Personal information',
         learnMore: 'Learn more',
         isMyDataSafe: 'Is my data safe?',
-        onFidoConditions: 'By continuing with the request to add this bank account, you confirm that you have read, understand and accept ',
-        isControllingOfficer: 'I am authorized to use my company bank account for business spend',
-        isControllingOfficerError: 'You must be a controlling officer with authorization to operate the business bank account.',
     },
     personalInfoStep: {
         personalInfo: 'Personal info',

src/languages/es.ts

@@ -1486,9 +1486,6 @@ export default {
         headerTitle: 'Información personal',
         learnMore: 'Más información',
         isMyDataSafe: '¿Están seguros mis datos?',
-        onFidoConditions: 'Al continuar con la solicitud de añadir esta cuenta bancaria, confirma que ha leído, entiende y acepta ',
-        isControllingOfficer: 'Estoy autorizado a utilizar la cuenta bancaria de mi compañía para gastos de empresa',
-        isControllingOfficerError: 'Debe ser un oficial controlador con autorización para operar la cuenta bancaria de la compañía',
     },
     personalInfoStep: {
         personalInfo: 'Información Personal',

src/libs/actions/BankAccounts.ts

@@ -8,15 +8,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type PlaidBankAccount from '@src/types/onyx/PlaidBankAccount';
 import type {BankAccountStep, BankAccountSubStep} from '@src/types/onyx/ReimbursementAccount';
-import type {
-    ACHContractStepProps,
-    BankAccountStepProps,
-    BeneficialOwnersStepDraftProps,
-    CompanyStepProps,
-    OnfidoData,
-    ReimbursementAccountProps,
-    RequestorStepProps,
-} from '@src/types/onyx/ReimbursementAccountDraft';
+import type {ACHContractStepProps, BeneficialOwnersStepProps, CompanyStepProps, OnfidoData, RequestorStepProps} from '@src/types/onyx/ReimbursementAccountDraft';
 import type {OnyxData} from '@src/types/onyx/Request';
 import * as ReimbursementAccount from './ReimbursementAccount';
 
@@ -35,8 +27,6 @@ export {
 export {openPlaidBankAccountSelector, openPlaidBankLogin} from './Plaid';
 export {openOnfidoFlow, answerQuestionsForWallet, verifyIdentity, acceptWalletTerms} from './Wallet';
 
-type BankAccountCompanyInformation = BankAccountStepProps & CompanyStepProps & ReimbursementAccountProps;
-
 type ReimbursementAccountStep = BankAccountStep | '';
 
 type ReimbursementAccountSubStep = BankAccountSubStep | '';
@@ -97,6 +87,7 @@ function clearPersonalBankAccount() {
 
 function clearOnfidoToken() {
     Onyx.merge(ONYXKEYS.ONFIDO_TOKEN, '');
+    Onyx.merge(ONYXKEYS.ONFIDO_APPLICANT_ID, '');
 }
 
 /**
@@ -168,6 +159,7 @@ function connectBankAccountWithPlaid(bankAccountID: number, selectedPlaidBankAcc
         bank?: string;
         plaidAccountID: string;
         plaidAccessToken: string;
+        canUseNewVbbaFlow: boolean;
     };
 
     const parameters: ConnectBankAccountWithPlaidParams = {
@@ -177,6 +169,7 @@ function connectBankAccountWithPlaid(bankAccountID: number, selectedPlaidBankAcc
         bank: selectedPlaidBankAccount.bankName,
         plaidAccountID: selectedPlaidBankAccount.plaidAccountID,
         plaidAccessToken: selectedPlaidBankAccount.plaidAccessToken,
+        canUseNewVbbaFlow: true,
     };
 
     API.write(commandName, parameters, getVBBADataForOnyx());
@@ -283,8 +276,16 @@ function deletePaymentBankAccount(bankAccountID: number) {
  *
  * This action is called by the requestor step in the Verified Bank Account flow
  */
-function updatePersonalInformationForBankAccount(params: RequestorStepProps) {
-    API.write('UpdatePersonalInformationForBankAccount', params, getVBBADataForOnyx(CONST.BANK_ACCOUNT.STEP.REQUESTOR));
+function updatePersonalInformationForBankAccount(bankAccountID: number, params: RequestorStepProps) {
+    API.write(
+        'UpdatePersonalInformationForBankAccount',
+        {
+            ...params,
+            bankAccountID,
+            canUseNewVbbaFlow: true,
+        },
+        getVBBADataForOnyx(CONST.BANK_ACCOUNT.STEP.REQUESTOR),
+    );
 }
 
 function validateBankAccount(bankAccountID: number, validateCode: string) {
@@ -385,26 +386,46 @@ function openReimbursementAccountPage(stepToOpen: ReimbursementAccountStep, subS
 /**
  * Updates the bank account in the database with the company step data
  */
-function updateCompanyInformationForBankAccount(bankAccount: BankAccountCompanyInformation, policyID: string) {
-    type UpdateCompanyInformationForBankAccountParams = BankAccountCompanyInformation & {policyID: string};
-
-    const parameters: UpdateCompanyInformationForBankAccountParams = {...bankAccount, policyID};
-
-    API.write('UpdateCompanyInformationForBankAccount', parameters, getVBBADataForOnyx(CONST.BANK_ACCOUNT.STEP.COMPANY));
+function updateCompanyInformationForBankAccount(bankAccountID: number, params: CompanyStepProps) {
+    API.write(
+        'UpdateCompanyInformationForBankAccount',
+        {
+            ...params,
+            bankAccountID,
+            canUseNewVbbaFlow: true,
+        },
+        getVBBADataForOnyx(CONST.BANK_ACCOUNT.STEP.COMPANY),
+    );
 }
 
 /**
- * Add beneficial owners for the bank account to the draft
+ * Add beneficial owners for the bank account and verify the accuracy of the information provided
  */
-function updateBeneficialOwnersForBankAccountDraft(params: BeneficialOwnersStepDraftProps) {
-    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT, params);
+function updateBeneficialOwnersForBankAccount(bankAccountID: number, params: BeneficialOwnersStepProps) {
+    API.write(
+        'UpdateBeneficialOwnersForBankAccount',
+        {
+            ...params,
+            bankAccountID,
+            canUseNewVbbaFlow: true,
+        },
+        getVBBADataForOnyx(),
+    );
 }
 
 /**
- * Add beneficial owners for the bank account, accept the ACH terms and conditions and verify the accuracy of the information provided
+ * Accept the ACH terms and conditions and verify the accuracy of the information provided
  */
-function updateBeneficialOwnersForBankAccount(params: ACHContractStepProps) {
-    API.write('UpdateBeneficialOwnersForBankAccount', params, getVBBADataForOnyx());
+function acceptACHContractForBankAccount(bankAccountID: number, params: ACHContractStepProps) {
+    API.write(
+        'AcceptACHContractForBankAccount',
+        {
+            ...params,
+            bankAccountID,
+            canUseNewVbbaFlow: true,
+        },
+        getVBBADataForOnyx(),
+    );
 }
 
 /**
@@ -417,13 +438,15 @@ function connectBankAccountManually(bankAccountID: number, accountNumber?: strin
         accountNumber?: string;
         routingNumber?: string;
         plaidMask?: string;
+        canUseNewVbbaFlow: boolean;
     };
 
     const parameters: ConnectBankAccountManuallyParams = {
         bankAccountID,
         accountNumber,
         routingNumber,
         plaidMask,
+        canUseNewVbbaFlow: true,
     };
 
     API.write('ConnectBankAccountManually', parameters, getVBBADataForOnyx(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT));
@@ -436,11 +459,13 @@ function verifyIdentityForBankAccount(bankAccountID: number, onfidoData: OnfidoD
     type VerifyIdentityForBankAccountParams = {
         bankAccountID: number;
         onfidoData: string;
+        canUseNewVbbaFlow: boolean;
     };
 
     const parameters: VerifyIdentityForBankAccountParams = {
         bankAccountID,
         onfidoData: JSON.stringify(onfidoData),
+        canUseNewVbbaFlow: true,
     };
 
     API.write('VerifyIdentityForBankAccount', parameters, getVBBADataForOnyx());
@@ -508,6 +533,7 @@ function setReimbursementAccountLoading(isLoading: boolean) {
 }
 
 export {
+    acceptACHContractForBankAccount,
     addBusinessWebsiteForDraft,
     addBusinessAddressForDraft,
     addPersonalAddressForDraft,
@@ -526,7 +552,6 @@ export {
     clearReimbursementAccount,
     openReimbursementAccountPage,
     updateBeneficialOwnersForBankAccount,
-    updateBeneficialOwnersForBankAccountDraft,
     updateCompanyInformationForBankAccount,
     updatePersonalInformationForBankAccount,
     openWorkspaceView,

src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.js

@@ -43,6 +43,11 @@ function resetFreePlanBankAccount(bankAccountID, session) {
                     key: ONYXKEYS.ONFIDO_TOKEN,
                     value: '',
                 },
+                {
+                    onyxMethod: Onyx.METHOD.SET,
+                    key: ONYXKEYS.ONFIDO_APPLICANT_ID,
+                    value: '',
+                },
                 {
                     onyxMethod: Onyx.METHOD.SET,
                     key: ONYXKEYS.PLAID_DATA,

src/pages/ReimbursementAccount/ACHContractStep.js

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
-import React, {useState} from 'react';
-import BeneficialOwnerInfo from './BeneficialOwnerInfo/BeneficialOwnerInfo';
+import React from 'react';
 import CompleteVerification from './CompleteVerification/CompleteVerification';
 
 const propTypes = {
@@ -12,23 +11,10 @@ const propTypes = {
 };
 
 function ACHContractStep({onBackButtonPress, onCloseButtonPress}) {
-    const [isBeneficialOwnerInfoSet, setIsBeneficialOwnerInfoSet] = useState(false);
-    const handleCompleteVerificationBackButtonPress = () => setIsBeneficialOwnerInfoSet(false);
-
-    if (isBeneficialOwnerInfoSet) {
-        return (
-            <CompleteVerification
-                onBackButtonPress={handleCompleteVerificationBackButtonPress}
-                onCloseButtonPress={onCloseButtonPress}
-            />
-        );
-    }
-
     return (
-        <BeneficialOwnerInfo
+        <CompleteVerification
             onBackButtonPress={onBackButtonPress}
             onCloseButtonPress={onCloseButtonPress}
-            setIsBeneficialOwnerInfoSet={setIsBeneficialOwnerInfoSet}
         />
     );
 }