Fix blank screen when showing the WorkspaceResetBankAccount modal

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) => {
                     </Text>
                 )}
             </ScrollView>
+            {props.reimbursementAccount.shouldShowResetModal && (
+                <WorkspaceResetBankAccountModal
+                    reimbursementAccount={props.reimbursementAccount}
+                />
+            )}
         </ScreenWrapper>
     );
 };

src/pages/ReimbursementAccount/ReimbursementAccountPage.js

@@ -263,13 +263,8 @@ class ReimbursementAccountPage extends React.Component {
             );
         }
 
-        if (this.props.reimbursementAccount.shouldShowResetModal && Boolean(achData.bankAccountID)) {
-            return (
-                <WorkspaceResetBankAccountModal reimbursementAccount={this.props.reimbursementAccount} />
-            );
-        }
-
         // 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
@@ -279,13 +274,20 @@ class ReimbursementAccountPage extends React.Component {
                 || achData.state === BankAccount.STATE.PENDING
             )) {
             return (
-                <ContinueBankAccountSetup
-                    continue={this.continue}
-                    startOver={() => {
-                        this.setState({shouldHideContinueSetupButton: true});
-                        BankAccounts.requestResetFreePlanBankAccount();
-                    }}
-                />
+                <View>
+                    <ContinueBankAccountSetup
+                        continue={this.continue}
+                        startOver={() => {
+                            BankAccounts.requestResetFreePlanBankAccount();
+                        }}
+                    />
+                    {this.props.reimbursementAccount.shouldShowResetModal && (
+                        <WorkspaceResetBankAccountModal
+                            reimbursementAccount={this.props.reimbursementAccount}
+                            onConfirm={() => this.setState({shouldHideContinueSetupButton: true})}
+                        />
+                    )}
+                </View>
             );
         }
 

src/pages/ReimbursementAccount/ValidationStep.js

@@ -27,6 +27,7 @@ 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';
 
 const propTypes = {
@@ -226,6 +227,11 @@ class ValidationStep extends React.Component {
                                 wrapperStyle={[styles.cardMenuItem, styles.mv3]}
                             />
                         </Section>
+                        {this.props.reimbursementAccount.shouldShowResetModal && (
+                            <WorkspaceResetBankAccountModal
+                                reimbursementAccount={this.props.reimbursementAccount}
+                            />
+                        )}
                         {!requiresTwoFactorAuth && (
                             <Enable2FAPrompt />
                         )}

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: null,
+};
+
 const WorkspaceResetBankAccountModal = (props) => {
     const achData = lodashGet(props.reimbursementAccount, 'achData') || {};
     const isInOpenState = achData.state === BankAccount.STATE.OPEN;
@@ -37,7 +45,12 @@ const WorkspaceResetBankAccountModal = (props) => {
             ) : props.translate('workspace.bankAccount.clearProgress')}
             danger
             onCancel={BankAccounts.cancelResetFreePlanBankAccount}
-            onConfirm={() => BankAccounts.resetFreePlanBankAccount(bankAccountID)}
+            onConfirm={() => {
+                BankAccounts.resetFreePlanBankAccount(bankAccountID);
+                if (props.onConfirm) {
+                    props.onConfirm();
+                }
+            }}
             shouldShowCancelButton
             isVisible
         />
@@ -46,5 +59,6 @@ const WorkspaceResetBankAccountModal = (props) => {
 
 WorkspaceResetBankAccountModal.displayName = 'WorkspaceResetBankAccountModal';
 WorkspaceResetBankAccountModal.propTypes = propTypes;
+WorkspaceResetBankAccountModal.defaultProps = defaultProps;
 
 export default withLocalize(WorkspaceResetBankAccountModal);