Move "Continue Setup"/"Start Over" confirmation to ReimbursementAccountPage

src/libs/actions/BankAccounts.js

@@ -48,6 +48,14 @@ function clearOnfidoToken() {
     Onyx.merge(ONYXKEYS.ONFIDO_TOKEN, '');
 }
 
+function setReadyToContinue() {
+    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {isReadyToContinue: true});
+}
+
+function clearReadyToContinue() {
+    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {isReadyToContinue: null});
+}
+
 /**
  * Helper method to build the Onyx data required during setup of a Verified Business Bank Account
  *
@@ -327,8 +335,10 @@ export {
     clearPersonalBankAccount,
     clearPlaid,
     clearOnfidoToken,
+    clearReadyToContinue,
     connectBankAccountWithPlaid,
     deletePaymentBankAccount,
+    setReadyToContinue,
     updateBeneficialOwnersForBankAccount,
     updateCompanyInformationForBankAccount,
     updatePersonalInformationForBankAccount,

src/libs/actions/ReimbursementAccount/navigation.js

@@ -99,14 +99,7 @@ function goToWithdrawalAccountSetupStep(stepID, achData) {
  * @param {String} policyID
  */
 function navigateToBankAccountRoute(policyID) {
-    const achData = store.getReimbursementAccountInSetup();
-    const state = lodashGet(achData, 'state');
-    const isShowPage = lodashGet(achData, 'bankAccountID') && state !== BankAccount.STATE.OPEN;
-    if (isShowPage) {
-        Navigation.navigate(ROUTES.getWorkspaceBankAccountRoute(policyID));
-    } else {
-        Navigation.navigate(ROUTES.getBankAccountRoute());
-    }
+    Navigation.navigate(ROUTES.getBankAccountRoute());
 }
 
 export {

src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.js

@@ -18,33 +18,36 @@ function resetFreePlanBankAccount() {
         throw new Error('Missing credentials when attempting to reset free plan bank account');
     }
 
-    const achData = {
-        useOnfido: true,
-        policyID: '',
-        isInSetup: true,
-        domainLimit: 0,
-        currentStep: CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT,
-    };
-
     API.write('RestartBankAccountSetup',
         {
             bankAccountID,
             ownerEmail: store.getCredentials().login,
         },
         {
             optimisticData: [{
-                onyxMethod: 'merge',
+                onyxMethod: 'set',
                 key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
-                value: {achData, shouldShowResetModal: false},
+                value: {
+                    achData: {},
+                    shouldShowResetModal: false
+                },
+            },
+            {
+                onyxMethod: 'set',
+                key: ONYXKEYS.PLAID_DATA,
+                value: {},
+            },
+            {
+                onyxMethod: 'set',
+                key: ONYXKEYS.PLAID_LINK_TOKEN,
+                value: '',
             },
             {
                 onyxMethod: 'set',
                 key: ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT,
                 value: null,
             }],
         });
-
-    Navigation.navigate(ROUTES.getBankAccountRoute());
 }
 
 export default resetFreePlanBankAccount;

src/pages/ReimbursementAccount/ContinueBankAccountSetup.js

