From cbbb53629eea85140c530dfb2f818264e2e34337 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Mon, 14 Jun 2021 21:27:47 -0700
Subject: [PATCH 01/29] Add header and make sure things are loading

---
 .../ReimbursementAccount/ValidationStep.js    | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index 43628ea79677..e53cf203e0c1 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -1,5 +1,25 @@
 import React from 'react';
-import {View} from 'react-native';
+import {View, TextInput} from 'react-native';
+import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import Navigation from '../../libs/Navigation/Navigation';
+import styles from '../../styles/styles';
+import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 
-const ValidationStep = () => <View />;
-export default ValidationStep;
+const propTypes = {
+    ...withLocalizePropTypes,
+};
+
+class ValidationStep extends React.Component {
+    render() {
+        return (
+            <View style={[styles.flex1, styles.justifyContentBetween]}>
+                <HeaderWithCloseButton
+                    title="Validation Step"
+                    onCloseButtonPress={Navigation.dismissModal}
+                />
+            </View>
+        );
+    }
+}
+
+export default withLocalize(ValidationStep);

From 68d98296e46a748567d76df2e27bc4a9e78bcaad Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Mon, 14 Jun 2021 21:53:08 -0700
Subject: [PATCH 02/29] get props and state

---
 .../ReimbursementAccount/ValidationStep.js    | 31 +++++++++++++++++--
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index e53cf203e0c1..979cf7c6e34c 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -1,15 +1,26 @@
 import React from 'react';
-import {View, TextInput} from 'react-native';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
-import Navigation from '../../libs/Navigation/Navigation';
+import {View} from 'react-native';
 import styles from '../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 
+import Button from '../../components/Button';
+import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import Navigation from '../../libs/Navigation/Navigation';
+import TextInputWithLabel from '../../components/TextInputWithLabel';
+
 const propTypes = {
     ...withLocalizePropTypes,
 };
 
 class ValidationStep extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            amount1: 0,
+        };
+    }
+
     render() {
         return (
             <View style={[styles.flex1, styles.justifyContentBetween]}>
@@ -17,9 +28,23 @@ class ValidationStep extends React.Component {
                     title="Validation Step"
                     onCloseButtonPress={Navigation.dismissModal}
                 />
+                <TextInputWithLabel
+                    placeholder="1.01"
+                    keyboardType="number-pad"
+                    value={this.state.amount1}
+                    onChangeText={amount1 => this.setState({amount1})}
+                />
+                <Button
+                    success
+                    text={this.props.translate('common.saveAndContinue')}
+                    style={[styles.m5]}
+                    onPress={this.submit}
+                />
             </View>
         );
     }
 }
 
+ValidationStep.propTypes = propTypes;
+
 export default withLocalize(ValidationStep);

From 3bbb98b0e889e60c615857297f8be94237cbc635 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Mon, 14 Jun 2021 22:09:26 -0700
Subject: [PATCH 03/29] get methods talking

---
 src/libs/actions/BankAccounts.js                 | 10 ++++++++++
 src/pages/ReimbursementAccount/ValidationStep.js | 10 ++++++++++
 2 files changed, 20 insertions(+)

diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js
index baea5c4c0edc..74060931e3ea 100644
--- a/src/libs/actions/BankAccounts.js
+++ b/src/libs/actions/BankAccounts.js
@@ -484,6 +484,16 @@ function setFreePlanVerifiedBankAccountID(bankAccountID) {
     API.SetNameValuePair({name: CONST.NVP.FREE_PLAN_BANK_ACCOUNT_ID, value: bankAccountID});
 }
 
+/**
+ * @param {Number} bankAccountID
+ * @param {String} validationAmounts
+ */
+function validateBankAccount(bankAccountID, validationAmounts) {
+    console.log('Going to call BankAccount_Validate');
+    console.log(bankAccountID);
+    // API.BankAccount_Validate(params);
+}
+
 /**
  * Create or update the bank account in db with the updated data.
  *
diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index 979cf7c6e34c..6be12a891c7f 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -3,6 +3,8 @@ import {View} from 'react-native';
 import styles from '../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 
+import {validateBankAccount} from '../../libs/actions/BankAccounts';
+
 import Button from '../../components/Button';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import Navigation from '../../libs/Navigation/Navigation';
@@ -16,11 +18,19 @@ class ValidationStep extends React.Component {
     constructor(props) {
         super(props);
 
+        this.submit = this.submit.bind(this);
+
         this.state = {
             amount1: 0,
         };
     }
 
+    submit(params) {
+        console.log(params);
+        // Make a call to bankAccounts
+        validateBankAccount(1234, '1234123');
+    }
+
     render() {
         return (
             <View style={[styles.flex1, styles.justifyContentBetween]}>

From ebcc2e40dde6ebe7786b03d3be09650ae7878916 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Mon, 14 Jun 2021 22:24:58 -0700
Subject: [PATCH 04/29] Add amound 2 and 3 and concatoate them

---
 .../ReimbursementAccount/ValidationStep.js    | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index 6be12a891c7f..b871a8dbc9a9 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -22,13 +22,17 @@ class ValidationStep extends React.Component {
 
         this.state = {
             amount1: 0,
+            amount2: 0,
+            amount3: 0,
         };
     }
 
-    submit(params) {
-        console.log(params);
+    submit() {
+        const validationAmounts = [this.state.amount1, this.state.amount2, this.state.amount3].join(',');
+        console.log(validationAmounts);
+
         // Make a call to bankAccounts
-        validateBankAccount(1234, '1234123');
+        validateBankAccount(1234, validationAmounts);
     }
 
     render() {
@@ -44,6 +48,18 @@ class ValidationStep extends React.Component {
                     value={this.state.amount1}
                     onChangeText={amount1 => this.setState({amount1})}
                 />
+                <TextInputWithLabel
+                    placeholder="1.01"
+                    keyboardType="number-pad"
+                    value={this.state.amount2}
+                    onChangeText={amount2 => this.setState({amount2})}
+                />
+                <TextInputWithLabel
+                    placeholder="1.01"
+                    keyboardType="number-pad"
+                    value={this.state.amount3}
+                    onChangeText={amount3 => this.setState({amount3})}
+                />
                 <Button
                     success
                     text={this.props.translate('common.saveAndContinue')}

From af09ae84ae638b22dd92474abbd4fe97c7735a25 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Mon, 14 Jun 2021 23:40:45 -0700
Subject: [PATCH 05/29] Add a call to WebAPI

---
 src/libs/API.js                                  | 8 ++++++++
 src/libs/actions/BankAccounts.js                 | 7 ++++---
 src/pages/ReimbursementAccount/ValidationStep.js | 6 +++---
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/libs/API.js b/src/libs/API.js
index 391c02db97ac..0d6a25548f89 100644
--- a/src/libs/API.js
+++ b/src/libs/API.js
@@ -854,6 +854,13 @@ function BankAccount_SetupWithdrawal(parameters) {
     );
 }
 
+function BankAccount_Validate(parameters) {
+    const commandName = 'ValidateBankAccount';
+    requireParameters(['bankAccountID', 'validateCode'], parameters, commandName);
+
+    return Network.post(commandName, parameters, CONST.NETWORK.METHOD.POST);
+}
+
 /**
  * @param {Object} parameters
  * @param {String[]} data
@@ -893,6 +900,7 @@ export {
     BankAccount_Create,
     BankAccount_Get,
     BankAccount_SetupWithdrawal,
+    BankAccount_Validate,
     ChangePassword,
     CreateChatReport,
     CreateLogin,
diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js
index 74060931e3ea..88676128d6cb 100644
--- a/src/libs/actions/BankAccounts.js
+++ b/src/libs/actions/BankAccounts.js
@@ -486,12 +486,13 @@ function setFreePlanVerifiedBankAccountID(bankAccountID) {
 
 /**
  * @param {Number} bankAccountID
- * @param {String} validationAmounts
+ * @param {String} validateCode
  */
