diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js index f04d34ba6caf..e0b6b61d4668 100644 --- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js @@ -30,6 +30,7 @@ import * as Expensicons from '../../../../components/Icon/Expensicons'; import ConfirmModal from '../../../../components/ConfirmModal'; import KYCWall from '../../../../components/KYCWall'; import {propTypes, defaultProps} from './paymentsPagePropTypes'; +import {withNetwork} from '../../../../components/OnyxProvider'; class BasePaymentsPage extends React.Component { constructor(props) { @@ -60,12 +61,20 @@ class BasePaymentsPage extends React.Component { } componentDidMount() { - PaymentMethods.getPaymentMethods(); + this.fetchData(); if (this.props.shouldListenForResize) { this.dimensionsSubscription = Dimensions.addEventListener('change', this.setMenuPosition); } } + componentDidUpdate(prevProps) { + if (!prevProps.network.isOffline || this.props.network.isOffline) { + return; + } + + this.fetchData(); + } + componentWillUnmount() { if (!this.props.shouldListenForResize || !this.dimensionsSubscription) { return; @@ -186,6 +195,10 @@ class BasePaymentsPage extends React.Component { throw new Error('Invalid payment method type selected'); } + fetchData() { + PaymentMethods.getPaymentMethods(); + } + /** * Hide the add payment modal */ @@ -432,6 +445,7 @@ BasePaymentsPage.defaultProps = defaultProps; export default compose( withWindowDimensions, withLocalize, + withNetwork(), withOnyx({ betas: { key: ONYXKEYS.BETAS, diff --git a/src/pages/settings/Payments/PaymentsPage/paymentsPagePropTypes.js b/src/pages/settings/Payments/PaymentsPage/paymentsPagePropTypes.js index 5e9da7e3e19a..92158d06204c 100644 --- a/src/pages/settings/Payments/PaymentsPage/paymentsPagePropTypes.js +++ b/src/pages/settings/Payments/PaymentsPage/paymentsPagePropTypes.js @@ -2,6 +2,7 @@ import PropTypes from 'prop-types'; import walletTransferPropTypes from '../walletTransferPropTypes'; import {withLocalizePropTypes} from '../../../../components/withLocalize'; import {windowDimensionsPropTypes} from '../../../../components/withWindowDimensions'; +import networkPropTypes from '../../../../components/networkPropTypes'; const propTypes = { /** Wallet balance transfer props */ @@ -22,6 +23,9 @@ const propTypes = { currentBalance: PropTypes.number, }), + /** Information about the network */ + network: networkPropTypes.isRequired, + ...withLocalizePropTypes, ...windowDimensionsPropTypes,