Replace growl errors by modal in VBA flow

src/languages/en.js

@@ -564,6 +564,7 @@ export default {
         error: {
             termsAndConditions: 'Must accept terms and conditions',
             certify: 'Must certify information is true and accurate',
+            invalidBeneficialOwner: 'There is an invalid Beneficial Owner',
         },
     },
     vbaLoadingAnimation: {

src/languages/es.js

@@ -566,6 +566,7 @@ export default {
         error: {
             termsAndConditions: 'Debe aceptar términos y condiciones',
             certify: 'Debe certificar que la información es verdadera y precisa',
+            invalidBeneficialOwner: 'There is an invalid Beneficial Owner',
         },
     },
     vbaLoadingAnimation: {

src/libs/ValidationUtils.js

@@ -1,7 +1,6 @@
 import moment from 'moment';
 import CONST from '../CONST';
 import {translateLocal} from './translate';
-import {showBankAccountFormValidationError} from './actions/BankAccounts';
 
 /**
  * Validating that this is a valid address (PO boxes are not allowed)
@@ -69,39 +68,45 @@ function isValidSSNLastFour(ssnLast4) {
 }
 
 /**
+ * Get error translation keys associated with the first invalid field found
+ *
  * @param {Object} identity
- * @returns {Boolean}
+ * @returns {string|undefined}
  */
-function isValidIdentity(identity) {
+
+function getIdentityError(identity) {
     if (!isValidAddress(identity.street)) {
-        showBankAccountFormValidationError(translateLocal('bankAccount.error.address'), true);
-        return false;
+        return translateLocal('bankAccount.error.address');
     }
 
     if (identity.state === '') {
-        showBankAccountFormValidationError(translateLocal('bankAccount.error.addressState'), true);
-        return false;
+        return translateLocal('bankAccount.error.addressState');
     }
 
     if (!isValidZipCode(identity.zipCode)) {
-        showBankAccountFormValidationError(translateLocal('bankAccount.error.zipCode'), true);
-        return false;
+        return translateLocal('bankAccount.error.zipCode');
     }
 
     if (!isValidDate(identity.dob)) {
-        showBankAccountFormValidationError(translateLocal('bankAccount.error.dob'), true);
-        return false;
+        return translateLocal('bankAccount.error.dob');
     }
 
     if (!isValidSSNLastFour(identity.ssnLast4)) {
-        showBankAccountFormValidationError(translateLocal('bankAccount.error.ssnLast4'), true);
-        return false;
+        return translateLocal('bankAccount.error.ssnLast4');
     }
+    return undefined;
+}
 
-    return true;
+/**
+ * @param {Object} identity
+ * @returns {Boolean}
+ */
+function isValidIdentity(identity) {
+    return !getIdentityError(identity);
 }
 
 export {
+    getIdentityError,
     isValidAddress,
     isValidDate,
     isValidIndustryCode,

src/libs/actions/BankAccounts.js

@@ -603,16 +603,29 @@ function validateBankAccount(bankAccountID, validateCode) {
 }
 
 /**
- * Set the current error message. Show Growl for errors which are not yet handled by the error Modal.
+ * Show error modal and optionally a specific error message
+ *
+ * @param {String} errorMessage The error message to be displayed in the modal's body. We show translate('companyStep.confirmModalPrompt') if not provided.
+ */
+
+function showErrorModal(errorMessage = null) {
+    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {isErrorModalVisible: true, errorModalMessage: errorMessage});
+}
+
+/**
+ * Hide error modal
+ */
+function hideErrorModal() {
+    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {isErrorModalVisible: false});
+}
+
+/**
+ * Set the current error message.
  *
  * @param {String} error
- * @param {Boolean} shouldGrowl
  */
-function showBankAccountFormValidationError(error, shouldGrowl) {
+function showBankAccountFormValidationError(error) {
     Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {error});
-    if (shouldGrowl) {
-        Growl.error(error);
-    }
 }
 
 /**
@@ -789,13 +802,14 @@ function setupWithdrawalAccount(data) {
             goToWithdrawalAccountSetupStep(nextStep, achData);
 
             if (error) {
-                showBankAccountFormValidationError(error, true);
+                showBankAccountFormValidationError(error);
+                showErrorModal(error);
             }
         })
         .catch((response) => {
             Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {loading: false, achData: {...newACHData}});
             console.error(response.stack);
-            Growl.error(translateLocal('common.genericErrorMessage'), 5000);
+            showErrorModal(translateLocal('common.genericErrorMessage'));
         });
 }
 
@@ -816,5 +830,7 @@ export {
     setupWithdrawalAccount,
     validateBankAccount,
     hideBankAccountErrors,
+    hideErrorModal,
+    showErrorModal,
     showBankAccountFormValidationError,
 };

src/pages/ReimbursementAccount/BeneficialOwnersStep.js

@@ -15,11 +15,11 @@ import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize
 import {
     goToWithdrawalAccountSetupStep,
     setupWithdrawalAccount,
+    showErrorModal,
 } from '../../libs/actions/BankAccounts';
 import Navigation from '../../libs/Navigation/Navigation';
 import CONST from '../../CONST';
 import {isValidIdentity} from '../../libs/ValidationUtils';
-import Growl from '../../libs/Growl';
 import ONYXKEYS from '../../ONYXKEYS';
 import compose from '../../libs/compose';
 
@@ -62,17 +62,18 @@ class BeneficialOwnersStep extends React.Component {
             ));
 
             if (invalidBeneficifialOwner) {
+                showErrorModal(this.props.translate('beneficialOwnersStep.error.invalidBeneficialOwner'));
                 return false;
             }
         }
 
         if (!this.state.acceptTermsAndConditions) {
-            Growl.error(this.props.translate('beneficialOwnersStep.error.termsAndConditions'));
+            showErrorModal(this.props.translate('beneficialOwnersStep.error.termsAndConditions'));
             return false;
         }
 
         if (!this.state.certifyTrueInformation) {
-            Growl.error(this.props.translate('beneficialOwnersStep.error.certify'));
+            showErrorModal(this.props.translate('beneficialOwnersStep.error.certify'));
             return false;
         }
 

src/pages/ReimbursementAccount/CompanyStep.js

@@ -12,6 +12,7 @@ import {
     goToWithdrawalAccountSetupStep, hideBankAccountErrors,
     setupWithdrawalAccount,
     showBankAccountFormValidationError,
+    showErrorModal,
 } from '../../libs/actions/BankAccounts';
 import Navigation from '../../libs/Navigation/Navigation';
 import Text from '../../components/Text';
@@ -28,7 +29,6 @@ import {
 } from '../../libs/ValidationUtils';
 import compose from '../../libs/compose';
 import ONYXKEYS from '../../ONYXKEYS';
-import ConfirmModal from '../../components/ConfirmModal';
 import ExpensiPicker from '../../components/ExpensiPicker';
 
 const propTypes = {
@@ -62,7 +62,6 @@ class CompanyStep extends React.Component {
             industryCode: lodashGet(props, ['achData', 'industryCode'], ''),
             hasNoConnectionToCannabis: lodashGet(props, ['achData', 'hasNoConnectionToCannabis'], false),
             password: '',
-            isConfirmModalOpen: false,
         };
 
         // These fields need to be filled out in order to submit the form
@@ -136,7 +135,7 @@ class CompanyStep extends React.Component {
 
     submit() {
         if (!this.validate()) {
-            this.setState({isConfirmModalOpen: true});
+            showErrorModal();
             return;
         }
 
@@ -343,15 +342,6 @@ class CompanyStep extends React.Component {
                         />
                     </View>
                 </ScrollView>
-                <ConfirmModal
-                    title={this.props.translate('companyStep.confirmModalTitle')}
-                    onConfirm={() => this.setState({isConfirmModalOpen: false})}
-                    prompt={this.props.translate('companyStep.confirmModalPrompt')}
-                    isVisible={this.state.isConfirmModalOpen}
-                    confirmText={this.props.translate('companyStep.confirmModalConfirmText')}
-                    shouldShowCancelButton={false}
-                />
-
                 <FixedFooter style={[styles.mt5]}>
                     <Button
                         success

src/pages/ReimbursementAccount/ReimbursementAccountPage.js

@@ -6,7 +6,7 @@ import Str from 'expensify-common/lib/str';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import ScreenWrapper from '../../components/ScreenWrapper';
-import {fetchFreePlanVerifiedBankAccount} from '../../libs/actions/BankAccounts';
+import {fetchFreePlanVerifiedBankAccount, hideErrorModal} from '../../libs/actions/BankAccounts';
 import ONYXKEYS from '../../ONYXKEYS';
 import VBALoadingIndicator from '../../components/VBALoadingIndicator';
 import Permissions from '../../libs/Permissions';
@@ -27,6 +27,7 @@ import BeneficialOwnersStep from './BeneficialOwnersStep';
 import EnableStep from './EnableStep';
 import ROUTES from '../../ROUTES';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import ConfirmModal from '../../components/ConfirmModal';
 
 const propTypes = {
     /** List of betas */
@@ -238,6 +239,14 @@ class ReimbursementAccountPage extends React.Component {
                             achData={this.props.reimbursementAccount.achData}
                         />
                     )}
+                    <ConfirmModal
+                        title={this.props.translate('companyStep.confirmModalTitle')} // TODO: Update translation key
+                        onConfirm={() => hideErrorModal()}
+                        prompt={this.props.reimbursementAccount.errorModalMessage || this.props.translate('companyStep.confirmModalPrompt')}
+                        isVisible={Boolean(this.props.reimbursementAccount.isErrorModalVisible)}
+                        confirmText={this.props.translate('companyStep.confirmModalConfirmText')}
+                        shouldShowCancelButton={false}
+                    />
                 </KeyboardAvoidingView>
             </ScreenWrapper>
         );

