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

…r steps

src/CONST.ts

@@ -277,8 +277,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',
@@ -397,6 +398,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,7 +15,7 @@ export default function useSubStep({bodyContent, onFinished, startFrom = 0}: Use
         setScreenIndex(prevScreenIndex);
     }, [screenIndex]);
 
-    const nextScreen = useCallback(() => {
+    const nextScreen = useCallback((data) => {
         if (isEditing.current) {
             isEditing.current = false;
 
@@ -27,7 +27,7 @@ export default function useSubStep({bodyContent, onFinished, startFrom = 0}: Use
         const nextScreenIndex = screenIndex + 1;
 
         if (nextScreenIndex === bodyContent.length) {
-            onFinished();
+            onFinished(data);
         } else {
             setScreenIndex(nextScreenIndex);
         }

src/hooks/useSubStep/types.ts

@@ -22,7 +22,7 @@ type UseSubStep = {
     bodyContent: Array<ComponentType<SubStepProps>>;
 
     /** called on last sub step  */
-    onFinished: () => void;
+    onFinished: (data?: Record<string, unknown>) => void;
 
     /** index of initial sub step to display */
     startFrom?: number;

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,
@@ -90,6 +90,7 @@ function clearPersonalBankAccount() {
 
 function clearOnfidoToken() {
     Onyx.merge(ONYXKEYS.ONFIDO_TOKEN, '');
+    Onyx.merge(ONYXKEYS.ONFIDO_APPLICANT_ID, '');
 }
 
 /**
@@ -161,6 +162,7 @@ function connectBankAccountWithPlaid(bankAccountID: number, selectedPlaidBankAcc
         bank?: string;
         plaidAccountID: string;
         plaidAccessToken: string;
+        canUseNewVbbaFlow: boolean;
     };
 
     const parameters: ConnectBankAccountWithPlaidParams = {
@@ -170,6 +172,7 @@ function connectBankAccountWithPlaid(bankAccountID: number, selectedPlaidBankAcc
         bank: selectedPlaidBankAccount.bankName,
         plaidAccountID: selectedPlaidBankAccount.plaidAccountID,
         plaidAccessToken: selectedPlaidBankAccount.plaidAccessToken,
+        canUseNewVbbaFlow: true,
     };
 
     API.write(commandName, parameters, getVBBADataForOnyx());
@@ -277,7 +280,10 @@ 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) {
@@ -379,25 +385,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());
 }
 
 /**
@@ -410,13 +423,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));
@@ -429,11 +444,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());
@@ -469,6 +486,7 @@ function setReimbursementAccountLoading(isLoading: boolean) {
 }
 
 export {
+    acceptACHContractForBankAccount,
     addBusinessWebsiteForDraft,
     addBusinessAddressForDraft,
     addPersonalAddressForDraft,
@@ -487,7 +505,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}
         />
     );
 }

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]: '',

src/pages/ReimbursementAccount/BeneficialOwnerInfo/BeneficialOwnerInfo.js

@@ -101,7 +101,7 @@ function BeneficialOwnerInfo({reimbursementAccount, reimbursementAccountDraft, o
                       zipCode: lodashGet(reimbursementAccountDraft, `beneficialOwner_${ownerKey}_zipCode`),
                   }));
 
-        BankAccounts.updateBeneficialOwnersForBankAccountDraft({
+        BankAccounts.updateBeneficialOwnersForBankAccount({
             ownsMoreThan25Percent: isUserUBO,
             beneficialOwners: JSON.stringify(beneficialOwners),
             beneficialOwnerKeys,

src/pages/ReimbursementAccount/BeneficialOwnersStep.js

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import BeneficialOwnerInfo from "@pages/ReimbursementAccount/BeneficialOwnerInfo/BeneficialOwnerInfo";
+
+const propTypes = {
+    /** Goes to the previous step */
+    onBackButtonPress: PropTypes.func.isRequired,
+
+    /** Exits flow and goes back to the workspace initial page */
+    onCloseButtonPress: PropTypes.func.isRequired,
+};
+
+function BeneficialOwnersStep({onBackButtonPress, onCloseButtonPress}) {
+    return (
+        <BeneficialOwnerInfo
+            onBackButtonPress={onBackButtonPress}
+            onCloseButtonPress={onCloseButtonPress}
+        />
+    );
+}
+
+BeneficialOwnersStep.propTypes = propTypes;
+BeneficialOwnersStep.displayName = 'BeneficialOwnersStep';
+export default BeneficialOwnersStep;

src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.tsx

@@ -114,7 +114,7 @@ function BusinessInfo({reimbursementAccount, reimbursementAccountDraft, policyID
             />
             <View style={[styles.ph5, styles.mv3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
                 <InteractiveStepSubHeader
-                    startStepIndex={1}
+                    startStepIndex={3}
                     stepNames={CONST.BANK_ACCOUNT.STEP_NAMES}
                 />
             </View>

src/pages/ReimbursementAccount/BusinessInfo/substeps/NameBusiness.tsx

@@ -34,7 +34,7 @@ function NameBusiness({reimbursementAccount, onNext, isEditing}: NameBusinessPro
 
     const bankAccountID = getDefaultValueForReimbursementAccountField(reimbursementAccount, 'bankAccountID', 0);
 
-    const shouldDisableCompanyName = Boolean(bankAccountID && defaultCompanyName);
+    const shouldDisableCompanyName = Boolean(bankAccountID && defaultCompanyName && reimbursementAccount?.achData?.state !== 'SETUP');
 
     return (
         // @ts-expect-error TODO: Remove this once Form (https://github.com/Expensify/App/issues/31972) is migrated to TypeScript

src/pages/ReimbursementAccount/BusinessInfo/substeps/TaxIdBusiness.tsx

@@ -42,7 +42,7 @@ function TaxIdBusiness({reimbursementAccount, onNext, isEditing}: TaxIdBusinessP
 
     const bankAccountID = getDefaultValueForReimbursementAccountField(reimbursementAccount, 'bankAccountID', 0);
 
-    const shouldDisableCompanyTaxID = Boolean(bankAccountID && defaultCompanyTaxId);
+    const shouldDisableCompanyTaxID = Boolean(bankAccountID && defaultCompanyTaxId && reimbursementAccount?.achData?.state !== 'SETUP');
 
     return (
         // @ts-expect-error TODO: Remove this once Form (https://github.com/Expensify/App/issues/31972) is migrated to TypeScript

src/pages/ReimbursementAccount/CompleteVerification/CompleteVerification.js

@@ -39,7 +39,6 @@ const defaultProps = {
 
 const BODY_CONTENT = [ConfirmAgreements];
 const COMPLETE_VERIFICATION_KEYS = CONST.BANK_ACCOUNT.COMPLETE_VERIFICATION.INPUT_KEY;
-const BENEFICIAL_OWNER_INFO_STEP_KEYS = CONST.BANK_ACCOUNT.BENEFICIAL_OWNER_INFO_STEP.INPUT_KEY;
 
 const CompleteVerification = forwardRef(({reimbursementAccount, reimbursementAccountDraft, onBackButtonPress, onCloseButtonPress}, ref) => {
     const {translate} = useLocalize();
@@ -52,10 +51,8 @@ const CompleteVerification = forwardRef(({reimbursementAccount, reimbursementAcc
             bankAccountID: getDefaultValueForReimbursementAccountField(reimbursementAccount, COMPLETE_VERIFICATION_KEYS.BANK_ACCOUNT_ID, 0),
             ...values,
         };
-        const beneficialOwnersStepValues = getSubstepValues(BENEFICIAL_OWNER_INFO_STEP_KEYS, reimbursementAccountDraft, reimbursementAccount);
 
-        BankAccounts.updateBeneficialOwnersForBankAccount({
-            ...beneficialOwnersStepValues,
+        BankAccounts.acceptACHContractForBankAccount({
             ...payload,
         });
     }, [reimbursementAccount, reimbursementAccountDraft, values]);