Amina/feature/90115/update jurisdiction

packages/account/src/Components/currency-selector/__tests__/currency-selector.spec.tsx

@@ -26,8 +26,8 @@ describe('<CurrencySelector/>', () => {
                 is_virtual: 1,
                 landing_company_shortcode: 'virtual',
                 trading: {},
-                token: 'a1-sLGGrhfYPkeEprxEop2T591cLKbuN',
-                email: 'test+qw@deriv.com',
+                token: '',
+                email: '',
                 session_start: 1651059038,
                 excluded_until: '',
                 landing_company_name: 'virtual',
@@ -273,8 +273,8 @@ describe('<CurrencySelector/>', () => {
                     is_virtual: 1,
                     landing_company_shortcode: 'svg',
                     trading: {},
-                    token: 'a1-sLGGrhfYPkeEprxEop2T591cLKbuN',
-                    email: 'test+qw@deriv.com',
+                    token: '',
+                    email: '',
                     session_start: 1651059038,
                     excluded_until: '',
                     landing_company_name: 'svg',

packages/appstore/src/components/cfds-listing/cfds-listing.scss

@@ -1,7 +1,7 @@
 .cfd-jurisdiction-card--synthetic,
 .cfd-jurisdiction-card--financial {
     border: solid 2px var(--border-normal);
-    border-radius: 1.6rem;
+    border-radius: $BORDER_RADIUS * 4;
     display: flex;
     justify-content: space-between;
     flex-direction: column;
@@ -46,7 +46,7 @@
                 height: 100%;
             }
             &-over-header {
-                background: var(--text-info-blue-bg);
+                background: var(--text-info-blue-background);
                 height: 4rem;
                 width: 100%;
                 padding: 0.5rem;

packages/cashier/src/components/cashier-onboarding/cashier-onboarding.scss

@@ -7,7 +7,7 @@
     }
 
     &__loader {
-        position: fixed;
+        position: relative;
         left: 0;
     }
 

packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.scss

@@ -132,7 +132,6 @@
             @include mobile {
                 width: 100%;
                 min-width: auto;
-                margin-bottom: 2.6rem !important;
             }
         }
     }

packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts

@@ -1,7 +1,7 @@
 import { localize } from '@deriv/translations';
 import { TJurisdictionCardItems } from 'Components/props.types';
 
-export const jurisdictionBviContents = (): TJurisdictionCardItems => ({
+export const getJurisdictionBviContents = (): TJurisdictionCardItems => ({
     is_over_header_available: false,
     header: localize('British Virgin Islands'),
     synthetic_contents: [

packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-contents.ts

@@ -1,9 +1,9 @@
 import { TJurisdictionCardItems } from 'Components/props.types';
-import { jurisdictionBviContents } from './jurisdiction-bvi-contents';
-import { jurisdictionLabuanContents } from './jurisdiction-labuan-contents';
-import { jurisdictionSvgContents } from './jurisdiction-svg-contents';
-import { jurisdictionVanuatuContents } from './jurisdiction-vanuatu-contents';
-import { jurisdictionMaltainvestContents } from './jurisdiction_maltainvest_contents';
+import { getJurisdictionBviContents } from './jurisdiction-bvi-contents';
+import { getJurisdictionLabuanContents } from './jurisdiction-labuan-contents';
+import { getJurisdictionSvgContents } from './jurisdiction-svg-contents';
+import { getJurisdictionVanuatuContents } from './jurisdiction-vanuatu-contents';
+import { getJurisdictionMaltainvestContents } from './jurisdiction_maltainvest_contents';
 
 type TJurisdictionContent = {
     svg: TJurisdictionCardItems;
@@ -14,9 +14,9 @@ type TJurisdictionContent = {
 };
 
 export const getJurisdictionContents = (): TJurisdictionContent => ({
-    svg: jurisdictionSvgContents(),
-    bvi: jurisdictionBviContents(),
-    vanuatu: jurisdictionVanuatuContents(),
-    labuan: jurisdictionLabuanContents(),
-    maltainvest: jurisdictionMaltainvestContents(),
+    svg: getJurisdictionSvgContents(),
+    bvi: getJurisdictionBviContents(),
+    vanuatu: getJurisdictionVanuatuContents(),
+    labuan: getJurisdictionLabuanContents(),
+    maltainvest: getJurisdictionMaltainvestContents(),
 });

packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-labuan-contents.ts

@@ -1,7 +1,7 @@
 import { localize } from '@deriv/translations';
 import { TJurisdictionCardItems } from 'Components/props.types';
 
-export const jurisdictionLabuanContents = (): TJurisdictionCardItems => ({
+export const getJurisdictionLabuanContents = (): TJurisdictionCardItems => ({
     over_header: localize('Straight-through processing'),
     is_over_header_available: true,
     header: localize('Labuan'),

packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-svg-contents.ts

@@ -1,7 +1,7 @@
 import { localize } from '@deriv/translations';
 import { TJurisdictionCardItems } from 'Components/props.types';
 
-export const jurisdictionSvgContents = (): TJurisdictionCardItems => ({
+export const getJurisdictionSvgContents = (): TJurisdictionCardItems => ({
     is_over_header_available: false,
     header: localize('St. Vincent & Grenadines'),
     synthetic_contents: [

packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts

@@ -1,7 +1,7 @@
 import { localize } from '@deriv/translations';
 import { TJurisdictionCardItems } from 'Components/props.types';
 
-export const jurisdictionVanuatuContents = (): TJurisdictionCardItems => ({
+export const getJurisdictionVanuatuContents = (): TJurisdictionCardItems => ({
     is_over_header_available: false,
     header: localize('Vanuatu'),
     synthetic_contents: [

packages/cfd/src/Constants/jurisdiction-contents/jurisdiction_maltainvest_contents.ts

@@ -1,7 +1,7 @@
 import { localize } from '@deriv/translations';
 import { TJurisdictionCardItems } from 'Components/props.types';
 
-export const jurisdictionMaltainvestContents = (): TJurisdictionCardItems => ({
+export const getJurisdictionMaltainvestContents = (): TJurisdictionCardItems => ({
     is_over_header_available: false,
     header: localize('Malta'),
     synthetic_contents: [

packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card.spec.tsx

@@ -26,7 +26,7 @@ describe('JurisdictionCard', () => {
                 needs_verification: string[];
             };
             currency_config: {
-                [k: string]: { is_deposit_suspended?: 0 | 1 | undefined; is_withdrawal_suspended?: 0 | 1 | undefined };
+                [k: string]: { is_deposit_suspended?: 0 | 1; is_withdrawal_suspended?: 0 | 1 };
             };
             p2p_status: 'none' | 'active' | 'temp_ban' | 'perm_ban';
             prompt_client_to_authenticate: 0 | 1;

packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-title-indicator.spec.tsx

@@ -1,49 +1,11 @@
 import React from 'react';
 import { screen, render } from '@testing-library/react';
 import JurisdictionTitleIndicator from '../jurisdiction-title-indicator';
+import { TJurisdictionTitleIndicatorProps } from 'Containers/props.types';
 import { Jurisdiction } from '@deriv/shared';
 
 describe('JurisdictionTitleIndicator', () => {
-    type TMockProps = {
-        title_indicators: {
-            type: 'displayText' | 'displayIcons';
-            display_text?: string;
-        };
-        type_of_card: 'svg' | 'bvi' | 'vanuatu' | 'labuan' | 'maltainvest';
-        account_status: {
-            authentication: {
-                document: {
-                    status: 'none' | 'pending' | 'verified' | 'expired' | 'rejected' | undefined;
-                };
-                identity: {
-                    services: {
-                        idv: {
-                            status: 'none' | 'pending' | 'verified' | 'expired' | 'rejected' | undefined;
-                        };
-                        onfido: {
-                            status: 'none' | 'pending' | 'verified' | 'expired' | 'rejected' | undefined;
-                        };
-                        manual: {
-                            status: 'none' | 'pending' | 'verified' | 'expired' | 'rejected' | undefined;
-                        };
-                    };
-                };
-                needs_verification: string[];
-            };
-            currency_config: {
-                [k: string]: {
-                    is_deposit_suspended?: 0 | 1;
-                    is_withdrawal_suspended?: 0 | 1;
-                };
-            };
-            p2p_status: 'none';
-            prompt_client_to_authenticate: 0;
-            risk_classification: string;
-            status: string[];
-        };
-        verification_docs: ['document_number' | 'selfie' | 'identity_document' | 'name_and_address' | 'not_applicable'];
-    };
-    const mock_props: TMockProps = {
+    const mock_props: TJurisdictionTitleIndicatorProps = {
         title_indicators: {
             type: 'displayText',
             display_text: 'Test Display Text',
@@ -96,38 +58,60 @@ describe('JurisdictionTitleIndicator', () => {
     });
 
     it('should render JurisdictionTitleIndicator with displayIcons and Pending icon variant', () => {
-        mock_props.account_status.authentication.identity.services.idv.status = 'pending';
-        mock_props.account_status.authentication.identity.services.onfido.status = 'pending';
-        mock_props.account_status.authentication.identity.services.manual.status = 'pending';
+        if (mock_props.account_status.authentication?.identity?.services?.idv?.status) {
+            mock_props.account_status.authentication.identity.services.idv.status = 'pending';
+        }
+        if (mock_props.account_status.authentication?.identity?.services?.onfido?.status) {
+            mock_props.account_status.authentication.identity.services.onfido.status = 'pending';
+        }
+        if (mock_props.account_status.authentication?.identity?.services?.manual?.status) {
+            mock_props.account_status.authentication.identity.services.manual.status = 'pending';
+        }
         mock_props.title_indicators.type = 'displayIcons';
         mock_props.verification_docs = ['document_number'];
         render(<JurisdictionTitleIndicator {...mock_props} />);
         expect(screen.getByTestId('dt_jurisdiction_title_indicator_Pending_icon')).toBeInTheDocument();
     });
 
     it('should render JurisdictionTitleIndicator with displayIcons and Failed icon variant', () => {
-        mock_props.account_status.authentication.identity.services.idv.status = 'rejected';
-        mock_props.account_status.authentication.identity.services.onfido.status = 'rejected';
-        mock_props.account_status.authentication.identity.services.manual.status = 'rejected';
+        if (mock_props.account_status.authentication?.identity?.services?.idv?.status) {
+            mock_props.account_status.authentication.identity.services.idv.status = 'rejected';
+        }
+        if (mock_props.account_status.authentication?.identity?.services?.onfido?.status) {
+            mock_props.account_status.authentication.identity.services.onfido.status = 'rejected';
+        }
+        if (mock_props.account_status.authentication?.identity?.services?.manual?.status) {
+            mock_props.account_status.authentication.identity.services.manual.status = 'rejected';
+        }
         mock_props.title_indicators.type = 'displayIcons';
         mock_props.verification_docs = ['document_number'];
         render(<JurisdictionTitleIndicator {...mock_props} />);
         expect(screen.getByTestId('dt_jurisdiction_title_indicator_Failed_icon')).toBeInTheDocument();
     });
 
     it('should render JurisdictionTitleIndicator with displayIcons and Verified icon variant', () => {
-        mock_props.account_status.authentication.identity.services.idv.status = 'verified';
-        mock_props.account_status.authentication.identity.services.onfido.status = 'verified';
-        mock_props.account_status.authentication.identity.services.manual.status = 'verified';
+        if (mock_props.account_status.authentication?.identity?.services?.idv?.status) {
+            mock_props.account_status.authentication.identity.services.idv.status = 'verified';
+        }
+        if (mock_props.account_status.authentication?.identity?.services?.onfido?.status) {
+            mock_props.account_status.authentication.identity.services.onfido.status = 'verified';
+        }
+        if (mock_props.account_status.authentication?.identity?.services?.manual?.status) {
+            mock_props.account_status.authentication.identity.services.manual.status = 'verified';
+        }
         mock_props.title_indicators.type = 'displayIcons';
         mock_props.verification_docs = ['document_number'];
         render(<JurisdictionTitleIndicator {...mock_props} />);
         expect(screen.getByTestId('dt_jurisdiction_title_indicator_Verified_icon')).toBeInTheDocument();
     });
 
     it('should render JurisdictionTitleIndicator with displayIcons and Pending icon variant with type_of_card to be Vanuatu', () => {
-        mock_props.account_status.authentication.identity.services.onfido.status = 'pending';
-        mock_props.account_status.authentication.identity.services.manual.status = 'pending';
+        if (mock_props.account_status.authentication?.identity?.services?.onfido?.status) {
+            mock_props.account_status.authentication.identity.services.onfido.status = 'pending';
+        }
+        if (mock_props.account_status.authentication?.identity?.services?.manual?.status) {
+            mock_props.account_status.authentication.identity.services.manual.status = 'pending';
+        }
         mock_props.title_indicators.type = 'displayIcons';
         mock_props.verification_docs = ['selfie'];
         mock_props.type_of_card = Jurisdiction.VANUATU;
@@ -136,8 +120,12 @@ describe('JurisdictionTitleIndicator', () => {
     });
 
     it('should render JurisdictionTitleIndicator with displayIcons and Pending icon variant with type_of_card to be MaltaInvest', () => {
-        mock_props.account_status.authentication.identity.services.onfido.status = 'pending';
-        mock_props.account_status.authentication.identity.services.manual.status = 'pending';
+        if (mock_props.account_status.authentication?.identity?.services?.onfido?.status) {
+            mock_props.account_status.authentication.identity.services.onfido.status = 'pending';
+        }
+        if (mock_props.account_status.authentication?.identity?.services?.manual?.status) {
+            mock_props.account_status.authentication.identity.services.manual.status = 'pending';
+        }
         mock_props.title_indicators.type = 'displayIcons';
         mock_props.verification_docs = ['identity_document'];
         mock_props.type_of_card = Jurisdiction.MALTA_INVEST;
@@ -146,8 +134,12 @@ describe('JurisdictionTitleIndicator', () => {
     });
 
     it('should render JurisdictionTitleIndicator with displayIcons and Failed icon variant with type_of_card to be Vanuatu', () => {
-        mock_props.account_status.authentication.identity.services.onfido.status = 'rejected';
-        mock_props.account_status.authentication.identity.services.manual.status = 'rejected';
+        if (mock_props.account_status.authentication?.identity?.services?.onfido?.status) {
+            mock_props.account_status.authentication.identity.services.onfido.status = 'rejected';
+        }
+        if (mock_props.account_status.authentication?.identity?.services?.manual?.status) {
+            mock_props.account_status.authentication.identity.services.manual.status = 'rejected';
+        }
         mock_props.title_indicators.type = 'displayIcons';
         mock_props.verification_docs = ['selfie'];
         mock_props.type_of_card = Jurisdiction.VANUATU;
@@ -156,8 +148,12 @@ describe('JurisdictionTitleIndicator', () => {
     });
 
     it('should render JurisdictionTitleIndicator with displayIcons and Verified icon variant with type_of_card to be Vanuatu', () => {
-        mock_props.account_status.authentication.identity.services.onfido.status = 'verified';
-        mock_props.account_status.authentication.identity.services.manual.status = 'verified';
+        if (mock_props.account_status.authentication?.identity?.services?.onfido?.status) {
+            mock_props.account_status.authentication.identity.services.onfido.status = 'verified';
+        }
+        if (mock_props.account_status.authentication?.identity?.services?.manual?.status) {
+            mock_props.account_status.authentication.identity.services.manual.status = 'verified';
+        }
         mock_props.title_indicators.type = 'displayIcons';
         mock_props.verification_docs = ['selfie'];
         mock_props.type_of_card = Jurisdiction.VANUATU;
@@ -166,7 +162,8 @@ describe('JurisdictionTitleIndicator', () => {
     });
 
     it('should render JurisdictionTitleIndicator with displayIcons and Pending icon variant when verification_document is name_and_address and type_of_card to be svg', () => {
-        mock_props.account_status.authentication.document.status = 'pending';
+        if (mock_props.account_status.authentication?.document?.status)
+            mock_props.account_status.authentication.document.status = 'pending';
         mock_props.title_indicators.type = 'displayIcons';
         mock_props.verification_docs = ['name_and_address'];
         mock_props.type_of_card = Jurisdiction.SVG;
@@ -175,7 +172,8 @@ describe('JurisdictionTitleIndicator', () => {
     });
 
     it('should render JurisdictionTitleIndicator with displayIcons and Failed icon variant when verification_document is name_and_address and type_of_card to be svg', () => {
-        mock_props.account_status.authentication.document.status = 'rejected';
+        if (mock_props.account_status.authentication?.document?.status)
+            mock_props.account_status.authentication.document.status = 'rejected';
         mock_props.title_indicators.type = 'displayIcons';
         mock_props.verification_docs = ['name_and_address'];
         mock_props.type_of_card = Jurisdiction.SVG;
@@ -184,7 +182,8 @@ describe('JurisdictionTitleIndicator', () => {
     });
 
     it('should render JurisdictionTitleIndicator with displayIcons and Verified icon variant when verification_document is name_and_address and type_of_card to be svg', () => {
-        mock_props.account_status.authentication.document.status = 'verified';
+        if (mock_props.account_status.authentication?.document?.status)
+            mock_props.account_status.authentication.document.status = 'verified';
         mock_props.title_indicators.type = 'displayIcons';
         mock_props.verification_docs = ['name_and_address'];
         mock_props.type_of_card = Jurisdiction.SVG;

packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { SyntheticEvent, useState } from 'react';
+import React from 'react';
 import { getJurisdictionContents } from '../../Constants/jurisdiction-contents/jurisdiction-contents';
 import { TJurisdictionCardProps } from '../props.types';
 import JurisdictionCardBack from './jurisdiction-card-back';
@@ -20,14 +20,14 @@ const JurisdictionCard = ({
     const verification_docs = is_synthetic
         ? card_values?.synthetic_verification_docs
         : card_values?.financial_verification_docs;
-    const [is_card_flipped, setIsCardFlipped] = useState(false);
+    const [is_card_flipped, setIsCardFlipped] = React.useState(false);
     const is_card_selected = jurisdiction_selected_shortcode === type_of_card;
 
     const cardSelection = (cardType: string) => {
         setJurisdictionSelectedShortcode(jurisdiction_selected_shortcode === cardType ? '' : cardType);
     };
 
-    const toggleCardFlip = (event: SyntheticEvent) => {
+    const toggleCardFlip: React.MouseEventHandler<HTMLSpanElement> = event => {
         event.stopPropagation();
         setIsCardFlipped(!is_card_flipped);
     };