From b1d3752cecb3e5b17d7ca4741de5019262ea3009 Mon Sep 17 00:00:00 2001
From: Nathalie Kuoch <nkuoch@expensify.com>
Date: Thu, 16 Nov 2023 17:09:20 +0100
Subject: [PATCH] Change vbba step order

---
 src/CONST.ts                                  |  2 +-
 src/libs/Permissions.ts                       |  5 +++
 src/libs/actions/BankAccounts.ts              | 23 ++++++++--
 src/pages/ReimbursementAccount/CompanyStep.js |  6 +--
 .../ReimbursementAccountPage.js               | 44 +++++++++----------
 5 files changed, 51 insertions(+), 29 deletions(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index 13b79179f431..0e220e316a27 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -187,8 +187,8 @@ const CONST = {
         STEP: {
             // In the order they appear in the VBA flow
             BANK_ACCOUNT: 'BankAccountStep',
-            COMPANY: 'CompanyStep',
             REQUESTOR: 'RequestorStep',
+            COMPANY: 'CompanyStep',
             ACH_CONTRACT: 'ACHContractStep',
             VALIDATION: 'ValidationStep',
             ENABLE: 'EnableStep',
diff --git a/src/libs/Permissions.ts b/src/libs/Permissions.ts
index 43e7ef9fbbc8..05c7ee94ff60 100644
--- a/src/libs/Permissions.ts
+++ b/src/libs/Permissions.ts
@@ -38,11 +38,16 @@ function canUseLinkPreviews(): boolean {
     return false;
 }
 
+function canUseNewVbbaFlow(): boolean {
+    return true;
+}
+
 export default {
     canUseChronos,
     canUseDefaultRooms,
     canUseCommentLinking,
     canUsePolicyRooms,
     canUseLinkPreviews,
+    canUseNewVbbaFlow,
     canUseViolations,
 };
diff --git a/src/libs/actions/BankAccounts.ts b/src/libs/actions/BankAccounts.ts
index 8d0c59ab8d60..11a3aace610d 100644
--- a/src/libs/actions/BankAccounts.ts
+++ b/src/libs/actions/BankAccounts.ts
@@ -5,6 +5,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as PlaidDataProps from '@pages/ReimbursementAccount/plaidDataPropTypes';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import Permissions from '@libs/Permissions';
 import ROUTES from '@src/ROUTES';
 import type PlaidBankAccount from '@src/types/onyx/PlaidBankAccount';
 import type {BankAccountStep, BankAccountSubStep} from '@src/types/onyx/ReimbursementAccount';
@@ -132,6 +133,7 @@ function connectBankAccountWithPlaid(bankAccountID: number, selectedPlaidBankAcc
         bank?: string;
         plaidAccountID: string;
         plaidAccessToken: string;
+        canUseNewVbbaFlow: boolean;
     };
 
     const parameters: ConnectBankAccountWithPlaidParams = {
@@ -141,6 +143,7 @@ function connectBankAccountWithPlaid(bankAccountID: number, selectedPlaidBankAcc
         bank: selectedPlaidBankAccount.bankName,
         plaidAccountID: selectedPlaidBankAccount.plaidAccountID,
         plaidAccessToken: selectedPlaidBankAccount.plaidAccessToken,
+        canUseNewVbbaFlow: Permissions.canUseNewVbbaFlow(),
     };
 
     API.write(commandName, parameters, getVBBADataForOnyx());
@@ -248,7 +251,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: Permissions.canUseNewVbbaFlow(),
+    }, getVBBADataForOnyx(CONST.BANK_ACCOUNT.STEP.REQUESTOR));
 }
 
 function validateBankAccount(bankAccountID: number, validateCode: string) {
@@ -350,9 +356,16 @@ 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: Permissions.canUseNewVbbaFlow(),
+    };
 
     API.write('UpdateCompanyInformationForBankAccount', parameters, getVBBADataForOnyx(CONST.BANK_ACCOUNT.STEP.COMPANY));
 }
