Merge pull request #27784 from adhorodyski/16235-migrate-onfido-step

Migrate OnfidoStep.js to a functional component
Expensify · Sep 22, 2023 · 8372336 · 8372336
2 parents 887c7f8 + 4c5c73c
commit 8372336
Showing 1 changed file with 58 additions and 55 deletions.
diff --git a/src/pages/EnablePayments/OnfidoStep.js b/src/pages/EnablePayments/OnfidoStep.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useCallback} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import Onfido from '../../components/Onfido';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -7,8 +7,7 @@ import Navigation from '../../libs/Navigation/Navigation';
 import CONST from '../../CONST';
 import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import * as Wallet from '../../libs/actions/Wallet';
-import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
-import compose from '../../libs/compose';
+import useLocalize from '../../hooks/useLocalize';
 import Growl from '../../libs/Growl';
 import OnfidoPrivacy from './OnfidoPrivacy';
 import walletOnfidoDataPropTypes from './walletOnfidoDataPropTypes';
@@ -18,8 +17,6 @@ import ROUTES from '../../ROUTES';
 const propTypes = {
     /** Stores various information used to build the UI and call any APIs */
     walletOnfidoData: walletOnfidoDataPropTypes,
-
-    ...withLocalizePropTypes,
 };
 
 const defaultProps = {
@@ -29,60 +26,66 @@ const defaultProps = {
     },
 };
 
-class OnfidoStep extends React.Component {
-    /**
-     * @returns {boolean|*}
-     */
-    canShowOnfido() {
-        return this.props.walletOnfidoData.hasAcceptedPrivacyPolicy && !this.props.walletOnfidoData.isLoading && !this.props.walletOnfidoData.error && this.props.walletOnfidoData.sdkToken;
-    }
+function OnfidoStep({walletOnfidoData}) {
+    const {translate} = useLocalize();
+
+    const shouldShowOnfido = walletOnfidoData.hasAcceptedPrivacyPolicy && !walletOnfidoData.isLoading && !walletOnfidoData.error && walletOnfidoData.sdkToken;
+
+    const goBack = useCallback(() => {
+        Navigation.goBack(ROUTES.HOME);
+    }, []);
+
+    const goToPreviousStep = useCallback(() => {
+        Wallet.updateCurrentStep(CONST.WALLET.STEP.ADDITIONAL_DETAILS);
+    }, []);
+
+    const reportError = useCallback(() => {
+        Growl.error(translate('onfidoStep.genericError'), 10000);
+    }, [translate]);
 
-    render() {
-        return (
-            <>
-                <HeaderWithBackButton
-                    title={this.props.translate('onfidoStep.verifyIdentity')}
-                    onBackButtonPress={() => Wallet.updateCurrentStep(CONST.WALLET.STEP.ADDITIONAL_DETAILS)}
-                />
-                <FullPageOfflineBlockingView>
-                    {this.canShowOnfido() ? (
-                        <Onfido
-                            sdkToken={this.props.walletOnfidoData.sdkToken}
-                            onError={() => {
-                                Growl.error(this.props.translate('onfidoStep.genericError'), 10000);
-                            }}
-                            onUserExit={() => {
-                                Navigation.goBack(ROUTES.HOME);
-                            }}
-                            onSuccess={(data) => {
-                                BankAccounts.verifyIdentity({
-                                    onfidoData: JSON.stringify({
-                                        ...data,
-                                        applicantID: this.props.walletOnfidoData.applicantID,
-                                    }),
-                                });
-                            }}
-                        />
-                    ) : (
-                        <OnfidoPrivacy walletOnfidoData={this.props.walletOnfidoData} />
-                    )}
-                </FullPageOfflineBlockingView>
-            </>
-        );
-    }
+    const verifyIdentity = useCallback(
+        (data) => {
+            BankAccounts.verifyIdentity({
+                onfidoData: JSON.stringify({
+                    ...data,
+                    applicantID: walletOnfidoData.applicantID,
+                }),
+            });
+        },
+        [walletOnfidoData.applicantID],
+    );
+
+    return (
+        <>
+            <HeaderWithBackButton
+                title={translate('onfidoStep.verifyIdentity')}
+                onBackButtonPress={goToPreviousStep}
+            />
+            <FullPageOfflineBlockingView>
+                {shouldShowOnfido ? (
+                    <Onfido
+                        sdkToken={walletOnfidoData.sdkToken}
+                        onUserExit={goBack}
+                        onError={reportError}
+                        onSuccess={verifyIdentity}
+                    />
+                ) : (
+                    <OnfidoPrivacy walletOnfidoData={walletOnfidoData} />
+                )}
+            </FullPageOfflineBlockingView>
+        </>
+    );
 }
 
 OnfidoStep.propTypes = propTypes;
 OnfidoStep.defaultProps = defaultProps;
+OnfidoStep.displayName = 'OnfidoStep';
 
-export default compose(
-    withLocalize,
-    withOnyx({
-        walletOnfidoData: {
-            key: ONYXKEYS.WALLET_ONFIDO,
+export default withOnyx({
+    walletOnfidoData: {
+        key: ONYXKEYS.WALLET_ONFIDO,
 
-            // Let's get a new onfido token each time the user hits this flow (as it should only be once)
-            initWithStoredValues: false,
-        },
-    }),
-)(OnfidoStep);
+        // Let's get a new onfido token each time the user hits this flow (as it should only be once)
+        initWithStoredValues: false,
+    },
+})(OnfidoStep);