Trim the value when going back on connect bank account

src/libs/actions/BankAccounts.js

@@ -57,10 +57,10 @@ function clearOnfidoToken() {
 
 /**
  * Helper method to build the Onyx data required during setup of a Verified Business Bank Account
- *
+ * @param {String | undefined} currentStep The name of the bank account setup step for which we will update the draft value when we receive the response from the API.
  * @returns {Object}
  */
-function getVBBADataForOnyx() {
+function getVBBADataForOnyx(currentStep = undefined) {
     return {
         optimisticData: [
             {
@@ -79,6 +79,12 @@ function getVBBADataForOnyx() {
                 value: {
                     isLoading: false,
                     errors: null,
+                    // When setting up a bank account, we save the draft form values in Onyx.
+                    // When we update the information for a step, the value of some fields that are returned from the API
+                    // can be different from the value that we stored as the draft in Onyx (i.e. the phone number is formatted).
+                    // This is why we store the current step used to call the API in order to update the corresponding draft data in Onyx.
+                    // If currentStep is undefined that means this step don't need to update the data of the draft in Onyx.
+                    draftStep: currentStep,
                 },
             },
         ],
@@ -222,7 +228,7 @@ function deletePaymentBankAccount(bankAccountID) {
  * @param {Boolean} [params.isOnfidoSetupComplete]
  */
 function updatePersonalInformationForBankAccount(params) {
-    API.write('UpdatePersonalInformationForBankAccount', params, getVBBADataForOnyx());
+    API.write('UpdatePersonalInformationForBankAccount', params, getVBBADataForOnyx(CONST.BANK_ACCOUNT.STEP.REQUESTOR));
 }
 
 /**
@@ -339,7 +345,7 @@ function openReimbursementAccountPage(stepToOpen, subStep, localCurrentStep) {
  * @param {String} policyID
  */
 function updateCompanyInformationForBankAccount(bankAccount, policyID) {
-    API.write('UpdateCompanyInformationForBankAccount', {...bankAccount, policyID}, getVBBADataForOnyx());
+    API.write('UpdateCompanyInformationForBankAccount', {...bankAccount, policyID}, getVBBADataForOnyx(CONST.BANK_ACCOUNT.STEP.COMPANY));
 }
 
 /**
@@ -376,7 +382,7 @@ function connectBankAccountManually(bankAccountID, accountNumber, routingNumber,
             routingNumber,
             plaidMask,
         },
-        getVBBADataForOnyx(),
+        getVBBADataForOnyx(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT),
     );
 }
 

src/libs/actions/ReimbursementAccount/index.js

@@ -31,6 +31,7 @@ function setWorkspaceIDForReimbursementAccount(workspaceID) {
  */
 function updateReimbursementAccountDraft(bankAccountData) {
     Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT, bankAccountData);
+    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {draftStep: undefined});
 }
 
 /**

src/pages/ReimbursementAccount/ReimbursementAccountPage.js

@@ -157,6 +157,12 @@ class ReimbursementAccountPage extends React.Component {
             return;
         }
 
+        // Update the data that is returned from back-end to draft value
+        const draftStep = this.props.reimbursementAccount.draftStep;
+        if (draftStep) {
+            BankAccounts.updateReimbursementAccountDraft(this.getBankAccountFields(this.getFieldsForStep(draftStep)));
+        }
+
         const currentStepRouteParam = this.getStepToOpenFromRouteParams();
         if (currentStepRouteParam === currentStep) {
             // The route is showing the correct step, no need to update the route param or clear errors.
@@ -177,6 +183,42 @@ class ReimbursementAccountPage extends React.Component {
         Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute(this.getRouteForCurrentStep(currentStep), policyId, backTo));
     }
 
+    getFieldsForStep(step) {
+        switch (step) {
+            case CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT:
+                return ['routingNumber', 'accountNumber', 'bankName', 'plaidAccountID', 'plaidAccessToken', 'isSavings'];
+            case CONST.BANK_ACCOUNT.STEP.COMPANY:
+                return [
+                    'companyName',
+                    'addressStreet',
+                    'addressZipCode',
+                    'addressCity',
+                    'addressState',
+                    'companyPhone',
+                    'website',
+                    'companyTaxID',
+                    'incorporationType',
+                    'incorporationDate',
+                    'incorporationState',
+                ];
+            case CONST.BANK_ACCOUNT.STEP.REQUESTOR:
+                return ['firstName', 'lastName', 'dob', 'ssnLast4', 'requestorAddressStreet', 'requestorAddressCity', 'requestorAddressState', 'requestorAddressZipCode'];
+            default:
+                return [];
+        }
+    }
+
+    /**
+     * @param {Array} fieldNames
+     *
+     * @returns {*}
+     */
+    getBankAccountFields(fieldNames) {
+        return {
+            ..._.pick(lodashGet(this.props.reimbursementAccount, 'achData'), ...fieldNames),
+        };
+    }
+
     /*
      * Calculates the state used to show the "Continue with setup" view. If a bank account setup is already in progress and
      * no specific further step was passed in the url we'll show the workspace bank account reset modal if the user wishes to start over