Merge pull request #4483 from Expensify/chirag-center-prompt

Use centered modal for errors in the VBA flow in NewDot
Expensify · Aug 10, 2021 · 808a307 · 808a307
2 parents 8a35ea5 + bb5e5e1
commit 808a307
Showing 1 changed file with 13 additions and 10 deletions.
diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js
@@ -17,10 +17,10 @@ import CheckboxWithLabel from '../../components/CheckboxWithLabel';
 import TextLink from '../../components/TextLink';
 import StatePicker from '../../components/StatePicker';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
-import Growl from '../../libs/Growl';
 import {
     isValidAddress, isValidDate, isValidIndustryCode, isValidZipCode,
 } from '../../libs/ValidationUtils';
+import ConfirmModal from '../../components/ConfirmModal';
 import ExpensiPicker from '../../components/ExpensiPicker';
 
 class CompanyStep extends React.Component {
@@ -44,6 +44,7 @@ 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
@@ -67,47 +68,38 @@ class CompanyStep extends React.Component {
      */
     validate() {
         if (!this.state.password.trim()) {
-            Growl.error(this.props.translate('common.passwordCannotBeBlank'));
             return false;
         }
 
         if (!isValidAddress(this.state.addressStreet)) {
-            Growl.error(this.props.translate('bankAccount.error.addressStreet'));
             return false;
         }
 
         if (this.state.addressState === '') {
-            Growl.error(this.props.translate('bankAccount.error.addressState'));
             return false;
         }
 
         if (!isValidZipCode(this.state.addressZipCode)) {
-            Growl.error(this.props.translate('bankAccount.error.zipCode'));
             return false;
         }
 
         if (!Str.isValidURL(this.state.website)) {
-            Growl.error(this.props.translate('bankAccount.error.website'));
             return false;
         }
 
         if (!/[0-9]{9}/.test(this.state.companyTaxID)) {
-            Growl.error(this.props.translate('bankAccount.error.taxID'));
             return false;
         }
 
         if (!isValidDate(this.state.incorporationDate)) {
-            Growl.error(this.props.translate('bankAccount.error.incorporationDate'));
             return false;
         }
 
         if (!isValidIndustryCode(this.state.industryCode)) {
-            Growl.error(this.props.translate('bankAccount.error.industryCode'));
             return false;
         }
 
         if (!this.state.hasNoConnectionToCannabis) {
-            Growl.error(this.props.translate('bankAccount.error.restrictedBusiness'));
             return false;
         }
 
@@ -116,6 +108,7 @@ class CompanyStep extends React.Component {
 
     submit() {
         if (!this.validate()) {
+            this.setState({isConfirmModalOpen: true});
             return;
         }
 
@@ -128,6 +121,7 @@ class CompanyStep extends React.Component {
         const shouldDisableCompanyTaxID = Boolean(this.props.achData.bankAccountID && this.props.achData.companyTaxID);
         const shouldDisableSubmitButton = this.requiredFields
             .reduce((acc, curr) => acc || !this.state[curr].trim(), false);
+
         return (
             <>
                 <HeaderWithCloseButton
@@ -262,6 +256,15 @@ class CompanyStep extends React.Component {
                         />
                     </View>
                 </ScrollView>
+                <ConfirmModal
+                    title="Oops something went wrong!"
+                    onConfirm={() => this.setState({isConfirmModalOpen: false})}
+                    prompt="Please double check any highlighted fields and try again."
+                    isVisible={this.state.isConfirmModalOpen}
+                    confirmText="Got it"
+                    shouldShowCancelButton={false}
+                />
+
                 <FixedFooter style={[styles.mt5]}>
                     <Button
                         success