diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js index b5ef196ff100..d81900e666f1 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js @@ -19,6 +19,8 @@ import styles from '../../styles/styles'; import KeyboardAvoidingView from '../../components/KeyboardAvoidingView'; import getPlaidOAuthReceivedRedirectURI from '../../libs/getPlaidOAuthReceivedRedirectURI'; import Text from '../../components/Text'; +import {withNetwork} from '../../components/OnyxProvider'; +import networkPropTypes from '../../components/networkPropTypes'; // Steps import BankAccountStep from './BankAccountStep'; @@ -39,6 +41,9 @@ const propTypes = { /** ACH data for the withdrawal account actively being set up */ reimbursementAccount: reimbursementAccountPropTypes, + /** Information about the network */ + network: networkPropTypes.isRequired, + /** Current session for the user */ session: PropTypes.shape({ /** User login */ @@ -70,14 +75,13 @@ const defaultProps = { class ReimbursementAccountPage extends React.Component { componentDidMount() { - // We can specify a step to navigate to by using route params when the component mounts. - const stepToOpen = this.getStepToOpenFromRouteParams(); - - // If we are trying to navigate to `/bank-account/new` and we already have a bank account then don't allow returning to `/new` - BankAccounts.fetchFreePlanVerifiedBankAccount(stepToOpen !== CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT ? stepToOpen : ''); + this.fetchData(); } componentDidUpdate(prevProps) { + if (prevProps.network.isOffline && !this.props.network.isOffline) { + this.fetchData(); + } const currentStep = lodashGet( this.props, 'reimbursementAccount.achData.currentStep', @@ -144,6 +148,15 @@ class ReimbursementAccountPage extends React.Component { } } + fetchData() { + // We can specify a step to navigate to by using route params when the component mounts. + // We want to use the same stepToOpen variable when the network state changes because we can be redirected to a different step when the account refreshes. + const stepToOpen = this.getStepToOpenFromRouteParams(); + + // If we are trying to navigate to `/bank-account/new` and we already have a bank account then don't allow returning to `/new` + BankAccounts.fetchFreePlanVerifiedBankAccount(stepToOpen !== CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT ? stepToOpen : ''); + } + render() { if (!Permissions.canUseFreePlan(this.props.betas)) { Log.info('Not showing new bank account page because user is not on free plan beta'); @@ -243,6 +256,7 @@ ReimbursementAccountPage.propTypes = propTypes; ReimbursementAccountPage.defaultProps = defaultProps; export default compose( + withNetwork(), withOnyx({ reimbursementAccount: { key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,