diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js index 37e32c27ba23..f3dd96da68ff 100644 --- a/src/libs/actions/BankAccounts.js +++ b/src/libs/actions/BankAccounts.js @@ -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}}); @@ -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. * @@ -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}}); const currentStep = newACHData.currentStep; let achData = lodashGet(response, 'achData', {}); let error = lodashGet(achData, CONST.BANK_ACCOUNT.VERIFICATIONS.ERROR_MESSAGE); @@ -816,5 +815,6 @@ export { showBankAccountFormValidationError, setBankAccountFormValidationErrors, setWorkspaceIDForReimbursementAccount, + setBankAccountSubStep, updateReimbursementAccountDraft, }; diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index 9db7b5b27ffc..70e2896bb8c4 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -21,6 +21,7 @@ import Text from '../../components/Text'; import ExpensiTextInput from '../../components/ExpensiTextInput'; import { setBankAccountFormValidationErrors, + setBankAccountSubStep, setupWithdrawalAccount, showBankAccountErrorModal, updateReimbursementAccountDraft, @@ -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'), @@ -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 ( this.setState({bankAccountAddMethod: undefined})} - shouldShowBackButton={!_.isUndefined(this.state.bankAccountAddMethod)} + onBackButtonPress={() => setBankAccountSubStep(null)} + shouldShowBackButton={Boolean(subStep)} /> - {!this.state.bankAccountAddMethod && ( + {!subStep && ( <> @@ -180,9 +181,7 @@ class BankAccountStep extends React.Component { { - this.setState({bankAccountAddMethod: CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID}); - }} + onPress={() => setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID)} disabled={this.props.isPlaidDisabled} shouldShowRightIcon /> @@ -194,9 +193,7 @@ class BankAccountStep extends React.Component { { - this.setState({bankAccountAddMethod: CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL}); - }} + onPress={() => setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL)} shouldShowRightIcon /> @@ -218,16 +215,15 @@ class BankAccountStep extends React.Component { )} - {this.state.bankAccountAddMethod === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID && ( + {subStep === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID && ( { - this.setState({bankAccountAddMethod: undefined}); - }} + onExitPlaid={() => setBankAccountSubStep(null)} + /> )} - {this.state.bankAccountAddMethod === CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL && ( + {subStep === CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL && (