Replace growl errors by modal in VBA flow

src/languages/en.js

@@ -374,6 +374,9 @@ 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!`,
+        confirmModalTitle: 'Oops',
+        confirmModalPrompt: 'Please double check any highlighted fields and try again.',
+        confirmModalConfirmText: 'Got it',
         error: {
             noBankAccountAvailable: 'Sorry, no bank account is available',
             taxID: 'Please enter a valid Tax ID Number',
@@ -524,9 +527,6 @@ export default {
         listOfRestrictedBusinesses: 'list of restricted businesses',
         incorporationDatePlaceholder: 'Start date (yyyy-mm-dd)',
         companyPhonePlaceholder: '10 digits, no hyphens',
-        confirmModalTitle: 'Are you sure?',
-        confirmModalPrompt: 'Please double check any highlighted fields and try again.',
-        confirmModalConfirmText: 'Got it',
     },
     requestorStep: {
         headerTitle: 'Requestor information',

src/languages/es.js

@@ -374,6 +374,9 @@ export default {
         checkHelpLine: 'Su número de ruta y número de cuenta se pueden encontrar en un cheque para la cuenta.',
         hasPhoneLoginError: 'Para agregar una cuenta bancaria verificada, asegúrese de que su inicio de sesión principal sea un correo electrónico válido y vuelva a intentarlo. Puede agregar su número de teléfono como inicio de sesión secundario.',
         hasBeenThrottledError: ({fromNow}) => `Por razones de seguridad, nos tomamos un descanso de la configuración de la cuenta bancaria para que pueda verificar la información de su empresa. Inténtalo de nuevo ${fromNow}. ¡Lo siento!`,
+        confirmModalTitle: 'Ups',
+        confirmModalPrompt: 'Por favor, comprueba los campos resaltados e inténtalo de nuevo.',
+        confirmModalConfirmText: 'OK',
         error: {
             noBankAccountAvailable: 'Lo sentimos, no hay ninguna cuenta bancaria disponible',
             taxID: 'Ingrese un número de identificación fiscal válido',
@@ -526,9 +529,6 @@ export default {
         listOfRestrictedBusinesses: 'lista de negocios restringidos',
         incorporationDatePlaceholder: 'Fecha de inicio (aaaa-mm-dd)',
         companyPhonePlaceholder: '10 dígitos, sin guiones',
-        confirmModalTitle: '¿Estás seguro?',
-        confirmModalPrompt: 'Por favor, comprueba los campos resaltados e inténtalo de nuevo.',
-        confirmModalConfirmText: 'OK',
     },
     requestorStep: {
         headerTitle: 'Información del solicitante',

src/libs/ValidationUtils.js

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

src/libs/actions/BankAccounts.js

@@ -612,16 +612,28 @@ 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} errorModalMessage The error message to be displayed in the modal's body.
+ */
+function showBankAccountErrorModal(errorModalMessage = null) {
+    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {isErrorModalVisible: true, errorModalMessage});
+}
+
+/**
+ * Hide error modal
+ */
+function hideBankAccountErrorModal() {
+    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);
-    }
 }
 
 /**
@@ -798,13 +810,14 @@ function setupWithdrawalAccount(data) {
             goToWithdrawalAccountSetupStep(nextStep, achData);
 
             if (error) {
-                showBankAccountFormValidationError(error, true);
+                showBankAccountFormValidationError(error);
+                showBankAccountErrorModal(error);
             }
         })
         .catch((response) => {
             Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {loading: false, achData: {...newACHData}});
             console.error(response.stack);
-            Growl.error(translateLocal('common.genericErrorMessage'), 5000);
+            showBankAccountErrorModal(translateLocal('common.genericErrorMessage'));
         });
 }
 
@@ -829,6 +842,8 @@ export {
     setupWithdrawalAccount,
     validateBankAccount,
     hideBankAccountErrors,
+    hideBankAccountErrorModal,
+    showBankAccountErrorModal,
     showBankAccountFormValidationError,
     setWorkspaceIDForReimbursementAccount,
 };

src/pages/ReimbursementAccount/BeneficialOwnersStep.js

@@ -15,11 +15,11 @@ import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize
 import {
     goToWithdrawalAccountSetupStep,
     setupWithdrawalAccount,
+    showBankAccountErrorModal,
 } 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';
 
@@ -67,12 +67,12 @@ class BeneficialOwnersStep extends React.Component {
         }
 
         if (!this.state.acceptTermsAndConditions) {
-            Growl.error(this.props.translate('beneficialOwnersStep.error.termsAndConditions'));
+            showBankAccountErrorModal(this.props.translate('beneficialOwnersStep.error.termsAndConditions'));
             return false;
         }
 
         if (!this.state.certifyTrueInformation) {
-            Growl.error(this.props.translate('beneficialOwnersStep.error.certify'));
+            showBankAccountErrorModal(this.props.translate('beneficialOwnersStep.error.certify'));
             return false;
         }
 

src/pages/ReimbursementAccount/CompanyStep.js

@@ -12,6 +12,7 @@ import {
     goToWithdrawalAccountSetupStep, hideBankAccountErrors,
     setupWithdrawalAccount,
     showBankAccountFormValidationError,
+    showBankAccountErrorModal,
 } 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});
+            showBankAccountErrorModal();
             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>
                     <Button
                         success

src/pages/ReimbursementAccount/ReimbursementAccountPage.js

@@ -6,7 +6,11 @@ import Str from 'expensify-common/lib/str';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import ScreenWrapper from '../../components/ScreenWrapper';
-import {fetchFreePlanVerifiedBankAccount, hideBankAccountErrors} from '../../libs/actions/BankAccounts';
+import {
+    fetchFreePlanVerifiedBankAccount,
+    hideBankAccountErrorModal,
+    hideBankAccountErrors,
+} from '../../libs/actions/BankAccounts';
 import ONYXKEYS from '../../ONYXKEYS';
 import VBALoadingIndicator from '../../components/VBALoadingIndicator';
 import Permissions from '../../libs/Permissions';
@@ -27,6 +31,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 */
@@ -239,6 +244,14 @@ class ReimbursementAccountPage extends React.Component {
                             achData={this.props.reimbursementAccount.achData}
                         />
                     )}
+                    <ConfirmModal
+                        title={this.props.translate('bankAccount.confirmModalTitle')}
+                        onConfirm={hideBankAccountErrorModal}
+                        prompt={this.props.reimbursementAccount.errorModalMessage || this.props.translate('bankAccount.confirmModalPrompt')}
+                        isVisible={lodashGet(this.props, 'reimbursementAccount.isErrorModalVisible', false)}
+                        confirmText={this.props.translate('bankAccount.confirmModalConfirmText')}
+                        shouldShowCancelButton={false}
+                    />
                 </KeyboardAvoidingView>
             </ScreenWrapper>
         );

src/pages/ReimbursementAccount/RequestorStep.js

@@ -14,12 +14,12 @@ import Text from '../../components/Text';
 import {
     goToWithdrawalAccountSetupStep,
     setupWithdrawalAccount,
+    showBankAccountErrorModal,
 } 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 Onfido from '../../components/Onfido';
 import compose from '../../libs/compose';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -82,7 +82,7 @@ class RequestorStep extends React.Component {
      */
     validate() {
         if (!this.state.isControllingOfficer) {
-            Growl.error(this.props.translate('requestorStep.isControllingOfficerError'));
+            showBankAccountErrorModal(this.props.translate('requestorStep.isControllingOfficerError'));
             return false;
         }