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 => ( -
+