Handle VBA errors with red field outlines

src/components/TextInputWithLabel.js

@@ -54,7 +54,12 @@ const TextInputWithLabel = props => (
             )}
         </View>
         <TextInput
-            style={[styles.textInput, styles.mb1, props.disabled ? styles.disabledTextInput : undefined]}
+            style={[
+                styles.textInput,
+                styles.mb1,
+                props.disabled ? styles.disabledTextInput : undefined,
+                props.errorText ? styles.errorOutline : undefined,
+            ]}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {..._.omit(props, ['label', 'errorText'])}
         />

src/libs/ValidationUtils.js

@@ -1,7 +1,7 @@
 import moment from 'moment';
 import CONST from '../CONST';
-import Growl from './Growl';
 import {translateLocal} from './translate';
+import {showBankAccountFormValidationError} from './actions/BankAccounts';
 
 /**
  * Validating that this is a valid address (PO boxes are not allowed)
@@ -74,27 +74,27 @@ function isValidSSNLastFour(ssnLast4) {
  */
 function isValidIdentity(identity) {
     if (!isValidAddress(identity.street)) {
-        Growl.error(translateLocal('bankAccount.error.address'));
+        showBankAccountFormValidationError(translateLocal('bankAccount.error.address'));
         return false;
     }
 
     if (identity.state === '') {
-        Growl.error(translateLocal('bankAccount.error.addressState'));
+        showBankAccountFormValidationError(translateLocal('bankAccount.error.addressState'));
         return false;
     }
 
     if (!isValidZipCode(identity.zipCode)) {
-        Growl.error(translateLocal('bankAccount.error.zipCode'));
+        showBankAccountFormValidationError(translateLocal('bankAccount.error.zipCode'));
         return false;
     }
 
     if (!isValidDate(identity.dob)) {
-        Growl.error(translateLocal('bankAccount.error.dob'));
+        showBankAccountFormValidationError(translateLocal('bankAccount.error.dob'));
         return false;
     }
 
     if (!isValidSSNLastFour(identity.ssnLast4)) {
-        Growl.error(translateLocal('bankAccount.error.ssnLast4'));
+        showBankAccountFormValidationError(translateLocal('bankAccount.error.ssnLast4'));
         return false;
     }
 

src/libs/actions/BankAccounts.js

@@ -563,6 +563,10 @@ function validateBankAccount(bankAccountID, validateCode) {
         });
 }
 
+function showBankAccountFormValidationError(error) {
+    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {error}).then(() => Growl.error(error));
+}
+
 /**
  * Create or update the bank account in db with the updated data.
  *
@@ -725,12 +729,12 @@ function setupWithdrawalAccount(data) {
             goToWithdrawalAccountSetupStep(nextStep, achData);
 
             if (error) {
-                Growl.error(error, 5000);
+                showBankAccountFormValidationError(error);
             }
         });
 }
 
-function hideExistingOwnersError() {
+function hideBankAccountErrors() {
     Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {error: '', existingOwnersList: ''});
 }
 
@@ -746,5 +750,6 @@ export {
     goToWithdrawalAccountSetupStep,
     setupWithdrawalAccount,
     validateBankAccount,
-    hideExistingOwnersError,
+    hideBankAccountErrors,
+    showBankAccountFormValidationError,
 };

src/pages/ReimbursementAccount/BankAccountStep.js

@@ -23,7 +23,7 @@ import exampleCheckImage from '../../../assets/images/example-check-image.png';
 import Text from '../../components/Text';
 import {
     goToWithdrawalAccountSetupStep,
-    hideExistingOwnersError,
+    hideBankAccountErrors,
     setupWithdrawalAccount,
 } from '../../libs/actions/BankAccounts';
 import ConfirmModal from '../../components/ConfirmModal';
@@ -130,8 +130,8 @@ 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 isExistingOwnersErrorVisible = Boolean(this.props.reimbursementAccount.error
-            && existingOwners);
+        const error = this.props.reimbursementAccount.error;
+        const isExistingOwnersErrorVisible = Boolean(error && existingOwners);
         return (
             <View style={[styles.flex1, styles.justifyContentBetween]}>
                 <HeaderWithCloseButton
@@ -211,8 +211,15 @@ class BankAccountStep extends React.Component {
                                 placeholder={this.props.translate('bankAccount.routingNumber')}
                                 keyboardType="number-pad"
                                 value={this.state.routingNumber}
-                                onChangeText={routingNumber => this.setState({routingNumber})}
+                                onChangeText={(routingNumber) => {
+                                    if (error === this.props.translate('bankAccount.error.routingNumber')) {
+                                        hideBankAccountErrors();
+                                    }
+                                    this.setState({routingNumber});
+                                }}
                                 disabled={shouldDisableInputs}
+                                errorText={error === this.props.translate('bankAccount.error.routingNumber')
+                                    ? error : ''}
                             />
                             <TextInputWithLabel
                                 placeholder={this.props.translate('bankAccount.accountNumber')}
@@ -250,7 +257,7 @@ class BankAccountStep extends React.Component {
                 <ConfirmModal
                     title={this.props.translate('bankAccount.error.existingOwners.unableToAddBankAccount')}
                     isVisible={isExistingOwnersErrorVisible}
-                    onConfirm={hideExistingOwnersError}
+                    onConfirm={hideBankAccountErrors}
                     shouldShowCancelButton={false}
                     prompt={(
                         <View>

src/pages/ReimbursementAccount/BeneficialOwnersStep.js

@@ -2,6 +2,7 @@ import _ from 'underscore';
 import React from 'react';
 import PropTypes from 'prop-types';
 import {ScrollView, View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
 import Text from '../../components/Text';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import styles from '../../styles/styles';
@@ -11,17 +12,28 @@ import Button from '../../components/Button';
 import IdentityForm from './IdentityForm';
 import FixedFooter from '../../components/FixedFooter';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
-import {goToWithdrawalAccountSetupStep, setupWithdrawalAccount} from '../../libs/actions/BankAccounts';
+import {
+    goToWithdrawalAccountSetupStep,
+    setupWithdrawalAccount,
+} from '../../libs/actions/BankAccounts';
 import Navigation from '../../libs/Navigation/Navigation';
 import CONST from '../../CONST';
 import {isValidIdentity} from '../../libs/ValidationUtils';
 import Growl from '../../libs/Growl';
+import ONYXKEYS from '../../ONYXKEYS';
+import compose from '../../libs/compose';
 
 const propTypes = {
     /** Name of the company */
     companyName: PropTypes.string.isRequired,
 
     ...withLocalizePropTypes,
+
+    /** Bank account currently in setup */
+    reimbursementAccount: PropTypes.shape({
+        /** Error set when handling the API response */
+        error: PropTypes.string,
+    }).isRequired,
 };
 
 class BeneficialOwnersStep extends React.Component {
@@ -172,6 +184,7 @@ class BeneficialOwnersStep extends React.Component {
                                             dob: owner.dob || '',
                                             ssnLast4: owner.ssnLast4 || '',
                                         }}
+                                        error={this.props.reimbursementAccount.error}
                                     />
                                     {this.state.beneficialOwners.length > 1 && (
                                         <TextLink onPress={() => this.removeBeneficialOwner(owner)}>
@@ -230,5 +243,11 @@ class BeneficialOwnersStep extends React.Component {
 }
 
 BeneficialOwnersStep.propTypes = propTypes;
-
-export default withLocalize(BeneficialOwnersStep);
+export default compose(
+    withLocalize,
+    withOnyx({
+        reimbursementAccount: {
+            key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
+        },
+    }),
+)(BeneficialOwnersStep);