[WALL] Farhan/WALL-3060/POI Icon variation in MT5 Derived & Financial does not match Figma

packages/wallets/src/features/cfd/constants.tsx

@@ -70,3 +70,11 @@ export const MARKET_TYPE = {
     FINANCIAL: 'financial',
     SYNTHETIC: 'synthetic',
 } as const;
+
+export const JURISDICTION = {
+    BVI: 'bvi',
+    LABUAN: 'labuan',
+    MALTA_INVEST: 'maltainvest',
+    SVG: 'svg',
+    VANUATU: 'vanuatu',
+} as const;

packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCard.tsx

@@ -2,10 +2,12 @@ import React, { useMemo, useState } from 'react';
 import classNames from 'classnames';
 import { WalletText } from '../../../../../components';
 import { useModal } from '../../../../../components/ModalProvider';
-import DocumentsIcon from '../../../../../public/images/ic-documents.svg';
 import IdCardIcon from '../../../../../public/images/ic-id-card.svg';
+import DocumentIcon from '../../../../../public/images/ic-id-number.svg';
+import NameAndAddressIcon from '../../../../../public/images/ic-name-and-address.svg';
 import SelfieIcon from '../../../../../public/images/ic-selfie.svg';
 import { useDynamicLeverageModalState } from '../../../components/DynamicLeverageContext';
+import useVerificationDocs from '../hooks/useVerificationDocs';
 import { getJurisdictionContents } from '../jurisdiction-contents/jurisdiction-contents';
 import { TJurisdictionCardItems, TJurisdictionCardSection } from '../jurisdiction-contents/props.types';
 import JurisdictionCardBack from './JurisdictionCardBack';
