Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use centered modal for errors in the VBA flow in NewDot #4483

Merged
merged 5 commits into from
Aug 10, 2021
Merged

Use centered modal for errors in the VBA flow in NewDot #4483

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
94fd6f8
Me playing around while i wait for confirmation from the issue
chiragsalian Aug 7, 2021
0450743
Simple prompt modal
chiragsalian Aug 7, 2021
8cc1b27
removing unnecessary import
chiragsalian Aug 7, 2021
2c75b4b
removing test file and reverting an unnecessary conditional change
chiragsalian Aug 7, 2021
bb5e5e1
Merge branch 'main' into chirag-center-prompt
chiragsalian Aug 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 13 additions & 10 deletions src/pages/ReimbursementAccount/CompanyStep.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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
Expand All @@ -67,47 +68,38 @@ class CompanyStep extends React.Component {
*/
validate() {
if (!this.state.password.trim()) {
Growl.error(this.props.translate('common.passwordCannotBeBlank'));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a quick question since I'm not really up to speed on this...

In this PR, we are replacing all these calls with red outlines and inline messages -> #4431

Do we need both a confirm modal and the inline messages?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's what I gathered from the solution mentioned in the issue.

Specific fields causing errors will be highlighted thanks to this change so we can use a generic message in the modal for all cases:
"Oops something went wrong! Please double check any highlighted fields and try again."

We can still wait for @MitchExpensify to confirm.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes we're replacing all growls with centered modals as well as adding red field outlines.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

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;
}

Expand All @@ -116,6 +108,7 @@ class CompanyStep extends React.Component {

submit() {
if (!this.validate()) {
this.setState({isConfirmModalOpen: true});
return;
}

Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down