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

src/ROUTES.js

@@ -107,7 +107,6 @@ export default {
     WORKSPACE_INVOICES: 'workspace/:policyID/invoices',
     WORKSPACE_TRAVEL: 'workspace/:policyID/travel',
     WORKSPACE_MEMBERS: 'workspace/:policyID/members',
-    WORKSPACE_BANK_ACCOUNT: 'workspace/:policyID/bank-account',
     WORKSPACE_NEW_ROOM: 'workspace/new-room',
     getWorkspaceInitialRoute: policyID => `workspace/${policyID}`,
     getWorkspaceInviteRoute: policyID => `workspace/${policyID}/invite`,
@@ -118,7 +117,6 @@ export default {
     getWorkspaceInvoicesRoute: policyID => `workspace/${policyID}/invoices`,
     getWorkspaceTravelRoute: policyID => `workspace/${policyID}/travel`,
     getWorkspaceMembersRoute: policyID => `workspace/${policyID}/members`,
-    getWorkspaceBankAccountRoute: policyID => `workspace/${policyID}/bank-account`,
     getRequestCallRoute: taskID => `request-call/${taskID}`,
     REQUEST_CALL: 'request-call/:taskID',
 

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -378,13 +378,6 @@ const SettingsModalStackNavigator = createModalStackNavigator([
         },
         name: 'Workspace_Members',
     },
-    {
-        getComponent: () => {
-            const WorkspaceBankAccountPage = require('../../../pages/workspace/WorkspaceBankAccountPage').default;
-            return WorkspaceBankAccountPage;
-        },
-        name: 'Workspace_BankAccount',
-    },
     {
         getComponent: () => {
             const WorkspaceInvitePage = require('../../../pages/workspace/WorkspaceInvitePage').default;

src/libs/Navigation/linkingConfig.js

@@ -127,10 +127,6 @@ export default {
                     Workspace_Members: {
                         path: ROUTES.WORKSPACE_MEMBERS,
                     },
-                    Workspace_BankAccount: {
-                        path: ROUTES.WORKSPACE_BANK_ACCOUNT,
-                        exact: true,
-                    },
                     Workspace_Invite: {
                         path: ROUTES.WORKSPACE_INVITE,
                     },

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,11 +1,7 @@
 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';
-import BankAccount from '../../models/BankAccount';
 
 /**
  * Reset user's reimbursement account. This will delete the bank account.
@@ -19,34 +15,43 @@ 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,
-        state: BankAccount.STATE.DELETED,
-    };
-
     API.write('RestartBankAccountSetup',
         {
             bankAccountID,
             ownerEmail: store.getCredentials().login,
         },
         {
-            optimisticData: [{
-                onyxMethod: 'merge',
-                key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
-                value: {achData, shouldShowResetModal: false},
-            },
-            {
-                onyxMethod: 'set',
-                key: ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT,
-                value: null,
-            }],
+            optimisticData: [
+                {
+                    onyxMethod: 'set',
+                    key: ONYXKEYS.ONFIDO_TOKEN,
+                    value: '',
+                },
+                {
+                    onyxMethod: 'set',
+                    key: ONYXKEYS.PLAID_DATA,
+                    value: {},
+                },
+                {
+                    onyxMethod: 'set',
+                    key: ONYXKEYS.PLAID_LINK_TOKEN,
+                    value: '',
+                },
+                {
+                    onyxMethod: 'set',
+                    key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
+                    value: {
+                        achData: {},
+                        shouldShowResetModal: false,
+                    },
+                },
+                {
+                    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 = {
+            shouldShowContinueSetupButton: 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({
+            shouldShowContinueSetupButton: false,
+        });
+    }
+
     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.shouldShowContinueSetupButton) {
+            return (
+                <ContinueBankAccountSetup
+                    continue={this.continue}
+                />
+            );
+        }
+
         let errorComponent;
         const userHasPhonePrimaryEmail = Str.endsWith(this.props.session.email, CONST.SMS.DOMAIN);