Add Validation to BankAccount + CompanyStep + better handling for Plaid

src/CONST.js

@@ -6,10 +6,25 @@ const CONST = {
         IOS: 'https://apps.apple.com/us/app/expensify-cash/id1530278510',
         DESKTOP: 'https://expensify.cash/Expensify.cash.dmg',
     },
+    DATE: {
+        MOMENT_FORMAT_STRING: 'YYYY-MM-DD',
+    },
     SMS: {
         DOMAIN: '@expensify.sms',
     },
     BANK_ACCOUNT: {
+        PLAID: {
+            ALLOWED_THROTTLED_COUNT: 2,
+            ERROR: {
+                TOO_MANY_ATTEMPTS: 'Too many attempts',
+            },
+        },
+        ERROR: {
+            MISSING_ROUTING_NUMBER: '402 Missing routingNumber',
+            MAX_ROUTING_NUMBER: '402 Maximum Size Exceeded routingNumber',
+            MISSING_INCORPORATION_STATE: '402 Missing incorporationState in additionalData',
+            MISSING_INCORPORATION_TYPE: '402 Missing incorporationType in additionalData',
+        },
         STEP: {
             // In the order they appear in the VBA flow
             BANK_ACCOUNT: 'BankAccountStep',
@@ -170,6 +185,7 @@ const CONST = {
         TIMEZONE: 'timeZone',
         FREE_PLAN_BANK_ACCOUNT_ID: 'expensify_freePlanBankAccountID',
         ACH_DATA_THROTTLED: 'expensify_ACHData_throttled',
+        BANK_ACCOUNT_GET_THROTTLED: 'private_throttledHistory_BankAccount_Get',
     },
     DEFAULT_TIME_ZONE: {automatic: true, selected: 'America/Los_Angeles'},
     DEFAULT_ACCOUNT_DATA: {error: '', success: '', loading: false},
@@ -284,6 +300,10 @@ const CONST = {
         US_PHONE: /^\+1\d{10}$/,
         PHONE_E164_PLUS: /^\+?[1-9]\d{1,14}$/,
         NON_ALPHA_NUMERIC: /[^A-Za-z0-9+]/g,
+        PO_BOX: /\\b[P|p]?(OST|ost)?\\.?\\s*[O|o|0]?(ffice|FFICE)?\\.?\\s*[B|b][O|o|0]?[X|x]?\\.?\\s+[#]?(\\d+)\\b/,
+        ANY_VALUE: /^.+$/,
+        ZIP_CODE: /[0-9]{5}(?:[- ][0-9]{4})?/,
+        INDUSTRY_CODE: /^[0-9]{6}$/,
     },
 
     GROWL: {

src/components/AddPlaidBankAccount.js

@@ -96,12 +96,9 @@ class AddPlaidBankAccount extends React.Component {
 
     render() {
         const accounts = this.getAccounts();
-        const options = _.chain(accounts)
-            .filter(account => !account.alreadyExists)
-            .map((account, index) => ({
-                value: index, label: `${account.addressName} ${account.accountNumber}`,
-            }))
-            .value();
+        const options = _.map(accounts, (account, index) => ({
+            value: index, label: `${account.addressName} ${account.accountNumber}`,
+        }));
 
         return (
             <>

src/components/Onfido/index.js

@@ -47,7 +47,7 @@ class Onfido extends React.Component {
             onComplete: this.props.onSuccess,
             onError: () => {
                 this.props.onUserExit();
-                Growl.show(this.props.translate('onfidoStep.genericError'), CONST.GROWL.ERROR);
+                Growl.error(this.props.translate('onfidoStep.genericError'));
             },
             onUserExit: this.props.onUserExit,
             onModalRequestClose: () => {},

src/components/Onfido/index.native.js

@@ -34,7 +34,7 @@ class Onfido extends React.Component {
             .catch((error) => {
                 if (error.message === CONST.ONFIDO.ERROR.USER_CANCELLED) {
                     this.props.onUserExit();
-                    Growl.show(this.props.translate('onfidoStep.genericError'), CONST.GROWL.ERROR);
+                    Growl.error(this.props.translate('onfidoStep.genericError'));
                 }
             });
     }

src/components/TextInputFocusable/index.js

@@ -5,7 +5,6 @@ import _ from 'underscore';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import Growl from '../../libs/Growl';
 import themeColors from '../../styles/themes/default';
-import CONST from '../../CONST';
 
 const propTypes = {
     /** Maximum number of lines in the text input */
@@ -230,7 +229,7 @@ class TextInputFocusable extends React.Component {
                     .then(this.props.onPasteFile)
                     .catch(() => {
                         const errorDesc = this.props.translate('textInputFocusable.problemGettingImageYouPasted');
-                        Growl.show(errorDesc, CONST.GROWL.ERROR);
+                        Growl.error(errorDesc);
 
                         /*
                         * Since we intercepted the user-triggered paste event to check for attachments,

src/languages/en.js

@@ -290,6 +290,19 @@ export default {
         checkHelpLine: 'Your routing number and account number can be found on a check for the account.',
         hasPhoneLoginError: 'To add a verified bank account please ensure your primary login is a valid email and try again. You can add your phone number as a secondary login.',
         hasBeenThrottledError: ({fromNow}) => `For security reasons, we're taking a break from bank account setup so you can double-check your company information. Please try again ${fromNow}. Sorry!`,
+        error: {
+            noBankAccountAvailable: 'Sorry, no bank account is available',
+            taxID: 'Please enter a valid Tax ID Number',
+            website: 'Please enter a valid website',
+            zipCode: 'Please enter a valid zip code',
+            addressStreet: 'Please enter a valid address street that is not a PO Box',
+            incorporationDate: 'Please enter a valid incorporation date',
+            incorporationState: 'Please check Incorporation State and try again',
+            industryCode: 'Please enter a valid industry classification code',
+            restrictedBusiness: 'Please confirm company is not on the list of restricted businesses',
+            routingNumber: 'Please check Routing Number and try again',
+            companyType: 'Please check Company Type and try again',
+        },
     },
     addPersonalBankAccountPage: {
         enterPassword: 'Enter password',

src/libs/Growl.js

@@ -14,5 +14,17 @@ function show(bodyText, type, duration = CONST.GROWL.DURATION) {
     growlRef.current.show(bodyText, type, duration);
 }
 
+/**
+ * Show error growl
+ *
+ * @param {String} bodyText
+ * @param {Number} [duration]
+ */
+function error(bodyText, duration = CONST.GROWL.DURATION) {
+    show(bodyText, CONST.GROWL.ERROR, duration);
+}
 
-export default {show};
+export default {
+    show,
+    error,
+};

src/libs/actions/BankAccounts.js

@@ -9,6 +9,25 @@ import * as API from '../API';
 import BankAccount from '../models/BankAccount';
 import promiseAllSettled from '../promiseAllSettled';
 import Growl from '../Growl';
+import {translateLocal} from '../translate';
+
+/**
+ * List of bank accounts. This data should not be stored in Onyx since it contains unmasked PANs.
+ *
+ * @private
+ */
+let plaidBankAccounts = [];
+let bankName = '';
+let plaidAccessToken = '';
+
+/** Reimbursement account actively being set up */
+let reimbursementAccountInSetup = {};
+Onyx.connect({
+    key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
+    callback: (val) => {
+        reimbursementAccountInSetup = lodashGet(val, 'achData', {});
+    },
+});
 
 /**
  * Gets the Plaid Link token used to initialize the Plaid SDK
@@ -25,13 +44,31 @@ function fetchPlaidLinkToken() {
 }
 
 /**
- * List of bank accounts. This data should not be stored in Onyx since it contains unmasked PANs.
+ * Navigate to a specific step in the VBA flow
  *
- * @private
+ * @param {String} stepID
+ * @param {Object} achData
  */
-let plaidBankAccounts = [];
-let bankName = '';
-let plaidAccessToken = '';
+function goToWithdrawalAccountSetupStep(stepID, achData) {
+    const newACHData = {...reimbursementAccountInSetup};
+
+    // If we go back to Requestor Step, reset any validation and previously answered questions from expectID.
+    if (!newACHData.useOnfido && stepID === CONST.BANK_ACCOUNT.STEP.REQUESTOR) {
+        delete newACHData.questions;
+        delete newACHData.answers;
+        if (lodashHas(achData, CONST.BANK_ACCOUNT.VERIFICATIONS.EXTERNAL_API_RESPONSES)) {
+            delete newACHData.verifications.externalApiResponses.requestorIdentityID;
+            delete newACHData.verifications.externalApiResponses.requestorIdentityKBA;
+        }
+    }
+
+    // When going back to the BankAccountStep from the Company Step, show the manual form instead of Plaid
+    if (newACHData.currentStep === CONST.BANK_ACCOUNT.STEP.COMPANY && stepID === CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT) {
+        newACHData.subStep = 'manual';
+    }
+
+    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {achData: {...newACHData, ...achData, currentStep: stepID}});
+}
 
 /**
  * @param {String} publicToken
@@ -47,8 +84,19 @@ function getPlaidBankAccounts(publicToken, bank) {
         bank,
     })
         .then((response) => {
+            if (response.jsonCode === 666 && response.title === CONST.BANK_ACCOUNT.PLAID.ERROR.TOO_MANY_ATTEMPTS) {
+                Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {isPlaidDisabled: true});
+            }
+
             plaidAccessToken = response.plaidAccessToken;
-            plaidBankAccounts = response.accounts;
+
+            // Filter out any accounts that already exist since they cannot be used again.
+            plaidBankAccounts = _.filter(response.accounts, account => !account.alreadyExists);
+
+            if (plaidBankAccounts.length === 0) {
+                Growl.error(translateLocal('bankAccount.error.noBankAccountAvailable'));
+            }
+
             Onyx.merge(ONYXKEYS.PLAID_BANK_ACCOUNTS, {
                 error: {
                     title: response.title,
@@ -274,41 +322,6 @@ function fetchUserWallet() {
         });
 }
 
-let reimbursementAccountInSetup = {};
-Onyx.connect({
-    key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
-    callback: (val) => {
-        reimbursementAccountInSetup = lodashGet(val, 'achData', {});
-    },
-});
-
-/**
- * Navigate to a specific step in the VBA flow
- *
- * @param {String} stepID
- * @param {Object} achData
- */
-function goToWithdrawalAccountSetupStep(stepID, achData) {
-    const newACHData = {...reimbursementAccountInSetup};
-
-    // If we go back to Requestor Step, reset any validation and previously answered questions from expectID.
-    if (!newACHData.useOnfido && stepID === CONST.BANK_ACCOUNT.STEP.REQUESTOR) {
-        delete newACHData.questions;
-        delete newACHData.answers;
-        if (lodashHas(achData, CONST.BANK_ACCOUNT.VERIFICATIONS.EXTERNAL_API_RESPONSES)) {
-            delete newACHData.verifications.externalApiResponses.requestorIdentityID;
-            delete newACHData.verifications.externalApiResponses.requestorIdentityKBA;
-        }
-    }
-
-    // When going back to the BankAccountStep from the Company Step, show the manual form instead of Plaid
-    if (newACHData.currentStep === CONST.BANK_ACCOUNT.STEP.COMPANY && stepID === CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT) {
-        newACHData.subStep = 'manual';
-    }
-
-    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {achData: {...newACHData, ...achData, currentStep: stepID}});
-}
-
 /**
  * Fetch the bank account currently being set up by the user for the free plan if it exists.
  */
@@ -330,12 +343,17 @@ function fetchFreePlanVerifiedBankAccount() {
             name: CONST.NVP.ACH_DATA_THROTTLED,
         }),
         API.Get({returnValueList: 'bankAccountList'}),
+        API.Get({
+            returnValueList: 'nameValuePairs',
+            name: CONST.NVP.BANK_ACCOUNT_GET_THROTTLED,
+        }),
     ])
         .then(([
             freePlanBankAccountIDResponse,
             kycVerificationsMigrationResponse,
             achDataThrottledResponse,
             bankAccountListResponse,
+            throttledBankAccountGetResponse,
         ]) => {
             const bankAccountID = lodashGet(freePlanBankAccountIDResponse, [
                 'value', 'nameValuePairs', CONST.NVP.FREE_PLAN_BANK_ACCOUNT_ID,
@@ -352,6 +370,10 @@ function fetchFreePlanVerifiedBankAccount() {
                 ),
             );
             const bankAccount = bankAccountJSON ? new BankAccount(bankAccountJSON) : null;
+            const throttledHistoryCount = lodashGet(throttledBankAccountGetResponse, [
+                'value', 'nameValuePairs', CONST.NVP.BANK_ACCOUNT_GET_THROTTLED,
+            ], 0);
+            const isPlaidDisabled = throttledHistoryCount > CONST.BANK_ACCOUNT.PLAID.ALLOWED_THROTTLED_COUNT;
 
             // 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
@@ -417,7 +439,7 @@ function fetchFreePlanVerifiedBankAccount() {
                 currentStep = CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
             }
 
-            Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {throttledDate});
+            Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {throttledDate, isPlaidDisabled});
             goToWithdrawalAccountSetupStep(currentStep, achData);
         })
         .finally(() => {
@@ -604,6 +626,22 @@ function setupWithdrawalAccount(data) {
                 if (response.jsonCode === 666 || response.jsonCode === 404) {
                     error = response.message;
                 }
+
+                if (response.jsonCode === 402) {
+                    if (response.message === CONST.BANK_ACCOUNT.ERROR.MISSING_ROUTING_NUMBER
+                        || response.message === CONST.BANK_ACCOUNT.ERROR.MAX_ROUTING_NUMBER
+                    ) {
+                        error = translateLocal('bankAccount.error.routingNumber');
+                        achData.subStep = CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL;
+                    } else if (response.message === CONST.BANK_ACCOUNT.ERROR.MISSING_INCORPORATION_STATE) {
+                        error = translateLocal('bankAccount.error.incorporationState');
+                    } else if (response.message === CONST.BANK_ACCOUNT.ERROR.MISSING_INCORPORATION_TYPE) {
+                        error = translateLocal('bankAccount.error.companyType');
+                    } else {
+                        console.error(response.message);
+                    }
+                }
+
                 if (lodashGet(achData, CONST.BANK_ACCOUNT.VERIFICATIONS.THROTTLED)) {
                     achData.disableFields = true;
                 }
@@ -613,7 +651,7 @@ function setupWithdrawalAccount(data) {
             goToWithdrawalAccountSetupStep(nextStep, achData);
 
             if (error) {
-                Growl.show(`Error setting up account: ${error}`, CONST.GROWL.ERROR, 5000);
+                Growl.error(error, 5000);
             }
         });
 }

src/libs/actions/Policy.js

@@ -7,7 +7,7 @@ import ONYXKEYS from '../../ONYXKEYS';
 import {formatPersonalDetails} from './PersonalDetails';
 import Growl from '../Growl';
 import CONST from '../../CONST';
-import {translate} from '../translate';
+import {translateLocal} from '../translate';
 import Navigation from '../Navigation/Navigation';
 import ROUTES from '../../ROUTES';
 
@@ -21,16 +21,6 @@ Onyx.connect({
     },
 });
 
-let translateLocal = (phrase, variables) => translate(CONST.DEFAULT_LOCALE, phrase, variables);
-Onyx.connect({
-    key: ONYXKEYS.PREFERRED_LOCALE,
-    callback: (preferredLocale) => {
-        if (preferredLocale) {
-            translateLocal = (phrase, variables) => translate(preferredLocale, phrase, variables);
-        }
-    },
-});
-
 /**
  * Takes a full policy summary that is returned from the policySummaryList and simplifies it so we are only storing
  * the pieces of data that we need to in Onyx
@@ -141,7 +131,7 @@ function invite(login, welcomeNote, policyID) {
                 errorMessage += ` ${translateLocal('workspace.invite.pleaseEnterValidLogin')}`;
             }
 
-            Growl.show(errorMessage, CONST.GROWL.ERROR, 5000);
+            Growl.error(errorMessage, 5000);
         });
 }
 
@@ -156,7 +146,7 @@ function create(name) {
             if (response.jsonCode !== 200) {
                 // Show the user feedback
                 const errorMessage = translateLocal('workspace.new.genericFailureMessage');
-                Growl.show(errorMessage, CONST.GROWL.ERROR, 5000);
+                Growl.error(errorMessage, 5000);
                 return;
             }