From c6ef3c466b1016d073de0d16c6f18ee8c2dc59ec Mon Sep 17 00:00:00 2001
From: Taysuisin <suisin@regentmarkets.com>
Date: Mon, 8 May 2023 14:38:33 +0800
Subject: [PATCH] chore: update code based on comments

---
 .../jurisdiction-title-indicator.spec.tsx     | 119 +++++++++---------
 .../jurisdiction-modal/jurisdiction-card.tsx  |   2 +-
 packages/cfd/src/Containers/props.types.ts    |   6 +-
 3 files changed, 63 insertions(+), 64 deletions(-)

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
index 62b6bd16aa28..271e3eb81aa2 100644
--- 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
@@ -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,9 +58,15 @@ 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} />);
@@ -106,9 +74,15 @@ describe('JurisdictionTitleIndicator', () => {
     });
 
     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} />);
@@ -116,9 +90,15 @@ describe('JurisdictionTitleIndicator', () => {
     });
 
     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} />);
@@ -126,8 +106,12 @@ describe('JurisdictionTitleIndicator', () => {
     });
 
     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;
diff --git a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx
index 2584e1038e1a..5266c989d62e 100644
--- a/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx
+++ b/packages/cfd/src/Containers/jurisdiction-modal/jurisdiction-card.tsx
@@ -27,7 +27,7 @@ const JurisdictionCard = ({
         setJurisdictionSelectedShortcode(jurisdiction_selected_shortcode === cardType ? '' : cardType);
     };
 
-    const toggleCardFlip = (event: React.MouseEvent) => {
+    const toggleCardFlip: React.MouseEventHandler<HTMLSpanElement> = event => {
         event.stopPropagation();
         setIsCardFlipped(!is_card_flipped);
     };
diff --git a/packages/cfd/src/Containers/props.types.ts b/packages/cfd/src/Containers/props.types.ts
index 3f9114c968ab..2d44b8455445 100644
--- a/packages/cfd/src/Containers/props.types.ts
+++ b/packages/cfd/src/Containers/props.types.ts
@@ -182,7 +182,7 @@ export type TJurisdictionCardProps = {
 export type TJurisdictionCardBackProps = {
     card_classname: string;
     is_card_selected: boolean;
-    toggleCardFlip: (event: React.MouseEvent) => void;
+    toggleCardFlip: React.MouseEventHandler<HTMLSpanElement>;
     verification_docs: TJurisdictionCardItemVerification | undefined;
 };
 
@@ -196,7 +196,7 @@ export type TJurisdictionCardFrontProps = TJurisdictionCardBackProps & {
 
 export type TJurisdictionClickableDescriptionProps = {
     clickable_description: Array<TClickableDescription>;
-    toggleCardFlip: (event: React.MouseEvent) => void;
+    toggleCardFlip: React.MouseEventHandler<HTMLSpanElement>;
 };
 
 export type TJurisdictionTitleIndicatorProps = {
@@ -209,7 +209,7 @@ export type TJurisdictionTitleIndicatorProps = {
 export type TJurisdictionCardSectionProps = {
     account_status: GetAccountStatus;
     card_section_item: TJurisdictionCardSection;
-    toggleCardFlip: (event: React.MouseEvent) => void;
+    toggleCardFlip: React.MouseEventHandler<HTMLSpanElement>;
     type_of_card: TJurisdictionCardType;
     verification_docs: TJurisdictionCardItemVerification | undefined;
 };