diff --git a/src/pages/EnablePayments/OnfidoStep.js b/src/pages/EnablePayments/OnfidoStep.js index b7181295ab77..fc856d813683 100644 --- 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 ( - <> - Wallet.updateCurrentStep(CONST.WALLET.STEP.ADDITIONAL_DETAILS)} - /> - - {this.canShowOnfido() ? ( - { - 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, - }), - }); - }} - /> - ) : ( - - )} - - - ); - } + const verifyIdentity = useCallback( + (data) => { + BankAccounts.verifyIdentity({ + onfidoData: JSON.stringify({ + ...data, + applicantID: walletOnfidoData.applicantID, + }), + }); + }, + [walletOnfidoData.applicantID], + ); + + return ( + <> + + + {shouldShowOnfido ? ( + + ) : ( + + )} + + + ); } 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);