@@ -0,0 +1,107 @@
+import lodashGet from 'lodash/get';
+import PropTypes from 'prop-types';
+import React from 'react';
+import {ScrollView} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
+import _ from 'underscore';
+import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import * as Expensicons from '../../components/Icon/Expensicons';
+import * as Illustrations from '../../components/Icon/Illustrations';
+import ScreenWrapper from '../../components/ScreenWrapper';
+import Text from '../../components/Text';
+import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
+import * as BankAccounts from '../../libs/actions/BankAccounts';
+import compose from '../../libs/compose';
+import BankAccount from '../../libs/models/BankAccount';
+import Navigation from '../../libs/Navigation/Navigation';
+import ONYXKEYS from '../../ONYXKEYS';
+import ROUTES from '../../ROUTES';
+import reimbursementAccountPropTypes from '../ReimbursementAccount/reimbursementAccountPropTypes';
+import Section from '../../components/Section';
+import WorkspaceResetBankAccountModal from '../workspace/WorkspaceResetBankAccountModal';
+import styles from '../../styles/styles';
+import CONST from '../../CONST';
+import withPolicy from '../workspace/withPolicy';
+import Button from '../../components/Button';
+import MenuItem from '../../components/MenuItem';
+import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
+
+const propTypes = {
+    continue: PropTypes.func.isRequired,
+
+    /** ACH data for the withdrawal account actively being set up */
+    reimbursementAccount: reimbursementAccountPropTypes,
+
+    /** Policy values needed in the component */
+    policy: PropTypes.shape({
+        name: PropTypes.string,
+    }).isRequired,
+
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+    reimbursementAccount: {
+        isLoading: true,
+    },
+};
+
+class ContinueBankAccountSetup extends React.Component {
+    render() {
+        return (
+            <ScreenWrapper>
+                <FullPageNotFoundView shouldShow={_.isEmpty(this.props.policy)}>
+                    <HeaderWithCloseButton
+                        title={this.props.translate('workspace.common.bankAccount')}
+                        subtitle={lodashGet(this.props.policy, 'name')}
+                        onCloseButtonPress={Navigation.dismissModal}
+                        onBackButtonPress={Navigation.goBack}
+                        shouldShowGetAssistanceButton
+                        guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
+                        shouldShowBackButton
+                    />
+                    <ScrollView style={styles.flex1}>
+                        <Section
+                            title={this.props.translate('workspace.bankAccount.almostDone')}
+                            icon={Illustrations.BankArrowPink}
+                        >
+                            <Text>
+                                {this.props.translate('workspace.bankAccount.youreAlmostDone')}
+                            </Text>
+                        </Section>
+                        <Button
+                            text={this.props.translate('workspace.bankAccount.continueWithSetup')}
+                            onPress={this.props.continue}
+                            icon={Expensicons.Bank}
+                            style={[styles.mt2, styles.buttonCTA]}
+                            iconStyles={[styles.buttonCTAIcon]}
+                            shouldShowRightIcon
+                            large
+                            success
+                        />
+                        <MenuItem
+                            title={this.props.translate('workspace.bankAccount.startOver')}
+                            icon={Expensicons.RotateLeft}
+                            onPress={BankAccounts.requestResetFreePlanBankAccount}
+                            shouldShowRightIcon
+                        />
+                    </ScrollView>
+                    <WorkspaceResetBankAccountModal />
+                </FullPageNotFoundView>
+            </ScreenWrapper>
+        );
+    }
+}
+
+ContinueBankAccountSetup.propTypes = propTypes;
+ContinueBankAccountSetup.defaultProps = defaultProps;
+
+export default compose(
+    withLocalize,
+    withOnyx({
+        reimbursementAccount: {
+            key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
+        },
+    }),
+    withPolicy,
+)(ContinueBankAccountSetup);

src/pages/ReimbursementAccount/ReimbursementAccountPage.js

@@ -11,6 +11,7 @@ import ONYXKEYS from '../../ONYXKEYS';
 import ReimbursementAccountLoadingIndicator from '../../components/ReimbursementAccountLoadingIndicator';
 import Navigation from '../../libs/Navigation/Navigation';
 import CONST from '../../CONST';
+import BankAccount from '../../libs/models/BankAccount';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import compose from '../../libs/compose';
 import styles from '../../styles/styles';
@@ -22,6 +23,7 @@ import networkPropTypes from '../../components/networkPropTypes';
 // Steps
 import BankAccountStep from './BankAccountStep';
 import CompanyStep from './CompanyStep';
+import ContinueBankAccountSetup from './ContinueBankAccountSetup';
 import RequestorStep from './RequestorStep';
 import ValidationStep from './ValidationStep';
 import ACHContractStep from './ACHContractStep';
@@ -72,6 +74,17 @@ const defaultProps = {
 };
 
 class ReimbursementAccountPage extends React.Component {
+    constructor(props) {
+        super(props);
+        this.continue = this.continue.bind(this);
+
+        const achData = lodashGet(this.props, 'reimbursementAccount.achData', {});
+        const hasInProgressVBBA = achData.bankAccountID && achData.state !== BankAccount.STATE.OPEN;
+        this.state = {
+            isReadyToContinue: !hasInProgressVBBA,
+        };
+    }
+
     componentDidMount() {
         this.fetchData();
     }
@@ -155,6 +168,12 @@ class ReimbursementAccountPage extends React.Component {
         BankAccounts.fetchFreePlanVerifiedBankAccount(stepToOpen !== CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT ? stepToOpen : '');
     }
 
+    continue() {
+        this.setState({
+            isReadyToContinue: true,
+        });
+    }
+
     render() {
         // The SetupWithdrawalAccount flow allows us to continue the flow from various points depending on where the
         // user left off. This view will refer to the achData as the single source of truth to determine which route to
@@ -176,6 +195,15 @@ class ReimbursementAccountPage extends React.Component {
             );
         }
 
+        const hasInProgressVBBA = achData.bankAccountID && achData.state !== BankAccount.STATE.OPEN;
+        if (hasInProgressVBBA && !this.state.isReadyToContinue) {
+            return (
+                <ContinueBankAccountSetup
+                    continue={this.continue}
+                />
+            );
+        }
+
         let errorComponent;
         const userHasPhonePrimaryEmail = Str.endsWith(this.props.session.email, CONST.SMS.DOMAIN);