Fix blank screen when showing the WorkspaceResetBankAccount modal

src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.js

@@ -25,7 +25,7 @@ function resetFreePlanBankAccount(bankAccountID) {
         {
             optimisticData: [
                 {
-                    onyxMethod: 'set',
+                    onyxMethod: CONST.ONYX.METHOD.SET,
                     key: ONYXKEYS.ONFIDO_TOKEN,
                     value: '',
                 },
@@ -44,12 +44,31 @@ function resetFreePlanBankAccount(bankAccountID) {
                     key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
                     value: ReimbursementAccountProps.reimbursementAccountDefaultProps,
                 },
+                {
+                    onyxMethod: CONST.ONYX.METHOD.MERGE,
+                    key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
+                    value: {isLoading: true},
+                },
                 {
                     onyxMethod: CONST.ONYX.METHOD.SET,
                     key: ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT,
                     value: {},
                 },
             ],
+            successData: [
+                {
+                    onyxMethod: CONST.ONYX.METHOD.MERGE,
+                    key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
+                    value: {isLoading: false},
+                },
+            ],
+            failureData: [
+                {
+                    onyxMethod: CONST.ONYX.METHOD.MERGE,
+                    key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
+                    value: {isLoading: false},
+                },
+            ],
         });
 }
 

src/pages/ReimbursementAccount/ContinueBankAccountSetup.js

@@ -18,12 +18,18 @@ import ScreenWrapper from '../../components/ScreenWrapper';
 import Section from '../../components/Section';
 import Text from '../../components/Text';
 import withPolicy from '../workspace/withPolicy';
+import * as ReimbursementAccountProps from './reimbursementAccountPropTypes';
+import WorkspaceResetBankAccountModal from '../workspace/WorkspaceResetBankAccountModal';
+import * as BankAccounts from '../../libs/actions/BankAccounts';
 
 const propTypes = {
+    /** Bank account currently in setup */
+    reimbursementAccount: ReimbursementAccountProps.reimbursementAccountPropTypes.isRequired,
+
     /** Callback to continue to the next step of the setup */
     continue: PropTypes.func.isRequired,
 
-    /** Callback to start over the setup */
+    /** Callback to reset the bank account */
     startOver: PropTypes.func.isRequired,
 
     /** Policy values needed in the component */
@@ -67,13 +73,20 @@ const ContinueBankAccountSetup = props => (
                     <MenuItem
                         title={props.translate('workspace.bankAccount.startOver')}
                         icon={Expensicons.RotateLeft}
-                        onPress={props.startOver}
+                        onPress={() => BankAccounts.requestResetFreePlanBankAccount()}
                         shouldShowRightIcon
                         wrapperStyle={[styles.cardMenuItem]}
                     />
                 </Section>
             </ScrollView>
         </FullPageNotFoundView>
+
+        {props.reimbursementAccount.shouldShowResetModal && (
+            <WorkspaceResetBankAccountModal
+                reimbursementAccount={props.reimbursementAccount}
+                onConfirm={props.startOver}
+            />
+        )}
     </ScreenWrapper>
 );
 

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

@@ -29,7 +29,6 @@ import EnableStep from './EnableStep';
 import ROUTES from '../../ROUTES';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import * as ReimbursementAccountProps from './reimbursementAccountPropTypes';
-import WorkspaceResetBankAccountModal from '../workspace/WorkspaceResetBankAccountModal';
 import reimbursementAccountDraftPropTypes from './ReimbursementAccountDraftPropTypes';
 import * as ReimbursementAccountUtils from '../../libs/ReimbursementAccountUtils';
 
@@ -263,13 +262,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
@@ -280,11 +274,9 @@ class ReimbursementAccountPage extends React.Component {
             )) {
             return (
                 <ContinueBankAccountSetup
+                    reimbursementAccount={this.props.reimbursementAccount}
                     continue={this.continue}
-                    startOver={() => {
-                        this.setState({shouldHideContinueSetupButton: true});
-                        BankAccounts.requestResetFreePlanBankAccount();
-                    }}
+                    startOver={() => this.setState({shouldHideContinueSetupButton: true})}
                 />
             );
         }

src/pages/ReimbursementAccount/ValidationStep.js

@@ -27,7 +27,9 @@ 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';
+import ScreenWrapper from '../../components/ScreenWrapper';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -128,7 +130,7 @@ class ValidationStep extends React.Component {
         const requiresTwoFactorAuth = lodashGet(this.props, 'account.requiresTwoFactorAuth');
 
         return (
-            <View style={[styles.flex1, styles.justifyContentBetween]}>
+            <ScreenWrapper style={[styles.flex1, styles.justifyContentBetween]} includeSafeAreaPaddingBottom={false}>
                 <HeaderWithCloseButton
                     title={isVerifying ? this.props.translate('validationStep.headerTitle') : this.props.translate('workspace.common.testTransactions')}
                     stepCounter={{step: 5, total: 5}}
@@ -226,12 +228,17 @@ class ValidationStep extends React.Component {
                                 wrapperStyle={[styles.cardMenuItem, styles.mv3]}
                             />
                         </Section>
+                        {this.props.reimbursementAccount.shouldShowResetModal && (
+                            <WorkspaceResetBankAccountModal
+                                reimbursementAccount={this.props.reimbursementAccount}
+                            />
+                        )}
                         {!requiresTwoFactorAuth && (
                             <Enable2FAPrompt />
                         )}
                     </ScrollView>
                 )}
-            </View>
+            </ScreenWrapper>
         );
     }
 }

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