Skip to content

Return to the correct sub step in VBA flow after error in adding Bank Account manually #5186

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

Merged
marcaaron merged 10 commits into from
Sep 23, 2021
Merged

Return to the correct sub step in VBA flow after error in adding Bank Account manually #5186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
8eb3458
Handle the subStep directly from Onyx
aldo-expensify Sep 9, 2021
7c5866e
Avoid double-fetching the withdrawal account data
aldo-expensify Sep 10, 2021
251ee97
Merge branch 'main' of github.com:Expensify/App into aldo_fix-wrong-s…
aldo-expensify Sep 10, 2021
619e4c6
Merge branch 'main' of github.com:Expensify/App into aldo_fix-wrong-s…
aldo-expensify Sep 14, 2021
ce5357e
Revert Onyx merge separate tick and double fetch
aldo-expensify Sep 14, 2021
abb39df
Move Onyx.merge to actions
aldo-expensify Sep 14, 2021
0137eeb
Remove unwanted destructuring
aldo-expensify Sep 14, 2021
a8005c8
Remove empty line
aldo-expensify Sep 14, 2021
6bc9c36
Merge branch 'main' - Resolve conflicts
aldo-expensify Sep 17, 2021
7d9013c
Merge branch 'main' - resolve conflicts
aldo-expensify Sep 20, 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
24 changes: 12 additions & 12 deletions src/libs/actions/BankAccounts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ function goToWithdrawalAccountSetupStep(stepID, achData) {

// When going back to the BankAccountStep from the Company Step, show the manual form instead of Plaid
if (newACHData.currentStep === CONST.BANK_ACCOUNT.STEP.COMPANY && stepID === CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT) {
newACHData.subStep = 'manual';
newACHData.subStep = CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL;
}

Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {achData: {...newACHData, ...achData, currentStep: stepID}});
Expand Down Expand Up @@ -613,6 +613,15 @@ function showBankAccountFormValidationError(error) {
Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {error});
}

/**
* Set the current sub step in first step of adding withdrawal bank account
*
* @param {String} subStep - One of {CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL, CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID, null}
*/
function setBankAccountSubStep(subStep) {
Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {achData: {subStep}});
}

/**
* Create or update the bank account in db with the updated data.
*
Expand Down Expand Up @@ -652,18 +661,8 @@ function setupWithdrawalAccount(data) {
}

API.BankAccount_SetupWithdrawal(newACHData)
/* eslint-disable arrow-body-style */
.then((response) => {
// Without this block, we can call merge again with the achData before this merge finishes, resulting in
// the original achData overwriting the data we're trying to set here. With this block, we ensure that the
// newACHData is set in Onyx before we call merge on the reimbursementAccount key again.
return Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {
loading: false,
achData: {...newACHData},
})
.then(() => Promise.resolve(response));
})
.then((response) => {
Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {loading: false, achData: {...newACHData}});
Comment thread
marcaaron marked this conversation as resolved.
const currentStep = newACHData.currentStep;
let achData = lodashGet(response, 'achData', {});
let error = lodashGet(achData, CONST.BANK_ACCOUNT.VERIFICATIONS.ERROR_MESSAGE);
Expand Down Expand Up @@ -816,5 +815,6 @@ export {
showBankAccountFormValidationError,
setBankAccountFormValidationErrors,
setWorkspaceIDForReimbursementAccount,
setBankAccountSubStep,
updateReimbursementAccountDraft,
};
26 changes: 11 additions & 15 deletions src/pages/ReimbursementAccount/BankAccountStep.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import Text from '../../components/Text';
import ExpensiTextInput from '../../components/ExpensiTextInput';
import {
setBankAccountFormValidationErrors,
setBankAccountSubStep,
setupWithdrawalAccount,
showBankAccountErrorModal,
updateReimbursementAccountDraft,
Expand Down Expand Up @@ -48,7 +49,6 @@ class BankAccountStep extends React.Component {
this.addPlaidAccount = this.addPlaidAccount.bind(this);
this.state = {
// One of CONST.BANK_ACCOUNT.SETUP_TYPE
bankAccountAddMethod: props.achData.subStep || undefined,
hasAcceptedTerms: ReimbursementAccountUtils.getDefaultStateForField(props, 'acceptTerms', true),
routingNumber: ReimbursementAccountUtils.getDefaultStateForField(props, 'routingNumber'),
accountNumber: ReimbursementAccountUtils.getDefaultStateForField(props, 'accountNumber'),
Expand Down Expand Up @@ -163,15 +163,16 @@ class BankAccountStep extends React.Component {
// Disable bank account fields once they've been added in db so they can't be changed
const isFromPlaid = this.props.achData.setupType === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID;
const shouldDisableInputs = Boolean(this.props.achData.bankAccountID) || isFromPlaid;
const subStep = this.props.achData.subStep;
return (
<View style={[styles.flex1, styles.justifyContentBetween]}>
<HeaderWithCloseButton
title={this.props.translate('bankAccount.addBankAccount')}
onCloseButtonPress={Navigation.dismissModal}
onBackButtonPress={() => this.setState({bankAccountAddMethod: undefined})}
shouldShowBackButton={!_.isUndefined(this.state.bankAccountAddMethod)}
onBackButtonPress={() => setBankAccountSubStep(null)}
shouldShowBackButton={Boolean(subStep)}
/>
{!this.state.bankAccountAddMethod && (
{!subStep && (
<>
<View style={[styles.flex1]}>
<Text style={[styles.mh5, styles.mb5]}>
Expand All @@ -180,9 +181,7 @@ class BankAccountStep extends React.Component {
<MenuItem
icon={Bank}
title={this.props.translate('bankAccount.logIntoYourBank')}
onPress={() => {
this.setState({bankAccountAddMethod: CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID});
}}
onPress={() => setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID)}
disabled={this.props.isPlaidDisabled}
shouldShowRightIcon
/>
Expand All @@ -194,9 +193,7 @@ class BankAccountStep extends React.Component {
<MenuItem
icon={Paycheck}
title={this.props.translate('bankAccount.connectManually')}
onPress={() => {
this.setState({bankAccountAddMethod: CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL});
}}
onPress={() => setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL)}
shouldShowRightIcon
/>
<View style={[styles.m5, styles.flexRow, styles.justifyContentBetween]}>
Expand All @@ -218,16 +215,15 @@ class BankAccountStep extends React.Component {
</View>
</>
)}
{this.state.bankAccountAddMethod === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID && (
{subStep === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID && (
<AddPlaidBankAccount
text={this.props.translate('bankAccount.plaidBodyCopy')}
onSubmit={this.addPlaidAccount}
onExitPlaid={() => {
this.setState({bankAccountAddMethod: undefined});
}}
onExitPlaid={() => setBankAccountSubStep(null)}

/>
)}
{this.state.bankAccountAddMethod === CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL && (
{subStep === CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL && (
<ReimbursementAccountForm
onSubmit={this.addManualAccount}
>
Expand Down