-function validateBankAccount(bankAccountID, validationAmounts) {
+function validateBankAccount(bankAccountID, validateCode) {
     console.log('Going to call BankAccount_Validate');
     console.log(bankAccountID);
-    // API.BankAccount_Validate(params);
+    console.log(validateCode);
+    API.BankAccount_Validate({bankAccountID, validateCode});
 }
 
 /**
diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index b871a8dbc9a9..881e3827eead 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -28,11 +28,11 @@ class ValidationStep extends React.Component {
     }
 
     submit() {
-        const validationAmounts = [this.state.amount1, this.state.amount2, this.state.amount3].join(',');
-        console.log(validationAmounts);
+        const validateCode = [this.state.amount1, this.state.amount2, this.state.amount3].join(',');
+        console.log(validateCode);
 
         // Make a call to bankAccounts
-        validateBankAccount(1234, validationAmounts);
+        validateBankAccount(1234, validateCode);
     }
 
     render() {

From ea09cfa05c996cff4124bb7da7eda1ece85a8388 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Tue, 15 Jun 2021 00:02:43 -0700
Subject: [PATCH 06/29] remove debugging logs

---
 src/libs/actions/BankAccounts.js                 | 3 ---
 src/pages/ReimbursementAccount/ValidationStep.js | 1 -
 2 files changed, 4 deletions(-)

diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js
index 88676128d6cb..23aec3b090d0 100644
--- a/src/libs/actions/BankAccounts.js
+++ b/src/libs/actions/BankAccounts.js
@@ -489,9 +489,6 @@ function setFreePlanVerifiedBankAccountID(bankAccountID) {
  * @param {String} validateCode
  */
 function validateBankAccount(bankAccountID, validateCode) {
-    console.log('Going to call BankAccount_Validate');
-    console.log(bankAccountID);
-    console.log(validateCode);
     API.BankAccount_Validate({bankAccountID, validateCode});
 }
 
diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index 881e3827eead..0089fef0b9d4 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -29,7 +29,6 @@ class ValidationStep extends React.Component {
 
     submit() {
         const validateCode = [this.state.amount1, this.state.amount2, this.state.amount3].join(',');
-        console.log(validateCode);
 
         // Make a call to bankAccounts
         validateBankAccount(1234, validateCode);

From 94ef391645e1927a8e0ef97de9e8b016e65b5932 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Tue, 15 Jun 2021 00:35:03 -0700
Subject: [PATCH 07/29] export validate method

---
 src/libs/API.js                  | 13 ++++++-------
 src/libs/actions/BankAccounts.js |  1 +
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/libs/API.js b/src/libs/API.js
index 0d6a25548f89..5629a5dd4c37 100644
--- a/src/libs/API.js
+++ b/src/libs/API.js
@@ -812,6 +812,12 @@ function BankAccount_Create(parameters) {
     return Network.post(commandName, parameters, CONST.NETWORK.METHOD.POST, 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}
@@ -854,13 +860,6 @@ function BankAccount_SetupWithdrawal(parameters) {
     );
 }
 
-function BankAccount_Validate(parameters) {
-    const commandName = 'ValidateBankAccount';
-    requireParameters(['bankAccountID', 'validateCode'], parameters, commandName);
-
-    return Network.post(commandName, parameters, CONST.NETWORK.METHOD.POST);
-}
-
 /**
  * @param {Object} parameters
  * @param {String[]} data
diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js
index 23aec3b090d0..3c5504866f6e 100644
--- a/src/libs/actions/BankAccounts.js
+++ b/src/libs/actions/BankAccounts.js
@@ -638,4 +638,5 @@ export {
     fetchFreePlanVerifiedBankAccount,
     setupWithdrawalAccount,
     goToWithdrawalAccountSetupStep,
+    validateBankAccount,
 };

From 0bb78c31746dac11aa695534ab7f7ed594d2c17c Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Wed, 16 Jun 2021 11:52:39 -0700
Subject: [PATCH 08/29] Validate amounts

---
 .../ReimbursementAccountPage.js               |  4 +-
 .../ReimbursementAccount/ValidationStep.js    | 96 ++++++++++++++-----
 2 files changed, 76 insertions(+), 24 deletions(-)

diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
index 4435525e47fd..b829210a1b5b 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
@@ -118,7 +118,9 @@ class ReimbursementAccountPage extends React.Component {
                     <ACHContractStep />
                 )}
                 {currentStep === CONST.BANK_ACCOUNT.STEP.VALIDATION && (
-                    <ValidationStep />
+                    <ValidationStep
+                        achData={this.props.reimbursementAccount.achData}
+                    />
                 )}
             </ScreenWrapper>
         );
diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index 0089fef0b9d4..60759ddba6d8 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -1,5 +1,8 @@
 import React from 'react';
 import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import Str from 'expensify-common/lib/str';
+import _ from 'underscore';
 import styles from '../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 
@@ -9,9 +12,19 @@ import Button from '../../components/Button';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import Navigation from '../../libs/Navigation/Navigation';
 import TextInputWithLabel from '../../components/TextInputWithLabel';
+import Text from '../../components/Text';
 
 const propTypes = {
     ...withLocalizePropTypes,
+
+    achData: PropTypes.shape({
+        bankAccountID: PropTypes.number.isRequired,
+        state: PropTypes.string,
+    }),
+};
+
+const defaultProps = {
+    achData: {},
 };
 
 class ValidationStep extends React.Component {
@@ -21,44 +34,80 @@ class ValidationStep extends React.Component {
         this.submit = this.submit.bind(this);
 
         this.state = {
-            amount1: 0,
-            amount2: 0,
-            amount3: 0,
+            amount1: '',
+            amount2: '',
+            amount3: '',
+            error: '',
         };
     }
 
     submit() {
-        const validateCode = [this.state.amount1, this.state.amount2, this.state.amount3].join(',');
+        const amount1 = this.filterInput(this.state.amount1);
+        const amount2 = this.filterInput(this.state.amount2);
+        const amount3 = this.filterInput(this.state.amount3);
+
+        if (!amount1 || !amount2 || !amount3) {
+            this.setState({error: 'Invalid amounts'});
+        }
+
+        const validateCode = [amount1, amount2, amount3].join(',');
 
         // Make a call to bankAccounts
-        validateBankAccount(1234, validateCode);
+        validateBankAccount(this.props.achData.bankAccountID, validateCode);
+    }
+
+    filterInput(amount) {
+        let value = amount.trim();
+        if (value === '' || !Math.abs(Str.fromUSDToNumber(value)) || _.isNaN(Number(value))) {
+            return 0;
+        }
+
+        // If the user enters the values in dollars, convert it to the respective cents amount
+        if (_.contains(value, '.')) {
+            value = Str.fromUSDToNumber(value);
+        }
+
+        return value;
     }
 
     render() {
+        const errorMessage = this.state.error;
         return (
             <View style={[styles.flex1, styles.justifyContentBetween]}>
                 <HeaderWithCloseButton
                     title="Validation Step"
                     onCloseButtonPress={Navigation.dismissModal}
                 />
-                <TextInputWithLabel
-                    placeholder="1.01"
-                    keyboardType="number-pad"
-                    value={this.state.amount1}
-                    onChangeText={amount1 => this.setState({amount1})}
-                />
-                <TextInputWithLabel
-                    placeholder="1.01"
-                    keyboardType="number-pad"
-                    value={this.state.amount2}
-                    onChangeText={amount2 => this.setState({amount2})}
-                />
-                <TextInputWithLabel
-                    placeholder="1.01"
-                    keyboardType="number-pad"
-                    value={this.state.amount3}
-                    onChangeText={amount3 => this.setState({amount3})}
-                />
+                <Text style={[styles.mh5, styles.mb5]}>
+                    A day or two after you add your account to Expensify
+                    we send three (3) transactions to your account. They have a merchant line like
+                    &quot;Expensify, Inc. Validation&quot;.
+                </Text>
+                <View style={[styles.m5, styles.flex1]}>
+                    {errorMessage && (
+                        <Text style={[styles.mh5, styles.mb5]}>
+                            {errorMessage}
+                        </Text>
+                    )}
+                    <TextInputWithLabel
+                        placeholder="1.01"
+                        keyboardType="number-pad"
+                        value={this.state.amount1}
+                        onChangeText={amount1 => this.setState({amount1})}
+                    />
+                    <TextInputWithLabel
+                        placeholder="1.01"
+                        keyboardType="number-pad"
+                        value={this.state.amount2}
+                        onChangeText={amount2 => this.setState({amount2})}
+                    />
+                    <TextInputWithLabel
+                        placeholder="1.01"
+                        keyboardType="number-pad"
+                        value={this.state.amount3}
+                        onChangeText={amount3 => this.setState({amount3})}
+                    />
+                </View>
                 <Button
                     success
                     text={this.props.translate('common.saveAndContinue')}
@@ -71,5 +120,6 @@ class ValidationStep extends React.Component {
 }
 
 ValidationStep.propTypes = propTypes;
+ValidationStep.defaultProps = defaultProps;
 
 export default withLocalize(ValidationStep);

From 37433a4ed2eb6a1c583a4561799509ee8d4ae3ad Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Wed, 16 Jun 2021 13:45:47 -0700
Subject: [PATCH 09/29] Add clarification

---
 src/CONST.js                                     |  1 +
 src/pages/ReimbursementAccount/ValidationStep.js | 15 +++++++++------
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/CONST.js b/src/CONST.js
index ef7f2109060e..4dbbc363d078 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -161,6 +161,7 @@ const CONST = {
         TIMEZONE: 'timeZone',
         FREE_PLAN_BANK_ACCOUNT_ID: 'expensify_freePlanBankAccountID',
         ACH_DATA_THROTTLED: 'expensify_ACHData_throttled',
+        VALIDATE_BANK_ACCOUNT_ATTEMPTS: 'expensify_validateBankAccountAttempts',
     },
     DEFAULT_TIME_ZONE: {automatic: true, selected: 'America/Los_Angeles'},
     DEFAULT_ACCOUNT_DATA: {error: '', success: '', loading: false},
diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index 60759ddba6d8..c4c889966b36 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -46,16 +46,19 @@ class ValidationStep extends React.Component {
         const amount2 = this.filterInput(this.state.amount2);
         const amount3 = this.filterInput(this.state.amount3);
 
-        if (!amount1 || !amount2 || !amount3) {
+        // If amounts are all non-zeros, submit amounts to API
+        if (amount1, amount2, amount3) {
+            const validateCode = [amount1, amount2, amount3].join(',');
+
+            // Make a call to bankAccounts
+            validateBankAccount(this.props.achData.bankAccountID, validateCode);
+        } else {
+            // If any values are falsey, indicate to user that inputs are invalid
             this.setState({error: 'Invalid amounts'});
         }
-
-        const validateCode = [amount1, amount2, amount3].join(',');
-
-        // Make a call to bankAccounts
-        validateBankAccount(this.props.achData.bankAccountID, validateCode);
     }
 
+    // Filters inputs. Anything that isn't a number is returned as 0. Any dollar amount (e.g. 1.01 will be turned into 101)
     filterInput(amount) {
         let value = amount.trim();
         if (value === '' || !Math.abs(Str.fromUSDToNumber(value)) || _.isNaN(Number(value))) {

From c0fd259be71c02fd0e46c26357614c71e0871d1d Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Wed, 16 Jun 2021 17:49:42 -0700
Subject: [PATCH 10/29] grab failed reimbursement

---
 src/CONST.js                                  |  2 +-
 src/libs/actions/BankAccounts.js              | 19 +++++++++++++++++++
 .../ReimbursementAccount/ValidationStep.js    |  4 ++++
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/CONST.js b/src/CONST.js
index dd76d92d3944..e82261832c85 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -162,7 +162,7 @@ const CONST = {
         TIMEZONE: 'timeZone',
         FREE_PLAN_BANK_ACCOUNT_ID: 'expensify_freePlanBankAccountID',
         ACH_DATA_THROTTLED: 'expensify_ACHData_throttled',
-        VALIDATE_BANK_ACCOUNT_ATTEMPTS: 'expensify_validateBankAccountAttempts',
+        FAILED_BANK_ACCOUNT_VALIDATIONS_PREFACE: 'private_failedBankValidations_',
     },
     DEFAULT_TIME_ZONE: {automatic: true, selected: 'America/Los_Angeles'},
     DEFAULT_ACCOUNT_DATA: {error: '', success: '', loading: false},
diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js
index 013b5428d241..651bf2416c42 100644
--- a/src/libs/actions/BankAccounts.js
+++ b/src/libs/actions/BankAccounts.js
@@ -274,6 +274,25 @@ function fetchUserWallet() {
         });
 }
 
+function validateBankAccountAttempts(bankAccountID) {
+    const name = CONST.NVP.FAILED_BANK_ACCOUNT_VALIDATIONS_PREFACE + bankAccountID;
+    API.Get({
+        returnValueList: 'nameValuePairs',
+        name
+    })
+    .then((response) => {
+        if (response.jsonCode !== 200) {
+            return;
+        }
+
+        const validationAttempts = lodashGet(response, [
+                'value', 'nameValuePairs', name,
+            ], 0);
+
+        Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {validationAttempts: validationAttempts})
+    })
+}
+
 let previousACHData = {};
 Onyx.connect({
     key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index c4c889966b36..3119c3afc1dc 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -41,6 +41,10 @@ class ValidationStep extends React.Component {
         };
     }
 
+    componentDidMount() {
+        validateBankAccountAttempts(this.props.achData.bankAccountID);
+    }
+
     submit() {
         const amount1 = this.filterInput(this.state.amount1);
         const amount2 = this.filterInput(this.state.amount2);

From 4af47aeb621934e4b7deae8033ab7a51ffa8c125 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Wed, 16 Jun 2021 18:41:17 -0700
Subject: [PATCH 11/29] Pull bankaccountID first

---
 src/CONST.js                                  |   1 +
 src/libs/actions/BankAccounts.js              | 239 +++++++++---------
 .../ReimbursementAccountPage.js               |   4 +
 .../ReimbursementAccount/ValidationStep.js    |  12 +-
 4 files changed, 128 insertions(+), 128 deletions(-)

diff --git a/src/CONST.js b/src/CONST.js
index e82261832c85..9c90c0896415 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -48,6 +48,7 @@ const CONST = {
             IBAN: /^[A-Za-z0-9]{2,30}$/,
             SWIFT_BIC: /^[A-Za-z0-9]{8,11}$/,
         },
+        VERIFICATION_MAX_ATTEMPTS: 7,
     },
     BETAS: {
         ALL: 'all',
diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js
index 651bf2416c42..f627e6413b97 100644
--- a/src/libs/actions/BankAccounts.js
+++ b/src/libs/actions/BankAccounts.js
@@ -274,25 +274,6 @@ function fetchUserWallet() {
         });
 }
 
-function validateBankAccountAttempts(bankAccountID) {
-    const name = CONST.NVP.FAILED_BANK_ACCOUNT_VALIDATIONS_PREFACE + bankAccountID;
-    API.Get({
-        returnValueList: 'nameValuePairs',
-        name
-    })
-    .then((response) => {
-        if (response.jsonCode !== 200) {
-            return;
-        }
-
-        const validationAttempts = lodashGet(response, [
-                'value', 'nameValuePairs', name,
-            ], 0);
-
-        Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {validationAttempts: validationAttempts})
-    })
-}
-
 let previousACHData = {};
 Onyx.connect({
     key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
@@ -333,115 +314,129 @@ function goToWithdrawalAccountSetupStep(stepID, achData) {
  */
 function fetchFreePlanVerifiedBankAccount() {
     Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {loading: true});
-    promiseAllSettled([
-        API.Get({
-            returnValueList: 'nameValuePairs',
-            name: CONST.NVP.FREE_PLAN_BANK_ACCOUNT_ID,
-        }),
-        API.Get({
-            returnValueList: 'nameValuePairs',
-            name: 'expensify_migration_2020_04_28_RunKycVerifications',
-        }),
-        API.Get({
-            returnValueList: 'nameValuePairs',
-            name: CONST.NVP.ACH_DATA_THROTTLED,
-        }),
-        API.Get({returnValueList: 'bankAccountList'}),
-    ])
-        .then(([
-            freePlanBankAccountIDResponse,
-            kycVerificationsMigrationResponse,
-            achDataThrottledResponse,
-            bankAccountListResponse,
-        ]) => {
-            const bankAccountID = lodashGet(freePlanBankAccountIDResponse, [
-                'value', 'nameValuePairs', CONST.NVP.FREE_PLAN_BANK_ACCOUNT_ID,
-            ], '');
-            const kycVerificationsMigration = lodashGet(kycVerificationsMigrationResponse, [
-                'value', 'nameValuePairs', 'expensify_migration_2020_04_28_RunKycVerifications',
-            ], '');
-            const throttledDate = lodashGet(achDataThrottledResponse, [
-                'value', 'nameValuePairs', CONST.NVP.ACH_DATA_THROTTLED,
+    let bankAccountID;
+    let failedValidationAttemptsName;
+
+    API.Get({
+        returnValueList: 'nameValuePairs',
+        name: CONST.NVP.FREE_PLAN_BANK_ACCOUNT_ID,
+    })
+        .then((response) => {
+            bankAccountID = lodashGet(response, ['nameValuePairs', CONST.NVP.FREE_PLAN_BANK_ACCOUNT_ID,
             ], '');
-            const bankAccountJSON = _.find(
-                lodashGet(bankAccountListResponse, ['value', 'bankAccountList'], []), account => (
-                    account.bankAccountID === bankAccountID
-                ),
-            );
-            const bankAccount = bankAccountJSON ? new BankAccount(bankAccountJSON) : null;
-
-            // Next we'll build the achData and save it to Onyx
-            // If the user is already setting up a bank account we will continue the flow for them
-            let currentStep = previousACHData.currentStep;
-            const achData = bankAccount ? bankAccount.toACHData() : {};
-            achData.useOnfido = true;
-            achData.policyID = '';
-            achData.isInSetup = !bankAccount || bankAccount.isInSetup();
-            achData.bankAccountInReview = bankAccount && bankAccount.isVerifying();
-            achData.domainLimit = 0;
-            achData.isDomainUsingExpensifyCard = false; // @TODO - Not actually sure if we need this
-
-            // @TODO This subStep is used to either show the Plaid "login" view or the "manual" view - but not sure if
-            // we need to implement it yet...
-            // eslint-disable-next-line max-len
-            // See Web-Secure: https://github.com/Expensify/Web-Expensify/blob/896941794f68d7dce64466d83a3e86a5f8122e45/site/app/settings/reimbursement/bankAccountView.jsx#L356-L357
-            achData.subStep = '';
-
-            // If we're not in setup, it means we already have a withdrawal account and we're upgrading it to a business
-            // bank account. So let the user review all steps with all info prefilled and editable, unless a specific
-            // step was passed.
-            if (!achData.isInSetup) {
-                // @TODO Not sure if we need to do this since for NewDot none of the accounts are pre-existing ones
-                currentStep = '';
-            }
+            failedValidationAttemptsName = CONST.NVP.FAILED_BANK_ACCOUNT_VALIDATIONS_PREFACE + bankAccountID;
+
+            // Now that we have the bank account. Lets grab the rest of the bank info we need
+            promiseAllSettled([
+                API.Get({
+                    returnValueList: 'nameValuePairs',
+                    name: failedValidationAttemptsName,
+                }),
+                API.Get({
+                    returnValueList: 'nameValuePairs',
+                    name: 'expensify_migration_2020_04_28_RunKycVerifications',
+                }),
+                API.Get({
+                    returnValueList: 'nameValuePairs',
+                    name: CONST.NVP.ACH_DATA_THROTTLED,
+                }),
+                API.Get({returnValueList: 'bankAccountList'}),
+            ])
+                .then(([
+                    failedValidationAttemptsResponse,
+                    kycVerificationsMigrationResponse,
+                    achDataThrottledResponse,
+                    bankAccountListResponse,
+                ]) => {
+                    const failedValidationAttempts = lodashGet(failedValidationAttemptsResponse, [
+                        'value', 'nameValuePairs', failedValidationAttemptsResponse,
+                    ], 0);
+                    const kycVerificationsMigration = lodashGet(kycVerificationsMigrationResponse, [
+                        'value', 'nameValuePairs', 'expensify_migration_2020_04_28_RunKycVerifications',
+                    ], '');
+                    const throttledDate = lodashGet(achDataThrottledResponse, [
+                        'value', 'nameValuePairs', CONST.NVP.ACH_DATA_THROTTLED,
+                    ], '');
+                    const bankAccountJSON = _.find(
+                        lodashGet(bankAccountListResponse, ['value', 'bankAccountList'], []), account => (
+                            account.bankAccountID === bankAccountID
+                        ),
+                    );
+                    const bankAccount = bankAccountJSON ? new BankAccount(bankAccountJSON) : null;
+
+                    // Next we'll build the achData and save it to Onyx
+                    // If the user is already setting up a bank account we will continue the flow for them
+                    let currentStep = previousACHData.currentStep;
+                    const achData = bankAccount ? bankAccount.toACHData() : {};
+                    achData.useOnfido = true;
+                    achData.policyID = '';
+                    achData.isInSetup = !bankAccount || bankAccount.isInSetup();
+                    achData.bankAccountInReview = bankAccount && bankAccount.isVerifying();
+                    achData.domainLimit = 0;
+                    achData.isDomainUsingExpensifyCard = false; // @TODO - Not actually sure if we need this
+
+                    // @TODO This subStep is used to either show the Plaid "login" view or the "manual" view - but not sure if
+                    // we need to implement it yet...
+                    // eslint-disable-next-line max-len
+                    // See Web-Secure: https://github.com/Expensify/Web-Expensify/blob/896941794f68d7dce64466d83a3e86a5f8122e45/site/app/settings/reimbursement/bankAccountView.jsx#L356-L357
+                    achData.subStep = '';
+
+                    // If we're not in setup, it means we already have a withdrawal account and we're upgrading it to a business
+                    // bank account. So let the user review all steps with all info prefilled and editable, unless a specific
+                    // step was passed.
+                    if (!achData.isInSetup) {
+                        // @TODO Not sure if we need to do this since for NewDot none of the accounts are pre-existing ones
+                        currentStep = '';
+                    }
 
-            // Temporary fix for Onfido flow. Can be removed by nkuoch after Sept 1 2020.
-            // @TODO not sure if we still need this or what this is about, but seems like maybe yes...
-            if (currentStep === CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT && achData.useOnfido) {
-                const onfidoResponse = lodashGet(achData, CONST.BANK_ACCOUNT.VERIFICATIONS.REQUESTOR_IDENTITY_ONFIDO);
-                const sdkToken = lodashGet(onfidoResponse, CONST.BANK_ACCOUNT.ONFIDO_RESPONSE.SDK_TOKEN);
-                if (sdkToken && !achData.isOnfidoSetupComplete
-                    && onfidoResponse.status !== CONST.BANK_ACCOUNT.ONFIDO_RESPONSE.PASS
-                ) {
-                    currentStep = CONST.BANK_ACCOUNT.STEP.REQUESTOR;
-                }
-            }
+                    // Temporary fix for Onfido flow. Can be removed by nkuoch after Sept 1 2020.
+                    // @TODO not sure if we still need this or what this is about, but seems like maybe yes...
+                    if (currentStep === CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT && achData.useOnfido) {
+                        const onfidoResponse = lodashGet(achData, CONST.BANK_ACCOUNT.VERIFICATIONS.REQUESTOR_IDENTITY_ONFIDO);
+                        const sdkToken = lodashGet(onfidoResponse, CONST.BANK_ACCOUNT.ONFIDO_RESPONSE.SDK_TOKEN);
+                        if (sdkToken && !achData.isOnfidoSetupComplete
+                            && onfidoResponse.status !== CONST.BANK_ACCOUNT.ONFIDO_RESPONSE.PASS
+                        ) {
+                            currentStep = CONST.BANK_ACCOUNT.STEP.REQUESTOR;
+                        }
+                    }
 
-            // Ensure we route the user to the correct step based on the status of their bank account
-            if (bankAccount && !currentStep) {
-                currentStep = bankAccount.isPending() || bankAccount.isVerifying()
-                    ? CONST.BANK_ACCOUNT.STEP.VALIDATION
-                    : CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
-
-                // @TODO Again, not sure how much of this logic is needed right now as we shouldn't be handling any
-                // open accounts in E.cash yet that need to pass any more checks or can be upgraded, but leaving in for
-                // possible future compatibility.
-                if (bankAccount.isOpen()) {
-                    if (bankAccount.needsToPassLatestChecks()) {
-                        const hasTriedToUpgrade = bankAccount.getDateSigned()
-                            > (kycVerificationsMigration || '2020-01-13');
-                        currentStep = hasTriedToUpgrade
-                            ? CONST.BANK_ACCOUNT.STEP.VALIDATION : CONST.BANK_ACCOUNT.STEP.COMPANY;
-                        achData.bankAccountInReview = hasTriedToUpgrade;
-                    } else {
-                        // In Expensify.cash we do not show a specific view for the EnableStep since we will enable the
-                        // Expensify card automatically. However, we will still handle that step and show the Validate
-                        // view.
-                        currentStep = CONST.BANK_ACCOUNT.STEP.ENABLE;
+                    // Ensure we route the user to the correct step based on the status of their bank account
+                    if (bankAccount && !currentStep) {
+                        currentStep = bankAccount.isPending() || bankAccount.isVerifying()
+                            ? CONST.BANK_ACCOUNT.STEP.VALIDATION
+                            : CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
+
+                        // @TODO Again, not sure how much of this logic is needed right now as we shouldn't be handling any
+                        // open accounts in E.cash yet that need to pass any more checks or can be upgraded, but leaving in for
+                        // possible future compatibility.
+                        if (bankAccount.isOpen()) {
+                            if (bankAccount.needsToPassLatestChecks()) {
+                                const hasTriedToUpgrade = bankAccount.getDateSigned()
+                                    > (kycVerificationsMigration || '2020-01-13');
+                                currentStep = hasTriedToUpgrade
+                                    ? CONST.BANK_ACCOUNT.STEP.VALIDATION : CONST.BANK_ACCOUNT.STEP.COMPANY;
+                                achData.bankAccountInReview = hasTriedToUpgrade;
+                            } else {
+                                // In Expensify.cash we do not show a specific view for the EnableStep since we will enable the
+                                // Expensify card automatically. However, we will still handle that step and show the Validate
+                                // view.
+                                currentStep = CONST.BANK_ACCOUNT.STEP.ENABLE;
+                            }
+                        }
                     }
-                }
-            }
 
-            // If at this point we still don't have a current step, default to the BankAccountStep
-            if (!currentStep) {
-                currentStep = CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
-            }
+                    // If at this point we still don't have a current step, default to the BankAccountStep
+                    if (!currentStep) {
+                        currentStep = CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
+                    }
 
-            Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {throttledDate});
-            goToWithdrawalAccountSetupStep(currentStep, achData);
-        })
-        .finally(() => {
-            Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {loading: false});
+                    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {throttledDate, failedValidationAttempts});
+                    goToWithdrawalAccountSetupStep(currentStep, achData);
+                })
+                .finally(() => {
+                    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {loading: false});
+                });
         });
 }
 
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
index a2518eec084e..98544d6779f3 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
@@ -134,6 +134,9 @@ class ReimbursementAccountPage extends React.Component {
             }
         }
 
+        const failedValidationAttempts = lodashGet(this.props, 'reimbursementAccount.failedValidationAttempts');
+        const maxAttemptsReached = failedValidationAttempts > CONST.BANK_ACCOUNT.VERIFICATION_MAX_ATTEMPTS;
+
         // We grab the currentStep from the achData to determine which view to display. The SetupWithdrawalAccount flow
         // allows us to continue the flow from various points depending on where the user left off. We can also
         // specify a specific step to navigate to by using route params.
@@ -155,6 +158,7 @@ class ReimbursementAccountPage extends React.Component {
                 {currentStep === CONST.BANK_ACCOUNT.STEP.VALIDATION && (
                     <ValidationStep
                         achData={this.props.reimbursementAccount.achData}
+                        maxAttemptsReached={maxAttemptsReached}
                     />
                 )}
             </ScreenWrapper>
diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index 3119c3afc1dc..9941f3924076 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -21,10 +21,13 @@ const propTypes = {
         bankAccountID: PropTypes.number.isRequired,
         state: PropTypes.string,
     }),
+
+    maxAttemptsReached: PropTypes.bool,
 };
 
 const defaultProps = {
     achData: {},
+    maxAttemptsReached: false,
 };
 
 class ValidationStep extends React.Component {
@@ -41,17 +44,13 @@ class ValidationStep extends React.Component {
         };
     }
 
-    componentDidMount() {
-        validateBankAccountAttempts(this.props.achData.bankAccountID);
-    }
-
     submit() {
         const amount1 = this.filterInput(this.state.amount1);
         const amount2 = this.filterInput(this.state.amount2);
         const amount3 = this.filterInput(this.state.amount3);
 
         // If amounts are all non-zeros, submit amounts to API
-        if (amount1, amount2, amount3) {
+        if (amount1 && amount2 && amount3) {
             const validateCode = [amount1, amount2, amount3].join(',');
 
             // Make a call to bankAccounts
@@ -62,7 +61,7 @@ class ValidationStep extends React.Component {
         }
     }
 
-    // Filters inputs. Anything that isn't a number is returned as 0. Any dollar amount (e.g. 1.01 will be turned into 101)
+    // Anything that isn't a number is returned as 0. Any dollar amount (e.g. 1.01 will be turned into 101)
     filterInput(amount) {
         let value = amount.trim();
         if (value === '' || !Math.abs(Str.fromUSDToNumber(value)) || _.isNaN(Number(value))) {
@@ -120,6 +119,7 @@ class ValidationStep extends React.Component {
                     text={this.props.translate('common.saveAndContinue')}
                     style={[styles.m5]}
                     onPress={this.submit}
+                    isDisabled={this.props.maxAttemptsReached}
                 />
             </View>
         );

From 794a1ae4f39e1c32ea7288837492f028abdd9385 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Wed, 16 Jun 2021 19:06:33 -0700
Subject: [PATCH 12/29] Nest all validation in PENDING

---
 .../ReimbursementAccount/ValidationStep.js    | 83 +++++++++++--------
 1 file changed, 48 insertions(+), 35 deletions(-)

diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index 9941f3924076..cacffbbe76c1 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -13,6 +13,7 @@ import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import Navigation from '../../libs/Navigation/Navigation';
 import TextInputWithLabel from '../../components/TextInputWithLabel';
 import Text from '../../components/Text';
+import BankAccount from '../../libs/models/BankAccount';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -78,49 +79,61 @@ class ValidationStep extends React.Component {
 
     render() {
         const errorMessage = this.state.error;
+        const state = this.props.achData.state;
         return (
             <View style={[styles.flex1, styles.justifyContentBetween]}>
                 <HeaderWithCloseButton
                     title="Validation Step"
                     onCloseButtonPress={Navigation.dismissModal}
                 />
-                <Text style={[styles.mh5, styles.mb5]}>
-                    A day or two after you add your account to Expensify
-                    we send three (3) transactions to your account. They have a merchant line like
-                    &quot;Expensify, Inc. Validation&quot;.
-                </Text>
-                <View style={[styles.m5, styles.flex1]}>
-                    {errorMessage && (
+                {state === BankAccount.STATE.PENDING && (
+                    <View style={[styles.m5, styles.flex1]}>
                         <Text style={[styles.mh5, styles.mb5]}>
-                            {errorMessage}
+                            A day or two after you add your account to Expensify
+                            we send three (3) transactions to your account. They have a merchant line like
+                            &quot;Expensify, Inc. Validation&quot;.
                         </Text>
-                    )}
-                    <TextInputWithLabel
-                        placeholder="1.01"
-                        keyboardType="number-pad"
-                        value={this.state.amount1}
-                        onChangeText={amount1 => this.setState({amount1})}
-                    />
-                    <TextInputWithLabel
-                        placeholder="1.01"
-                        keyboardType="number-pad"
-                        value={this.state.amount2}
-                        onChangeText={amount2 => this.setState({amount2})}
-                    />
-                    <TextInputWithLabel
-                        placeholder="1.01"
-                        keyboardType="number-pad"
-                        value={this.state.amount3}
-                        onChangeText={amount3 => this.setState({amount3})}
-                    />
-                </View>
-                <Button
-                    success
-                    text={this.props.translate('common.saveAndContinue')}
-                    style={[styles.m5]}
-                    onPress={this.submit}
-                    isDisabled={this.props.maxAttemptsReached}
-                />
+                        <View style={[styles.m5, styles.flex1]}>
+                            {errorMessage && (
+                                <Text style={[styles.mh5, styles.mb5]}>
+                                    {errorMessage}
+                                </Text>
+                            )}
+                            <TextInputWithLabel
+                                placeholder="1.01"
+                                keyboardType="number-pad"
+                                value={this.state.amount1}
+                                onChangeText={amount1 => this.setState({amount1})}
+                            />
+                            <TextInputWithLabel
+                                placeholder="1.01"
+                                keyboardType="number-pad"
+                                value={this.state.amount2}
+                                onChangeText={amount2 => this.setState({amount2})}
+                            />
+                            <TextInputWithLabel
+                                placeholder="1.01"
+                                keyboardType="number-pad"
+                                value={this.state.amount3}
+                                onChangeText={amount3 => this.setState({amount3})}
+                            />
+                        </View>
+                        <Button
+                            success
+                            text={this.props.translate('common.saveAndContinue')}
+                            style={[styles.m5]}
+                            onPress={this.submit}
+                            isDisabled={this.props.maxAttemptsReached}
+                        />
+                    </View>
+                )}
+                {state === BankAccount.STATE.VERIFYING && (
+                    <View style={[styles.m5, styles.flex1]}>
+                        <Text style={[styles.mh5, styles.mb5]}>
+                            POOP
+                        </Text>
+                    </View>
+                )}
             </View>
         );
     }

From fb6458a2714acde2764aed6ec61ea2fb830c792c Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Thu, 17 Jun 2021 08:23:29 -0700
Subject: [PATCH 13/29] Add images

---
 src/pages/ReimbursementAccount/ValidationStep.js | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index cacffbbe76c1..82f92e261f59 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {View} from 'react-native';
+import {Image, View} from 'react-native';
 import PropTypes from 'prop-types';
 import Str from 'expensify-common/lib/str';
 import _ from 'underscore';
@@ -14,6 +14,8 @@ import Navigation from '../../libs/Navigation/Navigation';
 import TextInputWithLabel from '../../components/TextInputWithLabel';
 import Text from '../../components/Text';
 import BankAccount from '../../libs/models/BankAccount';
+import CONST from '../../CONST';
+import ImageView from '../../components/ImageView';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -130,7 +132,15 @@ class ValidationStep extends React.Component {
                 {state === BankAccount.STATE.VERIFYING && (
                     <View style={[styles.m5, styles.flex1]}>
                         <Text style={[styles.mh5, styles.mb5]}>
-                            POOP
+                            <ImageView
+                                resizeMode="contain"
+                                style={[styles.mh5, styles.mb5]}
+                                url={`${CONST.CLOUDFRONT_URL}/icons/emptystates/emptystate_reviewing.gif`}
+                            />
+                            <Image
+                                style={[styles.mh5, styles.mb5]}
+                                source={{uri: `${CONST.CLOUDFRONT_URL}/icons/emptystates/emptystate_reviewing.gif`}}
+                            />
                         </Text>
                     </View>
                 )}

From 1fab732fcf4ca06d15a0259b3994993d3b559cec Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Thu, 17 Jun 2021 10:18:19 -0700
Subject: [PATCH 14/29] fix image url

---
 .../ReimbursementAccount/ValidationStep.js    | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index 82f92e261f59..58286812e179 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {Image, View} from 'react-native';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import Str from 'expensify-common/lib/str';
 import _ from 'underscore';
@@ -131,16 +131,19 @@ class ValidationStep extends React.Component {
                 )}
                 {state === BankAccount.STATE.VERIFYING && (
                     <View style={[styles.m5, styles.flex1]}>
+                        <ImageView
+                            resizeMode="contain"
+                            style={[
+                                styles.mh5,
+                                styles.mb5,
+                            ]}
+                            url={`${CONST.CLOUDFRONT_URL}/images/icons/emptystates/emptystate_reviewing.gif`}
+                        />
                         <Text style={[styles.mh5, styles.mb5]}>
-                            <ImageView
-                                resizeMode="contain"
-                                style={[styles.mh5, styles.mb5]}
-                                url={`${CONST.CLOUDFRONT_URL}/icons/emptystates/emptystate_reviewing.gif`}
-                            />
-                            <Image
-                                style={[styles.mh5, styles.mb5]}
-                                source={{uri: `${CONST.CLOUDFRONT_URL}/icons/emptystates/emptystate_reviewing.gif`}}
-                            />
+                            One moment...
+                        </Text>
+                        <Text style={[styles.mh5, styles.mb5]}>
+                            We&apos;re taking a look at your information and will have you onto next steps in just a few seconds.
                         </Text>
                     </View>
                 )}

From 1ac03806b285675b3038359e0e77c644b826af27 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Thu, 17 Jun 2021 13:26:27 -0700
Subject: [PATCH 15/29] Start getting all the copy lined up

---
 src/languages/en.js                             |  4 ++++
 .../ReimbursementAccount/ValidationStep.js      | 17 ++++++++++-------
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/languages/en.js b/src/languages/en.js
index 74623a29a6f5..d96fa1869e12 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -363,6 +363,10 @@ export default {
         ssnLast4: 'Last 4 Digits of SSN',
         isAuthorized: 'I am authorized to use my company bank account for business spend',
     },
+    validationStep: {
+        headerTitle: 'Validate',
+        verifyingMessage: '',
+    },
     session: {
         offlineMessage: 'Looks like you\'re not connected to internet. Can you check your connection and try again?',
     },
diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index 58286812e179..2204cdaaa3f1 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -85,7 +85,7 @@ class ValidationStep extends React.Component {
         return (
             <View style={[styles.flex1, styles.justifyContentBetween]}>
                 <HeaderWithCloseButton
-                    title="Validation Step"
+                    title={this.props.translate('validationStep.headerTitle')}
                     onCloseButtonPress={Navigation.dismissModal}
                 />
                 {state === BankAccount.STATE.PENDING && (
@@ -95,6 +95,12 @@ class ValidationStep extends React.Component {
                             we send three (3) transactions to your account. They have a merchant line like
                             &quot;Expensify, Inc. Validation&quot;.
                         </Text>
+                        <Text style={[styles.mh5, styles.mb5]}>
+                            Please enter each transaction amount in the fields below.
+                        </Text>
+                        <Text style={[styles.mh5, styles.mb5]}>
+                            Example: 1.51
+                        </Text>
                         <View style={[styles.m5, styles.flex1]}>
                             {errorMessage && (
                                 <Text style={[styles.mh5, styles.mb5]}>
@@ -102,19 +108,19 @@ class ValidationStep extends React.Component {
                                 </Text>
                             )}
                             <TextInputWithLabel
-                                placeholder="1.01"
+                                placeholder="1.52"
                                 keyboardType="number-pad"
                                 value={this.state.amount1}
                                 onChangeText={amount1 => this.setState({amount1})}
                             />
                             <TextInputWithLabel
-                                placeholder="1.01"
+                                placeholder="1.53"
                                 keyboardType="number-pad"
                                 value={this.state.amount2}
                                 onChangeText={amount2 => this.setState({amount2})}
                             />
                             <TextInputWithLabel
-                                placeholder="1.01"
+                                placeholder="1.54"
                                 keyboardType="number-pad"
                                 value={this.state.amount3}
                                 onChangeText={amount3 => this.setState({amount3})}
@@ -139,9 +145,6 @@ class ValidationStep extends React.Component {
                             ]}
                             url={`${CONST.CLOUDFRONT_URL}/images/icons/emptystates/emptystate_reviewing.gif`}
                         />
-                        <Text style={[styles.mh5, styles.mb5]}>
-                            One moment...
-                        </Text>
                         <Text style={[styles.mh5, styles.mb5]}>
                             We&apos;re taking a look at your information and will have you onto next steps in just a few seconds.
                         </Text>

From b1ff46b79264e542cfa4352be9b0f7ab23e2d990 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Fri, 18 Jun 2021 08:57:47 -0700
Subject: [PATCH 16/29] Fix error

---
 src/languages/en.js                              |  3 ++-
 src/libs/actions/BankAccounts.js                 | 16 +++++++++++++---
 .../ReimbursementAccountPage.js                  |  2 ++
 src/pages/ReimbursementAccount/ValidationStep.js | 11 +++++++++--
 4 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/languages/en.js b/src/languages/en.js
index d96fa1869e12..1b6944fe5341 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -365,7 +365,8 @@ export default {
     },
     validationStep: {
         headerTitle: 'Validate',
-        verifyingMessage: '',
+        buttonText: 'Finish Setup',
+        maxAttemptError: 'Validation for this bank account has been disabled due to too many incorrect attempts. Please contact us.',
     },
     session: {
         offlineMessage: 'Looks like you\'re not connected to internet. Can you check your connection and try again?',
diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js
index f627e6413b97..dbe2dcf8e103 100644
--- a/src/libs/actions/BankAccounts.js
+++ b/src/libs/actions/BankAccounts.js
@@ -349,7 +349,7 @@ function fetchFreePlanVerifiedBankAccount() {
                     bankAccountListResponse,
                 ]) => {
                     const failedValidationAttempts = lodashGet(failedValidationAttemptsResponse, [
-                        'value', 'nameValuePairs', failedValidationAttemptsResponse,
+                        'value', 'nameValuePairs', failedValidationAttemptsName,
                     ], 0);
                     const kycVerificationsMigration = lodashGet(kycVerificationsMigrationResponse, [
                         'value', 'nameValuePairs', 'expensify_migration_2020_04_28_RunKycVerifications',
@@ -431,7 +431,9 @@ function fetchFreePlanVerifiedBankAccount() {
                         currentStep = CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
                     }
 
-                    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {throttledDate, failedValidationAttempts});
+                    // Reset Error key
+                    const error = '';
+                    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {throttledDate, failedValidationAttempts, error});
                     goToWithdrawalAccountSetupStep(currentStep, achData);
                 })
                 .finally(() => {
@@ -502,7 +504,15 @@ function setFreePlanVerifiedBankAccountID(bankAccountID) {
  * @param {String} validateCode
  */
 function validateBankAccount(bankAccountID, validateCode) {
-    API.BankAccount_Validate({bankAccountID, validateCode});
+    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {loading: true});
+
+    API.BankAccount_Validate({bankAccountID, validateCode})
+        .then((response) => {
+            if (response.jsonCode !== 200) {
+                console.log(response.message);
+                Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {loading: false, error: response.message});
+            }
+        });
 }
 
 /**
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
index d18a22977655..33fad6d56874 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
@@ -135,6 +135,7 @@ class ReimbursementAccountPage extends React.Component {
             }
         }
 
+        const error = lodashGet(this.props, 'reimbursementAccount.error');
         const failedValidationAttempts = lodashGet(this.props, 'reimbursementAccount.failedValidationAttempts');
         const maxAttemptsReached = failedValidationAttempts > CONST.BANK_ACCOUNT.VERIFICATION_MAX_ATTEMPTS;
 
@@ -161,6 +162,7 @@ class ReimbursementAccountPage extends React.Component {
                         <ValidationStep
                             achData={this.props.reimbursementAccount.achData}
                             maxAttemptsReached={maxAttemptsReached}
+                            error={error}
                         />
                     )}
                 </KeyboardAvoidingView>
diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index 2204cdaaa3f1..10c18639715e 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -26,11 +26,14 @@ const propTypes = {
     }),
 
     maxAttemptsReached: PropTypes.bool,
+
+    error: PropTypes.string,
 };
 
 const defaultProps = {
     achData: {},
     maxAttemptsReached: false,
+    error: '',
 };
 
 class ValidationStep extends React.Component {
@@ -80,7 +83,11 @@ class ValidationStep extends React.Component {
     }
 
     render() {
-        const errorMessage = this.state.error;
+        let errorMessage = this.state.error ? this.state.error : this.props.error;
+        if (this.props.maxAttemptsReached) {
+            errorMessage = this.props.translate('validationStep.maxAttemptError');
+        }
+
         const state = this.props.achData.state;
         return (
             <View style={[styles.flex1, styles.justifyContentBetween]}>
@@ -128,7 +135,7 @@ class ValidationStep extends React.Component {
                         </View>
                         <Button
                             success
-                            text={this.props.translate('common.saveAndContinue')}
+                            text={this.props.translate('validationStep.buttonText')}
                             style={[styles.m5]}
                             onPress={this.submit}
                             isDisabled={this.props.maxAttemptsReached}

From 6b4a465b3ebf703fe7e8ee707c3d5e2fa1396ca6 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Fri, 18 Jun 2021 09:58:29 -0700
Subject: [PATCH 17/29] dismiss modal upon success

---
 src/libs/actions/BankAccounts.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js
index dbe2dcf8e103..3d9cd69a8bc7 100644
--- a/src/libs/actions/BankAccounts.js
+++ b/src/libs/actions/BankAccounts.js
@@ -9,6 +9,7 @@ import * as API from '../API';
 import BankAccount from '../models/BankAccount';
 import promiseAllSettled from '../promiseAllSettled';
 import Growl from '../Growl';
+import Navigation from '../../libs/Navigation/Navigation';
 
 /**
  * Gets the Plaid Link token used to initialize the Plaid SDK
@@ -508,8 +509,10 @@ function validateBankAccount(bankAccountID, validateCode) {
 
     API.BankAccount_Validate({bankAccountID, validateCode})
         .then((response) => {
-            if (response.jsonCode !== 200) {
-                console.log(response.message);
+            if (response.jsonCode === 200) {
+                Growl.show('Bank Account succesfully validated!', CONST.GROWL.SUCCESS, 3000);
+                Navigation.dismissModal();
+            } else {
                 Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {loading: false, error: response.message});
             }
         });

From ea1d45bbab8d8eee72c14e22ce5938d27787f43a Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Sat, 19 Jun 2021 15:51:50 -0700
Subject: [PATCH 18/29] Fix merge errors

---
 src/libs/actions/BankAccounts.js | 176 ++++++++++++++++---------------
 1 file changed, 89 insertions(+), 87 deletions(-)

diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js
index e44b4dc12a10..a06c91460048 100644
--- a/src/libs/actions/BankAccounts.js
+++ b/src/libs/actions/BankAccounts.js
@@ -344,100 +344,102 @@ function fetchFreePlanVerifiedBankAccount() {
                     name: CONST.NVP.ACH_DATA_THROTTLED,
                 }),
                 API.Get({returnValueList: 'bankAccountList'}),
-            ]);
-        })
-        .then(([
-            failedValidationAttemptsResponse,
-            kycVerificationsMigrationResponse,
-            achDataThrottledResponse,
-            bankAccountListResponse,
-        ]) => {
-            const failedValidationAttempts = lodashGet(failedValidationAttemptsResponse, [
-                'value', 'nameValuePairs', failedValidationAttemptsName,
-            ], 0);
-            const kycVerificationsMigration = lodashGet(kycVerificationsMigrationResponse, [
-                'value', 'nameValuePairs', 'expensify_migration_2020_04_28_RunKycVerifications',
-            ], '');
-            const throttledDate = lodashGet(achDataThrottledResponse, [
-                'value', 'nameValuePairs', CONST.NVP.ACH_DATA_THROTTLED,
-            ], '');
-            const bankAccountJSON = _.find(
-                lodashGet(bankAccountListResponse, ['value', 'bankAccountList'], []), account => (
-                    account.bankAccountID === bankAccountID
-                ),
-            );
-            const bankAccount = bankAccountJSON ? new BankAccount(bankAccountJSON) : null;
-
-            // Next we'll build the achData and save it to Onyx
-            // If the user is already setting up a bank account we will continue the flow for them
-            let currentStep = reimbursementAccountInSetup.currentStep;
-            const achData = bankAccount ? bankAccount.toACHData() : {};
-            achData.useOnfido = true;
-            achData.policyID = '';
-            achData.isInSetup = !bankAccount || bankAccount.isInSetup();
-            achData.bankAccountInReview = bankAccount && bankAccount.isVerifying();
-            achData.domainLimit = 0;
-
-            // If the bank account has already been created in the db and is not yet open let's show the manual form
-            // with the previously added values
-            achData.subStep = bankAccount && bankAccount.isInSetup() && CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL;
-
-            // If we're not in setup, it means we already have a withdrawal account and we're upgrading it to a business
-            // bank account. So let the user review all steps with all info prefilled and editable, unless a specific
-            // step was passed.
-            if (!achData.isInSetup) {
-                // @TODO Not sure if we need to do this since for NewDot none of the accounts are pre-existing ones
-                currentStep = '';
-            }
+            ])
+            .then(([
+                failedValidationAttemptsResponse,
+                kycVerificationsMigrationResponse,
+                achDataThrottledResponse,
+                bankAccountListResponse,
+            ]) => {
+                console.log(failedValidationAttemptsResponse);
+                console.log(bankAccountListResponse);
+                const failedValidationAttempts = lodashGet(failedValidationAttemptsResponse, [
+                    'value', 'nameValuePairs', failedValidationAttemptsName,
+                ], 0);
+                const kycVerificationsMigration = lodashGet(kycVerificationsMigrationResponse, [
+                    'value', 'nameValuePairs', 'expensify_migration_2020_04_28_RunKycVerifications',
+                ], '');
+                const throttledDate = lodashGet(achDataThrottledResponse, [
+                    'value', 'nameValuePairs', CONST.NVP.ACH_DATA_THROTTLED,
+                ], '');
+                const bankAccountJSON = _.find(
+                    lodashGet(bankAccountListResponse, ['value', 'bankAccountList'], []), account => (
+                        account.bankAccountID === bankAccountID
+                    ),
+                );
+                const bankAccount = bankAccountJSON ? new BankAccount(bankAccountJSON) : null;
+
+                // Next we'll build the achData and save it to Onyx
+                // If the user is already setting up a bank account we will continue the flow for them
+                let currentStep = reimbursementAccountInSetup.currentStep;
+                const achData = bankAccount ? bankAccount.toACHData() : {};
+                achData.useOnfido = true;
+                achData.policyID = '';
+                achData.isInSetup = !bankAccount || bankAccount.isInSetup();
+                achData.bankAccountInReview = bankAccount && bankAccount.isVerifying();
+                achData.domainLimit = 0;
+
+                // If the bank account has already been created in the db and is not yet open let's show the manual form
+                // with the previously added values
+                achData.subStep = bankAccount && bankAccount.isInSetup() && CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL;
+
+                // If we're not in setup, it means we already have a withdrawal account and we're upgrading it to a business
+                // bank account. So let the user review all steps with all info prefilled and editable, unless a specific
+                // step was passed.
+                if (!achData.isInSetup) {
+                    // @TODO Not sure if we need to do this since for NewDot none of the accounts are pre-existing ones
+                    currentStep = '';
+                }
 
-            // Temporary fix for Onfido flow. Can be removed by nkuoch after Sept 1 2020.
-            // @TODO not sure if we still need this or what this is about, but seems like maybe yes...
-            if (currentStep === CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT && achData.useOnfido) {
-                const onfidoResponse = lodashGet(achData, CONST.BANK_ACCOUNT.VERIFICATIONS.REQUESTOR_IDENTITY_ONFIDO);
-                const sdkToken = lodashGet(onfidoResponse, CONST.BANK_ACCOUNT.ONFIDO_RESPONSE.SDK_TOKEN);
-                if (sdkToken && !achData.isOnfidoSetupComplete
-                    && onfidoResponse.status !== CONST.BANK_ACCOUNT.ONFIDO_RESPONSE.PASS
-                ) {
-                    currentStep = CONST.BANK_ACCOUNT.STEP.REQUESTOR;
+                // Temporary fix for Onfido flow. Can be removed by nkuoch after Sept 1 2020.
+                // @TODO not sure if we still need this or what this is about, but seems like maybe yes...
+                if (currentStep === CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT && achData.useOnfido) {
+                    const onfidoResponse = lodashGet(achData, CONST.BANK_ACCOUNT.VERIFICATIONS.REQUESTOR_IDENTITY_ONFIDO);
+                    const sdkToken = lodashGet(onfidoResponse, CONST.BANK_ACCOUNT.ONFIDO_RESPONSE.SDK_TOKEN);
+                    if (sdkToken && !achData.isOnfidoSetupComplete
+                        && onfidoResponse.status !== CONST.BANK_ACCOUNT.ONFIDO_RESPONSE.PASS
+                    ) {
+                        currentStep = CONST.BANK_ACCOUNT.STEP.REQUESTOR;
+                    }
                 }
-            }
 
-            // Ensure we route the user to the correct step based on the status of their bank account
-            if (bankAccount && !currentStep) {
-                currentStep = bankAccount.isPending() || bankAccount.isVerifying()
-                    ? CONST.BANK_ACCOUNT.STEP.VALIDATION
-                    : CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
-
-                // @TODO Again, not sure how much of this logic is needed right now as we shouldn't be handling any
-                // open accounts in E.cash yet that need to pass any more checks or can be upgraded, but leaving in for
-                // possible future compatibility.
-                if (bankAccount.isOpen()) {
-                    if (bankAccount.needsToPassLatestChecks()) {
-                        const hasTriedToUpgrade = bankAccount.getDateSigned()
-                            > (kycVerificationsMigration || '2020-01-13');
-                        currentStep = hasTriedToUpgrade
-                            ? CONST.BANK_ACCOUNT.STEP.VALIDATION : CONST.BANK_ACCOUNT.STEP.COMPANY;
-                        achData.bankAccountInReview = hasTriedToUpgrade;
-                    } else {
-                        // In Expensify.cash we do not show a specific view for the EnableStep since we will enable the
-                        // Expensify card automatically. However, we will still handle that step and show the Validate
-                        // view.
-                        currentStep = CONST.BANK_ACCOUNT.STEP.ENABLE;
+                // Ensure we route the user to the correct step based on the status of their bank account
+                if (bankAccount && !currentStep) {
+                    currentStep = bankAccount.isPending() || bankAccount.isVerifying()
+                        ? CONST.BANK_ACCOUNT.STEP.VALIDATION
+                        : CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
+
+                    // @TODO Again, not sure how much of this logic is needed right now as we shouldn't be handling any
+                    // open accounts in E.cash yet that need to pass any more checks or can be upgraded, but leaving in for
+                    // possible future compatibility.
+                    if (bankAccount.isOpen()) {
+                        if (bankAccount.needsToPassLatestChecks()) {
+                            const hasTriedToUpgrade = bankAccount.getDateSigned()
+                                > (kycVerificationsMigration || '2020-01-13');
+                            currentStep = hasTriedToUpgrade
+                                ? CONST.BANK_ACCOUNT.STEP.VALIDATION : CONST.BANK_ACCOUNT.STEP.COMPANY;
+                            achData.bankAccountInReview = hasTriedToUpgrade;
+                        } else {
+                            // In Expensify.cash we do not show a specific view for the EnableStep since we will enable the
+                            // Expensify card automatically. However, we will still handle that step and show the Validate
+                            // view.
+                            currentStep = CONST.BANK_ACCOUNT.STEP.ENABLE;
+                        }
                     }
                 }
-            }
 
-            // If at this point we still don't have a current step, default to the BankAccountStep
-            if (!currentStep) {
-                currentStep = CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
-            }
+                // If at this point we still don't have a current step, default to the BankAccountStep
+                if (!currentStep) {
+                    currentStep = CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
+                }
 
-            Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {throttledDate, failedValidationAttempts, error: ''});
-            goToWithdrawalAccountSetupStep(currentStep, achData);
-        })
-        .finally(() => {
-            Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {loading: false});
-        });
+                Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {throttledDate, failedValidationAttempts, error: ''});
+                goToWithdrawalAccountSetupStep(currentStep, achData);
+            })
+            .finally(() => {
+                Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {loading: false});
+            });
+    });
 }
 
 const WITHDRAWAL_ACCOUNT_STEPS = [

From cebc4a337437fdab7f8585169b1766adb62be9e1 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Sat, 19 Jun 2021 15:52:21 -0700
Subject: [PATCH 19/29] remove debuggint logs

---
 src/libs/actions/BankAccounts.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js
index a06c91460048..84f985a3482b 100644
--- a/src/libs/actions/BankAccounts.js
+++ b/src/libs/actions/BankAccounts.js
@@ -351,8 +351,6 @@ function fetchFreePlanVerifiedBankAccount() {
                 achDataThrottledResponse,
                 bankAccountListResponse,
             ]) => {
-                console.log(failedValidationAttemptsResponse);
-                console.log(bankAccountListResponse);
                 const failedValidationAttempts = lodashGet(failedValidationAttemptsResponse, [
                     'value', 'nameValuePairs', failedValidationAttemptsName,
                 ], 0);

From 6054889137170c1b554860e0a727b3fe039b5fb4 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Sat, 19 Jun 2021 16:05:32 -0700
Subject: [PATCH 20/29] Pass maxAttemptsReached

---
 src/libs/actions/BankAccounts.js              | 184 +++++++++---------
 .../ReimbursementAccountPage.js               |   3 +-
 2 files changed, 93 insertions(+), 94 deletions(-)

diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js
index a06c91460048..83b1fea948ba 100644
--- a/src/libs/actions/BankAccounts.js
+++ b/src/libs/actions/BankAccounts.js
@@ -318,7 +318,6 @@ function fetchFreePlanVerifiedBankAccount() {
     // and determine which step to navigate to.
     Onyx.set(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {loading: true});
     let bankAccountID;
-    let failedValidationAttemptsName;
 
     API.Get({
         returnValueList: 'nameValuePairs',
@@ -327,7 +326,7 @@ function fetchFreePlanVerifiedBankAccount() {
         .then((response) => {
             bankAccountID = lodashGet(response, ['nameValuePairs', CONST.NVP.FREE_PLAN_BANK_ACCOUNT_ID,
             ], '');
-            failedValidationAttemptsName = CONST.NVP.FAILED_BANK_ACCOUNT_VALIDATIONS_PREFACE + bankAccountID;
+            const failedValidationAttemptsName = CONST.NVP.FAILED_BANK_ACCOUNT_VALIDATIONS_PREFACE + bankAccountID;
 
             // Now that we have the bank account. Lets grab the rest of the bank info we need
             promiseAllSettled([
@@ -345,100 +344,100 @@ function fetchFreePlanVerifiedBankAccount() {
                 }),
                 API.Get({returnValueList: 'bankAccountList'}),
             ])
-            .then(([
-                failedValidationAttemptsResponse,
-                kycVerificationsMigrationResponse,
-                achDataThrottledResponse,
-                bankAccountListResponse,
-            ]) => {
-                console.log(failedValidationAttemptsResponse);
-                console.log(bankAccountListResponse);
-                const failedValidationAttempts = lodashGet(failedValidationAttemptsResponse, [
-                    'value', 'nameValuePairs', failedValidationAttemptsName,
-                ], 0);
-                const kycVerificationsMigration = lodashGet(kycVerificationsMigrationResponse, [
-                    'value', 'nameValuePairs', 'expensify_migration_2020_04_28_RunKycVerifications',
-                ], '');
-                const throttledDate = lodashGet(achDataThrottledResponse, [
-                    'value', 'nameValuePairs', CONST.NVP.ACH_DATA_THROTTLED,
-                ], '');
-                const bankAccountJSON = _.find(
-                    lodashGet(bankAccountListResponse, ['value', 'bankAccountList'], []), account => (
-                        account.bankAccountID === bankAccountID
-                    ),
-                );
-                const bankAccount = bankAccountJSON ? new BankAccount(bankAccountJSON) : null;
-
-                // Next we'll build the achData and save it to Onyx
-                // If the user is already setting up a bank account we will continue the flow for them
-                let currentStep = reimbursementAccountInSetup.currentStep;
-                const achData = bankAccount ? bankAccount.toACHData() : {};
-                achData.useOnfido = true;
-                achData.policyID = '';
-                achData.isInSetup = !bankAccount || bankAccount.isInSetup();
-                achData.bankAccountInReview = bankAccount && bankAccount.isVerifying();
-                achData.domainLimit = 0;
-
-                // If the bank account has already been created in the db and is not yet open let's show the manual form
-                // with the previously added values
-                achData.subStep = bankAccount && bankAccount.isInSetup() && CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL;
-
-                // If we're not in setup, it means we already have a withdrawal account and we're upgrading it to a business
-                // bank account. So let the user review all steps with all info prefilled and editable, unless a specific
-                // step was passed.
-                if (!achData.isInSetup) {
-                    // @TODO Not sure if we need to do this since for NewDot none of the accounts are pre-existing ones
-                    currentStep = '';
-                }
+                .then(([
+                    failedValidationAttemptsResponse,
+                    kycVerificationsMigrationResponse,
+                    achDataThrottledResponse,
+                    bankAccountListResponse,
+                ]) => {
+                    const failedValidationAttempts = lodashGet(failedValidationAttemptsResponse, [
+                        'value', 'nameValuePairs', failedValidationAttemptsName,
+                    ], 0);
+                    const maxAttemptsReached = failedValidationAttempts > CONST.BANK_ACCOUNT.VERIFICATION_MAX_ATTEMPTS;
+
+                    const kycVerificationsMigration = lodashGet(kycVerificationsMigrationResponse, [
+                        'value', 'nameValuePairs', 'expensify_migration_2020_04_28_RunKycVerifications',
+                    ], '');
+                    const throttledDate = lodashGet(achDataThrottledResponse, [
+                        'value', 'nameValuePairs', CONST.NVP.ACH_DATA_THROTTLED,
+                    ], '');
+                    const bankAccountJSON = _.find(
+                        lodashGet(bankAccountListResponse, ['value', 'bankAccountList'], []), account => (
+                            account.bankAccountID === bankAccountID
+                        ),
+                    );
+                    const bankAccount = bankAccountJSON ? new BankAccount(bankAccountJSON) : null;
+
+                    // Next we'll build the achData and save it to Onyx
+                    // If the user is already setting up a bank account we will continue the flow for them
+                    let currentStep = reimbursementAccountInSetup.currentStep;
+                    const achData = bankAccount ? bankAccount.toACHData() : {};
+                    achData.useOnfido = true;
+                    achData.policyID = '';
+                    achData.isInSetup = !bankAccount || bankAccount.isInSetup();
+                    achData.bankAccountInReview = bankAccount && bankAccount.isVerifying();
+                    achData.domainLimit = 0;
+
+                    // If the bank account has already been created in the db and is not yet open let's show the manual form
+                    // with the previously added values
+                    achData.subStep = bankAccount && bankAccount.isInSetup() && CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL;
+
+                    // If we're not in setup, it means we already have a withdrawal account and we're upgrading it to a business
+                    // bank account. So let the user review all steps with all info prefilled and editable, unless a specific
+                    // step was passed.
+                    if (!achData.isInSetup) {
+                        // @TODO Not sure if we need to do this since for NewDot none of the accounts are pre-existing ones
+                        currentStep = '';
+                    }
 
-                // Temporary fix for Onfido flow. Can be removed by nkuoch after Sept 1 2020.
-                // @TODO not sure if we still need this or what this is about, but seems like maybe yes...
-                if (currentStep === CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT && achData.useOnfido) {
-                    const onfidoResponse = lodashGet(achData, CONST.BANK_ACCOUNT.VERIFICATIONS.REQUESTOR_IDENTITY_ONFIDO);
-                    const sdkToken = lodashGet(onfidoResponse, CONST.BANK_ACCOUNT.ONFIDO_RESPONSE.SDK_TOKEN);
-                    if (sdkToken && !achData.isOnfidoSetupComplete
-                        && onfidoResponse.status !== CONST.BANK_ACCOUNT.ONFIDO_RESPONSE.PASS
-                    ) {
-                        currentStep = CONST.BANK_ACCOUNT.STEP.REQUESTOR;
+                    // Temporary fix for Onfido flow. Can be removed by nkuoch after Sept 1 2020.
+                    // @TODO not sure if we still need this or what this is about, but seems like maybe yes...
+                    if (currentStep === CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT && achData.useOnfido) {
+                        const onfidoResponse = lodashGet(achData, CONST.BANK_ACCOUNT.VERIFICATIONS.REQUESTOR_IDENTITY_ONFIDO);
+                        const sdkToken = lodashGet(onfidoResponse, CONST.BANK_ACCOUNT.ONFIDO_RESPONSE.SDK_TOKEN);
+                        if (sdkToken && !achData.isOnfidoSetupComplete
+                            && onfidoResponse.status !== CONST.BANK_ACCOUNT.ONFIDO_RESPONSE.PASS
+                        ) {
+                            currentStep = CONST.BANK_ACCOUNT.STEP.REQUESTOR;
+                        }
                     }
-                }
 
-                // Ensure we route the user to the correct step based on the status of their bank account
-                if (bankAccount && !currentStep) {
-                    currentStep = bankAccount.isPending() || bankAccount.isVerifying()
-                        ? CONST.BANK_ACCOUNT.STEP.VALIDATION
-                        : CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
-
-                    // @TODO Again, not sure how much of this logic is needed right now as we shouldn't be handling any
-                    // open accounts in E.cash yet that need to pass any more checks or can be upgraded, but leaving in for
-                    // possible future compatibility.
-                    if (bankAccount.isOpen()) {
-                        if (bankAccount.needsToPassLatestChecks()) {
-                            const hasTriedToUpgrade = bankAccount.getDateSigned()
-                                > (kycVerificationsMigration || '2020-01-13');
-                            currentStep = hasTriedToUpgrade
-                                ? CONST.BANK_ACCOUNT.STEP.VALIDATION : CONST.BANK_ACCOUNT.STEP.COMPANY;
-                            achData.bankAccountInReview = hasTriedToUpgrade;
-                        } else {
-                            // In Expensify.cash we do not show a specific view for the EnableStep since we will enable the
-                            // Expensify card automatically. However, we will still handle that step and show the Validate
-                            // view.
-                            currentStep = CONST.BANK_ACCOUNT.STEP.ENABLE;
+                    // Ensure we route the user to the correct step based on the status of their bank account
+                    if (bankAccount && !currentStep) {
+                        currentStep = bankAccount.isPending() || bankAccount.isVerifying()
+                            ? CONST.BANK_ACCOUNT.STEP.VALIDATION
+                            : CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
+
+                        // @TODO Again, not sure how much of this logic is needed right now as we shouldn't be handling any
+                        // open accounts in E.cash yet that need to pass any more checks or can be upgraded, but leaving in for
+                        // possible future compatibility.
+                        if (bankAccount.isOpen()) {
+                            if (bankAccount.needsToPassLatestChecks()) {
+                                const hasTriedToUpgrade = bankAccount.getDateSigned()
+                                    > (kycVerificationsMigration || '2020-01-13');
+                                currentStep = hasTriedToUpgrade
+                                    ? CONST.BANK_ACCOUNT.STEP.VALIDATION : CONST.BANK_ACCOUNT.STEP.COMPANY;
+                                achData.bankAccountInReview = hasTriedToUpgrade;
+                            } else {
+                                // In Expensify.cash we do not show a specific view for the EnableStep since we will enable the
+                                // Expensify card automatically. However, we will still handle that step and show the Validate
+                                // view.
+                                currentStep = CONST.BANK_ACCOUNT.STEP.ENABLE;
+                            }
                         }
                     }
-                }
 
-                // If at this point we still don't have a current step, default to the BankAccountStep
-                if (!currentStep) {
-                    currentStep = CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
-                }
+                    // If at this point we still don't have a current step, default to the BankAccountStep
+                    if (!currentStep) {
+                        currentStep = CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
+                    }
 
-                Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {throttledDate, failedValidationAttempts, error: ''});
-                goToWithdrawalAccountSetupStep(currentStep, achData);
-            })
-            .finally(() => {
-                Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {loading: false});
-            });
+                    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {throttledDate, maxAttemptsReached, error: ''});
+                    goToWithdrawalAccountSetupStep(currentStep, achData);
+                })
+                .finally(() => {
+                    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {loading: false});
+                });
     });
 }
 
@@ -509,11 +508,12 @@ function validateBankAccount(bankAccountID, validateCode) {
     API.BankAccount_Validate({bankAccountID, validateCode})
         .then((response) => {
             if (response.jsonCode === 200) {
-                Growl.show('Bank Account succesfully validated!', CONST.GROWL.SUCCESS, 3000);
+                Growl.show('Bank Account successfully validated!', CONST.GROWL.SUCCESS, 3000);
                 Navigation.dismissModal();
-            } else {
-                Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {loading: false, error: response.message});
+                return;
             }
+
+            Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {loading: false, error: response.message});
         });
 }
 
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
index 4b251baf178f..2e6af4f9c7ff 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
@@ -136,8 +136,7 @@ class ReimbursementAccountPage extends React.Component {
         }
 
         const error = lodashGet(this.props, 'reimbursementAccount.error');
-        const failedValidationAttempts = lodashGet(this.props, 'reimbursementAccount.failedValidationAttempts');
-        const maxAttemptsReached = failedValidationAttempts > CONST.BANK_ACCOUNT.VERIFICATION_MAX_ATTEMPTS;
+        const maxAttemptsReached = lodashGet(this.props, 'reimbursementAccount.maxAttemptsReached');
 
         // We grab the currentStep from the achData to determine which view to display. The SetupWithdrawalAccount flow
         // allows us to continue the flow from various points depending on where the user left off. We can also

From ef83c5d97fca0f93ff212789b832136c931d9501 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Mon, 21 Jun 2021 08:54:26 -1000
Subject: [PATCH 21/29] Fix more feedback and style

---
 src/languages/en.js                           |  2 +
 src/libs/actions/BankAccounts.js              |  4 ++
 .../ReimbursementAccountPage.js               |  3 +
 .../ReimbursementAccount/ValidationStep.js    | 64 +++++++++++++------
 4 files changed, 52 insertions(+), 21 deletions(-)

diff --git a/src/languages/en.js b/src/languages/en.js
index f2412eed68c6..1d23e6609a50 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -367,6 +367,8 @@ export default {
         headerTitle: 'Validate',
         buttonText: 'Finish Setup',
         maxAttemptError: 'Validation for this bank account has been disabled due to too many incorrect attempts. Please contact us.',
+        description: 'A day or two after you add your account to Expensify we send three (3) transactions to your account. They have a merchant line like ',
+        expensifyMerchantName: '"Expensify, Inc. Validation"',
     },
     beneficialOwnersStep: {
         beneficialOwners: 'Beneficial Owners',
diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js
index 83b1fea948ba..54d336813879 100644
--- a/src/libs/actions/BankAccounts.js
+++ b/src/libs/actions/BankAccounts.js
@@ -350,6 +350,8 @@ function fetchFreePlanVerifiedBankAccount() {
                     achDataThrottledResponse,
                     bankAccountListResponse,
                 ]) => {
+                    // Users have a limited amount of attempts to get the validations amounts correct.
+                    // Once exceeded, we need to block them from attempting to validate.
                     const failedValidationAttempts = lodashGet(failedValidationAttemptsResponse, [
                         'value', 'nameValuePairs', failedValidationAttemptsName,
                     ], 0);
@@ -432,6 +434,8 @@ function fetchFreePlanVerifiedBankAccount() {
                         currentStep = CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
                     }
 
+                    // 'error' displays any string set as an error encountered during the add Verified BBA flow.
+                    // If we are fetching a bank account, clear the error to reset.
                     Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {throttledDate, maxAttemptsReached, error: ''});
                     goToWithdrawalAccountSetupStep(currentStep, achData);
                 })
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
index 2e6af4f9c7ff..ae106e7ee78e 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
@@ -42,6 +42,9 @@ const propTypes = {
             /** Step of the setup flow that we are on. Determines which view is presented. */
             currentStep: PropTypes.string,
         }),
+
+        /** Disable validation button if max attempts exceeded */
+        maxAttemptsReached: PropTypes.bool,
     }),
 
     /** Current session for the user */
diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index 10c18639715e..32bfb63bd721 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -20,20 +20,26 @@ import ImageView from '../../components/ImageView';
 const propTypes = {
     ...withLocalizePropTypes,
 
+    /** Additional data for the account in setup */
     achData: PropTypes.shape({
+
+        /** Bank account ID of the VBA that we are validating is required */
         bankAccountID: PropTypes.number.isRequired,
-        state: PropTypes.string,
-    }),
 
-    maxAttemptsReached: PropTypes.bool,
+        /** State of bank account */
+        state: PropTypes.string,
+    }).isRequired,
 
+    /** Error message to display to user */
     error: PropTypes.string,
+
+    /** Disable validation button if max attempts exceeded */
+    maxAttemptsReached: PropTypes.bool,
 };
 
 const defaultProps = {
-    achData: {},
-    maxAttemptsReached: false,
     error: '',
+    maxAttemptsReached: false,
 };
 
 class ValidationStep extends React.Component {
@@ -61,17 +67,27 @@ class ValidationStep extends React.Component {
 
             // Make a call to bankAccounts
             validateBankAccount(this.props.achData.bankAccountID, validateCode);
-        } else {
-            // If any values are falsey, indicate to user that inputs are invalid
-            this.setState({error: 'Invalid amounts'});
+            return;
         }
+
+        // If any values are falsey, indicate to user that inputs are invalid
+        this.setState({error: 'Invalid amounts'});
     }
 
-    // Anything that isn't a number is returned as 0. Any dollar amount (e.g. 1.01 will be turned into 101)
+    /**
+     *
+     * Filter input for validation amount
+     * Anything that isn't a number is returned as an empty string
+     * Any dollar amount (e.g. 1.12) will be returned as 112
+     *
+     * @param {String} amount field input
+     *
+     * @returns {String}
+     */
     filterInput(amount) {
         let value = amount.trim();
         if (value === '' || !Math.abs(Str.fromUSDToNumber(value)) || _.isNaN(Number(value))) {
-            return 0;
+            return '';
         }
 
         // If the user enters the values in dollars, convert it to the respective cents amount
@@ -97,17 +113,23 @@ class ValidationStep extends React.Component {
                 />
                 {state === BankAccount.STATE.PENDING && (
                     <View style={[styles.m5, styles.flex1]}>
-                        <Text style={[styles.mh5, styles.mb5]}>
-                            A day or two after you add your account to Expensify
-                            we send three (3) transactions to your account. They have a merchant line like
-                            &quot;Expensify, Inc. Validation&quot;.
-                        </Text>
-                        <Text style={[styles.mh5, styles.mb5]}>
-                            Please enter each transaction amount in the fields below.
-                        </Text>
-                        <Text style={[styles.mh5, styles.mb5]}>
-                            Example: 1.51
-                        </Text>
+                        <View style={[styles.mb2]}>
+                            <Text style={[styles.mh5, styles.mb1]}>
+                                {this.props.translate('validationStep.description')}
+                            </Text>
+                            <Text style={[styles.mh5, styles.mb5, styles.textStrong]}>
+                                {this.props.translate('validationStep.expensifyMerchantName')}
+                            </Text>
+
+                            <Text style={[styles.mh5, styles.mb5, styles.textStrong]}>
+                                Please enter each transaction amount in the fields below.
+                            </Text>
+                        </View>
+                        <View style={[styles.alignSelfCenter]}>
+                            <Text style={[styles.mh5, styles.mb5, styles.textStrong, styles.badge]}>
+                                Example: 1.51
+                            </Text>
+                        </View>
                         <View style={[styles.m5, styles.flex1]}>
                             {errorMessage && (
                                 <Text style={[styles.mh5, styles.mb5]}>

From 723f02cdba6b1dc0dc05bf27d20eca460fd11895 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Mon, 21 Jun 2021 10:52:01 -1000
Subject: [PATCH 22/29] adjust spacing and add copy to constant

---
 src/languages/en.js                              |  3 +++
 src/pages/ReimbursementAccount/ValidationStep.js | 15 +++++++++------
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/languages/en.js b/src/languages/en.js
index 1d23e6609a50..acae1729832c 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -369,6 +369,9 @@ export default {
         maxAttemptError: 'Validation for this bank account has been disabled due to too many incorrect attempts. Please contact us.',
         description: 'A day or two after you add your account to Expensify we send three (3) transactions to your account. They have a merchant line like ',
         expensifyMerchantName: '"Expensify, Inc. Validation"',
+        desriptionCTA: 'Please enter each transaction amount in the fields below.',
+        example: 'Example: 1.51',
+        verifyingDescription: 'We\'re taking a look at your information and will have you onto next steps in just a few seconds.'
     },
     beneficialOwnersStep: {
         beneficialOwners: 'Beneficial Owners',
diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index 32bfb63bd721..fcb89ddafe67 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -117,17 +117,17 @@ class ValidationStep extends React.Component {
                             <Text style={[styles.mh5, styles.mb1]}>
                                 {this.props.translate('validationStep.description')}
                             </Text>
-                            <Text style={[styles.mh5, styles.mb5, styles.textStrong]}>
+                            <Text style={[styles.mh5, styles.mb6, styles.textStrong, styles.alignSelfCenter]}>
                                 {this.props.translate('validationStep.expensifyMerchantName')}
                             </Text>
 
-                            <Text style={[styles.mh5, styles.mb5, styles.textStrong]}>
-                                Please enter each transaction amount in the fields below.
+                            <Text style={[styles.mh5, styles.mb2]}>
+                                {this.props.translate('validationStep.desriptionCTA')}
                             </Text>
                         </View>
                         <View style={[styles.alignSelfCenter]}>
-                            <Text style={[styles.mh5, styles.mb5, styles.textStrong, styles.badge]}>
-                                Example: 1.51
+                            <Text style={[styles.mh5, styles.mb2, styles.textStrong, styles.badge]}>
+                                {this.props.translate('validationStep.example')}
                             </Text>
                         </View>
                         <View style={[styles.m5, styles.flex1]}>
@@ -137,18 +137,21 @@ class ValidationStep extends React.Component {
                                 </Text>
                             )}
                             <TextInputWithLabel
+                                containerStyles={[styles.mb1]}
                                 placeholder="1.52"
                                 keyboardType="number-pad"
                                 value={this.state.amount1}
                                 onChangeText={amount1 => this.setState({amount1})}
                             />
                             <TextInputWithLabel
+                                containerStyles={[styles.mb1]}
                                 placeholder="1.53"
                                 keyboardType="number-pad"
                                 value={this.state.amount2}
                                 onChangeText={amount2 => this.setState({amount2})}
                             />
                             <TextInputWithLabel
+                                containerStyles={[styles.mb1]}
                                 placeholder="1.54"
                                 keyboardType="number-pad"
                                 value={this.state.amount3}
@@ -175,7 +178,7 @@ class ValidationStep extends React.Component {
                             url={`${CONST.CLOUDFRONT_URL}/images/icons/emptystates/emptystate_reviewing.gif`}
                         />
                         <Text style={[styles.mh5, styles.mb5]}>
-                            We&apos;re taking a look at your information and will have you onto next steps in just a few seconds.
+                            {this.props.translate('validationStep.verifyingDescription')}
                         </Text>
                     </View>
                 )}

From 7335f35b4e980ffc2a076d9fd48a8a0eb6231086 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Mon, 21 Jun 2021 13:06:21 -1000
Subject: [PATCH 23/29] Add spanish

---
 src/languages/es.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/languages/es.js b/src/languages/es.js
index 8a0fd6565c1e..1e4e935ed7fe 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -352,4 +352,14 @@ export default {
         confirmCompanyIsNot: 'Confirmo que esta empresa no está en el',
         listOfRestrictedBusinesses: 'lista de negocios restringidos',
     },
+    validationStep: {
+        headerTitle: 'Validar',
+        buttonText: 'Finalizar Configuración',
+        maxAttemptError: 'Se ha inhabilitado la validación de esta cuenta bancaria, debido a demasiados intentos incorrectos. Por favor contáctenos.',
+        description: 'Uno o dos días después de agregar su cuenta a Expensify, enviamos tres (3) transacciones a su cuenta. Tienen una línea comercial como ',
+        expensifyMerchantName: '"Expensify, Inc. Validation"',
+        desriptionCTA: 'Ingrese el monto de cada transacción en los campos a continuación.',
+        example: 'Ejemplo: 1.51',
+        verifyingDescription: 'Estamos revisando su información y lo llevaremos a los siguientes pasos en solo unos segundos.'
+    },
 };

From 7cd648984837c9ada4231a8f944a6b72adfbd0f9 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Mon, 21 Jun 2021 13:15:34 -1000
Subject: [PATCH 24/29] Fix extra padding

---
 src/pages/ReimbursementAccount/ValidationStep.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index fcb89ddafe67..fd1a59bdb60b 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -112,7 +112,7 @@ class ValidationStep extends React.Component {
                     onCloseButtonPress={Navigation.dismissModal}
                 />
                 {state === BankAccount.STATE.PENDING && (
-                    <View style={[styles.m5, styles.flex1]}>
+                    <View style={[styles.flex1, styles.mt2]}>
                         <View style={[styles.mb2]}>
                             <Text style={[styles.mh5, styles.mb1]}>
                                 {this.props.translate('validationStep.description')}

From 43cd57183b9dc6023e0b6870c5ea753c9f0695b0 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Mon, 21 Jun 2021 13:44:33 -1000
Subject: [PATCH 25/29] Adjust sizing of verifying gif

---
 src/libs/actions/BankAccounts.js                |  2 +-
 .../ReimbursementAccount/ValidationStep.js      | 17 +++++++----------
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js
index 54d336813879..f231c8be6dae 100644
--- a/src/libs/actions/BankAccounts.js
+++ b/src/libs/actions/BankAccounts.js
@@ -442,7 +442,7 @@ function fetchFreePlanVerifiedBankAccount() {
                 .finally(() => {
                     Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {loading: false});
                 });
-    });
+        });
 }
 
 const WITHDRAWAL_ACCOUNT_STEPS = [
diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index fd1a59bdb60b..0605a6c23008 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {View} from 'react-native';
+import {Image, View} from 'react-native';
 import PropTypes from 'prop-types';
 import Str from 'expensify-common/lib/str';
 import _ from 'underscore';
@@ -15,7 +15,6 @@ import TextInputWithLabel from '../../components/TextInputWithLabel';
 import Text from '../../components/Text';
 import BankAccount from '../../libs/models/BankAccount';
 import CONST from '../../CONST';
-import ImageView from '../../components/ImageView';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -105,6 +104,7 @@ class ValidationStep extends React.Component {
         }
 
         const state = this.props.achData.state;
+        const verifyingUrl = `${CONST.CLOUDFRONT_URL}/images/icons/emptystates/emptystate_reviewing.gif`;
         return (
             <View style={[styles.flex1, styles.justifyContentBetween]}>
                 <HeaderWithCloseButton
@@ -168,14 +168,11 @@ class ValidationStep extends React.Component {
                     </View>
                 )}
                 {state === BankAccount.STATE.VERIFYING && (
-                    <View style={[styles.m5, styles.flex1]}>
-                        <ImageView
-                            resizeMode="contain"
-                            style={[
-                                styles.mh5,
-                                styles.mb5,
-                            ]}
-                            url={`${CONST.CLOUDFRONT_URL}/images/icons/emptystates/emptystate_reviewing.gif`}
+                    <View style={[styles.flex1]}>
+                        <Image
+                            source={{uri: verifyingUrl}}
+                            style={[styles.workspaceInviteWelcome]}
+                            resizeMode="center"
                         />
                         <Text style={[styles.mh5, styles.mb5]}>
                             {this.props.translate('validationStep.verifyingDescription')}

From 8c2cfb435417fb1502dccc4bfa0d064b2ee49f7d Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Mon, 21 Jun 2021 13:49:37 -1000
Subject: [PATCH 26/29] fix lint and alphabetize export

---
 src/languages/en.js              |  2 +-
 src/languages/es.js              |  2 +-
 src/libs/actions/BankAccounts.js | 10 +++++-----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/languages/en.js b/src/languages/en.js
index acae1729832c..ad1a58166790 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -371,7 +371,7 @@ export default {
         expensifyMerchantName: '"Expensify, Inc. Validation"',
         desriptionCTA: 'Please enter each transaction amount in the fields below.',
         example: 'Example: 1.51',
-        verifyingDescription: 'We\'re taking a look at your information and will have you onto next steps in just a few seconds.'
+        verifyingDescription: 'We\'re taking a look at your information and will have you onto next steps in just a few seconds.',
     },
     beneficialOwnersStep: {
         beneficialOwners: 'Beneficial Owners',
diff --git a/src/languages/es.js b/src/languages/es.js
index 1e4e935ed7fe..bdf7c096e06d 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -360,6 +360,6 @@ export default {
         expensifyMerchantName: '"Expensify, Inc. Validation"',
         desriptionCTA: 'Ingrese el monto de cada transacción en los campos a continuación.',
         example: 'Ejemplo: 1.51',
-        verifyingDescription: 'Estamos revisando su información y lo llevaremos a los siguientes pasos en solo unos segundos.'
+        verifyingDescription: 'Estamos revisando su información y lo llevaremos a los siguientes pasos en solo unos segundos.',
     },
 };
diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js
index f231c8be6dae..f4ac166e2d6e 100644
--- a/src/libs/actions/BankAccounts.js
+++ b/src/libs/actions/BankAccounts.js
@@ -658,15 +658,15 @@ function setupWithdrawalAccount(data) {
 }
 
 export {
-    fetchPlaidLinkToken,
+    activateWallet,
     addPersonalBankAccount,
-    getPlaidBankAccounts,
     clearPlaidBankAccountsAndToken,
+    fetchFreePlanVerifiedBankAccount,
     fetchOnfidoToken,
-    activateWallet,
+    fetchPlaidLinkToken,
     fetchUserWallet,
-    fetchFreePlanVerifiedBankAccount,
-    setupWithdrawalAccount,
+    getPlaidBankAccounts,
     goToWithdrawalAccountSetupStep,
+    setupWithdrawalAccount,
     validateBankAccount,
 };

From 4bf2b8146b53c6326e1a965663af34009967a9b8 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Mon, 21 Jun 2021 15:26:51 -1000
Subject: [PATCH 27/29] Update copy and add red text

---
 src/languages/en.js                              |  6 ++----
 src/languages/es.js                              |  2 --
 src/pages/ReimbursementAccount/ValidationStep.js | 13 ++-----------
 src/styles/styles.js                             |  4 ++++
 4 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/src/languages/en.js b/src/languages/en.js
index ad1a58166790..b1b905b38073 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -367,10 +367,8 @@ export default {
         headerTitle: 'Validate',
         buttonText: 'Finish Setup',
         maxAttemptError: 'Validation for this bank account has been disabled due to too many incorrect attempts. Please contact us.',
-        description: 'A day or two after you add your account to Expensify we send three (3) transactions to your account. They have a merchant line like ',
-        expensifyMerchantName: '"Expensify, Inc. Validation"',
-        desriptionCTA: 'Please enter each transaction amount in the fields below.',
-        example: 'Example: 1.51',
+        description: 'A day or two after you add your account to Expensify we send three (3) transactions to your account. They have a merchant line like "Expensify, Inc. Validation"',
+        desriptionCTA: 'Please enter each transaction amount in the fields below. Example: 1.51',
         verifyingDescription: 'We\'re taking a look at your information and will have you onto next steps in just a few seconds.',
     },
     beneficialOwnersStep: {
diff --git a/src/languages/es.js b/src/languages/es.js
index bdf7c096e06d..4ecb8df593f9 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -357,9 +357,7 @@ export default {
         buttonText: 'Finalizar Configuración',
         maxAttemptError: 'Se ha inhabilitado la validación de esta cuenta bancaria, debido a demasiados intentos incorrectos. Por favor contáctenos.',
         description: 'Uno o dos días después de agregar su cuenta a Expensify, enviamos tres (3) transacciones a su cuenta. Tienen una línea comercial como ',
-        expensifyMerchantName: '"Expensify, Inc. Validation"',
         desriptionCTA: 'Ingrese el monto de cada transacción en los campos a continuación.',
-        example: 'Ejemplo: 1.51',
         verifyingDescription: 'Estamos revisando su información y lo llevaremos a los siguientes pasos en solo unos segundos.',
     },
 };
diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index 0605a6c23008..1155504d0631 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -114,25 +114,16 @@ class ValidationStep extends React.Component {
                 {state === BankAccount.STATE.PENDING && (
                     <View style={[styles.flex1, styles.mt2]}>
                         <View style={[styles.mb2]}>
-                            <Text style={[styles.mh5, styles.mb1]}>
+                            <Text style={[styles.mh5, styles.mb5]}>
                                 {this.props.translate('validationStep.description')}
                             </Text>
-                            <Text style={[styles.mh5, styles.mb6, styles.textStrong, styles.alignSelfCenter]}>
-                                {this.props.translate('validationStep.expensifyMerchantName')}
-                            </Text>
-
                             <Text style={[styles.mh5, styles.mb2]}>
                                 {this.props.translate('validationStep.desriptionCTA')}
                             </Text>
                         </View>
-                        <View style={[styles.alignSelfCenter]}>
-                            <Text style={[styles.mh5, styles.mb2, styles.textStrong, styles.badge]}>
-                                {this.props.translate('validationStep.example')}
-                            </Text>
-                        </View>
                         <View style={[styles.m5, styles.flex1]}>
                             {errorMessage && (
-                                <Text style={[styles.mh5, styles.mb5]}>
+                                <Text style={[styles.mh5, styles.mb5, styles.textDanger]}>
                                     {errorMessage}
                                 </Text>
                             )}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 27ab26585723..87c3230fd48c 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -122,6 +122,10 @@ const styles = {
         color: themeColors.heading,
     },
 
+    textDanger: {
+        color: colors.red,
+    },
+
     button: {
         backgroundColor: themeColors.buttonDefaultBG,
         borderRadius: variables.componentBorderRadiusNormal,

From da55c9b649e6d7f2125dc165447d0448692d7965 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Mon, 21 Jun 2021 15:37:02 -1000
Subject: [PATCH 28/29] travis style

---
 src/languages/es.js              |  4 ++--
 src/libs/actions/BankAccounts.js | 35 ++++++++++++++++++--------------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/languages/es.js b/src/languages/es.js
index 4ecb8df593f9..3f87c2b95c4b 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -356,8 +356,8 @@ export default {
         headerTitle: 'Validar',
         buttonText: 'Finalizar Configuración',
         maxAttemptError: 'Se ha inhabilitado la validación de esta cuenta bancaria, debido a demasiados intentos incorrectos. Por favor contáctenos.',
-        description: 'Uno o dos días después de agregar su cuenta a Expensify, enviamos tres (3) transacciones a su cuenta. Tienen una línea comercial como ',
-        desriptionCTA: 'Ingrese el monto de cada transacción en los campos a continuación.',
+        description: 'Uno o dos días después de agregar su cuenta a Expensify, enviamos tres (3) transacciones a su cuenta. Tienen una línea comercial como "Expensify, Inc. Validation"',
+        desriptionCTA: 'Ingrese el monto de cada transacción en los campos a continuación. Ejemplo: 1.51',
         verifyingDescription: 'Estamos revisando su información y lo llevaremos a los siguientes pasos en solo unos segundos.',
     },
 };
diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js
index f4ac166e2d6e..b7fe54a83ae1 100644
--- a/src/libs/actions/BankAccounts.js
+++ b/src/libs/actions/BankAccounts.js
@@ -380,22 +380,27 @@ function fetchFreePlanVerifiedBankAccount() {
                     achData.bankAccountInReview = bankAccount && bankAccount.isVerifying();
                     achData.domainLimit = 0;
 
-                    // If the bank account has already been created in the db and is not yet open let's show the manual form
-                    // with the previously added values
-                    achData.subStep = bankAccount && bankAccount.isInSetup() && CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL;
-
-                    // If we're not in setup, it means we already have a withdrawal account and we're upgrading it to a business
-                    // bank account. So let the user review all steps with all info prefilled and editable, unless a specific
-                    // step was passed.
+                    // If the bank account has already been created in the db and is not yet open
+                    // let's show the manual form with the previously added values
+                    achData.subStep = bankAccount && bankAccount.isInSetup()
+                                      && CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL;
+
+                    // If we're not in setup, it means we already have a withdrawal account
+                    // and we're upgrading it to a business bank account. So let the user
+                    // review all steps with all info prefilled and editable, unless a specific step was passed.
                     if (!achData.isInSetup) {
-                        // @TODO Not sure if we need to do this since for NewDot none of the accounts are pre-existing ones
+                        // @TODO Not sure if we need to do this since for
+                        // NewDot none of the accounts are pre-existing ones
                         currentStep = '';
                     }
 
                     // Temporary fix for Onfido flow. Can be removed by nkuoch after Sept 1 2020.
                     // @TODO not sure if we still need this or what this is about, but seems like maybe yes...
                     if (currentStep === CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT && achData.useOnfido) {
-                        const onfidoResponse = lodashGet(achData, CONST.BANK_ACCOUNT.VERIFICATIONS.REQUESTOR_IDENTITY_ONFIDO);
+                        const onfidoResponse = lodashGet(
+                            achData,
+                            CONST.BANK_ACCOUNT.VERIFICATIONS.REQUESTOR_IDENTITY_ONFIDO,
+                        );
                         const sdkToken = lodashGet(onfidoResponse, CONST.BANK_ACCOUNT.ONFIDO_RESPONSE.SDK_TOKEN);
                         if (sdkToken && !achData.isOnfidoSetupComplete
                             && onfidoResponse.status !== CONST.BANK_ACCOUNT.ONFIDO_RESPONSE.PASS
@@ -410,9 +415,9 @@ function fetchFreePlanVerifiedBankAccount() {
                             ? CONST.BANK_ACCOUNT.STEP.VALIDATION
                             : CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
 
-                        // @TODO Again, not sure how much of this logic is needed right now as we shouldn't be handling any
-                        // open accounts in E.cash yet that need to pass any more checks or can be upgraded, but leaving in for
-                        // possible future compatibility.
+                        // @TODO Again, not sure how much of this logic is needed right now
+                        // as we shouldn't be handling any open accounts in E.cash yet that need to pass any more
+                        // checks or can be upgraded, but leaving in for possible future compatibility.
                         if (bankAccount.isOpen()) {
                             if (bankAccount.needsToPassLatestChecks()) {
                                 const hasTriedToUpgrade = bankAccount.getDateSigned()
@@ -421,9 +426,9 @@ function fetchFreePlanVerifiedBankAccount() {
                                     ? CONST.BANK_ACCOUNT.STEP.VALIDATION : CONST.BANK_ACCOUNT.STEP.COMPANY;
                                 achData.bankAccountInReview = hasTriedToUpgrade;
                             } else {
-                                // In Expensify.cash we do not show a specific view for the EnableStep since we will enable the
-                                // Expensify card automatically. However, we will still handle that step and show the Validate
-                                // view.
+                                // In Expensify.cash we do not show a specific view for the EnableStep since we
+                                // will enable the Expensify card automatically. However, we will still handle
+                                // that step and show the Validate view.
                                 currentStep = CONST.BANK_ACCOUNT.STEP.ENABLE;
                             }
                         }

From adaf7fbec1908711cdc0614b2851780307979802 Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Mon, 21 Jun 2021 21:53:29 -1000
Subject: [PATCH 29/29] fix final review

---
 src/CONST.js                                  |  2 +-
 src/languages/en.js                           |  2 +-
 src/languages/es.js                           |  2 +-
 src/libs/actions/BankAccounts.js              |  2 +-
 .../ReimbursementAccount/ValidationStep.js    | 20 +++++++++----------
 5 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/CONST.js b/src/CONST.js
index 8d0483a4cd41..ae92631fda21 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -171,7 +171,7 @@ const CONST = {
         TIMEZONE: 'timeZone',
         FREE_PLAN_BANK_ACCOUNT_ID: 'expensify_freePlanBankAccountID',
         ACH_DATA_THROTTLED: 'expensify_ACHData_throttled',
-        FAILED_BANK_ACCOUNT_VALIDATIONS_PREFACE: 'private_failedBankValidations_',
+        FAILED_BANK_ACCOUNT_VALIDATIONS_PREFIX: 'private_failedBankValidations_',
     },
     DEFAULT_TIME_ZONE: {automatic: true, selected: 'America/Los_Angeles'},
     DEFAULT_ACCOUNT_DATA: {error: '', success: '', loading: false},
diff --git a/src/languages/en.js b/src/languages/en.js
index b1b905b38073..159754a97516 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -368,7 +368,7 @@ export default {
         buttonText: 'Finish Setup',
         maxAttemptError: 'Validation for this bank account has been disabled due to too many incorrect attempts. Please contact us.',
         description: 'A day or two after you add your account to Expensify we send three (3) transactions to your account. They have a merchant line like "Expensify, Inc. Validation"',
-        desriptionCTA: 'Please enter each transaction amount in the fields below. Example: 1.51',
+        descriptionCTA: 'Please enter each transaction amount in the fields below. Example: 1.51',
         verifyingDescription: 'We\'re taking a look at your information and will have you onto next steps in just a few seconds.',
     },
     beneficialOwnersStep: {
diff --git a/src/languages/es.js b/src/languages/es.js
index 3f87c2b95c4b..dbf158d9ae25 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -357,7 +357,7 @@ export default {
         buttonText: 'Finalizar Configuración',
         maxAttemptError: 'Se ha inhabilitado la validación de esta cuenta bancaria, debido a demasiados intentos incorrectos. Por favor contáctenos.',
         description: 'Uno o dos días después de agregar su cuenta a Expensify, enviamos tres (3) transacciones a su cuenta. Tienen una línea comercial como "Expensify, Inc. Validation"',
-        desriptionCTA: 'Ingrese el monto de cada transacción en los campos a continuación. Ejemplo: 1.51',
+        descriptionCTA: 'Ingrese el monto de cada transacción en los campos a continuación. Ejemplo: 1.51',
         verifyingDescription: 'Estamos revisando su información y lo llevaremos a los siguientes pasos en solo unos segundos.',
     },
 };
diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js
index b7fe54a83ae1..565725960782 100644
--- a/src/libs/actions/BankAccounts.js
+++ b/src/libs/actions/BankAccounts.js
@@ -326,7 +326,7 @@ function fetchFreePlanVerifiedBankAccount() {
         .then((response) => {
             bankAccountID = lodashGet(response, ['nameValuePairs', CONST.NVP.FREE_PLAN_BANK_ACCOUNT_ID,
             ], '');
-            const failedValidationAttemptsName = CONST.NVP.FAILED_BANK_ACCOUNT_VALIDATIONS_PREFACE + bankAccountID;
+            const failedValidationAttemptsName = CONST.NVP.FAILED_BANK_ACCOUNT_VALIDATIONS_PREFIX + bankAccountID;
 
             // Now that we have the bank account. Lets grab the rest of the bank info we need
             promiseAllSettled([
diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index 1155504d0631..bfb0a4822d30 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -47,6 +47,8 @@ class ValidationStep extends React.Component {
 
         this.submit = this.submit.bind(this);
 
+        this.verifyingUrl = `${CONST.CLOUDFRONT_URL}/images/icons/emptystates/emptystate_reviewing.gif`;
+
         this.state = {
             amount1: '',
             amount2: '',
@@ -64,7 +66,7 @@ class ValidationStep extends React.Component {
         if (amount1 && amount2 && amount3) {
             const validateCode = [amount1, amount2, amount3].join(',');
 
-            // Make a call to bankAccounts
+            // Send valid amounts to BankAccountAPI::validateBankAccount in Web-Expensify
             validateBankAccount(this.props.achData.bankAccountID, validateCode);
             return;
         }
@@ -74,7 +76,6 @@ class ValidationStep extends React.Component {
     }
 
     /**
-     *
      * Filter input for validation amount
      * Anything that isn't a number is returned as an empty string
      * Any dollar amount (e.g. 1.12) will be returned as 112
@@ -104,7 +105,6 @@ class ValidationStep extends React.Component {
         }
 
         const state = this.props.achData.state;
-        const verifyingUrl = `${CONST.CLOUDFRONT_URL}/images/icons/emptystates/emptystate_reviewing.gif`;
         return (
             <View style={[styles.flex1, styles.justifyContentBetween]}>
                 <HeaderWithCloseButton
@@ -118,15 +118,10 @@ class ValidationStep extends React.Component {
                                 {this.props.translate('validationStep.description')}
                             </Text>
                             <Text style={[styles.mh5, styles.mb2]}>
-                                {this.props.translate('validationStep.desriptionCTA')}
+                                {this.props.translate('validationStep.descriptionCTA')}
                             </Text>
                         </View>
                         <View style={[styles.m5, styles.flex1]}>
-                            {errorMessage && (
-                                <Text style={[styles.mh5, styles.mb5, styles.textDanger]}>
-                                    {errorMessage}
-                                </Text>
-                            )}
                             <TextInputWithLabel
                                 containerStyles={[styles.mb1]}
                                 placeholder="1.52"
@@ -148,6 +143,11 @@ class ValidationStep extends React.Component {
                                 value={this.state.amount3}
                                 onChangeText={amount3 => this.setState({amount3})}
                             />
+                            {errorMessage && (
+                                <Text style={[styles.mb5, styles.textDanger]}>
+                                    {errorMessage}
+                                </Text>
+                            )}
                         </View>
                         <Button
                             success
@@ -161,7 +161,7 @@ class ValidationStep extends React.Component {
                 {state === BankAccount.STATE.VERIFYING && (
                     <View style={[styles.flex1]}>
                         <Image
-                            source={{uri: verifyingUrl}}
+                            source={{uri: this.verifyingUrl}}
                             style={[styles.workspaceInviteWelcome]}
                             resizeMode="center"
                         />