Skip to content

Commit

Permalink
Merge pull request #5311 from Expensify/marcaaron-removeConfirmModals
Browse files Browse the repository at this point in the history 
Remove confirm modals from the VBA flow
  • Loading branch information
@AndrewGable
AndrewGable authored Sep 17, 2021
2 parents 9081875 + 26e32ca commit 6bc010b
Show file tree
Hide file tree
Showing 15 changed files with 491 additions and 556 deletions.
60 changes: 25 additions & 35 deletions src/components/AddPlaidBankAccount.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,10 @@ import styles from '../styles/styles';
import themeColors from '../styles/themes/default';
import compose from '../libs/compose';
import withLocalize, {withLocalizePropTypes} from './withLocalize';
import Button from './Button';
import ExpensiPicker from './ExpensiPicker';
import Text from './Text';
import * as ReimbursementAccountUtils from '../libs/ReimbursementAccountUtils';
import ReimbursementAccountForm from '../pages/ReimbursementAccount/ReimbursementAccountForm';

const propTypes = {
...withLocalizePropTypes,
Expand Down Expand Up @@ -95,7 +95,6 @@ class AddPlaidBankAccount extends React.Component {

this.state = {
selectedIndex: undefined,
isCreatingAccount: false,
institution: {},
};

Expand Down Expand Up @@ -139,7 +138,6 @@ class AddPlaidBankAccount extends React.Component {
this.props.onSubmit({
account, plaidLinkToken: this.props.plaidLinkToken,
});
this.setState({isCreatingAccount: true});
}

render() {
Expand Down Expand Up @@ -173,40 +171,32 @@ class AddPlaidBankAccount extends React.Component {
/>
)}
{accounts.length > 0 && (
<>
<View style={[styles.m5, styles.flex1]}>
{!_.isEmpty(this.props.text) && (
<Text style={[styles.mb5]}>{this.props.text}</Text>
)}
{/* @TODO there are a bunch of logos to incorporate here to replace this name
https://d2k5nsl2zxldvw.cloudfront.net/images/plaid/[email protected] */}
<Text style={[styles.mb5, styles.h1]}>{this.state.institution.name}</Text>
<View style={[styles.mb5]}>
<ExpensiPicker
label={this.props.translate('addPersonalBankAccountPage.chooseAccountLabel')}
onChange={(index) => {
this.setState({selectedIndex: Number(index)});
this.clearError('selectedBank');
}}
items={options}
placeholder={_.isUndefined(this.state.selectedIndex) ? {
value: '',
label: this.props.translate('bankAccount.chooseAnAccount'),
} : {}}
value={this.state.selectedIndex}
hasError={this.getErrors().selectedBank}
/>
</View>
</View>
<View style={[styles.m5]}>
<Button
success
text={this.props.translate('common.saveAndContinue')}
isLoading={this.state.isCreatingAccount}
onPress={this.selectAccount}
<ReimbursementAccountForm
onSubmit={this.selectAccount}
>
{!_.isEmpty(this.props.text) && (
<Text style={[styles.mb5]}>{this.props.text}</Text>
)}
{/* @TODO there are a bunch of logos to incorporate here to replace this name
https://d2k5nsl2zxldvw.cloudfront.net/images/plaid/[email protected] */}
<Text style={[styles.mb5, styles.h1]}>{this.state.institution.name}</Text>
<View style={[styles.mb5]}>
<ExpensiPicker
label={this.props.translate('addPersonalBankAccountPage.chooseAccountLabel')}
onChange={(index) => {
this.setState({selectedIndex: Number(index)});
this.clearError('selectedBank');
}}
items={options}
placeholder={_.isUndefined(this.state.selectedIndex) ? {
value: '',
label: this.props.translate('bankAccount.chooseAnAccount'),
} : {}}
value={this.state.selectedIndex}
hasError={this.getErrors().selectedBank}
/>
</View>
</>
</ReimbursementAccountForm>
)}
</>
);
Expand Down
13 changes: 3 additions & 10 deletions src/languages/en.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -383,9 +383,7 @@ 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',
buttonConfirm: 'Got it',
error: {
noBankAccountAvailable: 'Sorry, no bank account is available',
taxID: 'Please enter a valid Tax ID Number',
Expand All @@ -411,13 +409,8 @@ export default {
firstName: 'Please enter valid first name',
lastName: 'Please enter valid last name',
noDefaultDepositAccountOrDebitCardAvailable: 'Please add a default deposit bank account or debit card',
existingOwners: {
alreadyInUse: 'This bank account is already in use by ',
pleaseAskThemToShare: 'Please ask them to share it with you.',
alternatively: 'Alternatively, you can ',
setUpThisAccountByYourself: 'set up this account by yourself',
validationProcessAgain: ' and go through the entire validation process again (may take up to a week).',
},
fixTheErrors: 'fix the errors',
inTheFormBeforeContinuing: 'in the form before continuing',
},
},
addPersonalBankAccountPage: {
Expand Down
13 changes: 3 additions & 10 deletions src/languages/es.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -383,9 +383,7 @@ export default {
checkHelpLine: 'Su número de ruta y número de cuenta se pueden encontrar en un cheque de la cuenta bancaria.',
hasPhoneLoginError: 'Para agregar una cuenta bancaria verificada, asegúrate de que tu nombre de usuario principal sea un correo electrónico válido y vuelve a intentarlo. Puedes agregar tu número de teléfono como nombre de usuario secundario.',
hasBeenThrottledError: ({fromNow}) => `Por razones de seguridad, nos tomamos un descanso en 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',
buttonConfirm: 'OK',
error: {
noBankAccountAvailable: 'Lo sentimos, no hay ninguna cuenta bancaria disponible',
taxID: 'Ingresa un número de identificación fiscal válido',
Expand All @@ -411,13 +409,8 @@ export default {
firstName: 'Ingresa un nombre válido',
lastName: 'Ingresa un apellido válido',
noDefaultDepositAccountOrDebitCardAvailable: 'Por favor agrega una cuenta bancaria para depósitos o una tarjeta de débito',
existingOwners: {
alreadyInUse: 'La cuenta bancaria ya se encuentra en uso por ',
pleaseAskThemToShare: 'Por favor, solicita que la compartan contigo.',
alternatively: 'En su defecto, puedes ',
setUpThisAccountByYourself: 'añadir la cuenta tú mismo',
validationProcessAgain: ' y completar el proceso de validación de nuevo (lo cual puede tardar hasta una semana).',
},
fixTheErrors: 'corrige los errores',
inTheFormBeforeContinuing: 'en el formulario antes de continuar',
},
},
addPersonalBankAccountPage: {
Expand Down
16 changes: 2 additions & 14 deletions src/libs/actions/BankAccounts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -620,7 +620,7 @@ function showBankAccountFormValidationError(error) {
*/
function setupWithdrawalAccount(data) {
let nextStep;
Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {loading: true});
Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {loading: true, errorModalMessage: '', errors: null});

const newACHData = {
...reimbursementAccountInSetup,
Expand Down Expand Up @@ -677,18 +677,6 @@ function setupWithdrawalAccount(data) {
setFreePlanVerifiedBankAccountID(achData.bankAccountID);
}

// Show warning if another account already set up this bank account and promote share
if (response.existingOwners) {
Onyx.merge(
ONYXKEYS.REIMBURSEMENT_ACCOUNT,
{
existingOwners: response.existingOwners,
isErrorModalVisible: true,
},
);
return;
}

if (currentStep === CONST.BANK_ACCOUNT.STEP.REQUESTOR) {
const requestorResponse = lodashGet(
achData,
Expand Down Expand Up @@ -796,7 +784,7 @@ function setupWithdrawalAccount(data) {
}

function hideBankAccountErrors() {
Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {error: '', existingOwners: null, errors: null});
Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {error: '', errors: null});
}

function setWorkspaceIDForReimbursementAccount(workspaceID) {
Expand Down
109 changes: 50 additions & 59 deletions src/pages/ReimbursementAccount/BankAccountStep.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import _ from 'underscore';
import React from 'react';
import {View, Image, ScrollView} from 'react-native';
import PropTypes from 'prop-types';
import {View, Image} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
import MenuItem from '../../components/MenuItem';
Expand All @@ -10,7 +9,6 @@ import {
} from '../../components/Icon/Expensicons';
import styles from '../../styles/styles';
import TextLink from '../../components/TextLink';
import Button from '../../components/Button';
import Icon from '../../components/Icon';
import colors from '../../styles/colors';
import Navigation from '../../libs/Navigation/Navigation';
Expand All @@ -30,13 +28,13 @@ import {
import ONYXKEYS from '../../ONYXKEYS';
import compose from '../../libs/compose';
import * as ReimbursementAccountUtils from '../../libs/ReimbursementAccountUtils';
import ReimbursementAccountForm from './ReimbursementAccountForm';
import reimbursementAccountPropTypes from './reimbursementAccountPropTypes';

const propTypes = {
/** Bank account currently in setup */
reimbursementAccount: PropTypes.shape({
/** Error set when handling the API response */
error: PropTypes.string,
}).isRequired,
// eslint-disable-next-line react/no-unused-prop-types
reimbursementAccount: reimbursementAccountPropTypes.isRequired,

...withLocalizePropTypes,
};
Expand Down Expand Up @@ -230,58 +228,51 @@ class BankAccountStep extends React.Component {
/>
)}
{this.state.bankAccountAddMethod === CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL && (
<>
<ScrollView style={[styles.flex1, styles.w100]} contentContainerStyle={[styles.p5, styles.flexGrow1]}>
<Text style={[styles.mb5]}>
{this.props.translate('bankAccount.checkHelpLine')}
</Text>
<Image
resizeMode="contain"
style={[styles.exampleCheckImage, styles.mb5]}
source={exampleCheckImage}
/>
<ExpensiTextInput
label={this.props.translate('bankAccount.routingNumber')}
keyboardType="number-pad"
value={this.state.routingNumber}
onChangeText={value => this.clearErrorAndSetValue('routingNumber', value)}
disabled={shouldDisableInputs}
errorText={this.getErrorText('routingNumber')}
/>
<ExpensiTextInput
containerStyles={[styles.mt4]}
label={this.props.translate('bankAccount.accountNumber')}
keyboardType="number-pad"
value={this.state.accountNumber}
onChangeText={value => this.clearErrorAndSetValue('accountNumber', value)}
disabled={shouldDisableInputs}
errorText={this.getErrorText('accountNumber')}
/>
<CheckboxWithLabel
style={[styles.mb4, styles.mt5]}
isChecked={this.state.hasAcceptedTerms}
onPress={this.toggleTerms}
LabelComponent={() => (
<View style={[styles.flexRow, styles.alignItemsCenter]}>
<Text>
{this.props.translate('common.iAcceptThe')}
</Text>
<TextLink href="https://use.expensify.com/terms">
{`Expensify ${this.props.translate('common.termsOfService')}`}
</TextLink>
</View>
)}
hasError={this.getErrors().hasAcceptedTerms}
/>
<View style={[styles.flex1, styles.justifyContentEnd]}>
<Button
success
text={this.props.translate('common.saveAndContinue')}
onPress={this.addManualAccount}
/>
</View>
</ScrollView>
</>
<ReimbursementAccountForm
onSubmit={this.addManualAccount}
>
<Text style={[styles.mb5]}>
{this.props.translate('bankAccount.checkHelpLine')}
</Text>
<Image
resizeMode="contain"
style={[styles.exampleCheckImage, styles.mb5]}
source={exampleCheckImage}
/>
<ExpensiTextInput
label={this.props.translate('bankAccount.routingNumber')}
keyboardType="number-pad"
value={this.state.routingNumber}
onChangeText={value => this.clearErrorAndSetValue('routingNumber', value)}
disabled={shouldDisableInputs}
errorText={this.getErrorText('routingNumber')}
/>
<ExpensiTextInput
containerStyles={[styles.mt4]}
label={this.props.translate('bankAccount.accountNumber')}
keyboardType="number-pad"
value={this.state.accountNumber}
onChangeText={value => this.clearErrorAndSetValue('accountNumber', value)}
disabled={shouldDisableInputs}
errorText={this.getErrorText('accountNumber')}
/>
<CheckboxWithLabel
style={[styles.mb4, styles.mt5]}
isChecked={this.state.hasAcceptedTerms}
onPress={this.toggleTerms}
LabelComponent={() => (
<View style={[styles.flexRow, styles.alignItemsCenter]}>
<Text>
{this.props.translate('common.iAcceptThe')}
</Text>
<TextLink href="https://use.expensify.com/terms">
{`Expensify ${this.props.translate('common.termsOfService')}`}
</TextLink>
</View>
)}
hasError={this.getErrors().hasAcceptedTerms}
/>
</ReimbursementAccountForm>
)}
</View>
);
Expand Down
Loading

0 comments on commit 6bc010b

Please sign in to comment.