Highlight all errors together in BankAccount step

src/languages/en.js

@@ -392,6 +392,7 @@ export default {
             industryCode: 'Please enter a valid industry classification code. Must be 6 digits.',
             restrictedBusiness: 'Please confirm company is not on the list of restricted businesses',
             routingNumber: 'Please enter a valid Routing Number',
+            accountNumber: 'Please enter a valid Account Number',
             companyType: 'Please enter a valid Company Type',
             tooManyAttempts: 'Due to a high number of login attempts, this option has been temporarily disabled for 24 hours. Please try again later or manually enter details instead.',
             address: 'Please enter a valid address',

src/languages/es.js

@@ -392,6 +392,7 @@ export default {
             industryCode: 'Ingrese un código de clasificación de industria válido',
             restrictedBusiness: 'Confirme que la empresa no está en la lista de negocios restringidos',
             routingNumber: 'Ingrese un número de ruta válido',
+            accountNumber: 'Ingrese un número de cuenta válido',
             companyType: 'Ingrese un tipo de compañía válido',
             tooManyAttempts: 'Debido a la gran cantidad de intentos de inicio de sesión, esta opción se ha desactivado temporalmente durante 24 horas. Vuelva a intentarlo más tarde o introduzca los detalles manualmente.',
             address: 'Ingrese una dirección válida',

src/libs/actions/BankAccounts.js

@@ -627,6 +627,17 @@ function hideBankAccountErrorModal() {
     Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {isErrorModalVisible: false});
 }
 
+/**
+ * Set the current fields with errors.
+ *
+ * @param {String} errors
+ */
+function setBankAccountFormValidationErrors(errors) {
+    // We set 'errors' to null first because we don't have a way yet to replace a specific property like 'errors' without merging it
+    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {errors: null});
+    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {errors});
+}
+
 /**
  * Set the current error message.
  *
@@ -690,6 +701,7 @@ function setupWithdrawalAccount(data) {
             const currentStep = newACHData.currentStep;
             let achData = lodashGet(response, 'achData', {});
             let error = lodashGet(achData, CONST.BANK_ACCOUNT.VERIFICATIONS.ERROR_MESSAGE);
+            const errors = {};
 
             if (response.jsonCode === 200 && !error) {
                 // Save an NVP with the bankAccountID for this account. This is temporary since we are not showing lists
@@ -787,7 +799,7 @@ function setupWithdrawalAccount(data) {
                     if (response.message === CONST.BANK_ACCOUNT.ERROR.MISSING_ROUTING_NUMBER
                         || response.message === CONST.BANK_ACCOUNT.ERROR.MAX_ROUTING_NUMBER
                     ) {
-                        error = translateLocal('bankAccount.error.routingNumber');
+                        errors.routingNumber = true;
                         achData.subStep = CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL;
                     } else if (response.message === CONST.BANK_ACCOUNT.ERROR.MISSING_INCORPORATION_STATE) {
                         error = translateLocal('bankAccount.error.incorporationState');
@@ -806,6 +818,10 @@ function setupWithdrawalAccount(data) {
             // Go to next step
             goToWithdrawalAccountSetupStep(nextStep, achData);
 
+            if (_.size(errors)) {
+                setBankAccountFormValidationErrors(errors);
+                showBankAccountErrorModal();
+            }
             if (error) {
                 showBankAccountFormValidationError(error);
                 showBankAccountErrorModal(error);
@@ -819,7 +835,7 @@ function setupWithdrawalAccount(data) {
 }
 
 function hideBankAccountErrors() {
-    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {error: '', existingOwnersList: ''});
+    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {error: '', existingOwners: [], errors: null});
 }
 
 function setWorkspaceIDForReimbursementAccount(workspaceID) {
@@ -842,5 +858,6 @@ export {
     hideBankAccountErrorModal,
     showBankAccountErrorModal,
     showBankAccountFormValidationError,
+    setBankAccountFormValidationErrors,
     setWorkspaceIDForReimbursementAccount,
 };

src/pages/ReimbursementAccount/BankAccountStep.js

@@ -1,4 +1,5 @@
 import _ from 'underscore';
+import lodashGet from 'lodash/get';
 import React from 'react';
 import {View, Image} from 'react-native';
 import PropTypes from 'prop-types';
@@ -24,7 +25,9 @@ import ExpensiTextInput from '../../components/ExpensiTextInput';
 import {
     goToWithdrawalAccountSetupStep,
     hideBankAccountErrors,
+    setBankAccountFormValidationErrors,
     setupWithdrawalAccount,
+    showBankAccountErrorModal,
 } from '../../libs/actions/BankAccounts';
 import ConfirmModal from '../../components/ConfirmModal';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -57,6 +60,28 @@ class BankAccountStep extends React.Component {
             routingNumber: props.achData.routingNumber || '',
             accountNumber: props.achData.accountNumber || '',
         };
+
+        // Keys in this.errorTranslationKeys are associated to inputs, they are a subset of the keys found in this.state
+        this.errorTranslationKeys = {
+            routingNumber: 'bankAccount.error.routingNumber',
+            accountNumber: 'bankAccount.error.accountNumber',
+        };
+    }
+
+    /**
+     * @returns {Object}
+     */
+    getErrors() {
+        return lodashGet(this.props, ['reimbursementAccount', 'errors'], {});
+    }
+
+    /**
+     * @param {String} inputKey
+     * @returns {string}
+     */
+    getErrorText(inputKey) {
+        const errors = this.getErrors();
+        return errors[inputKey] ? this.props.translate(this.errorTranslationKeys[inputKey]) : '';
     }
 
     toggleTerms() {
@@ -70,13 +95,52 @@ class BankAccountStep extends React.Component {
      */
     canSubmitManually() {
         return this.state.hasAcceptedTerms
+            && this.state.accountNumber.trim()
+            && this.state.routingNumber.trim();
+    }
 
-            // These are taken from BankCountry.js in Web-Secure
-            && CONST.BANK_ACCOUNT.REGEX.IBAN.test(this.state.accountNumber.trim())
-            && CONST.BANK_ACCOUNT.REGEX.SWIFT_BIC.test(this.state.routingNumber.trim());
+    /**
+     * @returns {Boolean}
+     */
+    validate() {
+        const errors = {};
+
+        // These are taken from BankCountry.js in Web-Secure
+        if (!CONST.BANK_ACCOUNT.REGEX.IBAN.test(this.state.accountNumber.trim())) {
+            errors.accountNumber = true;
+        }
+        if (!CONST.BANK_ACCOUNT.REGEX.SWIFT_BIC.test(this.state.routingNumber.trim())) {
+            errors.routingNumber = true;
+        }
+        setBankAccountFormValidationErrors(errors);
+        return _.size(errors) === 0;
+    }
+
+    /**
+     * Clear the error associated to inputKey if found and store the inputKey new value in the state.
+     *
+     * @param {String} inputKey
+     * @param {String} value
+     */
+    clearErrorAndSetValue(inputKey, value) {
+        this.setState({[inputKey]: value});
+        const errors = this.getErrors();
+        if (!errors[inputKey]) {
+            // No error found for this inputKey
+            return;
+        }
+
+        // Clear the existing error for this inputKey
+        const newErrors = {...errors};
+        delete newErrors[inputKey];
+        setBankAccountFormValidationErrors(newErrors);
     }
 
     addManualAccount() {
+        if (!this.validate()) {
+            showBankAccountErrorModal();
+            return;
+        }
         setupWithdrawalAccount({
             acceptTerms: this.state.hasAcceptedTerms,
             accountNumber: this.state.accountNumber,
@@ -128,7 +192,7 @@ class BankAccountStep extends React.Component {
         const isFromPlaid = this.props.achData.setupType === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID;
         const shouldDisableInputs = Boolean(this.props.achData.bankAccountID) || isFromPlaid;
         const existingOwners = this.props.reimbursementAccount.existingOwners;
-        const error = this.props.reimbursementAccount.error;
+        const error = this.getErrors();
         const isExistingOwnersErrorVisible = Boolean(error && existingOwners);
         return (
             <View style={[styles.flex1, styles.justifyContentBetween]}>
@@ -209,23 +273,18 @@ class BankAccountStep extends React.Component {
                                 placeholder={this.props.translate('bankAccount.routingNumber')}
                                 keyboardType="number-pad"
                                 value={this.state.routingNumber}
-                                onChangeText={(routingNumber) => {
-                                    if (error === this.props.translate('bankAccount.error.routingNumber')) {
-                                        hideBankAccountErrors();
-                                    }
-                                    this.setState({routingNumber});
-                                }}
+                                onChangeText={value => this.clearErrorAndSetValue('routingNumber', value)}
                                 disabled={shouldDisableInputs}
-                                errorText={error === this.props.translate('bankAccount.error.routingNumber')
-                                    ? error : ''}
+                                errorText={this.getErrorText('routingNumber')}
                             />
                             <ExpensiTextInput
                                 containerStyles={[styles.mt4]}
                                 placeholder={this.props.translate('bankAccount.accountNumber')}
                                 keyboardType="number-pad"
                                 value={this.state.accountNumber}
-                                onChangeText={accountNumber => this.setState({accountNumber})}
+                                onChangeText={value => this.clearErrorAndSetValue('accountNumber', value)}
                                 disabled={shouldDisableInputs}
+                                errorText={this.getErrorText('accountNumber')}
                             />
                             <CheckboxWithLabel
                                 style={[styles.mb4, styles.mt5]}