diff --git a/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.js b/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.js index 4255b79d5d22..94799fa6b3c6 100644 --- a/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.js +++ b/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.js @@ -25,7 +25,7 @@ function resetFreePlanBankAccount(bankAccountID) { { optimisticData: [ { - onyxMethod: 'set', + onyxMethod: CONST.ONYX.METHOD.SET, key: ONYXKEYS.ONFIDO_TOKEN, value: '', }, @@ -44,12 +44,31 @@ function resetFreePlanBankAccount(bankAccountID) { key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, value: ReimbursementAccountProps.reimbursementAccountDefaultProps, }, + { + onyxMethod: CONST.ONYX.METHOD.MERGE, + key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, + value: {isLoading: true}, + }, { onyxMethod: CONST.ONYX.METHOD.SET, key: ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT, value: {}, }, ], + successData: [ + { + onyxMethod: CONST.ONYX.METHOD.MERGE, + key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, + value: {isLoading: false}, + }, + ], + failureData: [ + { + onyxMethod: CONST.ONYX.METHOD.MERGE, + key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, + value: {isLoading: false}, + }, + ], }); } diff --git a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js index 76b490239c07..b7c102ecd5e6 100644 --- a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js +++ b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js @@ -18,12 +18,18 @@ import ScreenWrapper from '../../components/ScreenWrapper'; import Section from '../../components/Section'; import Text from '../../components/Text'; import withPolicy from '../workspace/withPolicy'; +import * as ReimbursementAccountProps from './reimbursementAccountPropTypes'; +import WorkspaceResetBankAccountModal from '../workspace/WorkspaceResetBankAccountModal'; +import * as BankAccounts from '../../libs/actions/BankAccounts'; const propTypes = { + /** Bank account currently in setup */ + reimbursementAccount: ReimbursementAccountProps.reimbursementAccountPropTypes.isRequired, + /** Callback to continue to the next step of the setup */ continue: PropTypes.func.isRequired, - /** Callback to start over the setup */ + /** Callback to reset the bank account */ startOver: PropTypes.func.isRequired, /** Policy values needed in the component */ @@ -67,13 +73,20 @@ const ContinueBankAccountSetup = props => ( BankAccounts.requestResetFreePlanBankAccount()} shouldShowRightIcon wrapperStyle={[styles.cardMenuItem]} /> + + {props.reimbursementAccount.shouldShowResetModal && ( + + )} ); diff --git a/src/pages/ReimbursementAccount/EnableStep.js b/src/pages/ReimbursementAccount/EnableStep.js index 329f8c61cc9d..b8b7dd1a029f 100644 --- a/src/pages/ReimbursementAccount/EnableStep.js +++ b/src/pages/ReimbursementAccount/EnableStep.js @@ -22,6 +22,7 @@ import * as Link from '../../libs/actions/Link'; import * as User from '../../libs/actions/User'; import ScreenWrapper from '../../components/ScreenWrapper'; import * as BankAccounts from '../../libs/actions/ReimbursementAccount'; +import WorkspaceResetBankAccountModal from '../workspace/WorkspaceResetBankAccountModal'; const propTypes = { /** Bank account currently in setup */ @@ -102,6 +103,11 @@ const EnableStep = (props) => { )} + {props.reimbursementAccount.shouldShowResetModal && ( + + )} ); }; diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js index 193bf2c9a46b..4337292048bb 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js @@ -29,7 +29,6 @@ import EnableStep from './EnableStep'; import ROUTES from '../../ROUTES'; import HeaderWithCloseButton from '../../components/HeaderWithCloseButton'; import * as ReimbursementAccountProps from './reimbursementAccountPropTypes'; -import WorkspaceResetBankAccountModal from '../workspace/WorkspaceResetBankAccountModal'; import reimbursementAccountDraftPropTypes from './ReimbursementAccountDraftPropTypes'; import * as ReimbursementAccountUtils from '../../libs/ReimbursementAccountUtils'; @@ -263,13 +262,8 @@ class ReimbursementAccountPage extends React.Component { ); } - if (this.props.reimbursementAccount.shouldShowResetModal && Boolean(achData.bankAccountID)) { - return ( - - ); - } - // Show the "Continue with setup" button if a bank account setup is already in progress and no specific further step was passed in the url + // We'll show the workspace bank account reset modal if the user wishes to start over if (!this.state.shouldHideContinueSetupButton && Boolean(achData.bankAccountID) && achData.state !== BankAccount.STATE.OPEN @@ -280,11 +274,9 @@ class ReimbursementAccountPage extends React.Component { )) { return ( { - this.setState({shouldHideContinueSetupButton: true}); - BankAccounts.requestResetFreePlanBankAccount(); - }} + startOver={() => this.setState({shouldHideContinueSetupButton: true})} /> ); } diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js index f90a53e082e6..077ee7544029 100644 --- a/src/pages/ReimbursementAccount/ValidationStep.js +++ b/src/pages/ReimbursementAccount/ValidationStep.js @@ -27,7 +27,9 @@ import Section from '../../components/Section'; import CONST from '../../CONST'; import Button from '../../components/Button'; import MenuItem from '../../components/MenuItem'; +import WorkspaceResetBankAccountModal from '../workspace/WorkspaceResetBankAccountModal'; import Enable2FAPrompt from './Enable2FAPrompt'; +import ScreenWrapper from '../../components/ScreenWrapper'; const propTypes = { ...withLocalizePropTypes, @@ -128,7 +130,7 @@ class ValidationStep extends React.Component { const requiresTwoFactorAuth = lodashGet(this.props, 'account.requiresTwoFactorAuth'); return ( - + + {this.props.reimbursementAccount.shouldShowResetModal && ( + + )} {!requiresTwoFactorAuth && ( )} )} - + ); } } diff --git a/src/pages/workspace/WorkspaceResetBankAccountModal.js b/src/pages/workspace/WorkspaceResetBankAccountModal.js index 835bb43ee9cd..91059b737494 100644 --- a/src/pages/workspace/WorkspaceResetBankAccountModal.js +++ b/src/pages/workspace/WorkspaceResetBankAccountModal.js @@ -1,4 +1,5 @@ import lodashGet from 'lodash/get'; +import PropTypes from 'prop-types'; import React from 'react'; import ConfirmModal from '../../components/ConfirmModal'; import * as BankAccounts from '../../libs/actions/BankAccounts'; @@ -12,9 +13,16 @@ const propTypes = { /** Reimbursement account data */ reimbursementAccount: ReimbursementAccountProps.reimbursementAccountPropTypes.isRequired, + /** Callback when the user confirms resetting the workspace bank account */ + onConfirm: PropTypes.func, + ...withLocalizePropTypes, }; +const defaultProps = { + onConfirm: () => {}, +}; + const WorkspaceResetBankAccountModal = (props) => { const achData = lodashGet(props.reimbursementAccount, 'achData') || {}; const isInOpenState = achData.state === BankAccount.STATE.OPEN; @@ -37,7 +45,10 @@ const WorkspaceResetBankAccountModal = (props) => { ) : props.translate('workspace.bankAccount.clearProgress')} danger onCancel={BankAccounts.cancelResetFreePlanBankAccount} - onConfirm={() => BankAccounts.resetFreePlanBankAccount(bankAccountID)} + onConfirm={() => { + BankAccounts.resetFreePlanBankAccount(bankAccountID); + props.onConfirm(); + }} shouldShowCancelButton isVisible /> @@ -46,5 +57,6 @@ const WorkspaceResetBankAccountModal = (props) => { WorkspaceResetBankAccountModal.displayName = 'WorkspaceResetBankAccountModal'; WorkspaceResetBankAccountModal.propTypes = propTypes; +WorkspaceResetBankAccountModal.defaultProps = defaultProps; export default withLocalize(WorkspaceResetBankAccountModal);