diff --git a/packages/account/src/Sections/Verification/ProofOfIdentity/onfido-sdk-view-container.tsx b/packages/account/src/Sections/Verification/ProofOfIdentity/onfido-sdk-view-container.tsx index 41de5fc78ca1..8cd8a3d03f06 100644 --- a/packages/account/src/Sections/Verification/ProofOfIdentity/onfido-sdk-view-container.tsx +++ b/packages/account/src/Sections/Verification/ProofOfIdentity/onfido-sdk-view-container.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useCallback } from 'react'; import countries from 'i18n-iso-countries'; import * as Cookies from 'js-cookie'; import { init, SdkHandle, SdkResponse, SupportedLanguages } from 'onfido-sdk-ui'; @@ -44,13 +44,13 @@ const OnfidoSdkViewContainer = ({ height, }: TOnfidoSdkViewContainer) => { const [api_error, setAPIError] = React.useState(); - const [onfido_service_token, setOnfidoToken] = React.useState(''); const [missing_personal_details, setMissingPersonalDetails] = React.useState(''); const [is_status_loading, setStatusLoading] = React.useState(true); const [retry_count, setRetryCount] = React.useState(0); - const [is_onfido_disabled, setIsOnfidoDisabled] = React.useState(false); + const [is_onfido_disabled, setIsOnfidoDisabled] = React.useState(true); const token_timeout_ref = React.useRef>(); const [is_confirmed, setIsConfirmed] = React.useState(false); + const [is_onfido_initialized, setIsOnfidoInitialized] = React.useState(false); // IDV country code - Alpha ISO2. Onfido country code - Alpha ISO3 // Ensures that any form of country code passed here is supported. const onfido_country_code = @@ -86,50 +86,55 @@ const OnfidoSdkViewContainer = ({ [handleViewComplete] ); - const initOnfido = React.useCallback(async () => { - try { - onfido_init.current = await init({ - containerId: 'onfido', - language: { - locale: (getLanguage().toLowerCase() as SupportedLanguages) || 'en', - phrases: getOnfidoPhrases(), - mobilePhrases: getOnfidoPhrases(), - }, - token: onfido_service_token, - useModal: false, - useMemoryHistory: true, - onComplete, - steps: [ - { - type: 'document', - options: { - documentTypes: { - passport: onfido_documents.some(doc => /Passport/g.test(doc)), - driving_licence: onfido_documents.some(doc => /Driving Licence/g.test(doc)) - ? { - country: onfido_country_code, - } - : false, - national_identity_card: onfido_documents.some(doc => - /National Identity Card/g.test(doc) - ) - ? { - country: onfido_country_code, - } - : false, + const initOnfido = React.useCallback( + async (service_token: string) => { + if (!service_token) return; + try { + onfido_init.current = await init({ + containerId: 'onfido', + language: { + locale: (getLanguage().toLowerCase() as SupportedLanguages) || 'en', + phrases: getOnfidoPhrases(), + mobilePhrases: getOnfidoPhrases(), + }, + token: service_token, + useModal: false, + useMemoryHistory: true, + onComplete, + steps: [ + { + type: 'document', + options: { + documentTypes: { + passport: onfido_documents.some(doc => /Passport/g.test(doc)), + driving_licence: onfido_documents.some(doc => /Driving Licence/g.test(doc)) + ? { + country: onfido_country_code, + } + : false, + national_identity_card: onfido_documents.some(doc => + /National Identity Card/g.test(doc) + ) + ? { + country: onfido_country_code, + } + : false, + }, + hideCountrySelection: true, }, - hideCountrySelection: true, }, - }, - 'face', - ], - }); - } catch (err) { - setAPIError(err as TAPIError); - } finally { - setIsOnfidoDisabled(true); - } - }, [onfido_service_token, onComplete, onfido_documents, onfido_country_code]); + 'face', + ], + }); + setIsOnfidoInitialized(true); + } catch (err) { + setAPIError(err as TAPIError); + setIsOnfidoDisabled(true); + onfido_init.current = undefined; + } + }, + [onComplete, onfido_documents, onfido_country_code] + ); const getOnfidoServiceToken = React.useCallback( (): Promise => @@ -179,21 +184,22 @@ const OnfidoSdkViewContainer = ({ } }; - const onConfirm = () => { + const onConfirm = useCallback(() => { setIsConfirmed(true); setIsOnfidoDisabled(false); - }; + }, []); React.useEffect(() => { const fetchServiceToken = () => { + if (onfido_init.current) return; getOnfidoServiceToken().then(response_token => { if (typeof response_token !== 'string' && response_token?.error) { handleError(response_token.error); setStatusLoading(false); setRetryCount(retry_count + 1); + onfido_init.current = undefined; } else if (typeof response_token === 'string') { - setOnfidoToken(response_token); - initOnfido().then(() => { + initOnfido(response_token).then(() => { setStatusLoading(false); }); } @@ -259,6 +265,7 @@ const OnfidoSdkViewContainer = ({ is_onfido_disabled={is_onfido_disabled} is_confirmed={is_confirmed} is_onfido_container_hidden={!!component_to_load} + is_onfido_initialized={is_onfido_initialized} /> diff --git a/packages/account/src/Sections/Verification/ProofOfIdentity/onfido-sdk-view.tsx b/packages/account/src/Sections/Verification/ProofOfIdentity/onfido-sdk-view.tsx index a3653cdce09c..69da8d9b731f 100644 --- a/packages/account/src/Sections/Verification/ProofOfIdentity/onfido-sdk-view.tsx +++ b/packages/account/src/Sections/Verification/ProofOfIdentity/onfido-sdk-view.tsx @@ -10,6 +10,7 @@ type TOnfidoSdkView = { onfido_element_id?: string; is_confirmed: boolean; data_testid?: string; + is_onfido_initialized?: boolean; }; const OnfidoSdkView = ({ @@ -18,6 +19,7 @@ const OnfidoSdkView = ({ onfido_element_id = 'onfido', is_confirmed, data_testid, + is_onfido_initialized, }: TOnfidoSdkView) => { const [is_status_message_visible, setIsStatusMessageVisible] = React.useState(false); const transition_in_timeout_ref = React.useRef>(); @@ -74,7 +76,7 @@ const OnfidoSdkView = ({ /> - {is_onfido_disabled && ( + {is_onfido_disabled && is_onfido_initialized && (