Clean up vbba code and save each substep

Expensify · Mar 8, 2024 · 9f07370 · 9f07370
1 parent 15cf6ad
commit 9f07370
Show file tree

Hide file tree

Showing 12 changed files with 60 additions and 37 deletions.
diff --git a/src/hooks/useSubStep/index.ts b/src/hooks/useSubStep/index.ts
@@ -6,8 +6,9 @@ import type {SubStepProps, UseSubStep} from './types';
  * @param bodyContent - array of components to display in particular step
  * @param onFinished - callback triggered after finish last step
  * @param startFrom - initial index for bodyContent array
+ * @param onNextSubStep - callback triggered after finish each step
  */
-export default function useSubStep<TProps extends SubStepProps>({bodyContent, onFinished, startFrom = 0}: UseSubStep<TProps>) {
+export default function useSubStep<TProps extends SubStepProps>({bodyContent, onFinished, startFrom = 0, onNextSubStep = () => {}}: UseSubStep<TProps>) {
     const [screenIndex, setScreenIndex] = useState(startFrom);
     const isEditing = useRef(false);
 
@@ -35,9 +36,10 @@ export default function useSubStep<TProps extends SubStepProps>({bodyContent, on
         if (nextScreenIndex === bodyContent.length) {
             onFinished();
         } else {
+            onNextSubStep();
             setScreenIndex(nextScreenIndex);
         }
-    }, [screenIndex, bodyContent.length, onFinished]);
+    }, [screenIndex, bodyContent.length, onFinished, onNextSubStep]);
 
     const moveTo = useCallback((step: number) => {
         isEditing.current = true;

diff --git a/src/hooks/useSubStep/types.ts b/src/hooks/useSubStep/types.ts
@@ -21,6 +21,9 @@ type UseSubStep<TProps extends SubStepProps> = {
     /** array of components that will become sub steps */
     bodyContent: Array<ComponentType<SubStepProps & TProps>>;
 
+    /** called after each sub step */
+    onNextSubStep?: () => void;
+
     /** called on last sub step */
     onFinished: () => void;
 

diff --git a/src/libs/API/parameters/AcceptACHContractForBankAccount.ts b/src/libs/API/parameters/AcceptACHContractForBankAccount.ts
@@ -1,5 +1,5 @@
 import type {ACHContractStepProps} from '@src/types/form/ReimbursementAccountForm';
 
-type AcceptACHContractForBankAccount = ACHContractStepProps & {bankAccountID: number; policyID: string; canUseNewVbbaFlow?: boolean};
+type AcceptACHContractForBankAccount = ACHContractStepProps & {bankAccountID: number; policyID: string};
 
 export default AcceptACHContractForBankAccount;
diff --git a/src/libs/API/parameters/ConnectBankAccountParams.ts b/src/libs/API/parameters/ConnectBankAccountParams.ts
@@ -8,7 +8,6 @@ type ConnectBankAccountParams = {
     plaidMask?: string;
     isSavings?: boolean;
     policyID?: string;
-    canUseNewVbbaFlow?: boolean;
 };
 
 export default ConnectBankAccountParams;
diff --git a/src/libs/API/parameters/OpenReimbursementAccountPageParams.ts b/src/libs/API/parameters/OpenReimbursementAccountPageParams.ts
@@ -7,7 +7,6 @@ type OpenReimbursementAccountPageParams = {
     stepToOpen: ReimbursementAccountStep;
     subStep: ReimbursementAccountSubStep;
     localCurrentStep: ReimbursementAccountStep;
-    canUseNewVbbaFlow?: boolean;
     policyID: string;
 };
 

diff --git a/src/libs/API/parameters/UpdateBeneficialOwnersForBankAccountParams.ts b/src/libs/API/parameters/UpdateBeneficialOwnersForBankAccountParams.ts
@@ -1,5 +1,5 @@
-import type {ACHContractStepProps} from '@src/types/form/ReimbursementAccountForm';
+import type {BeneficialOwnersStepProps} from '@src/types/form/ReimbursementAccountForm';
 
-type UpdateBeneficialOwnersForBankAccountParams = Partial<ACHContractStepProps> & {bankAccountID: number; policyID: string; canUseNewVbbaFlow?: boolean};
+type UpdateBeneficialOwnersForBankAccountParams = Partial<BeneficialOwnersStepProps> & {bankAccountID: number; policyID: string};
 
 export default UpdateBeneficialOwnersForBankAccountParams;
diff --git a/src/libs/API/parameters/UpdateCompanyInformationForBankAccountParams.ts b/src/libs/API/parameters/UpdateCompanyInformationForBankAccountParams.ts
@@ -2,6 +2,6 @@ import type {BankAccountStepProps, CompanyStepProps, ReimbursementAccountProps}
 
 type BankAccountCompanyInformation = BankAccountStepProps & CompanyStepProps & ReimbursementAccountProps;
 
-type UpdateCompanyInformationForBankAccountParams = Partial<BankAccountCompanyInformation> & {bankAccountID: number; policyID: string; canUseNewVbbaFlow?: boolean};
+type UpdateCompanyInformationForBankAccountParams = Partial<BankAccountCompanyInformation> & {bankAccountID: number; policyID: string; confirm: boolean};
 
 export default UpdateCompanyInformationForBankAccountParams;
diff --git a/src/libs/API/parameters/UpdatePersonalInformationForBankAccountParams.ts b/src/libs/API/parameters/UpdatePersonalInformationForBankAccountParams.ts
@@ -1,5 +1,5 @@
 import type {RequestorStepProps} from '@src/types/form/ReimbursementAccountForm';
 
-type UpdatePersonalInformationForBankAccountParams = RequestorStepProps & {bankAccountID: number; policyID: string; canUseNewVbbaFlow: boolean};
+type UpdatePersonalInformationForBankAccountParams = RequestorStepProps & {bankAccountID: number; policyID: string; confirm: boolean};
 
 export default UpdatePersonalInformationForBankAccountParams;
diff --git a/src/libs/API/parameters/VerifyIdentityForBankAccountParams.ts b/src/libs/API/parameters/VerifyIdentityForBankAccountParams.ts
@@ -2,6 +2,5 @@ type VerifyIdentityForBankAccountParams = {
     bankAccountID: number;
     onfidoData: string;
     policyID: string;
-    canUseNewVbbaFlow?: boolean;
 };
 export default VerifyIdentityForBankAccountParams;
diff --git a/src/libs/actions/BankAccounts.ts b/src/libs/actions/BankAccounts.ts
@@ -160,7 +160,6 @@ function connectBankAccountWithPlaid(bankAccountID: number, selectedPlaidBankAcc
         plaidAccessToken: selectedPlaidBankAccount.plaidAccessToken,
         plaidMask: selectedPlaidBankAccount.mask,
         isSavings: selectedPlaidBankAccount.isSavings,
-        canUseNewVbbaFlow: true,
         policyID,
     };
 
@@ -254,15 +253,17 @@ function deletePaymentBankAccount(bankAccountID: number) {
  * This action is called by the requestor step in the Verified Bank Account flow
  * @param bankAccountID - ID for bank account
  * @param params - User personal data
+ * @param policyID - ID of the policy we're setting the bank account on
+ * @param isConfirmPage - If we're submitting from the confirmation substep, to trigger all external checks
  */
-function updatePersonalInformationForBankAccount(bankAccountID: number, params: RequestorStepProps, policyID: string) {
+function updatePersonalInformationForBankAccount(bankAccountID: number, params: RequestorStepProps, policyID: string, isConfirmPage: boolean) {
     API.write(
         WRITE_COMMANDS.UPDATE_PERSONAL_INFORMATION_FOR_BANK_ACCOUNT,
         {
             ...params,
             bankAccountID,
             policyID,
-            canUseNewVbbaFlow: true,
+            confirm: isConfirmPage,
         },
         getVBBADataForOnyx(CONST.BANK_ACCOUNT.STEP.REQUESTOR),
     );
@@ -356,7 +357,6 @@ function openReimbursementAccountPage(stepToOpen: ReimbursementAccountStep, subS
         subStep,
         localCurrentStep,
         policyID,
-        canUseNewVbbaFlow: true,
     };
 
     return API.read(READ_COMMANDS.OPEN_REIMBURSEMENT_ACCOUNT_PAGE, parameters, onyxData);
@@ -365,15 +365,17 @@ function openReimbursementAccountPage(stepToOpen: ReimbursementAccountStep, subS
 /**
  * Updates the bank account in the database with the company step data
  * @param params - Business step form data
+ * @param policyID - ID of the policy we're setting the bank account on
+ * @param isConfirmPage - If we're submitting from the confirmation substep, to trigger all external checks
  */
-function updateCompanyInformationForBankAccount(bankAccountID: number, params: Partial<CompanyStepProps>, policyID: string) {
+function updateCompanyInformationForBankAccount(bankAccountID: number, params: Partial<CompanyStepProps>, policyID: string, isConfirmPage: boolean) {
     API.write(
         WRITE_COMMANDS.UPDATE_COMPANY_INFORMATION_FOR_BANK_ACCOUNT,
         {
             ...params,
             bankAccountID,
             policyID,
-            canUseNewVbbaFlow: true,
+            confirm: isConfirmPage,
         },
         getVBBADataForOnyx(CONST.BANK_ACCOUNT.STEP.COMPANY),
     );
@@ -390,7 +392,6 @@ function updateBeneficialOwnersForBankAccount(bankAccountID: number, params: Par
             ...params,
             bankAccountID,
             policyID,
-            canUseNewVbbaFlow: true,
         },
         getVBBADataForOnyx(),
     );
@@ -407,7 +408,6 @@ function acceptACHContractForBankAccount(bankAccountID: number, params: ACHContr
             ...params,
             bankAccountID,
             policyID,
-            canUseNewVbbaFlow: true,
         },
         getVBBADataForOnyx(),
     );
@@ -426,7 +426,6 @@ function connectBankAccountManually(bankAccountID: number, bankAccount: PlaidBan
         plaidAccessToken: bankAccount.plaidAccessToken,
         plaidMask: bankAccount.mask,
         isSavings: bankAccount.isSavings,
-        canUseNewVbbaFlow: true,
         policyID,
     };
 
@@ -441,7 +440,6 @@ function verifyIdentityForBankAccount(bankAccountID: number, onfidoData: Record<
         bankAccountID,
         onfidoData: JSON.stringify(onfidoData),
         policyID,
-        canUseNewVbbaFlow: true,
     };
 
     API.write(WRITE_COMMANDS.VERIFY_IDENTITY_FOR_BANK_ACCOUNT, parameters, getVBBADataForOnyx());

diff --git a/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.tsx b/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.tsx
@@ -71,22 +71,34 @@ function BusinessInfo({reimbursementAccount, reimbursementAccountDraft, onBackBu
     const policyID = reimbursementAccount?.achData?.policyID ?? '';
     const values = useMemo(() => getSubstepValues(BUSINESS_INFO_STEP_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]);
 
-    const submit = useCallback(() => {
-        BankAccounts.updateCompanyInformationForBankAccount(
-            Number(reimbursementAccount?.achData?.bankAccountID ?? '0'),
-            {
-                ...values,
-                ...getBankAccountFields(['routingNumber', 'accountNumber', 'bankName', 'plaidAccountID', 'plaidAccessToken', 'isSavings']),
-                companyTaxID: values.companyTaxID?.replace(CONST.REGEX.NON_NUMERIC, ''),
-                companyPhone: parsePhoneNumber(values.companyPhone ?? '', {regionCode: CONST.COUNTRY.US}).number?.significant,
-            },
-            policyID,
-        );
-    }, [reimbursementAccount, values, getBankAccountFields, policyID]);
+    const submit = useCallback(
+        (isConfirmPage: boolean) => {
+            BankAccounts.updateCompanyInformationForBankAccount(
+                Number(reimbursementAccount?.achData?.bankAccountID ?? '0'),
+                {
+                    ...values,
+                    ...getBankAccountFields(['routingNumber', 'accountNumber', 'bankName', 'plaidAccountID', 'plaidAccessToken', 'isSavings']),
+                    companyTaxID: values.companyTaxID?.replace(CONST.REGEX.NON_NUMERIC, ''),
+                    companyPhone: parsePhoneNumber(values.companyPhone ?? '', {regionCode: CONST.COUNTRY.US}).number?.significant,
+                },
+                policyID,
+                isConfirmPage,
+            );
+        },
+        [reimbursementAccount, values, getBankAccountFields, policyID],
+    );
 
     const startFrom = useMemo(() => getInitialSubstepForBusinessInfo(values), [values]);
 
-    const {componentToRender: SubStep, isEditing, screenIndex, nextScreen, prevScreen, moveTo, goToTheLastStep} = useSubStep({bodyContent, startFrom, onFinished: submit});
+    const {
+        componentToRender: SubStep,
+        isEditing,
+        screenIndex,
+        nextScreen,
+        prevScreen,
+        moveTo,
+        goToTheLastStep,
+    } = useSubStep({bodyContent, startFrom, onFinished: () => submit(true), onNextSubStep: () => submit(false)});
 
     const handleBackButtonPress = () => {
         if (isEditing) {

diff --git a/src/pages/ReimbursementAccount/PersonalInfo/PersonalInfo.tsx b/src/pages/ReimbursementAccount/PersonalInfo/PersonalInfo.tsx
@@ -46,12 +46,23 @@ function PersonalInfo({reimbursementAccount, reimbursementAccountDraft, onBackBu
     const policyID = reimbursementAccount?.achData?.policyID ?? '';
     const values = useMemo(() => getSubstepValues(PERSONAL_INFO_STEP_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]);
     const bankAccountID = Number(reimbursementAccount?.achData?.bankAccountID ?? '0');
-    const submit = useCallback(() => {
-        BankAccounts.updatePersonalInformationForBankAccount(bankAccountID, {...values}, policyID);
-    }, [values, bankAccountID, policyID]);
+    const submit = useCallback(
+        (isConfirmPage: boolean) => {
+            BankAccounts.updatePersonalInformationForBankAccount(bankAccountID, {...values}, policyID, isConfirmPage);
+        },
+        [values, bankAccountID, policyID],
+    );
     const startFrom = useMemo(() => getInitialSubstepForPersonalInfo(values), [values]);
 
-    const {componentToRender: SubStep, isEditing, screenIndex, nextScreen, prevScreen, moveTo, goToTheLastStep} = useSubStep({bodyContent, startFrom, onFinished: submit});
+    const {
+        componentToRender: SubStep,
+        isEditing,
+        screenIndex,
+        nextScreen,
+        prevScreen,
+        moveTo,
+        goToTheLastStep,
+    } = useSubStep({bodyContent, startFrom, onFinished: () => submit(true), onNextSubStep: () => submit(false)});
 
     const handleBackButtonPress = () => {
         if (isEditing) {