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

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -373,8 +373,8 @@ const SettingsModalStackNavigator = createModalStackNavigator([
     },
     {
         getComponent: () => {
-            const WorkspaceBankAccountPage = require('../../../pages/workspace/WorkspaceBankAccountPage').default;
-            return WorkspaceBankAccountPage;
+            const ReimbursementAccountPage = require('../../../pages/ReimbursementAccount/ReimbursementAccountPage').default;
+            return ReimbursementAccountPage;
         },
         name: 'Workspace_BankAccount',
     },

src/libs/actions/ReimbursementAccount/navigation.js

@@ -6,7 +6,6 @@ import CONST from '../../../CONST';
 import ONYXKEYS from '../../../ONYXKEYS';
 import ROUTES from '../../../ROUTES';
 import Navigation from '../../Navigation/Navigation';
-import BankAccount from '../../models/BankAccount';
 
 const WITHDRAWAL_ACCOUNT_STEPS = [
     {
@@ -95,18 +94,9 @@ function goToWithdrawalAccountSetupStep(stepID, achData) {
 
 /**
  * Navigate to the correct bank account route based on the bank account state and type
- *
- * @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());
-    }
+function navigateToBankAccountRoute() {
+    Navigation.navigate(ROUTES.getBankAccountRoute());
 }
 
 export {

src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.js

@@ -1,9 +1,6 @@
 import lodashGet from 'lodash/get';
 import ONYXKEYS from '../../../ONYXKEYS';
-import CONST from '../../../CONST';
 import * as store from './store';
-import Navigation from '../../Navigation/Navigation';
-import ROUTES from '../../../ROUTES';
 import * as API from '../../API';
 
 /**
@@ -18,33 +15,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,84 @@
+import lodashGet from 'lodash/get';
+import PropTypes from 'prop-types';
+import React from 'react';
+import {ScrollView} from 'react-native';
+import _ from 'underscore';
+import * as BankAccounts from '../../libs/actions/BankAccounts';
+import * as Expensicons from '../../components/Icon/Expensicons';
+import * as Illustrations from '../../components/Icon/Illustrations';
+import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
+import Button from '../../components/Button';
+import compose from '../../libs/compose';
+import CONST from '../../CONST';
+import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
+import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import MenuItem from '../../components/MenuItem';
+import Navigation from '../../libs/Navigation/Navigation';
+import styles from '../../styles/styles';
+import ScreenWrapper from '../../components/ScreenWrapper';
+import Section from '../../components/Section';
+import Text from '../../components/Text';
+import withPolicy from '../workspace/withPolicy';
+import WorkspaceResetBankAccountModal from '../workspace/WorkspaceResetBankAccountModal';
+
+const propTypes = {
+    continue: PropTypes.func.isRequired,
+
+    /** Policy values needed in the component */
+    policy: PropTypes.shape({
+        name: PropTypes.string,
+    }).isRequired,
+
+    ...withLocalizePropTypes,
+};
+
+const ContinueBankAccountSetup = props => (
+    <ScreenWrapper>
+        <FullPageNotFoundView shouldShow={_.isEmpty(props.policy)}>
+            <HeaderWithCloseButton
+                title={props.translate('workspace.common.bankAccount')}
+                subtitle={lodashGet(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={props.translate('workspace.bankAccount.almostDone')}
+                    icon={Illustrations.BankArrowPink}
+                >
+                    <Text>
+                        {props.translate('workspace.bankAccount.youreAlmostDone')}
+                    </Text>
+                </Section>
+                <Button
+                    text={props.translate('workspace.bankAccount.continueWithSetup')}
+                    onPress={props.continue}
+                    icon={Expensicons.Bank}
+                    style={[styles.mt2, styles.buttonCTA]}
+                    iconStyles={[styles.buttonCTAIcon]}
+                    shouldShowRightIcon
+                    large
+                    success
+                />
+                <MenuItem
+                    title={props.translate('workspace.bankAccount.startOver')}
+                    icon={Expensicons.RotateLeft}
+                    onPress={BankAccounts.requestResetFreePlanBankAccount}
+                    shouldShowRightIcon
+                />
+            </ScrollView>
+            <WorkspaceResetBankAccountModal />
+        </FullPageNotFoundView>
+    </ScreenWrapper>
+);
+
+ContinueBankAccountSetup.propTypes = propTypes;
+ContinueBankAccountSetup.displayName = 'ContinueBankAccountSetup';
+
+export default compose(
+    withPolicy,
+    withLocalize,
+)(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);