fix: 8541: Resolve multiple transition.

src/libs/actions/ReimbursementAccount/index.js

@@ -6,7 +6,7 @@ import fetchFreePlanVerifiedBankAccount from './fetchFreePlanVerifiedBankAccount
 import resetFreePlanBankAccount from './resetFreePlanBankAccount';
 import deleteFromBankAccountList from './deleteFromBankAccountList';
 
-export {goToWithdrawalAccountSetupStep} from './navigation';
+export {goToWithdrawalAccountSetupStep, navigateToBankAccountRoute} from './navigation';
 export {
     showBankAccountErrorModal,
     setBankAccountFormValidationErrors,

src/libs/actions/ReimbursementAccount/navigation.js

@@ -5,6 +5,9 @@ import Onyx from 'react-native-onyx';
 import * as store from './store';
 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,8 +98,25 @@ function goToWithdrawalAccountSetupStep(stepID, achData) {
     Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {achData: {...newACHData, ...achData, currentStep: stepID}});
 }
 
+/**
+ * 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());
+    }
+}
+
 export {
     goToWithdrawalAccountSetupStep,
     getNextStepToComplete,
     getNextStepID,
+    navigateToBankAccountRoute,
 };

src/pages/workspace/WorkspaceBankAccountPage.js

@@ -47,36 +47,15 @@ const defaultProps = {
 class WorkspaceBankAccountPage extends React.Component {
     constructor(props) {
         super(props);
-        this.onScreenFocus = this.onScreenFocus.bind(this);
         this.getShouldShowPage = this.getShouldShowPage.bind(this);
         this.navigateToBankAccountRoute = this.navigateToBankAccountRoute.bind(this);
     }
 
     componentDidMount() {
-        this.unsubscribe = this.props.navigation.addListener('focus', this.onScreenFocus);
-
-        if (!this.getShouldShowPage()) {
-            this.navigateToBankAccountRoute();
-        }
-    }
-
-    componentWillUnmount() {
-        if (!this.unsubscribe) {
-            return;
-        }
-
-        this.unsubscribe();
-    }
-
-    /**
-     * When we are returning to this screen we want to check if we should go back or show the alternate view with "Continue with setup" button.
-     */
-    onScreenFocus() {
         if (this.getShouldShowPage()) {
             return;
         }
-
-        this.props.navigation.goBack();
+        this.navigateToBankAccountRoute();
     }
 
     /**

src/pages/workspace/WorkspaceInitialPage.js

@@ -22,6 +22,7 @@ import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoun
 import withFullPolicy, {fullPolicyPropTypes, fullPolicyDefaultProps} from './withFullPolicy';
 import * as PolicyActions from '../../libs/actions/Policy';
 import CONST from '../../CONST';
+import * as ReimbursementAccount from '../../libs/actions/ReimbursementAccount';
 import ONYXKEYS from '../../ONYXKEYS';
 import policyMemberPropType from '../policyMemberPropType';
 
@@ -117,7 +118,7 @@ class WorkspaceInitialPage extends React.Component {
             {
                 translationKey: 'workspace.common.bankAccount',
                 icon: Expensicons.Bank,
-                action: () => Navigation.navigate(ROUTES.getWorkspaceBankAccountRoute(policy.id)),
+                action: () => ReimbursementAccount.navigateToBankAccountRoute(policy.id),
             },
         ];
 

src/pages/workspace/bills/WorkspaceBillsNoVBAView.js

@@ -7,10 +7,9 @@ import withLocalize, {withLocalizePropTypes} from '../../../components/withLocal
 import * as Expensicons from '../../../components/Icon/Expensicons';
 import * as Illustrations from '../../../components/Icon/Illustrations';
 import Section from '../../../components/Section';
-import Navigation from '../../../libs/Navigation/Navigation';
-import ROUTES from '../../../ROUTES';
 import WorkspaceBillsFirstSection from './WorkspaceBillsFirstSection';
 import Button from '../../../components/Button';
+import * as ReimbursementAccount from '../../../libs/actions/ReimbursementAccount';
 
 const propTypes = {
     /** The policy ID currently being configured */
