chore: fix render glitch in mt5 form (deriv-com#29)

* chore: fix render glitch in mt5 form * fix: dispose onfido_ref if any error occurs during onfido token fetching or sdk initialization * fix: add a check to display info message upon onfido initialization
shahzaib-deriv · May 19, 2023 · 1cf15d2 · 1cf15d2
1 parent 05be158
commit 1cf15d2
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 50 deletions.
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
@@ -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<TAPIError>();
-    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<ReturnType<typeof setTimeout>>();
     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<string | { error: TAPIError }> =>
@@ -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}
                 />
             </div>
         </ThemedScrollbars>

diff --git 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<ReturnType<typeof setTimeout>>();
@@ -74,7 +76,7 @@ const OnfidoSdkView = ({
                     />
                 </CSSTransition>
             </div>
-            {is_onfido_disabled && (
+            {is_onfido_disabled && is_onfido_initialized && (
                 <HintBox
                     className='onfido-container__info-message'
                     icon='IcInfoBlue'