@@ -374,6 +387,7 @@ function connectBankAccountManually(bankAccountID: number, accountNumber?: strin
         accountNumber?: string;
         routingNumber?: string;
         plaidMask?: string;
+        canUseNewVbbaFlow: boolean;
     };
 
     const parameters: ConnectBankAccountManuallyParams = {
@@ -381,6 +395,7 @@ function connectBankAccountManually(bankAccountID: number, accountNumber?: strin
         accountNumber,
         routingNumber,
         plaidMask,
+        canUseNewVbbaFlow: Permissions.canUseNewVbbaFlow(),
     };
 
     API.write('ConnectBankAccountManually', parameters, getVBBADataForOnyx(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT));
@@ -393,11 +408,13 @@ function verifyIdentityForBankAccount(bankAccountID: number, onfidoData: OnfidoD
     type VerifyIdentityForBankAccountParams = {
         bankAccountID: number;
         onfidoData: string;
+        canUseNewVbbaFlow: boolean;
     };
 
     const parameters: VerifyIdentityForBankAccountParams = {
         bankAccountID,
         onfidoData: JSON.stringify(onfidoData),
+        canUseNewVbbaFlow: Permissions.canUseNewVbbaFlow(),
     };
 
     API.write('VerifyIdentityForBankAccount', parameters, getVBBADataForOnyx());
diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js
index f1d62eef89ae..5023153b07c5 100644
--- a/src/pages/ReimbursementAccount/CompanyStep.js
+++ b/src/pages/ReimbursementAccount/CompanyStep.js
@@ -137,9 +137,9 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
         BankAccounts.updateCompanyInformationForBankAccount(bankAccount, policyID);
     };
 
-    const bankAccountID = lodashGet(reimbursementAccount, 'achData.bankAccountID', 0);
-    const shouldDisableCompanyName = Boolean(bankAccountID && getDefaultStateForField('companyName'));
-    const shouldDisableCompanyTaxID = Boolean(bankAccountID && getDefaultStateForField('companyTaxID'));
+    const shouldDisableNonEditableFields = lodashGet(reimbursementAccount, 'achData.bankAccountID', 0) && lodashGet(reimbursementAccount, 'achData.state') !== 'SETUP';
+    const shouldDisableCompanyName = Boolean(shouldDisableNonEditableFields && getDefaultStateForField('companyName')) ;
+    const shouldDisableCompanyTaxID = Boolean(shouldDisableNonEditableFields && getDefaultStateForField('companyTaxID'));
 
     return (
         <ScreenWrapper
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
index 4620ab1ddcae..531482e24184 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
@@ -194,6 +194,8 @@ class ReimbursementAccountPage extends React.Component {
         switch (step) {
             case CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT:
                 return ['routingNumber', 'accountNumber', 'bankName', 'plaidAccountID', 'plaidAccessToken', 'isSavings'];
+            case CONST.BANK_ACCOUNT.STEP.REQUESTOR:
+                return ['firstName', 'lastName', 'dob', 'ssnLast4', 'requestorAddressStreet', 'requestorAddressCity', 'requestorAddressState', 'requestorAddressZipCode'];
             case CONST.BANK_ACCOUNT.STEP.COMPANY:
                 return [
                     'companyName',
@@ -208,8 +210,6 @@ class ReimbursementAccountPage extends React.Component {
                     'incorporationDate',
                     'incorporationState',
                 ];
-            case CONST.BANK_ACCOUNT.STEP.REQUESTOR:
-                return ['firstName', 'lastName', 'dob', 'ssnLast4', 'requestorAddressStreet', 'requestorAddressCity', 'requestorAddressState', 'requestorAddressZipCode'];
             default:
                 return [];
         }
@@ -258,10 +258,10 @@ class ReimbursementAccountPage extends React.Component {
         switch (lodashGet(this.props.route, ['params', 'stepToOpen'], '')) {
             case 'new':
                 return CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
-            case 'company':
-                return CONST.BANK_ACCOUNT.STEP.COMPANY;
             case 'personal-information':
                 return CONST.BANK_ACCOUNT.STEP.REQUESTOR;
+            case 'company':
+                return CONST.BANK_ACCOUNT.STEP.COMPANY;
             case 'contract':
                 return CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT;
             case 'validate':
@@ -279,10 +279,10 @@ class ReimbursementAccountPage extends React.Component {
      */
     getRouteForCurrentStep(currentStep) {
         switch (currentStep) {
-            case CONST.BANK_ACCOUNT.STEP.COMPANY:
-                return 'company';
             case CONST.BANK_ACCOUNT.STEP.REQUESTOR:
                 return 'personal-information';
+            case CONST.BANK_ACCOUNT.STEP.COMPANY:
+                return 'company';
             case CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT:
                 return 'contract';
             case CONST.BANK_ACCOUNT.STEP.VALIDATION:
@@ -346,19 +346,19 @@ class ReimbursementAccountPage extends React.Component {
                     Navigation.goBack(backTo);
                 }
                 break;
-            case CONST.BANK_ACCOUNT.STEP.COMPANY:
-                BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT, {subStep: CONST.BANK_ACCOUNT.SUBSTEP.MANUAL});
-                break;
             case CONST.BANK_ACCOUNT.STEP.REQUESTOR:
                 if (shouldShowOnfido) {
                     BankAccounts.clearOnfidoToken();
                 } else {
-                    BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.COMPANY);
+                    BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT, {subStep: CONST.BANK_ACCOUNT.SUBSTEP.MANUAL});
                 }
                 break;
+            case CONST.BANK_ACCOUNT.STEP.COMPANY:
+                BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.REQUESTOR);
+                break;
             case CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT:
                 BankAccounts.clearOnfidoToken();
-                BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.REQUESTOR);
+                BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.COMPANY);
                 break;
             case CONST.BANK_ACCOUNT.STEP.VALIDATION:
                 if (_.contains([BankAccount.STATE.VERIFYING, BankAccount.STATE.SETUP], achData.state)) {
@@ -405,14 +405,14 @@ class ReimbursementAccountPage extends React.Component {
         // Prevent the full-page blocking offline view from being displayed for these steps if the device goes offline.
         const shouldShowOfflineLoader = !(
             this.props.network.isOffline &&
-            _.contains([CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT, CONST.BANK_ACCOUNT.STEP.COMPANY, CONST.BANK_ACCOUNT.STEP.REQUESTOR, CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT], currentStep)
+            _.contains([CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT, CONST.BANK_ACCOUNT.STEP.REQUESTOR, CONST.BANK_ACCOUNT.STEP.COMPANY, CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT], currentStep)
         );
 
         // Show loading indicator when page is first time being opened and props.reimbursementAccount yet to be loaded from the server
         // or when data is being loaded. Don't show the loading indicator if we're offline and restarted the bank account setup process
         // On Android, when we open the app from the background, Onfido activity gets destroyed, so we need to reopen it.
         if ((!this.state.hasACHDataBeenLoaded || isLoading) && shouldShowOfflineLoader && (shouldReopenOnfido || !this.requestorStepRef.current)) {
-            const isSubmittingVerificationsData = _.contains([CONST.BANK_ACCOUNT.STEP.COMPANY, CONST.BANK_ACCOUNT.STEP.REQUESTOR, CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT], currentStep);
+            const isSubmittingVerificationsData = _.contains([CONST.BANK_ACCOUNT.STEP.REQUESTOR, CONST.BANK_ACCOUNT.STEP.COMPANY, CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT], currentStep);
             return (
                 <ReimbursementAccountLoadingIndicator
                     isSubmittingVerificationsData={isSubmittingVerificationsData}
@@ -478,27 +478,27 @@ class ReimbursementAccountPage extends React.Component {
             );
         }
 
-        if (currentStep === CONST.BANK_ACCOUNT.STEP.COMPANY) {
+        if (currentStep === CONST.BANK_ACCOUNT.STEP.REQUESTOR) {
+            const shouldShowOnfido = this.props.onfidoToken && !achData.isOnfidoSetupComplete;
             return (
-                <CompanyStep
+                <RequestorStep
+                    ref={this.requestorStepRef}
                     reimbursementAccount={this.props.reimbursementAccount}
-                    reimbursementAccountDraft={this.props.reimbursementAccountDraft}
                     onBackButtonPress={this.goBack}
+                    shouldShowOnfido={Boolean(shouldShowOnfido)}
                     getDefaultStateForField={this.getDefaultStateForField}
-                    policyID={policyID}
                 />
             );
         }
 
-        if (currentStep === CONST.BANK_ACCOUNT.STEP.REQUESTOR) {
-            const shouldShowOnfido = this.props.onfidoToken && !achData.isOnfidoSetupComplete;
+        if (currentStep === CONST.BANK_ACCOUNT.STEP.COMPANY) {
             return (
-                <RequestorStep
-                    ref={this.requestorStepRef}
+                <CompanyStep
                     reimbursementAccount={this.props.reimbursementAccount}
+                    reimbursementAccountDraft={this.props.reimbursementAccountDraft}
                     onBackButtonPress={this.goBack}
-                    shouldShowOnfido={Boolean(shouldShowOnfido)}
                     getDefaultStateForField={this.getDefaultStateForField}
+                    policyID={policyID}
                 />
             );
         }