Merge pull request #28236 from barttom/refactor/16232/migration-Enabl…

…ePaymentsPage-to-function-component
Expensify · Sep 29, 2023 · 5fcc4ae · 5fcc4ae
2 parents 902237d + 37a2c5e
commit 5fcc4ae
Showing 1 changed file with 57 additions and 65 deletions.
diff --git a/src/pages/EnablePayments/EnablePaymentsPage.js b/src/pages/EnablePayments/EnablePaymentsPage.js
@@ -1,14 +1,12 @@
 import _ from 'underscore';
-import React from 'react';
+import React, {useEffect} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import * as Wallet from '../../libs/actions/Wallet';
 import ONYXKEYS from '../../ONYXKEYS';
 import FullScreenLoadingIndicator from '../../components/FullscreenLoadingIndicator';
 import CONST from '../../CONST';
 import userWalletPropTypes from './userWalletPropTypes';
-import {withNetwork} from '../../components/OnyxProvider';
-import networkPropTypes from '../../components/networkPropTypes';
 
 // Steps
 import OnfidoStep from './OnfidoStep';
@@ -17,94 +15,88 @@ import TermsStep from './TermsStep';
 import ActivateStep from './ActivateStep';
 import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import FailedKYC from './FailedKYC';
-import compose from '../../libs/compose';
-import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
+import useLocalize from '../../hooks/useLocalize';
+import useNetwork from '../../hooks/useNetwork';
 
 const propTypes = {
-    /** Information about the network from Onyx */
-    network: networkPropTypes.isRequired,
-
     /** The user's wallet */
     userWallet: userWalletPropTypes,
-
-    ...withLocalizePropTypes,
 };
 
 const defaultProps = {
     userWallet: {},
 };
 
-class EnablePaymentsPage extends React.Component {
-    componentDidMount() {
-        Wallet.openEnablePaymentsPage();
-    }
+function EnablePaymentsPage({userWallet}) {
+    const {translate} = useLocalize();
+    const {isOffline} = useNetwork();
 
-    componentDidUpdate(prevProps) {
-        if (!prevProps.network.isOffline || this.props.network.isOffline) {
+    useEffect(() => {
+        if (isOffline) {
             return;
         }
 
         Wallet.openEnablePaymentsPage();
-    }
+    }, [isOffline]);
 
-    render() {
-        if (_.isEmpty(this.props.userWallet)) {
-            return <FullScreenLoadingIndicator />;
-        }
-
-        return (
-            <ScreenWrapper
-                includeSafeAreaPaddingBottom={false}
-                testID={EnablePaymentsPage.displayName}
-            >
-                {() => {
-                    if (this.props.userWallet.errorCode === CONST.WALLET.ERROR.KYC) {
-                        return (
-                            <>
-                                <HeaderWithBackButton
-                                    title={this.props.translate('additionalDetailsStep.headerTitle')}
-                                    onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET)}
-                                />
-                                <FailedKYC />
-                            </>
-                        );
-                    }
-
-                    if (this.props.userWallet.shouldShowWalletActivationSuccess) {
-                        return <ActivateStep userWallet={this.props.userWallet} />;
-                    }
-
-                    const currentStep = this.props.userWallet.currentStep || CONST.WALLET.STEP.ADDITIONAL_DETAILS;
+    if (_.isEmpty(userWallet)) {
+        return <FullScreenLoadingIndicator />;
+    }
 
+    return (
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID={EnablePaymentsPage.displayName}
+        >
+            {() => {
+                if (userWallet.errorCode === CONST.WALLET.ERROR.KYC) {
                     return (
                         <>
-                            {(currentStep === CONST.WALLET.STEP.ADDITIONAL_DETAILS || currentStep === CONST.WALLET.STEP.ADDITIONAL_DETAILS_KBA) && <AdditionalDetailsStep />}
-                            {currentStep === CONST.WALLET.STEP.ONFIDO && <OnfidoStep />}
-                            {currentStep === CONST.WALLET.STEP.TERMS && <TermsStep />}
-                            {currentStep === CONST.WALLET.STEP.ACTIVATE && <ActivateStep userWallet={this.props.userWallet} />}
+                            <HeaderWithBackButton
+                                title={translate('additionalDetailsStep.headerTitle')}
+                                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET)}
+                            />
+                            <FailedKYC />
                         </>
                     );
-                }}
-            </ScreenWrapper>
-        );
-    }
+                }
+
+                if (userWallet.shouldShowWalletActivationSuccess) {
+                    return <ActivateStep userWallet={userWallet} />;
+                }
+
+                const currentStep = userWallet.currentStep || CONST.WALLET.STEP.ADDITIONAL_DETAILS;
+
+                switch (currentStep) {
+                    case CONST.WALLET.STEP.ADDITIONAL_DETAILS:
+                    case CONST.WALLET.STEP.ADDITIONAL_DETAILS_KBA:
+                        return <AdditionalDetailsStep />;
+                    case CONST.WALLET.STEP.ONFIDO:
+                        return <OnfidoStep />;
+                    case CONST.WALLET.STEP.TERMS:
+                        return <TermsStep />;
+                    case CONST.WALLET.STEP.ACTIVATE:
+                        return <ActivateStep userWallet={userWallet} />;
+                    default:
+                        return null;
+                }
+            }}
+        </ScreenWrapper>
+    );
 }
 
+EnablePaymentsPage.displayName = 'EnablePaymentsPage';
 EnablePaymentsPage.propTypes = propTypes;
 EnablePaymentsPage.defaultProps = defaultProps;
 
-export default compose(
-    withLocalize,
-    withOnyx({
-        userWallet: {
-            key: ONYXKEYS.USER_WALLET,
+export default 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,
-        },
-    }),
-    withNetwork(),
-)(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,
+    },
+})(EnablePaymentsPage);