Save VBA flow information as users type

src/ONYXKEYS.js

@@ -120,6 +120,9 @@ export default {
     // Stores information about the active reimbursement account being set up
     REIMBURSEMENT_ACCOUNT: 'reimbursementAccount',
 
+    // Stores draft information about the active reimbursement account being set up
+    REIMBURSEMENT_ACCOUNT_DRAFT: 'reimbursementAccountDraft',
+
     // Stores Workspace ID that will be tied to reimbursement account during setup
     REIMBURSEMENT_ACCOUNT_WORKSPACE_ID: 'reimbursementAccountWorkspaceID',
 };

src/libs/actions/BankAccounts.js

@@ -337,11 +337,6 @@ function fetchUserWallet() {
  * @param {String} [stepToOpen]
  */
 function fetchFreePlanVerifiedBankAccount(stepToOpen) {
-    const oldACHData = {
-        accountNumber: reimbursementAccountInSetup.accountNumber || '',
-        routingNumber: reimbursementAccountInSetup.routingNumber || '',
-    };
-
     // We are using set here since we will rely on data from the server (not local data) to populate the VBA flow
     // and determine which step to navigate to.
     Onyx.set(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {
@@ -503,18 +498,7 @@ function fetchFreePlanVerifiedBankAccount(stepToOpen) {
                     goToWithdrawalAccountSetupStep(currentStep, achData);
                 })
                 .finally(() => {
-                    const dataToMerge = {
-                        loading: false,
-                    };
-
-                    // If we didn't get a routingNumber and accountNumber from the response and we have previously saved
-                    // values, autofill them
-                    if (!reimbursementAccountInSetup.routingNumber && !reimbursementAccountInSetup.accountNumber
-                        && oldACHData.routingNumber && oldACHData.accountNumber) {
-                        dataToMerge.achData = oldACHData;
-                    }
-
-                    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, dataToMerge);
+                    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {loading: false});
                 });
         });
 }
