Refactor ValidateBankAccount in App

src/CONST.js

@@ -52,8 +52,6 @@ const CONST = {
             MAX_ROUTING_NUMBER: '402 Maximum Size Exceeded routingNumber',
             MISSING_INCORPORATION_STATE: '402 Missing incorporationState in additionalData',
             MISSING_INCORPORATION_TYPE: '402 Missing incorporationType in additionalData',
-            MAX_VALIDATION_ATTEMPTS_REACHED: 'Validation for this bank account has been disabled due to too many incorrect attempts. Please contact us.',
-            INCORRECT_VALIDATION_AMOUNTS: 'The validate code you entered is incorrect, please try again.',
         },
         STEP: {
             // In the order they appear in the VBA flow
@@ -97,6 +95,7 @@ const CONST = {
         STATE: {
             VERIFYING: 'VERIFYING',
             PENDING: 'PENDING',
+            OPEN: 'OPEN',
         },
         MAX_LENGTH: {
             SSN: 4,

src/libs/actions/BankAccounts.js

@@ -14,7 +14,6 @@ export {
     setBankAccountFormValidationErrors,
     resetReimbursementAccount,
     resetFreePlanBankAccount,
-    validateBankAccount,
     hideBankAccountErrors,
     setWorkspaceIDForReimbursementAccount,
     setBankAccountSubStep,
@@ -159,9 +158,44 @@ function deletePaymentBankAccount(bankAccountID) {
     });
 }
 
+/**
+ * @param {Number} bankAccountID
+ * @param {String} validateCode
+ */
+function validateBankAccount(bankAccountID, validateCode) {
+    API.write('ValidateBankAccountWithTransactions', {
+        bankAccountID,
+        validateCode,
+    }, {
+        optimisticData: [{
+            onyxMethod: CONST.ONYX.METHOD.MERGE,
+            key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
+            value: {
+                isLoading: true,
+                errors: null,
+            },
+        }],
+        successData: [{
+            onyxMethod: CONST.ONYX.METHOD.MERGE,
+            key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
+            value: {
+                isLoading: false,
+            },
+        }],
+        failureData: [{
+            onyxMethod: CONST.ONYX.METHOD.MERGE,
+            key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
+            value: {
+                isLoading: false,
+            },
+        }],
+    });
+}
+
 export {
     addPersonalBankAccount,
     deletePaymentBankAccount,
     clearPersonalBankAccount,
     clearPlaid,
+    validateBankAccount,
 };

src/libs/actions/ReimbursementAccount/index.js

@@ -1,6 +1,5 @@
 import Onyx from 'react-native-onyx';
 import ONYXKEYS from '../../../ONYXKEYS';
-import validateBankAccount from './validateBankAccount';
 import setupWithdrawalAccount from './setupWithdrawalAccount';
 import fetchFreePlanVerifiedBankAccount from './fetchFreePlanVerifiedBankAccount';
 import resetFreePlanBankAccount from './resetFreePlanBankAccount';
@@ -57,7 +56,6 @@ export {
     setupWithdrawalAccount,
     fetchFreePlanVerifiedBankAccount,
     resetFreePlanBankAccount,
-    validateBankAccount,
     setBankAccountSubStep,
     hideBankAccountErrors,
     setWorkspaceIDForReimbursementAccount,

src/libs/deprecatedAPI.js

@@ -412,12 +412,6 @@ function Policy_Employees_Merge(parameters) {
     return Network.post(commandName, {...parameters, returnPersonalDetails: true});
 }
 
-function BankAccount_Validate(parameters) {
-    const commandName = 'ValidateBankAccount';
-    requireParameters(['bankAccountID', 'validateCode'], parameters, commandName);
-    return Network.post(commandName, parameters, CONST.NETWORK.METHOD.POST);
-}
-
 /**
  * @param {*} parameters
  * @returns {Promise}
@@ -592,7 +586,6 @@ function GetStatementPDF(parameters) {
 
 export {
     BankAccount_SetupWithdrawal,
-    BankAccount_Validate,
     ChangePassword,
     CreateChatReport,
     CreateLogin,

src/pages/ReimbursementAccount/ReimbursementAccountForm.js

@@ -13,6 +13,7 @@ import FormAlertWithSubmitButton from '../../components/FormAlertWithSubmitButto
 import CONST from '../../CONST';
 import FormScrollView from '../../components/FormScrollView';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
+import * as ErrorUtils from '../../libs/ErrorUtils';
 
 const propTypes = {
     /** Data for the bank account actively being set up */
@@ -33,6 +34,11 @@ class ReimbursementAccountForm extends React.Component {
         BankAccounts.resetReimbursementAccount();
     }
 
+    getErrorMessage() {
+        const latestErrorMessage = ErrorUtils.getLatestErrorMessage(this.props.reimbursementAccount);
+        return this.props.reimbursementAccount.error || (typeof latestErrorMessage === 'string' ? latestErrorMessage : '');
+    }
+
     render() {
         const isErrorVisible = _.size(lodashGet(this.props, 'reimbursementAccount.errors', {})) > 0
             || lodashGet(this.props, 'reimbursementAccount.error', '').length > 0;
@@ -58,9 +64,9 @@ class ReimbursementAccountForm extends React.Component {
                     onFixTheErrorsLinkPressed={() => {
                         this.form.scrollTo({y: 0, animated: true});
                     }}
-                    message={this.props.reimbursementAccount.error}
+                    message={this.getErrorMessage()}
                     isMessageHtml={this.props.reimbursementAccount.isErrorHtml}
-                    isLoading={this.props.reimbursementAccount.loading}
+                    isLoading={this.props.reimbursementAccount.loading || this.props.reimbursementAccount.isLoading}
                 />
             </FormScrollView>
         );

src/pages/ReimbursementAccount/reimbursementAccountPropTypes.js

@@ -31,5 +31,11 @@ export default PropTypes.shape({
     errors: PropTypes.objectOf(PropTypes.oneOfType([
         PropTypes.bool,
         PropTypes.arrayOf(PropTypes.objectOf(PropTypes.bool)),
+
+        /**
+         * Errors from api calls on the specific user
+         * {<timestamp>: 'error message', <timestamp2>: 'error message 2'}
+         */
+        PropTypes.string,
     ])),
 });