diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-back.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-back.spec.tsx
new file mode 100644
index 000000000000..842819030173
--- /dev/null
+++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-back.spec.tsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import JurisdictionCardBack from '../jurisdiction-card-back';
+
+describe('', () => {
+ type TMockProps = {
+ card_classname: string;
+ toggleCardFlip: jest.Mock;
+ is_card_selected: boolean;
+ verification_docs: (
+ | 'document_number'
+ | 'name_and_address'
+ | 'selfie'
+ | 'identity_document'
+ | 'not_applicable'
+ )[];
+ };
+
+ const mock_props: TMockProps = {
+ card_classname: 'test_classname',
+ is_card_selected: false,
+ toggleCardFlip: jest.fn(),
+ verification_docs: [],
+ };
+
+ const exampleVerificationMessage = () => {
+ expect(screen.getByText('Your document is pending for verification.')).toBeInTheDocument();
+ expect(screen.getByText('Verification failed. Resubmit during account creation.')).toBeInTheDocument();
+ expect(screen.getByText('Your document is verified.')).toBeInTheDocument();
+ };
+
+ it('should render JurisdictionCardBack without any required submission if verification_docs is empty', () => {
+ render();
+ const container = screen.getByTestId('dt_jurisdiction_card_back');
+ expect(container).toHaveClass(
+ 'test_classname__card-content-container',
+ 'test_classname__card-flipped-container'
+ );
+ expect(screen.getByText('We need you to submit these in order to get this account:')).toBeInTheDocument();
+ expect(screen.queryByText('A selfie of yourself.')).not.toBeInTheDocument();
+ expect(screen.queryByText('Document number (identity card, passport)')).not.toBeInTheDocument();
+ expect(
+ screen.queryByText(
+ 'A recent utility bill (electricity, water or gas) or recent bank statement or government-issued letter with your name and address.'
+ )
+ ).not.toBeInTheDocument();
+ expect(
+ screen.queryByText('A copy of your identity document (identity card, passport)')
+ ).not.toBeInTheDocument();
+ exampleVerificationMessage();
+ });
+
+ it('should render JurisdictionCardBack display required document_number and name_and_address submission', () => {
+ mock_props.verification_docs = ['document_number', 'name_and_address'];
+ render();
+ expect(screen.queryByText('A selfie of yourself.')).not.toBeInTheDocument();
+ expect(
+ screen.queryByText('A copy of your identity document (identity card, passport)')
+ ).not.toBeInTheDocument();
+ expect(screen.getByText('We need you to submit these in order to get this account:')).toBeInTheDocument();
+ expect(screen.getByText('Document number (identity card, passport)')).toBeInTheDocument();
+ expect(
+ screen.getByText(
+ 'A recent utility bill (electricity, water or gas) or recent bank statement or government-issued letter with your name and address.'
+ )
+ ).toBeInTheDocument();
+ exampleVerificationMessage();
+ });
+
+ it('should render JurisdictionCardBack display required selfie, identity_document and name_and_address submission', () => {
+ mock_props.verification_docs = ['selfie', 'identity_document', 'name_and_address'];
+ render();
+ expect(screen.getByText('We need you to submit these in order to get this account:')).toBeInTheDocument();
+ expect(screen.getByText('A selfie of yourself.')).toBeInTheDocument();
+ expect(screen.getByText('A copy of your identity document (identity card, passport)')).toBeInTheDocument();
+ expect(
+ screen.getByText(
+ 'A recent utility bill (electricity, water or gas) or recent bank statement or government-issued letter with your name and address.'
+ )
+ ).toBeInTheDocument();
+ exampleVerificationMessage();
+ expect(screen.queryByText('Document number (identity card, passport)')).not.toBeInTheDocument();
+ });
+
+ it('should render JurisdictionCardBack and include selected_card classname if is_card_selected is true', () => {
+ mock_props.is_card_selected = true;
+ render();
+ const container = screen.getByTestId('dt_jurisdiction_card_back_container');
+ expect(container).toHaveClass('test_classname--selected', 'selected-card');
+ });
+});
diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-section.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-section.spec.tsx
new file mode 100644
index 000000000000..a38700c92acf
--- /dev/null
+++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card-section.spec.tsx
@@ -0,0 +1,126 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import JurisdictionCardSection from '../jurisdiction-card-section';
+import { Jurisdiction } from '@deriv/shared';
+
+describe('JurisdictionCardSection', () => {
+ type TMockProps = {
+ 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[];
+ };
+ card_section_item: {
+ key: string;
+ title: string;
+ title_indicators?: {
+ type: 'displayText';
+ display_text: string;
+ display_text_skin_color: string;
+ };
+ description?: string;
+ clickable_description?: [{ type: 'link' | 'text'; text: string }];
+ };
+ type_of_card: 'svg' | 'bvi' | 'vanuatu' | 'labuan' | 'maltainvest';
+ toggleCardFlip: jest.Mock;
+ verification_docs: ['document_number' | 'selfie' | 'identity_document' | 'name_and_address' | 'not_applicable'];
+ };
+ const mock_props: TMockProps = {
+ account_status: {
+ authentication: {
+ document: {
+ status: 'none',
+ },
+ identity: {
+ services: {
+ idv: {
+ status: 'none',
+ },
+ onfido: {
+ status: 'none',
+ },
+ manual: {
+ status: 'none',
+ },
+ },
+ },
+ needs_verification: [],
+ },
+ currency_config: {},
+ p2p_status: 'none',
+ prompt_client_to_authenticate: 0,
+ risk_classification: '',
+ status: [''],
+ },
+ card_section_item: {
+ key: '',
+ title: 'Test Title',
+ title_indicators: {
+ type: 'displayText',
+ display_text: 'Test Title Indicators Text',
+ display_text_skin_color: '',
+ },
+ description: 'Test Description',
+ },
+ type_of_card: Jurisdiction.SVG,
+ toggleCardFlip: jest.fn(),
+ verification_docs: ['not_applicable'],
+ };
+
+ it('should render JurisdictionCardSection component', () => {
+ render();
+ expect(screen.getByText('Test Title')).toBeInTheDocument();
+ expect(screen.getByText('Test Title Indicators Text')).toBeInTheDocument();
+ expect(screen.getByText('Test Description')).toBeInTheDocument();
+ });
+
+ it('should render JurisdictionCardSection component with clickable description', () => {
+ const mock_props_with_clickable_description = {
+ ...mock_props,
+ card_section_item: {
+ ...mock_props.card_section_item,
+ clickable_description: [{ type: 'link' as const, text: 'Test Link' }],
+ },
+ };
+
+ render();
+ expect(screen.getByText('Test Title')).toBeInTheDocument();
+ expect(screen.getByText('Test Title Indicators Text')).toBeInTheDocument();
+ expect(screen.getByText('Test Link')).toBeInTheDocument();
+ expect(screen.queryByText('Test Description')).not.toBeInTheDocument();
+ });
+
+ it('should render JurisdictionCardSection component without displaying title indicators if it is empty', () => {
+ mock_props.card_section_item.title_indicators = undefined;
+ render();
+ expect(screen.getByText('Test Title')).toBeInTheDocument();
+ expect(screen.queryByText('Test Title Indicators Text')).not.toBeInTheDocument();
+ expect(screen.getByText('Test Description')).toBeInTheDocument();
+ });
+});
diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card.spec.tsx
new file mode 100644
index 000000000000..ef220ceb09c2
--- /dev/null
+++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-card.spec.tsx
@@ -0,0 +1,254 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import JurisdictionCard from '../jurisdiction-card';
+import { Jurisdiction } from '@deriv/shared';
+
+describe('JurisdictionCard', () => {
+ type TMockProps = {
+ account_status: {
+ authentication: {
+ document: {
+ status: 'none' | 'pending' | 'expired' | 'verified' | 'rejected';
+ };
+ identity: {
+ services: {
+ idv: {
+ status: 'none' | 'pending' | 'expired' | 'verified' | 'rejected';
+ };
+ onfido: {
+ status: 'none' | 'pending' | 'expired' | 'verified' | 'rejected';
+ };
+ manual: {
+ status: 'none' | 'pending' | 'expired' | 'verified' | 'rejected';
+ };
+ };
+ };
+ needs_verification: string[];
+ };
+ currency_config: {
+ [k: string]: { is_deposit_suspended?: 0 | 1 | undefined; is_withdrawal_suspended?: 0 | 1 | undefined };
+ };
+ p2p_status: 'none' | 'active' | 'temp_ban' | 'perm_ban';
+ prompt_client_to_authenticate: 0 | 1;
+ risk_classification: string;
+ status: string[];
+ };
+ account_type: 'financial' | 'synthetic';
+ disabled: boolean;
+ jurisdiction_selected_shortcode: string;
+ setJurisdictionSelectedShortcode: jest.Mock;
+ type_of_card: 'svg' | 'bvi' | 'labuan' | 'maltainvest' | 'vanuatu';
+ };
+
+ let mock_props: TMockProps = {
+ account_status: {
+ authentication: {
+ document: {
+ status: 'none',
+ },
+ identity: {
+ services: {
+ idv: {
+ status: 'none',
+ },
+ onfido: {
+ status: 'none',
+ },
+ manual: {
+ status: 'none',
+ },
+ },
+ },
+ needs_verification: [],
+ },
+ currency_config: {},
+ p2p_status: 'none',
+ prompt_client_to_authenticate: 0,
+ risk_classification: '',
+ status: [''],
+ },
+ account_type: 'financial',
+ disabled: false,
+ jurisdiction_selected_shortcode: '',
+ setJurisdictionSelectedShortcode: jest.fn(),
+ type_of_card: Jurisdiction.SVG,
+ };
+ beforeEach(() => {
+ mock_props = {
+ account_status: {
+ authentication: {
+ document: {
+ status: 'none',
+ },
+ identity: {
+ services: {
+ idv: {
+ status: 'none',
+ },
+ onfido: {
+ status: 'none',
+ },
+ manual: {
+ status: 'none',
+ },
+ },
+ },
+ needs_verification: [],
+ },
+ currency_config: {},
+ p2p_status: 'none',
+ prompt_client_to_authenticate: 0,
+ risk_classification: '',
+ status: [''],
+ },
+ account_type: 'financial',
+ disabled: false,
+ jurisdiction_selected_shortcode: '',
+ setJurisdictionSelectedShortcode: jest.fn(),
+ type_of_card: Jurisdiction.SVG,
+ };
+ });
+
+ it('should render JurisdictionCard with svg card', () => {
+ render();
+ expect(screen.getByText('St. Vincent & Grenadines')).toBeInTheDocument();
+ expect(screen.getByText('Assets')).toBeInTheDocument();
+ expect(screen.getByText('170+')).toBeInTheDocument();
+ expect(screen.getByText('Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies')).toBeInTheDocument();
+ expect(screen.getByText('Leverage')).toBeInTheDocument();
+ expect(screen.getByText('1:1000')).toBeInTheDocument();
+ expect(screen.getByText('Spreads from')).toBeInTheDocument();
+ expect(screen.getByText('0.6 pips')).toBeInTheDocument();
+ expect(screen.getByText('Verifications')).toBeInTheDocument();
+ expect(
+ screen.getByText('You will need to submit proof of identity and address once you reach certain thresholds.')
+ ).toBeInTheDocument();
+ expect(screen.getByText('Regulator/EDR')).toBeInTheDocument();
+ expect(screen.getByText('Deriv (SVG) LLC (company no. 273 LLC 2020)')).toBeInTheDocument();
+ });
+
+ it('should render JurisdictionCard with vanuatu card', () => {
+ mock_props.type_of_card = Jurisdiction.VANUATU;
+ render();
+ expect(screen.getByText('Vanuatu')).toBeInTheDocument();
+ expect(screen.getByText('Assets')).toBeInTheDocument();
+ expect(screen.getByText('90+')).toBeInTheDocument();
+ expect(screen.getByText('Forex, Stock indices, Commodities and Cryptocurrencies')).toBeInTheDocument();
+ expect(screen.getByText('Leverage')).toBeInTheDocument();
+ expect(screen.getByText('1:1000')).toBeInTheDocument();
+ expect(screen.getByText('Spreads from')).toBeInTheDocument();
+ expect(screen.getByText('0.5 pips')).toBeInTheDocument();
+ expect(screen.getByText('Verifications')).toBeInTheDocument();
+ expect(screen.getByText('Learn more')).toBeInTheDocument();
+ expect(screen.getByText('about verifications needed.')).toBeInTheDocument();
+ expect(screen.getByText('Regulator/EDR')).toBeInTheDocument();
+ expect(screen.getByText('Vanuatu Financial Services Commission')).toBeInTheDocument();
+ });
+
+ it('should render JurisdictionCard with maltainvest card', () => {
+ mock_props.type_of_card = Jurisdiction.MALTA_INVEST;
+ render();
+ expect(screen.getByText('Malta')).toBeInTheDocument();
+ expect(screen.getByText('Assets')).toBeInTheDocument();
+ expect(screen.getByText('140+')).toBeInTheDocument();
+ expect(
+ screen.getByText('Synthetics, Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies')
+ ).toBeInTheDocument();
+ expect(screen.getByText('Leverage')).toBeInTheDocument();
+ expect(screen.getByText('1:30')).toBeInTheDocument();
+ expect(screen.getByText('Spreads from')).toBeInTheDocument();
+ expect(screen.getByText('0.5 pips')).toBeInTheDocument();
+ expect(screen.getByText('Verifications')).toBeInTheDocument();
+ expect(screen.getByText('Learn more')).toBeInTheDocument();
+ expect(screen.getByText('about verifications needed.')).toBeInTheDocument();
+ expect(screen.getByText('Regulator/EDR')).toBeInTheDocument();
+ expect(
+ screen.getByText('Malta Financial Services Authority (MFSA) (licence no. IS/70156)')
+ ).toBeInTheDocument();
+ });
+
+ it('should render JurisdictionCard with bvi card', () => {
+ mock_props.type_of_card = Jurisdiction.BVI;
+ render();
+ expect(screen.getByText('British Virgin Islands')).toBeInTheDocument();
+ expect(screen.getByText('Assets')).toBeInTheDocument();
+ expect(screen.getByText('170+')).toBeInTheDocument();
+ expect(screen.getByText('Forex, Stocks, Stock indices, Commodities, and Cryptocurrencies')).toBeInTheDocument();
+ expect(screen.getByText('Leverage')).toBeInTheDocument();
+ expect(screen.getByText('1:1000')).toBeInTheDocument();
+ expect(screen.getByText('Spreads from')).toBeInTheDocument();
+ expect(screen.getByText('0.5 pips')).toBeInTheDocument();
+ expect(screen.getByText('Verifications')).toBeInTheDocument();
+ expect(screen.getByText('Learn more')).toBeInTheDocument();
+ expect(screen.getByText('about verifications needed.')).toBeInTheDocument();
+ expect(screen.getByText('Regulator/EDR')).toBeInTheDocument();
+ expect(
+ screen.getByText('British Virgin Islands Financial Services Commission (License no. SIBA/L/18/1114)')
+ ).toBeInTheDocument();
+ });
+
+ it('should render JurisdictionCard with labuan card', () => {
+ mock_props.type_of_card = Jurisdiction.LABUAN;
+ render();
+ expect(screen.getByText('Straight-through processing')).toBeInTheDocument();
+ expect(screen.getByText('Labuan')).toBeInTheDocument();
+ expect(screen.getByText('Assets')).toBeInTheDocument();
+ expect(screen.getByText('90+')).toBeInTheDocument();
+ expect(screen.getByText('Forex and Cryptocurrencies')).toBeInTheDocument();
+ expect(screen.getByText('Leverage')).toBeInTheDocument();
+ expect(screen.getByText('1:100')).toBeInTheDocument();
+ expect(screen.getByText('Spreads from')).toBeInTheDocument();
+ expect(screen.getByText('0.6 pips')).toBeInTheDocument();
+ expect(screen.getByText('Verifications')).toBeInTheDocument();
+ expect(screen.getByText('Learn more')).toBeInTheDocument();
+ expect(screen.getByText('about verifications needed.')).toBeInTheDocument();
+ expect(screen.getByText('Regulator/EDR')).toBeInTheDocument();
+ expect(screen.getByText('Labuan Financial Services Authority (licence no. MB/18/0024)')).toBeInTheDocument();
+ });
+
+ it('should render JurisdictionCard with synthetic account_type', () => {
+ mock_props.account_type = 'synthetic';
+ render();
+ expect(screen.getByText('St. Vincent & Grenadines')).toBeInTheDocument();
+ expect(screen.getByText('Assets')).toBeInTheDocument();
+ expect(screen.getByText('40+')).toBeInTheDocument();
+ expect(screen.getByText('Synthetics, Basket indices and Derived FX')).toBeInTheDocument();
+ expect(screen.getByText('Leverage')).toBeInTheDocument();
+ expect(screen.getByText('1:1000')).toBeInTheDocument();
+ expect(screen.getByText('Verifications')).toBeInTheDocument();
+ expect(
+ screen.getByText('You will need to submit proof of identity and address once you reach certain thresholds.')
+ ).toBeInTheDocument();
+ expect(screen.getByText('Regulator/EDR')).toBeInTheDocument();
+ expect(screen.getByText('Deriv (SVG) LLC (company no. 273 LLC 2020)')).toBeInTheDocument();
+ });
+
+ it('should render JurisdictionCard with disabled to be true', () => {
+ mock_props.disabled = true;
+ render();
+ expect(screen.getByText('St. Vincent & Grenadines')).toBeInTheDocument();
+ });
+
+ it('should render JurisdictionCard on the back', () => {
+ render();
+ expect(screen.getByText('We need you to submit these in order to get this account:')).toBeInTheDocument();
+ expect(screen.getByText('Your document is pending for verification.')).toBeInTheDocument();
+ expect(screen.getByText('Verification failed. Resubmit during account creation.')).toBeInTheDocument();
+ expect(screen.getByText('Your document is verified.')).toBeInTheDocument();
+ });
+
+ it('should click on JurisdictionCard and render setJurisdictionSelectedShortCode function', () => {
+ render();
+ const jurisdiction_card = screen.getByTestId('dt_jurisdiction_card');
+ jurisdiction_card.click();
+ expect(mock_props.setJurisdictionSelectedShortcode).toHaveBeenCalledWith('svg');
+ });
+
+ it('should click on Learn More and include cfd-card-flipped into classnames', () => {
+ mock_props.type_of_card = Jurisdiction.BVI;
+ render();
+ const learn_more = screen.getByText('Learn more');
+ learn_more.click();
+ expect(screen.getByTestId('dt_jurisdiction_card')).toHaveClass('cfd-card-flipped');
+ });
+});
diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-clickable-description.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-clickable-description.spec.tsx
new file mode 100644
index 000000000000..a481b9d0f949
--- /dev/null
+++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-clickable-description.spec.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import JurisdictionClickableDescription from '../jurisdiction-clickable-description';
+
+describe('JurisdictionClickableDescription', () => {
+ type TClickableDescription = { text: string; type: 'link' | 'text' };
+ type TMockProps = {
+ clickable_description: TClickableDescription[];
+ toggleCardFlip: jest.Mock;
+ };
+
+ const mock_props: TMockProps = {
+ clickable_description: [
+ {
+ text: 'Click here',
+ type: 'link',
+ },
+ {
+ text: 'to learn more about the documents required for verification.',
+ type: 'text',
+ },
+ ],
+ toggleCardFlip: jest.fn(),
+ };
+
+ it('should render JurisdictionClickableDescription', () => {
+ render();
+ const container = screen.getByTestId('dt_jurisdiction_clickable_description');
+ expect(container).toHaveClass('cfd-card-clickable-description-link');
+ expect(screen.getByText('Click here')).toBeInTheDocument();
+ expect(screen.getByText('to learn more about the documents required for verification.')).toBeInTheDocument();
+ });
+
+ it('should call toggleCardFlip when link is clicked', () => {
+ render();
+ screen.getByText('Click here').click();
+ expect(mock_props.toggleCardFlip).toHaveBeenCalled();
+ });
+});
diff --git a/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-title-indicator.spec.tsx b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-title-indicator.spec.tsx
new file mode 100644
index 000000000000..62b6bd16aa28
--- /dev/null
+++ b/packages/cfd/src/Containers/jurisdiction-modal/__test__/jurisdiction-title-indicator.spec.tsx
@@ -0,0 +1,194 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import JurisdictionTitleIndicator from '../jurisdiction-title-indicator';
+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 = {
+ title_indicators: {
+ type: 'displayText',
+ display_text: 'Test Display Text',
+ },
+ type_of_card: Jurisdiction.BVI,
+ account_status: {
+ authentication: {
+ document: {
+ status: 'none',
+ },
+ identity: {
+ services: {
+ idv: {
+ status: 'none',
+ },
+ onfido: {
+ status: 'none',
+ },
+ manual: {
+ status: 'none',
+ },
+ },
+ },
+ needs_verification: [],
+ },
+ currency_config: {},
+ p2p_status: 'none',
+ prompt_client_to_authenticate: 0,
+ risk_classification: '',
+ status: [''],
+ },
+ verification_docs: ['not_applicable'],
+ };
+ it('should render JurisdictionTitleIndicator with displayText', () => {
+ render();
+ expect(screen.getByText('Test Display Text')).toBeInTheDocument();
+ });
+
+ it('should render JurisdictionTitleIndicator with displayIcons', () => {
+ mock_props.title_indicators.type = 'displayIcons';
+ render();
+ expect(screen.getByTestId('dt_jurisdiction_title_indicator_icon')).toBeInTheDocument();
+ });
+
+ it('should render JurisdictionTitleIndicator with displayIcons and Default icon variant', () => {
+ mock_props.title_indicators.type = 'displayIcons';
+ mock_props.verification_docs = ['document_number'];
+ render();
+ expect(screen.getByTestId('dt_jurisdiction_title_indicator_Default_icon')).toBeInTheDocument();
+ });
+
+ 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';
+ mock_props.title_indicators.type = 'displayIcons';
+ mock_props.verification_docs = ['document_number'];
+ render();
+ 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';
+ mock_props.title_indicators.type = 'displayIcons';
+ mock_props.verification_docs = ['document_number'];
+ render();
+ 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';
+ mock_props.title_indicators.type = 'displayIcons';
+ mock_props.verification_docs = ['document_number'];
+ render();
+ 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';
+ mock_props.title_indicators.type = 'displayIcons';
+ mock_props.verification_docs = ['selfie'];
+ mock_props.type_of_card = Jurisdiction.VANUATU;
+ render();
+ expect(screen.getByTestId('dt_jurisdiction_title_indicator_Pending_icon')).toBeInTheDocument();
+ });
+
+ 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';
+ mock_props.title_indicators.type = 'displayIcons';
+ mock_props.verification_docs = ['identity_document'];
+ mock_props.type_of_card = Jurisdiction.MALTA_INVEST;
+ render();
+ expect(screen.getByTestId('dt_jurisdiction_title_indicator_Pending_icon')).toBeInTheDocument();
+ });
+
+ 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';
+ mock_props.title_indicators.type = 'displayIcons';
+ mock_props.verification_docs = ['selfie'];
+ mock_props.type_of_card = Jurisdiction.VANUATU;
+ render();
+ expect(screen.getByTestId('dt_jurisdiction_title_indicator_Failed_icon')).toBeInTheDocument();
+ });
+
+ 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';
+ mock_props.title_indicators.type = 'displayIcons';
+ mock_props.verification_docs = ['selfie'];
+ mock_props.type_of_card = Jurisdiction.VANUATU;
+ render();
+ expect(screen.getByTestId('dt_jurisdiction_title_indicator_Verified_icon')).toBeInTheDocument();
+ });
+
+ 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';
+ mock_props.title_indicators.type = 'displayIcons';
+ mock_props.verification_docs = ['name_and_address'];
+ mock_props.type_of_card = Jurisdiction.SVG;
+ render();
+ expect(screen.getByTestId('dt_jurisdiction_title_indicator_Pending_icon')).toBeInTheDocument();
+ });
+
+ 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';
+ mock_props.title_indicators.type = 'displayIcons';
+ mock_props.verification_docs = ['name_and_address'];
+ mock_props.type_of_card = Jurisdiction.SVG;
+ render();
+ expect(screen.getByTestId('dt_jurisdiction_title_indicator_Failed_icon')).toBeInTheDocument();
+ });
+
+ 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';
+ mock_props.title_indicators.type = 'displayIcons';
+ mock_props.verification_docs = ['name_and_address'];
+ mock_props.type_of_card = Jurisdiction.SVG;
+ render();
+ expect(screen.getByTestId('dt_jurisdiction_title_indicator_Verified_icon')).toBeInTheDocument();
+ });
+});
diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx
index 4bbfcee9c85a..52431c484a6a 100644
--- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx
+++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card-back.tsx
@@ -11,11 +11,13 @@ const JurisdictionCardBack = ({
verification_docs,
}: TJurisdictionCardBackProps) => (
{
return description_part.type === 'link' ? (
-
+
{description_part.text}
diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx
index 09a4bf6ec15b..84aa42658424 100644
--- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx
+++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-title-indicator.tsx
@@ -74,9 +74,17 @@ const JurisdictionTitleIndicator = ({
{title_indicators.display_text}
) : (
-
+
{verification_docs?.map(verification_document => (
-