@@ -32,7 +31,7 @@ const WorkspaceBillsNoVBAView = props => (
             </View>
             <Button
                 text={props.translate('workspace.common.bankAccount')}
-                onPress={() => Navigation.navigate(ROUTES.getWorkspaceBankAccountRoute(props.policyID))}
+                onPress={() => ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
                 icon={Expensicons.Bank}
                 style={[styles.mt4]}
                 iconStyles={[styles.mr5]}

src/pages/workspace/card/WorkspaceCardNoVBAView.js

@@ -3,14 +3,13 @@ import PropTypes from 'prop-types';
 import {View} from 'react-native';
 import Text from '../../../components/Text';
 import styles from '../../../styles/styles';
-import Navigation from '../../../libs/Navigation/Navigation';
-import ROUTES from '../../../ROUTES';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import * as Expensicons from '../../../components/Icon/Expensicons';
 import * as Illustrations from '../../../components/Icon/Illustrations';
 import UnorderedList from '../../../components/UnorderedList';
 import Section from '../../../components/Section';
 import Button from '../../../components/Button';
+import * as ReimbursementAccount from '../../../libs/actions/ReimbursementAccount';
 
 const propTypes = {
     /** The policy ID currently being configured */
@@ -38,7 +37,7 @@ const WorkspaceCardNoVBAView = props => (
         />
         <Button
             text={props.translate('workspace.common.bankAccount')}
-            onPress={() => Navigation.navigate(ROUTES.getWorkspaceBankAccountRoute(props.policyID))}
+            onPress={() => ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
             icon={Expensicons.Bank}
             style={[styles.mt6]}
             iconStyles={[styles.mr5]}

src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js

@@ -7,10 +7,9 @@ import withLocalize, {withLocalizePropTypes} from '../../../components/withLocal
 import * as Expensicons from '../../../components/Icon/Expensicons';
 import * as Illustrations from '../../../components/Icon/Illustrations';
 import Section from '../../../components/Section';
-import Navigation from '../../../libs/Navigation/Navigation';
-import ROUTES from '../../../ROUTES';
 import WorkspaceInvoicesFirstSection from './WorkspaceInvoicesFirstSection';
 import Button from '../../../components/Button';
+import * as ReimbursementAccount from '../../../libs/actions/ReimbursementAccount';
 
 const propTypes = {
     /** The policy ID currently being configured */
@@ -32,7 +31,7 @@ const WorkspaceInvoicesNoVBAView = props => (
             </View>
             <Button
                 text={props.translate('workspace.common.bankAccount')}
-                onPress={() => Navigation.navigate(ROUTES.getWorkspaceBankAccountRoute(props.policyID))}
+                onPress={() => ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
                 icon={Expensicons.Bank}
                 style={[styles.mt4]}
                 iconStyles={[styles.mr5]}

src/pages/workspace/reimburse/WorkspaceReimburseView.js

@@ -12,8 +12,6 @@ import withLocalize, {withLocalizePropTypes} from '../../../components/withLocal
 import * as Expensicons from '../../../components/Icon/Expensicons';
 import * as Illustrations from '../../../components/Icon/Illustrations';
 import Section from '../../../components/Section';
-import Navigation from '../../../libs/Navigation/Navigation';
-import ROUTES from '../../../ROUTES';
 import CopyTextToClipboard from '../../../components/CopyTextToClipboard';
 import * as Link from '../../../libs/actions/Link';
 import compose from '../../../libs/compose';
@@ -22,6 +20,7 @@ import * as Policy from '../../../libs/actions/Policy';
 import withFullPolicy from '../withFullPolicy';
 import CONST from '../../../CONST';
 import Button from '../../../components/Button';
+import * as ReimbursementAccount from '../../../libs/actions/ReimbursementAccount';
 
 const propTypes = {
     /** The policy ID currently being configured */
@@ -201,7 +200,7 @@ class WorkspaceReimburseView extends React.Component {
                         </View>
                         <Button
                             text={this.props.translate('workspace.common.bankAccount')}
-                            onPress={() => Navigation.navigate(ROUTES.getWorkspaceBankAccountRoute(this.props.policyID))}
+                            onPress={() => ReimbursementAccount.navigateToBankAccountRoute(this.props.policyID)}
                             icon={Expensicons.Bank}
                             style={[styles.mt4]}
                             iconStyles={[styles.mr5]}

src/pages/workspace/travel/WorkspaceTravelNoVBAView.js

@@ -7,9 +7,8 @@ import withLocalize, {withLocalizePropTypes} from '../../../components/withLocal
 import * as Expensicons from '../../../components/Icon/Expensicons';
 import * as Illustrations from '../../../components/Icon/Illustrations';
 import Section from '../../../components/Section';
-import Navigation from '../../../libs/Navigation/Navigation';
-import ROUTES from '../../../ROUTES';
 import Button from '../../../components/Button';
+import * as ReimbursementAccount from '../../../libs/actions/ReimbursementAccount';
 
 const propTypes = {
     /** The policy ID currently being configured */
@@ -29,7 +28,7 @@ const WorkspaceTravelNoVBAView = props => (
             </View>
             <Button
                 text={props.translate('workspace.common.bankAccount')}
-                onPress={() => Navigation.navigate(ROUTES.getWorkspaceBankAccountRoute(props.policyID))}
+                onPress={() => ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
                 icon={Expensicons.Bank}
                 style={[styles.mt4]}
                 iconStyles={[styles.mr5]}