src/pages/ReimbursementAccount/RequestorStep.js

@@ -14,12 +14,13 @@ import Text from '../../components/Text';
 import {
     goToWithdrawalAccountSetupStep,
     setupWithdrawalAccount,
+    showBankAccountFormValidationError,
+    showErrorModal,
 } from '../../libs/actions/BankAccounts';
 import Button from '../../components/Button';
 import FixedFooter from '../../components/FixedFooter';
 import IdentityForm from './IdentityForm';
-import {isValidIdentity} from '../../libs/ValidationUtils';
-import Growl from '../../libs/Growl';
+import {getIdentityError} from '../../libs/ValidationUtils';
 import Onfido from '../../components/Onfido';
 import compose from '../../libs/compose';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -71,17 +72,21 @@ class RequestorStep extends React.Component {
      */
     validate() {
         if (!this.state.isControllingOfficer) {
-            Growl.error(this.props.translate('requestorStep.isControllingOfficerError'));
+            showErrorModal(this.props.translate('requestorStep.isControllingOfficerError'));
             return false;
         }
 
-        if (!isValidIdentity({
+        const identity = {
             street: this.state.requestorAddressStreet,
             state: this.state.requestorAddressState,
             zipCode: this.state.requestorAddressZipCode,
             dob: this.state.dob,
             ssnLast4: this.state.ssnLast4,
-        })) {
+        };
+        const identityError = getIdentityError(identity);
+        if (identityError) {
+            showBankAccountFormValidationError(identityError);
+            showErrorModal();
             return false;
         }