@@ -31,12 +33,16 @@ type TVerificationDocumentsMapper = {
 
 const verificationDocumentsMapper: TVerificationDocumentsMapper = {
     documentNumber: {
+        category: 'poi',
+        icon: <DocumentIcon />,
+    },
+    identityDocument: {
         category: 'poi',
         icon: <IdCardIcon />,
     },
     nameAndAddress: {
         category: 'poa',
-        icon: <DocumentsIcon />,
+        icon: <NameAndAddressIcon />,
     },
     notApplicable: {
         category: null,
@@ -51,6 +57,7 @@ const JurisdictionCard: React.FC<TJurisdictionCardProps> = ({ isAdded, isSelecte
     const [isFlipped, setIsFlipped] = useState(false);
     const { toggleDynamicLeverage } = useDynamicLeverageModalState();
     const { getModalState } = useModal();
+    const verificationDocs = useVerificationDocs(jurisdiction);
 
     const descriptionClickHandler = (tag?: string) => (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
         event.stopPropagation();
@@ -61,7 +68,7 @@ const JurisdictionCard: React.FC<TJurisdictionCardProps> = ({ isAdded, isSelecte
         }
     };
 
-    const { contents, header, isOverHeaderAvailable, overHeader, verificationDocs } = useMemo<TJurisdictionCardItems>(
+    const { contents, header, isOverHeaderAvailable, overHeader } = useMemo<TJurisdictionCardItems>(
         () => getJurisdictionContents()[jurisdiction],
         [jurisdiction]
     );

packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCardBack.scss

@@ -18,6 +18,10 @@
         grid-auto-flow: column;
         gap: 1rem;
         grid-template-columns: 8% auto;
+
+        & > svg {
+            margin-top: 0.4rem;
+        }
     }
 
     &__border {

packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCardBack.tsx

@@ -1,8 +1,9 @@
 import React, { Dispatch, FC, SetStateAction } from 'react';
 import { WalletText } from '../../../../../components/Base/WalletText';
 import BackArrowIcon from '../../../../../public/images/ic-back-arrow.svg';
-import DocumentsIcon from '../../../../../public/images/ic-documents.svg';
 import IdCardIcon from '../../../../../public/images/ic-id-card.svg';
+import DocumentIcon from '../../../../../public/images/ic-id-number.svg';
+import NameAndAddressIcon from '../../../../../public/images/ic-name-and-address.svg';
 import NotApplicableIcon from '../../../../../public/images/ic-not-applicable.svg';
 import SelfieIcon from '../../../../../public/images/ic-selfie.svg';
 import VerificationFailedStatusIcon from '../../../../../public/images/ic-verification-failed-status.svg';
@@ -16,8 +17,9 @@ import {
 import './JurisdictionCardBack.scss';
 
 const verificationIconsMapper: Record<string, JSX.Element> = {
-    documentNumber: <IdCardIcon />,
-    nameAndAddress: <DocumentsIcon />,
+    documentNumber: <DocumentIcon />,
+    identityDocument: <IdCardIcon />,
+    nameAndAddress: <NameAndAddressIcon />,
     notApplicable: <NotApplicableIcon />,
     selfie: <SelfieIcon />,
 };

packages/wallets/src/features/cfd/screens/Jurisdiction/hooks/__tests__/useVerificationDocs.spec.tsx

@@ -0,0 +1,173 @@
+import { usePOI, useResidenceList } from '@deriv/api';
+import { renderHook } from '@testing-library/react-hooks';
+import useVerificationDocs from '../useVerificationDocs';
+
+jest.mock('@deriv/api', () => ({
+    usePOI: jest.fn(),
+    useResidenceList: jest.fn(),
+}));
+
+const mockUsePOI = usePOI as jest.MockedFunction<typeof usePOI>;
+const mockUseResidenceList = useResidenceList as jest.MockedFunction<typeof useResidenceList>;
+
+describe('useVerificationDocs', () => {
+    it('should return onfido/manual verification docs for idv unsupported country', () => {
+        mockUsePOI.mockReturnValue({
+            // @ts-expect-error need a way to mock useQuery data
+            data: {
+                current: {
+                    country_code: 'id',
+                    service: 'onfido',
+                    status: 'none',
+                },
+                services: {
+                    onfido: {
+                        submissions_left: 1,
+                    },
+                },
+            },
+        });
+        mockUseResidenceList.mockReturnValue(
+            // @ts-expect-error need a way to mock useQuery data
+            {
+                data: [
+                    {
+                        identity: {
+                            services: {
+                                idv: {
+                                    is_country_supported: 0,
+                                },
+                            },
+                        },
+                        value: 'id',
+                    },
+                ],
+            }
+        );
+        const { result } = renderHook(() => useVerificationDocs('bvi'));
+        expect(result.current).toEqual({
+            financial: ['selfie', 'identityDocument', 'nameAndAddress'],
+            synthetic: ['selfie', 'identityDocument', 'nameAndAddress'],
+        });
+    });
+
+    it('should return idv verification docs for idv supported country and client has idv attempts left', () => {
+        mockUsePOI.mockReturnValue({
+            // @ts-expect-error need a way to mock useQuery data
+            data: {
+                current: {
+                    country_code: 'co',
+                    service: 'idv',
+                    status: 'none',
+                },
+                services: {
+                    idv: {
+                        submissions_left: 1,
+                    },
+                },
+            },
+        });
+        mockUseResidenceList.mockReturnValue(
+            // @ts-expect-error need a way to mock useQuery data
+            {
+                data: [
+                    {
+                        identity: {
+                            services: {
+                                idv: {
+                                    is_country_supported: 1,
+                                },
+                            },
+                        },
+                        value: 'co',
+                    },
+                ],
+            }
+        );
+        const { result } = renderHook(() => useVerificationDocs('bvi'));
+        expect(result.current).toEqual({
+            financial: ['documentNumber', 'nameAndAddress'],
+            synthetic: ['documentNumber', 'nameAndAddress'],
+        });
+    });
+
+    it('should return onfido/manual verification docs for idv supported country with no attempts left', () => {
+        mockUsePOI.mockReturnValue({
+            // @ts-expect-error need a way to mock useQuery data
+            data: {
+                current: {
+                    country_code: 'co',
+                    service: 'idv',
+                    status: 'none',
+                },
+                services: {
+                    idv: {
+                        submissions_left: 0,
+                    },
+                },
+            },
+        });
+        mockUseResidenceList.mockReturnValue(
+            // @ts-expect-error need a way to mock useQuery data
+            {
+                data: [
+                    {
+                        identity: {
+                            services: {
+                                idv: {
+                                    is_country_supported: 1,
+                                },
+                            },
+                        },
+                        value: 'co',
+                    },
+                ],
+            }
+        );
+        const { result } = renderHook(() => useVerificationDocs('bvi'));
+        expect(result.current).toEqual({
+            financial: ['selfie', 'identityDocument', 'nameAndAddress'],
+            synthetic: ['selfie', 'identityDocument', 'nameAndAddress'],
+        });
+    });
+
+    it('should return verification docs for unregulated jurisdiction', () => {
+        mockUsePOI.mockReturnValue({
+            // @ts-expect-error need a way to mock useQuery data
+            data: {
+                current: {
+                    country_code: 'co',
+                    service: 'idv',
+                    status: 'none',
+                },
+                services: {
+                    idv: {
+                        submissions_left: 0,
+                    },
+                },
+            },
+        });
+        mockUseResidenceList.mockReturnValue(
+            // @ts-expect-error need a way to mock useQuery data
+            {
+                data: [
+                    {
+                        identity: {
+                            services: {
+                                idv: {
+                                    is_country_supported: 1,
+                                },
+                            },
+                        },
+                        value: 'co',
+                    },
+                ],
+            }
+        );
+        const { result } = renderHook(() => useVerificationDocs('svg'));
+        expect(result.current).toEqual({
+            financial: ['notApplicable'],
+            synthetic: ['notApplicable'],
+        });
+    });
+});

packages/wallets/src/features/cfd/screens/Jurisdiction/hooks/useVerificationDocs.tsx

@@ -0,0 +1,39 @@
+import { useMemo } from 'react';
+import { usePOI, useResidenceList } from '@deriv/api';
+import { JURISDICTION } from '../../../constants';
+import { getJurisdictionContents } from '../jurisdiction-contents/jurisdiction-contents';
+
+type TJurisdictionContent = ReturnType<typeof getJurisdictionContents>;
+type TVerificationDocument = TJurisdictionContent[keyof TJurisdictionContent]['verificationDocs'];
+
+const useVerificationDocs = (jurisdiction: string): TVerificationDocument => {
+    const { data } = usePOI();
+    const { data: residenceList } = useResidenceList();
+    const { verificationDocs } = getJurisdictionContents()[jurisdiction];
+    const isIDVSupported = useMemo(
+        () =>
+            residenceList.find(residence => residence.value === data?.current?.country_code)?.identity?.services?.idv
+                ?.is_country_supported,
+        [data, residenceList]
+    );
+    const hasIDVAttempts = useMemo(() => (data?.services?.idv?.submissions_left ?? 0) > 0, [data]);
+    const isNonIDV = useMemo(
+        () => (isIDVSupported !== undefined && !isIDVSupported) || (isIDVSupported && !hasIDVAttempts),
+        [hasIDVAttempts, isIDVSupported]
+    );
+
+    const modifiedVerificationDocs: TVerificationDocument = useMemo(() => {
+        const jurisdictionToCheck: string[] = [JURISDICTION.BVI, JURISDICTION.LABUAN, JURISDICTION.VANUATU];
+        if (jurisdictionToCheck.includes(jurisdiction) && isNonIDV) {
+            return {
+                financial: ['selfie', 'identityDocument', 'nameAndAddress'],
+                synthetic: ['selfie', 'identityDocument', 'nameAndAddress'],
+            };
+        }
+        return verificationDocs;
+    }, [isNonIDV, jurisdiction, verificationDocs]);
+
+    return modifiedVerificationDocs;
+};
+
+export default useVerificationDocs;

packages/wallets/src/features/cfd/screens/Jurisdiction/jurisdiction-contents/jurisdiction-verification-contents.ts

@@ -11,7 +11,7 @@ export const jurisdictionVerificationContents = (): TJurisdictionVerificationCon
             icon: 'IcDocumentNumberVerification',
             text: `Document number (eg. identity card, passport, driver's license)`,
         },
-        identityNumber: {
+        identityDocument: {
             icon: 'IcIdentityDocumentVerification',
             text: `A copy of your identity document (eg. identity card, passport, deiver's license)`,
         },

packages/wallets/src/features/cfd/screens/Jurisdiction/jurisdiction-contents/props.types.ts

@@ -50,7 +50,6 @@ export type TJurisdictionVerificationSection = {
 export type TJurisdictionVerificationItems = {
     documentNumber?: TJurisdictionVerificationSection;
     identityDocument?: TJurisdictionVerificationSection;
-    identityNumber?: TJurisdictionVerificationSection;
     nameAndAddress?: TJurisdictionVerificationSection;
     notApplicable?: TJurisdictionVerificationSection;
     selfie?: TJurisdictionVerificationSection;