[WALL] aum / WALL-4618 / poi-nimc-slip-changes-for-nigerian-clients (b…

…inary-com#16575) * feat: changes for showing Onfido for ng clients in manual flows * fix: correct the payload data for manual nimc_slip upload * fix: issue with VerifyPersonal details checkbox * fix: VerifyPersonalDetails disappears before showing error message * fix: add translation for onfidos back button * fix: sonarcloud issue
aizad-deriv · Aug 30, 2024 · 6328733 · 6328733
1 parent ef750d5
commit 6328733
Show file tree

Hide file tree

Showing 12 changed files with 108 additions and 52 deletions.
diff --git a/packages/api-v2/src/hooks/usePOI.ts b/packages/api-v2/src/hooks/usePOI.ts
@@ -28,15 +28,30 @@ const usePOI = () => {
         const services = authentication_data?.identity?.services;
         const idv_submission_left = services?.idv?.submissions_left ?? 0;
         const onfido_submission_left = services?.onfido?.submissions_left ?? 0;
+        const is_ng_client = user_country_code === 'ng'; // flag for checking if client is from Nigeria
         if (is_idv_supported && idv_submission_left && !authentication_data?.is_idv_disallowed) {
             return {
                 country_code: user_country_code,
                 service: 'idv',
                 status: services?.idv?.status,
                 submission_left: idv_submission_left,
                 document_supported: matching_residence_data?.identity?.services?.idv?.documents_supported,
+                ...(is_ng_client &&
+                    is_onfido_supported &&
+                    onfido_submission_left && {
+                        onfido_supported: ['passport', 'driving-license', 'identity-card'],
+                    }),
             };
         } else if (is_onfido_supported && onfido_submission_left) {
+            if (is_ng_client) {
+                return {
+                    country_code: user_country_code,
+                    service: 'manual',
+                    onfido_supported: ['passport', 'driving-license', 'identity-card'],
+                    status: services?.manual?.status,
+                };
+            }
+
             return {
                 country_code: user_country_code,
                 service: 'onfido',

diff --git a/packages/api-v2/src/hooks/useSettings.ts b/packages/api-v2/src/hooks/useSettings.ts
@@ -12,10 +12,13 @@ type TSetSettingsPayload = NonNullable<
 const useSettings = () => {
     const { isSuccess } = useAuthorize();
     const { data, ...rest } = useQuery('get_settings', { options: { enabled: isSuccess } });
-    const { mutate, ...mutate_rest } = useMutation('set_settings', { onSuccess: () => invalidate('get_settings') });
+    const { mutate, mutateAsync, ...mutate_rest } = useMutation('set_settings', {
+        onSuccess: () => invalidate('get_settings'),
+    });
     const invalidate = useInvalidateQuery();
 
     const update = useCallback((payload: TSetSettingsPayload) => mutate({ payload }), [mutate]);
+    const updateAsync = useCallback((payload: TSetSettingsPayload) => mutateAsync({ payload }), [mutateAsync]);
 
     // Add additional information to the settings response.
     const modified_settings = useMemo(() => {
@@ -38,6 +41,8 @@ const useSettings = () => {
         data: modified_settings,
         /** Function to update user settings */
         update,
+        /** Function to update user settings synchronously */
+        updateAsync,
         /** The mutation related information */
         mutation: mutate_rest,
         ...rest,

diff --git a/packages/wallets/src/features/accounts/modules/DocumentService/components/Onfido/Onfido.scss b/packages/wallets/src/features/accounts/modules/DocumentService/components/Onfido/Onfido.scss
@@ -28,6 +28,15 @@
         }
     }
 
+    &__back-button {
+        width: fit-content;
+        display: flex;
+        gap: 1rem;
+        align-items: center;
+        margin: 0.8rem 0 0 0.8rem;
+        cursor: pointer;
+    }
+
     &__wrapper {
         position: relative;
         min-width: 51.2rem;

diff --git a/packages/wallets/src/features/accounts/modules/DocumentService/components/Onfido/Onfido.tsx b/packages/wallets/src/features/accounts/modules/DocumentService/components/Onfido/Onfido.tsx
@@ -2,17 +2,19 @@ import React, { useEffect } from 'react';
 import classNames from 'classnames';
 import { Formik, FormikValues } from 'formik';
 import { useOnfido } from '@deriv/api-v2';
-import { useTranslations } from '@deriv-com/translations';
-import { Loader } from '@deriv-com/ui';
+import { LegacyArrowLeft2pxIcon } from '@deriv/quill-icons';
+import { Localize, useTranslations } from '@deriv-com/translations';
+import { Loader, Text } from '@deriv-com/ui';
 import { InlineMessage, ModalStepWrapper } from '../../../../../../components';
 import { useVerifyPersonalDetails, VerifyPersonalDetails } from '../VerifyPersonalDetails';
 import './Onfido.scss';
 
 type TOnfidoProps = {
+    onClickBack?: VoidFunction;
     onCompletion?: VoidFunction;
 };
 
-const Onfido: React.FC<TOnfidoProps> = ({ onCompletion }) => {
+const Onfido: React.FC<TOnfidoProps> = ({ onClickBack, onCompletion }) => {
     const { localize } = useTranslations();
     const { data: onfidoData, isLoading: isOnfidoLoading } = useOnfido();
     const { hasSubmitted: isOnfidoSubmissionSuccessful, onfidoContainerId } = onfidoData;
@@ -39,7 +41,15 @@ const Onfido: React.FC<TOnfidoProps> = ({ onCompletion }) => {
     if (isLoading) return <Loader />;
 
     return (
-        <ModalStepWrapper title={localize('Add a real MT5 account')}>
+        <ModalStepWrapper disableAnimation={!!onClickBack} title={localize('Add a real MT5 account')}>
+            {onClickBack && (
+                <button className='wallets-onfido__back-button' onClick={onClickBack}>
+                    <LegacyArrowLeft2pxIcon iconSize='xs' />
+                    <Text weight='bold'>
+                        <Localize i18n_default_text='Back' />
+                    </Text>
+                </button>
+            )}
             <div className='wallets-onfido'>
                 {!isPersonalDetailsSubmitted && (
                     <Formik initialValues={initialPersonalDetailsValues} onSubmit={onSubmit}>

diff --git a/...ounts/modules/DocumentService/components/VerifyPersonalDetails/VerifyPersonalDetails.scss b/...ounts/modules/DocumentService/components/VerifyPersonalDetails/VerifyPersonalDetails.scss
@@ -91,4 +91,8 @@
             padding: 0 0 1.6rem;
         }
     }
+
+    &-error-message {
+        margin-top: 0.8rem;
+    }
 }
diff --git a/...counts/modules/DocumentService/components/VerifyPersonalDetails/VerifyPersonalDetails.tsx b/...counts/modules/DocumentService/components/VerifyPersonalDetails/VerifyPersonalDetails.tsx
@@ -35,6 +35,12 @@ const VerifyPersonalDetails: React.FC<TVerifyPersonalDetailsProps> = ({ error, o
         }
     }, [onVerification, values.arePersonalDetailsVerified]);
 
+    useEffect(() => {
+        if (error) {
+            setFieldValue('arePersonalDetailsVerified', false);
+        }
+    }, [error, setFieldValue]);
+
     const handleTNCChecked = (event: React.ChangeEvent<HTMLInputElement>) => {
         setFieldValue('arePersonalDetailsVerified', event.target.checked);
     };

diff --git a/...etails/components/VerifyPersonalDetailsErrorMessage/VerifyPersonalDetailsErrorMessage.tsx b/...etails/components/VerifyPersonalDetailsErrorMessage/VerifyPersonalDetailsErrorMessage.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { TSocketError } from '@deriv/api-v2/types';
 import { Localize } from '@deriv-com/translations';
+import { Text } from '@deriv-com/ui';
 import { InlineMessage, WalletText } from '../../../../../../../../components';
 import useDevice from '../../../../../../../../hooks/useDevice';
 
@@ -15,20 +16,22 @@ const VerifyPersonalDetailsErrorMessage: React.FC<TErrorMessageProps> = ({ error
 
     if (error === 'DuplicateAccount') {
         return (
-            <InlineMessage size={!isDesktop ? 'md' : 'sm'} type='error'>
-                <WalletText as='span'>
-                    <Localize
-                        components={[
-                            <button
-                                className='wallets-link wallets-link__variant--bold'
-                                key={0}
-                                onClick={handleOnClickLink}
-                            />,
-                        ]}
-                        i18n_default_text='An account with these details already exists. Please make sure the details you entered are correct as only one real account is allowed per client. If this is a mistake, contact us via <0>live chat</0>.'
-                    />
-                </WalletText>
-            </InlineMessage>
+            <div className='wallets-verify-personal-details-error-message'>
+                <InlineMessage size={!isDesktop ? 'md' : 'sm'} type='error'>
+                    <Text as='span' size='sm'>
+                        <Localize
+                            components={[
+                                <button
+                                    className='wallets-link wallets-link__variant--bold'
+                                    key={0}
+                                    onClick={handleOnClickLink}
+                                />,
+                            ]}
+                            i18n_default_text='An account with these details already exists. Please make sure the details you entered are correct as only one real account is allowed per client. If this is a mistake, contact us via <0>live chat</0>.'
+                        />
+                    </Text>
+                </InlineMessage>
+            </div>
         );
     }
 

diff --git a/...odules/DocumentService/components/VerifyPersonalDetails/hooks/useVerifyPersonalDetails.ts b/...odules/DocumentService/components/VerifyPersonalDetails/hooks/useVerifyPersonalDetails.ts
@@ -1,50 +1,50 @@
 import { useState } from 'react';
 import { FormikValues } from 'formik';
 import { useSettings } from '@deriv/api-v2';
+import { TSocketError } from '@deriv/api-v2/types';
 import { getFormattedDateString } from '../../../../../../../utils/utils';
 import type { TVerifyPersonalDetailsValues } from '../types';
 
 const useVerifyPersonalDetails = () => {
-    const { data: settings, error, isError, isLoading, isSuccess, update } = useSettings();
+    const { data: settings, isLoading, updateAsync } = useSettings();
     const [isSubmissionInitiated, setIsSubmissionInitiated] = useState(false);
     const [isSubmitted, setIsSubmitted] = useState(false);
+    const [error, setError] = useState<TSocketError<'set_settings'>>();
+
+    const formattedDateOfBirth = getFormattedDateString(new Date((settings.date_of_birth ?? 0) * 1000));
 
     const initialValues = {
-        arePersonalDetailsVerified: false,
-        dateOfBirth: getFormattedDateString(new Date((settings.date_of_birth ?? 0) * 1000)),
+        dateOfBirth: formattedDateOfBirth,
         firstName: settings.first_name,
         lastName: settings.last_name,
     };
 
     const submit = (values: FormikValues | TVerifyPersonalDetailsValues) => {
         const isDirty =
-            settings.date_of_birth !== values.dateOfBirth ||
+            formattedDateOfBirth !== values.dateOfBirth ||
             settings.first_name !== values.firstName ||
             settings.last_name !== values.lastName;
 
         if (isDirty) {
-            update({
+            setIsSubmissionInitiated(true);
+            updateAsync({
                 date_of_birth: values.dateOfBirth,
                 first_name: values.firstName,
                 last_name: values.lastName,
-            });
-            setIsSubmissionInitiated(true);
+            })
+                .then(() => {
+                    setIsSubmitted(true);
+                    setIsSubmissionInitiated(false);
+                })
+                .catch(err => {
+                    setIsSubmissionInitiated(false);
+                    setError(err as TSocketError<'set_settings'>);
+                });
         } else {
             setIsSubmitted(true);
         }
     };
 
-    // hasSubmissionInitiated is used for differentiating initial call's success
-    // from submission call's success as useSetting hook does not provide such difference.
-    if (isSuccess && isSubmissionInitiated) {
-        setIsSubmitted(true);
-        setIsSubmissionInitiated(false);
-    }
-
-    if (isError) {
-        setIsSubmissionInitiated(false);
-    }
-
     return {
         error: error?.error,
         initialValues,

diff --git a/...ntService/components/VerifyPersonalDetails/utils/verifyPersonalDetailsValidationSchema.ts b/...ntService/components/VerifyPersonalDetails/utils/verifyPersonalDetailsValidationSchema.ts
@@ -2,7 +2,7 @@ import * as Yup from 'yup';
 import { TTranslations } from '../../../../../../../types';
 
 export const getValidateArePersonalDetailsVerified = (value: boolean, localize: TTranslations['localize']) => {
-    if (!value) return localize('Please verify personal details to proceed.');
+    if (value === false) return localize('Please verify personal details to proceed.');
 };
 
 export const getDateOfBirthValidator = (localize: TTranslations['localize']) =>

diff --git a/packages/wallets/src/features/accounts/modules/ManualService/ManualService.tsx b/packages/wallets/src/features/accounts/modules/ManualService/ManualService.tsx
@@ -1,9 +1,10 @@
 import React, { useState } from 'react';
-import { useSettings } from '@deriv/api-v2';
+import { usePOI, useSettings } from '@deriv/api-v2';
 import { useTranslations } from '@deriv-com/translations';
 import { Loader } from '@deriv-com/ui';
 import { ModalStepWrapper } from '../../../../components';
 import { THooks } from '../../../../types';
+import { Onfido } from '../DocumentService/components';
 import { DocumentSelection } from './components';
 import { getManualDocumentsMapper, TManualDocumentType } from './utils';
 
@@ -27,7 +28,10 @@ const SelectedManualDocument: React.FC<TSelectedManualDocumentProps> = ({
     selection,
 }) => {
     const { localize } = useTranslations();
-    const SelectedDocument = getManualDocumentsMapper(localize)[selection].component;
+    const { data: poiData } = usePOI();
+    const SelectedDocument = poiData?.current.onfido_supported?.includes(selection)
+        ? Onfido
+        : getManualDocumentsMapper(localize)[selection].component;
 
     return (
         <SelectedDocument

diff --git a/...eatures/accounts/modules/ManualService/components/DocumentSelection/DocumentSelection.tsx b/...eatures/accounts/modules/ManualService/components/DocumentSelection/DocumentSelection.tsx
@@ -12,7 +12,7 @@ type TProps = {
 
 const DocumentSelection: React.FC<TProps> = ({ onSelectDocument }) => {
     const { localize } = useTranslations();
-    const { data } = useSettings();
+    const { data: settings } = useSettings();
 
     const documents = getManualDocumentsMapper(localize);
 
@@ -24,7 +24,7 @@ const DocumentSelection: React.FC<TProps> = ({ onSelectDocument }) => {
                 </WalletText>
                 {Object.keys(documents).map(document => {
                     const { countries, description, icon, title } = documents[document];
-                    if (countries && !countries.includes(data?.country_code ?? '')) {
+                    if (countries && !countries.includes(settings?.country_code ?? '')) {
                         return null;
                     }
                     return (

diff --git a/...tures/accounts/modules/ManualService/components/NIMCSlipUpload/hooks/useNIMCSlipUpload.ts b/...tures/accounts/modules/ManualService/components/NIMCSlipUpload/hooks/useNIMCSlipUpload.ts
@@ -42,27 +42,27 @@ const useNIMCSlipUpload = (documentIssuingCountryCode: THooks.AccountSettings['c
     };
 
     const uploadFront = useCallback(
-        (values: FormikValues) => {
+        (values: FormikValues | TNIMCSlipUploadValues) => {
             return uploadNIMC({
-                document_id: values.identityCardNumber,
+                document_id: values.nimcNumber,
                 document_issuing_country: documentIssuingCountryCode ?? undefined,
-                document_type: 'national_identity_card',
-                expiration_date: values.identityCardExpiryDate,
-                file: values.identityCardFront,
+                document_type: 'nimc_slip',
+                file: values.nimcCardFront,
+                lifetime_valid: 1,
                 page_type: 'front',
             });
         },
         [documentIssuingCountryCode, uploadNIMC]
     );
 
     const uploadBack = useCallback(
-        (values: FormikValues) => {
+        (values: FormikValues | TNIMCSlipUploadValues) => {
             return uploadNIMC({
-                document_id: values.identityCardNumber,
+                document_id: values.nimcNumber,
                 document_issuing_country: documentIssuingCountryCode ?? undefined,
-                document_type: 'national_identity_card',
-                expiration_date: values.identityCardExpiryDate,
-                file: values.identityCardBack,
+                document_type: 'nimc_slip',
+                file: values.nimcCardBack,
+                lifetime_valid: 1,
                 page_type: 'back',
             });
         },