Fix App crashes when navigating to enable payments page before logging in

src/pages/EnablePayments/EnablePaymentsPage.js

@@ -1,11 +1,14 @@
+import PropTypes from 'prop-types';
 import React, {useEffect} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
+import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as Wallet from '@userActions/Wallet';
 import CONST from '@src/CONST';
@@ -22,13 +25,20 @@ import userWalletPropTypes from './userWalletPropTypes';
 const propTypes = {
     /** The user's wallet */
     userWallet: userWalletPropTypes,
+
+    /** Indicates whether the app is loading initial data */
+    isLoadingReportData: PropTypes.bool,
+
+    ...withCurrentUserPersonalDetailsPropTypes,
 };
 
 const defaultProps = {
     userWallet: {},
+    isLoadingReportData: true,
+    ...withCurrentUserPersonalDetailsDefaultProps,
 };
 
-function EnablePaymentsPage({userWallet}) {
+function EnablePaymentsPage({userWallet, isLoadingReportData, personalDetails}) {
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
 
@@ -47,7 +57,7 @@ function EnablePaymentsPage({userWallet}) {
         Wallet.openEnablePaymentsPage();
     }, [isOffline, isPendingOnfidoResult, hasFailedOnfido]);
 
-    if (_.isEmpty(userWallet)) {
+    if (_.isEmpty(userWallet) || (isLoadingReportData && _.isEmpty(personalDetails))) {
         return <FullScreenLoadingIndicator />;
     }
 
@@ -94,12 +104,18 @@ EnablePaymentsPage.displayName = 'EnablePaymentsPage';
 EnablePaymentsPage.propTypes = propTypes;
 EnablePaymentsPage.defaultProps = defaultProps;
 
-export default withOnyx({
-    userWallet: {
-        key: ONYXKEYS.USER_WALLET,
+export default compose(
+    withCurrentUserPersonalDetails,
+    withOnyx({
+        userWallet: {
+            key: ONYXKEYS.USER_WALLET,
 
-        // We want to refresh the wallet each time the user attempts to activate the wallet so we won't use the
-        // stored values here.
-        initWithStoredValues: false,
-    },
-})(EnablePaymentsPage);
+            // We want to refresh the wallet each time the user attempts to activate the wallet so we won't use the
+            // stored values here.
+            initWithStoredValues: false,
+        },
+        isLoadingReportData: {
+            key: ONYXKEYS.IS_LOADING_REPORT_DATA,
+        },
+    }),
+)(EnablePaymentsPage);