@@ -587,6 +571,7 @@ function validateBankAccount(bankAccountID, validateCode) {
         .then((response) => {
             if (response.jsonCode === 200) {
                 Growl.show('Bank Account successfully validated!', CONST.GROWL.SUCCESS, 5000);
+                Onyx.set(ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT, null);
                 API.User_IsUsingExpensifyCard()
                     .then(({isUsingExpensifyCard}) => {
                         const reimbursementAccount = {
@@ -841,6 +826,13 @@ function setWorkspaceIDForReimbursementAccount(workspaceID) {
     Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT_WORKSPACE_ID, workspaceID);
 }
 
+/**
+ * @param {Object} bankAccountData
+ */
+function updateReimbursementAccountDraft(bankAccountData) {
+    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT, bankAccountData);
+}
+
 export {
     activateWallet,
     addPersonalBankAccount,
@@ -859,4 +851,5 @@ export {
     showBankAccountFormValidationError,
     setBankAccountFormValidationErrors,
     setWorkspaceIDForReimbursementAccount,
+    updateReimbursementAccountDraft,
 };

src/libs/getDefaultStateForField.js

@@ -0,0 +1,16 @@
+import lodashGet from 'lodash/get';
+
+/**
+ * Add / to the end of any URL if not present
+ * @param {Object} props
+ * @param {String} fieldName
+ * @param {*} defaultValue
+ *
+ * @returns {*}
+ */
+function getDefaultStateForField(props, fieldName, defaultValue = '') {
+    return lodashGet(props, ['reimbursementAccountDraft', fieldName])
+        || lodashGet(props, ['achData', fieldName], defaultValue);
+}
+
+export default getDefaultStateForField;

src/pages/ReimbursementAccount/BankAccountStep.js

@@ -26,9 +26,11 @@ import {
     setBankAccountFormValidationErrors,
     setupWithdrawalAccount,
     showBankAccountErrorModal,
+    updateReimbursementAccountDraft,
 } from '../../libs/actions/BankAccounts';
 import ONYXKEYS from '../../ONYXKEYS';
 import compose from '../../libs/compose';
+import getDefaultStateForField from '../../libs/getDefaultStateForField';
 
 const propTypes = {
     /** Bank account currently in setup */
@@ -50,9 +52,9 @@ class BankAccountStep extends React.Component {
         this.state = {
             // One of CONST.BANK_ACCOUNT.SETUP_TYPE
             bankAccountAddMethod: props.achData.subStep || undefined,
-            hasAcceptedTerms: props.achData.acceptTerms || true,
-            routingNumber: props.achData.routingNumber || '',
-            accountNumber: props.achData.accountNumber || '',
+            hasAcceptedTerms: getDefaultStateForField(props, 'acceptTerms', true),
+            routingNumber: getDefaultStateForField(props, 'routingNumber'),
+            accountNumber: getDefaultStateForField(props, 'accountNumber'),
         };
 
         // Keys in this.errorTranslationKeys are associated to inputs, they are a subset of the keys found in this.state
@@ -79,9 +81,10 @@ class BankAccountStep extends React.Component {
     }
 
     toggleTerms() {
-        this.setState(prevState => ({
-            hasAcceptedTerms: !prevState.hasAcceptedTerms,
-        }));
+        this.setState((prevState) => {
+            updateReimbursementAccountDraft({acceptTerms: !prevState.hasAcceptedTerms});
+            return {hasAcceptedTerms: !prevState.hasAcceptedTerms};
+        });
     }
 
     /**
@@ -117,7 +120,9 @@ class BankAccountStep extends React.Component {
      * @param {String} value
      */
     clearErrorAndSetValue(inputKey, value) {
-        this.setState({[inputKey]: value});
+        const newState = {[inputKey]: value};
+        this.setState(newState);
+        updateReimbursementAccountDraft(newState);
         const errors = this.getErrors();
         if (!errors[inputKey]) {
             // No error found for this inputKey
@@ -308,12 +313,14 @@ class BankAccountStep extends React.Component {
 }
 
 BankAccountStep.propTypes = propTypes;
-
 export default compose(
     withLocalize,
     withOnyx({
         reimbursementAccount: {
             key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
         },
+        reimbursementAccountDraft: {
+            key: ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT,
+        },
     }),
 )(BankAccountStep);

src/pages/ReimbursementAccount/BeneficialOwnersStep.js

@@ -1,4 +1,5 @@
 import _ from 'underscore';
+import lodashGet from 'lodash/get';
 import React from 'react';
 import PropTypes from 'prop-types';
 import {ScrollView, View} from 'react-native';
@@ -16,6 +17,7 @@ import {
     goToWithdrawalAccountSetupStep,
     setupWithdrawalAccount,
     showBankAccountErrorModal,
+    updateReimbursementAccountDraft,
 } from '../../libs/actions/BankAccounts';
 import Navigation from '../../libs/Navigation/Navigation';
 import CONST from '../../CONST';
@@ -44,11 +46,11 @@ class BeneficialOwnersStep extends React.Component {
         this.submit = this.submit.bind(this);
 
         this.state = {
-            ownsMoreThan25Percent: false,
-            hasOtherBeneficialOwners: false,
-            acceptTermsAndConditions: false,
-            certifyTrueInformation: false,
-            beneficialOwners: [],
+            ownsMoreThan25Percent: lodashGet(props, ['reimbursementAccountDraft', 'ownsMoreThan25Percent'], false),
+            hasOtherBeneficialOwners: lodashGet(props, ['reimbursementAccountDraft', 'hasOtherBeneficialOwners'], false),
+            acceptTermsAndConditions: lodashGet(props, ['reimbursementAccountDraft', 'acceptTermsAndConditions'], false),
+            certifyTrueInformation: lodashGet(props, ['reimbursementAccountDraft', 'certifyTrueInformation'], false),
+            beneficialOwners: lodashGet(props, ['reimbursementAccountDraft', 'beneficialOwners'], []),
         };
     }
 
@@ -80,7 +82,15 @@ class BeneficialOwnersStep extends React.Component {
     }
 
     removeBeneficialOwner(beneficialOwner) {
-        this.setState(prevState => ({beneficialOwners: _.without(prevState.beneficialOwners, beneficialOwner)}));
+        this.setState((prevState) => {
+            const beneficialOwners = _.without(prevState.beneficialOwners, beneficialOwner);
+
+            // We set 'beneficialOwners' to null first because we don't have a way yet to replace a specific property without merging it.
+            // We don't use the debounced function because we want to make both function calls.
+            updateReimbursementAccountDraft({beneficialOwners: null});
+            updateReimbursementAccountDraft({beneficialOwners});
+            return {beneficialOwners};
+        });
     }
 
     addBeneficialOwner() {
@@ -110,6 +120,17 @@ class BeneficialOwnersStep extends React.Component {
         () => setupWithdrawalAccount({...this.state}));
     }
 
+    /**
+    * @param {Object} fieldName
+    */
+    toggleCheckbox(fieldName) {
+        this.setState((prevState) => {
+            const newState = {[fieldName]: !prevState[fieldName]};
+            updateReimbursementAccountDraft(newState);
+            return newState;
+        });
+    }
+
     render() {
         return (
             <>
@@ -129,9 +150,7 @@ class BeneficialOwnersStep extends React.Component {
                     <CheckboxWithLabel
                         style={[styles.mb2, styles.mr2]}
                         isChecked={this.state.ownsMoreThan25Percent}
-                        onPress={() => this.setState(prevState => ({
-                            ownsMoreThan25Percent: !prevState.ownsMoreThan25Percent,
-                        }))}
+                        onPress={() => this.toggleCheckbox('ownsMoreThan25Percent')}
                         LabelComponent={() => (
                             <Text>
                                 {this.props.translate('beneficialOwnersStep.iOwnMoreThan25Percent')}
@@ -145,12 +164,14 @@ class BeneficialOwnersStep extends React.Component {
                         onPress={() => {
                             this.setState((prevState) => {
                                 const hasOtherBeneficialOwners = !prevState.hasOtherBeneficialOwners;
-                                return {
+                                const newState = {
                                     hasOtherBeneficialOwners,
                                     beneficialOwners: hasOtherBeneficialOwners && _.isEmpty(prevState.beneficialOwners)
                                         ? [{}]
                                         : prevState.beneficialOwners,
                                 };
+                                updateReimbursementAccountDraft(newState);
+                                return newState;
                             });
                         }}
                         LabelComponent={() => (
@@ -172,6 +193,7 @@ class BeneficialOwnersStep extends React.Component {
                                         onFieldChange={(fieldName, value) => this.setState((prevState) => {
                                             const beneficialOwners = [...prevState.beneficialOwners];
                                             beneficialOwners[index][fieldName] = value;
+                                            updateReimbursementAccountDraft({beneficialOwners});
                                             return {beneficialOwners};
                                         })}
                                         values={{
@@ -207,9 +229,7 @@ class BeneficialOwnersStep extends React.Component {
                     <CheckboxWithLabel
                         style={[styles.mb2]}
                         isChecked={this.state.acceptTermsAndConditions}
-                        onPress={() => this.setState(prevState => ({
-                            acceptTermsAndConditions: !prevState.acceptTermsAndConditions,
-                        }))}
+                        onPress={() => this.toggleCheckbox('acceptTermsAndConditions')}
                         LabelComponent={() => (
                             <View style={[styles.flexRow]}>
                                 <Text>{this.props.translate('common.iAcceptThe')}</Text>
@@ -222,9 +242,7 @@ class BeneficialOwnersStep extends React.Component {
                     <CheckboxWithLabel
                         style={[styles.mb2]}
                         isChecked={this.state.certifyTrueInformation}
-                        onPress={() => this.setState(prevState => ({
-                            certifyTrueInformation: !prevState.certifyTrueInformation,
-                        }))}
+                        onPress={() => this.toggleCheckbox('certifyTrueInformation')}
                         LabelComponent={() => (
                             <Text>{this.props.translate('beneficialOwnersStep.certifyTrueAndAccurate')}</Text>
                         )}
@@ -250,5 +268,8 @@ export default compose(
         reimbursementAccount: {
             key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
         },
+        reimbursementAccountDraft: {
+            key: ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT,
+        },
     }),
 )(BeneficialOwnersStep);