Use new vbba 111 commands and swap order of company step and requesto…

…r steps
Expensify · Jan 11, 2024 · 03e4b05 · 03e4b05
1 parent 56e32a2
commit 03e4b05
Show file tree

Hide file tree

Showing 18 changed files with 162 additions and 127 deletions.
diff --git a/src/CONST.ts b/src/CONST.ts
@@ -281,8 +281,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',

diff --git a/src/ONYXKEYS.ts b/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;

diff --git a/src/components/ReimbursementAccountLoadingIndicator.js b/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>
     );

diff --git a/src/hooks/useSubStep/index.ts b/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;

diff --git a/src/libs/actions/BankAccounts.ts b/src/libs/actions/BankAccounts.ts
@@ -11,7 +11,7 @@ import type {BankAccountStep, BankAccountSubStep} from '@src/types/onyx/Reimburs
 import type {
     ACHContractStepProps,
     BankAccountStepProps,
-    BeneficialOwnersStepDraftProps,
+    BeneficialOwnersStepProps,
     CompanyStepProps,
     OnfidoData,
     ReimbursementAccountProps,
@@ -97,6 +97,7 @@ function clearPersonalBankAccount() {
 
 function clearOnfidoToken() {
     Onyx.merge(ONYXKEYS.ONFIDO_TOKEN, '');
+    Onyx.merge(ONYXKEYS.ONFIDO_APPLICANT_ID, '');
 }
 
 /**
@@ -168,6 +169,7 @@ function connectBankAccountWithPlaid(bankAccountID: number, selectedPlaidBankAcc
         bank?: string;
         plaidAccountID: string;
         plaidAccessToken: string;
+        canUseNewVbbaFlow: boolean;
     };
 
     const parameters: ConnectBankAccountWithPlaidParams = {
@@ -177,6 +179,7 @@ function connectBankAccountWithPlaid(bankAccountID: number, selectedPlaidBankAcc
         bank: selectedPlaidBankAccount.bankName,
         plaidAccountID: selectedPlaidBankAccount.plaidAccountID,
         plaidAccessToken: selectedPlaidBankAccount.plaidAccessToken,
+        canUseNewVbbaFlow: true,
     };
 
     API.write(commandName, parameters, getVBBADataForOnyx());
@@ -284,7 +287,14 @@ 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));
+    API.write(
+        'UpdatePersonalInformationForBankAccount',
+        {
+            ...params,
+            canUseNewVbbaFlow: true,
+        },
+        getVBBADataForOnyx(CONST.BANK_ACCOUNT.STEP.REQUESTOR),
+    );
 }
 
 function validateBankAccount(bankAccountID: number, validateCode: string) {
@@ -386,25 +396,32 @@ 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};
+    type UpdateCompanyInformationForBankAccountParams = BankAccountCompanyInformation & {
+        policyID: string;
+        canUseNewVbbaFlow: boolean;
+    };
 
-    const parameters: UpdateCompanyInformationForBankAccountParams = {...bankAccount, policyID};
+    const parameters: UpdateCompanyInformationForBankAccountParams = {
+        ...bankAccount,
+        policyID,
+        canUseNewVbbaFlow: true,
+    };
 
     API.write('UpdateCompanyInformationForBankAccount', parameters, 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(params: BeneficialOwnersStepProps) {
+    API.write('UpdateBeneficialOwnersForBankAccount', {...params, 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(params: ACHContractStepProps) {
+    API.write('AcceptACHContractForBankAccount', {...params, canUseNewVbbaFlow: true}, getVBBADataForOnyx());
 }
 
 /**
@@ -417,13 +434,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 +455,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 +529,7 @@ function setReimbursementAccountLoading(isLoading: boolean) {
 }
 
 export {
+    acceptACHContractForBankAccount,
     addBusinessWebsiteForDraft,
     addBusinessAddressForDraft,
     addPersonalAddressForDraft,
@@ -526,7 +548,6 @@ export {
     clearReimbursementAccount,
     openReimbursementAccountPage,
     updateBeneficialOwnersForBankAccount,
-    updateBeneficialOwnersForBankAccountDraft,
     updateCompanyInformationForBankAccount,
     updatePersonalInformationForBankAccount,
     openWorkspaceView,

diff --git a/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.js b/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,

diff --git a/src/pages/ReimbursementAccount/ACHContractStep.js b/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}
         />
     );
 }

diff --git a/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx b/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx
@@ -39,10 +39,15 @@ function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext}:
 
     const isLoading = reimbursementAccount?.isLoading ?? false;
     const setupType = reimbursementAccount?.achData?.subStep ?? '';
+    const bankAccountID = Number(reimbursementAccount?.achData?.[bankInfoStepKeys.BANK_ACCOUNT_ID] ?? '0');
     const values = useMemo(() => getSubstepValues(bankInfoStepKeys, reimbursementAccountDraft ?? {}, reimbursementAccount ?? {}), [reimbursementAccount, reimbursementAccountDraft]);
     const error = ErrorUtils.getLatestErrorMessage(reimbursementAccount ?? {});
 
     const handleConnectDifferentAccount = () => {
+        if (bankAccountID) {
+            ReimbursementAccount.requestResetFreePlanBankAccount();
+            return;
+        }
         const bankAccountData = {
             [bankInfoStepKeys.ROUTING_NUMBER]: '',
             [bankInfoStepKeys.ACCOUNT_NUMBER]: '',