From d50a81abd02ad1715152854d7dd8586157987195 Mon Sep 17 00:00:00 2001
From: Maryia <103177211+maryia-binary@users.noreply.github.com>
Date: Mon, 11 Jul 2022 12:11:59 +0300
Subject: [PATCH] Maryia/used local state for setting selected card & updated
 flow (#17)

* Maryia/used local state for setting selected card & updated flow

* fix: for tests
---
 .../cfd-demo-account-display.spec.js          | 10 ++---
 .../cfd-real-account-display.spec.js          | 10 ++---
 .../Containers/jurisdiction-modal-content.tsx | 37 +++++++++----------
 .../cfd/src/Containers/jurisdiction-modal.tsx | 25 +++++++++----
 .../cfd/src/Stores/Modules/CFD/cfd-store.js   |  8 ----
 5 files changed, 46 insertions(+), 44 deletions(-)

diff --git a/packages/cfd/src/Components/__tests__/cfd-demo-account-display.spec.js b/packages/cfd/src/Components/__tests__/cfd-demo-account-display.spec.js
index 50cfdbe0c984..8846870352f7 100644
--- a/packages/cfd/src/Components/__tests__/cfd-demo-account-display.spec.js
+++ b/packages/cfd/src/Components/__tests__/cfd-demo-account-display.spec.js
@@ -7,6 +7,7 @@ const mock_connect_props = {
         demo: '',
         real: '',
     },
+    setMT5TradeAccount: jest.fn(),
 };
 
 jest.mock('Stores/connect.js', () => ({
@@ -51,6 +52,7 @@ describe('<CFDDemoAccountDisplay />', () => {
                 maltainvest: false,
                 svg: true,
             },
+            toggleMT5TradeModal: jest.fn(),
         };
     });
 
@@ -201,17 +203,15 @@ describe('<CFDDemoAccountDisplay />', () => {
         checkAccountCardsRendering(TESTED_CASES.NON_EU_DMT5);
         expect(screen.getAllByRole('button', { name: /add demo account/i }).length).toBe(1);
         const dmt5_top_up_button = screen.getByRole('button', { name: /top up/i });
-        const dmt5_trade_button = screen.getByRole('link', { name: /trade/i });
-        expect(dmt5_trade_button).toHaveAttribute(
-            'href',
-            'https://trade.mql5.com/trade?servers=Deriv-Demo&trade_server=Deriv-Demo&login=20103240'
-        );
+        const dmt5_trade_button = screen.getByRole('button', { name: /trade/i });
 
         fireEvent.click(dmt5_top_up_button);
         expect(props.openAccountTransfer).toHaveBeenCalledWith(props.current_list['mt5.demo.financial@p01_ts02'], {
             category: 'demo',
             type: 'financial',
         });
+        fireEvent.click(dmt5_trade_button);
+        expect(props.toggleMT5TradeModal).toHaveBeenCalledTimes(1);
 
         rerender(
             <CFDDemoAccountDisplay
diff --git a/packages/cfd/src/Components/__tests__/cfd-real-account-display.spec.js b/packages/cfd/src/Components/__tests__/cfd-real-account-display.spec.js
index 534a8e889da0..e52babb240dd 100644
--- a/packages/cfd/src/Components/__tests__/cfd-real-account-display.spec.js
+++ b/packages/cfd/src/Components/__tests__/cfd-real-account-display.spec.js
@@ -7,6 +7,7 @@ const mock_connect_props = {
         demo: '',
         real: '',
     },
+    setMT5TradeAccount: jest.fn(),
 };
 
 jest.mock('Stores/connect.js', () => ({
@@ -57,6 +58,7 @@ describe('<CFDRealAccountDisplay />', () => {
                 svg: true,
             },
             toggleAccountsDialog: jest.fn(),
+            toggleMT5TradeModal: jest.fn(),
             toggleShouldShowRealAccountsList: jest.fn(),
         };
     });
@@ -289,17 +291,15 @@ describe('<CFDRealAccountDisplay />', () => {
         checkAccountCardsRendering(TESTED_CASES.NON_EU_DMT5);
         expect(screen.getAllByRole('button', { name: /add real account/i }).length).toBe(1);
         const dmt5_top_up_button = screen.getByRole('button', { name: /top up/i });
-        const dmt5_trade_button = screen.getByRole('link', { name: /trade/i });
-        expect(dmt5_trade_button).toHaveAttribute(
-            'href',
-            'https://trade.mql5.com/trade?servers=Deriv-Server&trade_server=Deriv-Server&login=1927245'
-        );
+        const dmt5_trade_button = screen.getByRole('button', { name: /trade/i });
 
         fireEvent.click(dmt5_top_up_button);
         expect(props.openAccountTransfer).toHaveBeenCalledWith(props.current_list['mt5.real.financial@p01_ts01'], {
             category: 'real',
             type: 'financial',
         });
+        fireEvent.click(dmt5_trade_button);
+        expect(props.toggleMT5TradeModal).toHaveBeenCalledTimes(1);
 
         rerender(
             <CFDRealAccountDisplay
diff --git a/packages/cfd/src/Containers/jurisdiction-modal-content.tsx b/packages/cfd/src/Containers/jurisdiction-modal-content.tsx
index 5b566eeb437d..80d8ddb99bb6 100644
--- a/packages/cfd/src/Containers/jurisdiction-modal-content.tsx
+++ b/packages/cfd/src/Containers/jurisdiction-modal-content.tsx
@@ -23,8 +23,8 @@ type TAvailableAccountAPI = [
 
 type TJurisdictionModalContent = {
     account_type: string;
-    jurisdiction_selected_card: string | undefined;
-    selectTypeOfCard: (card_type: string | undefined) => string | undefined;
+    jurisdiction_selected_card: string;
+    setJurisdictionSelectedCard: (card_type: string) => void;
     synthetic_available_accounts: TAvailableAccountAPI;
     financial_available_accounts: TAvailableAccountAPI;
     poa_status: string;
@@ -41,7 +41,7 @@ type TJurisdictionModalContent = {
 };
 
 type TJurisdictionCard = {
-    jurisdiction_selected_card: string | undefined;
+    jurisdiction_selected_card: string;
     synthetic_available_accounts: TAvailableAccountAPI;
     financial_available_accounts: TAvailableAccountAPI;
     account_type: string;
@@ -49,7 +49,7 @@ type TJurisdictionCard = {
     poi_status: string;
     is_fully_authenticated: boolean;
     is_pending_authentication: boolean;
-    selectTypeOfCard: (card_type: string | undefined) => string | undefined;
+    setJurisdictionSelectedCard: (card_type: string) => void;
     type_of_card: string;
     disabled: boolean;
     poa_failed: boolean;
@@ -65,7 +65,7 @@ const JurisdictionCard = ({
     poi_status,
     is_fully_authenticated,
     is_pending_authentication,
-    selectTypeOfCard,
+    setJurisdictionSelectedCard,
     type_of_card,
     disabled,
     poa_failed,
@@ -87,9 +87,9 @@ const JurisdictionCard = ({
 
     const cardSelection = (cardType: string) => {
         if (jurisdiction_selected_card === cardType) {
-            selectTypeOfCard(undefined);
+            setJurisdictionSelectedCard('');
         } else {
-            selectTypeOfCard(cardType);
+            setJurisdictionSelectedCard(cardType);
         }
     };
 
@@ -218,7 +218,7 @@ const JurisdictionCard = ({
 const JurisdictionModalContent = ({
     jurisdiction_selected_card,
     account_type,
-    selectTypeOfCard,
+    setJurisdictionSelectedCard,
     synthetic_available_accounts,
     financial_available_accounts,
     poa_status,
@@ -235,6 +235,7 @@ const JurisdictionModalContent = ({
 }: TJurisdictionModalContent) => {
     const poa_none = poa_status === PoaStatusCodes.none;
     const poi_none = poi_status === PoaStatusCodes.none;
+    const poi_poa_verified = poi_status === PoaStatusCodes.verified && poa_status === PoaStatusCodes.verified;
 
     const cardsToBeShown = (type_of_card: string) => {
         const is_available =
@@ -341,7 +342,7 @@ const JurisdictionModalContent = ({
                         is_pending_authentication={is_pending_authentication}
                         poa_status={poa_status}
                         poi_status={poi_status}
-                        selectTypeOfCard={selectTypeOfCard}
+                        setJurisdictionSelectedCard={setJurisdictionSelectedCard}
                         disabled={disableCard('bvi')}
                         poa_failed={poa_failed}
                         poi_failed={poi_failed}
@@ -359,7 +360,7 @@ const JurisdictionModalContent = ({
                         account_type={account_type}
                         poa_status={poa_status}
                         poi_status={poi_status}
-                        selectTypeOfCard={selectTypeOfCard}
+                        setJurisdictionSelectedCard={setJurisdictionSelectedCard}
                         disabled={disableCard('mf')}
                         poa_failed={poa_failed}
                         poi_failed={poi_failed}
@@ -377,7 +378,7 @@ const JurisdictionModalContent = ({
                         account_type={account_type}
                         poa_status={poa_status}
                         poi_status={poi_status}
-                        selectTypeOfCard={selectTypeOfCard}
+                        setJurisdictionSelectedCard={setJurisdictionSelectedCard}
                         disabled={disableCard('vanuatu')}
                         poa_failed={poa_failed}
                         poi_failed={poi_failed}
@@ -394,7 +395,7 @@ const JurisdictionModalContent = ({
                         account_type={account_type}
                         poa_status={poa_status}
                         poi_status={poi_status}
-                        selectTypeOfCard={selectTypeOfCard}
+                        setJurisdictionSelectedCard={setJurisdictionSelectedCard}
                         disabled={disableCard('labuan')}
                         poa_failed={poa_failed}
                         poi_failed={poi_failed}
@@ -412,7 +413,7 @@ const JurisdictionModalContent = ({
                         account_type={account_type}
                         poa_status={poa_status}
                         poi_status={poi_status}
-                        selectTypeOfCard={selectTypeOfCard}
+                        setJurisdictionSelectedCard={setJurisdictionSelectedCard}
                         disabled={disableCard('svg')}
                         poa_failed={poa_failed}
                         poi_failed={poi_failed}
@@ -420,18 +421,16 @@ const JurisdictionModalContent = ({
                 )}
             </div>
             <ModalFootNote />
-            {((is_eu && is_fully_authenticated && jurisdiction_selected_card === 'malta') ||
-                (is_fully_authenticated && jurisdiction_selected_card === 'bvi') ||
-                (is_fully_authenticated && jurisdiction_selected_card === 'vanuatu') ||
-                jurisdiction_selected_card === 'labuan') && <ModalCheckbox is_checked={checked} onCheck={setChecked} />}
+            {is_fully_authenticated &&
+                poi_poa_verified &&
+                jurisdiction_selected_card &&
+                jurisdiction_selected_card !== 'svg' && <ModalCheckbox is_checked={checked} onCheck={setChecked} />}
         </>
     );
 };
 
 export default connect(({ modules: { cfd }, client }: RootStore) => ({
     account_status: client.account_status,
-    selectTypeOfCard: cfd.selectTypeOfCard,
-    jurisdiction_selected_card: cfd.jurisdiction_selected_card,
     real_financial_accounts_existing_data: cfd.real_financial_accounts_existing_data,
     real_synthetic_accounts_existing_data: cfd.real_synthetic_accounts_existing_data,
 }))(JurisdictionModalContent);
diff --git a/packages/cfd/src/Containers/jurisdiction-modal.tsx b/packages/cfd/src/Containers/jurisdiction-modal.tsx
index 45690154fb52..bf10f88d981d 100644
--- a/packages/cfd/src/Containers/jurisdiction-modal.tsx
+++ b/packages/cfd/src/Containers/jurisdiction-modal.tsx
@@ -47,12 +47,12 @@ type TJurisdictionModalProps = TCompareAccountsReusedProps & {
     disableApp: () => void;
     enableApp: () => void;
     has_real_mt5_login: boolean;
+    is_authentication_needed: boolean;
     is_jurisdiction_modal_visible: boolean;
     is_loading: boolean;
     is_eu: boolean;
     is_eu_country: boolean;
     residence: string;
-    jurisdiction_selected_card: string;
     toggleCFDPersonalDetailsModal: () => void;
     toggleJurisdictionModal: () => void;
     trading_platform_available_accounts: TTradingPlatformAvailableAccount[];
@@ -68,9 +68,9 @@ const JurisdictionModal = ({
     disableApp,
     enableApp,
     has_real_mt5_login,
+    is_authentication_needed,
     is_jurisdiction_modal_visible,
     is_eu,
-    jurisdiction_selected_card,
     toggleCFDPersonalDetailsModal,
     toggleJurisdictionModal,
     trading_platform_available_accounts,
@@ -79,7 +79,8 @@ const JurisdictionModal = ({
     openPasswordModal,
     toggleCFDVerificationModal,
 }: TJurisdictionModalProps) => {
-    const [checked, setChecked] = React.useState<boolean>(false);
+    const [jurisdiction_selected_card, setJurisdictionSelectedCard] = React.useState('');
+    const [checked, setChecked] = React.useState(false);
 
     const financial_available_accounts = trading_platform_available_accounts.filter(
         available_account => available_account.market_type === 'financial'
@@ -124,7 +125,7 @@ const JurisdictionModal = ({
         if (is_eu) {
             if (poi_poa_verified) {
                 openPasswordModal(type_of_account);
-            } else {
+            } else if (is_authentication_needed) {
                 toggleCFDVerificationModal();
             }
         } else if (jurisdiction_selected_card === 'svg') {
@@ -140,9 +141,12 @@ const JurisdictionModal = ({
             } else {
                 openPasswordModal(type_of_account);
             }
-        } else {
+        } else if (is_authentication_needed) {
             toggleCFDVerificationModal();
+        } else {
+            openPasswordModal(type_of_account);
         }
+        setJurisdictionSelectedCard('');
     };
 
     const buttonText = () => {
@@ -174,6 +178,8 @@ const JurisdictionModal = ({
                         >
                             <JurisdictionModalContent
                                 financial_available_accounts={financial_available_accounts}
+                                jurisdiction_selected_card={jurisdiction_selected_card}
+                                setJurisdictionSelectedCard={setJurisdictionSelectedCard}
                                 synthetic_available_accounts={synthetic_available_accounts}
                                 account_type={account_type.type}
                                 authentication_status={authentication_status}
@@ -205,7 +211,10 @@ const JurisdictionModal = ({
                             portal_element_id='deriv_app'
                             title={modal_title}
                             visible={is_jurisdiction_modal_visible}
-                            onClose={toggleJurisdictionModal}
+                            onClose={() => {
+                                toggleJurisdictionModal();
+                                setJurisdictionSelectedCard('');
+                            }}
                             footer={
                                 <Button
                                     style={{ width: '100%' }}
@@ -221,6 +230,8 @@ const JurisdictionModal = ({
                         >
                             <JurisdictionModalContent
                                 financial_available_accounts={financial_available_accounts}
+                                jurisdiction_selected_card={jurisdiction_selected_card}
+                                setJurisdictionSelectedCard={setJurisdictionSelectedCard}
                                 synthetic_available_accounts={synthetic_available_accounts}
                                 account_type={account_type.type}
                                 authentication_status={authentication_status}
@@ -248,6 +259,7 @@ export default connect(({ modules, ui, client }: RootStore) => ({
     disableApp: ui.disableApp,
     enableApp: ui.enableApp,
     has_real_mt5_login: client.has_real_mt5_login,
+    is_authentication_needed: client.is_authentication_needed,
     is_jurisdiction_modal_visible: modules.cfd.is_jurisdiction_modal_visible,
     trading_platform_available_accounts: client.trading_platform_available_accounts,
     is_loading: client.is_populating_mt5_account_list,
@@ -258,7 +270,6 @@ export default connect(({ modules, ui, client }: RootStore) => ({
     is_fully_authenticated: client.is_fully_authenticated,
     is_pending_authentication: client.is_pending_authentication,
     toggleJurisdictionModal: modules.cfd.toggleJurisdictionModal,
-    jurisdiction_selected_card: modules.cfd.jurisdiction_selected_card,
     residence: client.residence,
     toggleCFDVerificationModal: modules.cfd.toggleCFDVerificationModal,
 }))(JurisdictionModal);
diff --git a/packages/cfd/src/Stores/Modules/CFD/cfd-store.js b/packages/cfd/src/Stores/Modules/CFD/cfd-store.js
index 5a24e7ef9e92..f80a92fea55f 100644
--- a/packages/cfd/src/Stores/Modules/CFD/cfd-store.js
+++ b/packages/cfd/src/Stores/Modules/CFD/cfd-store.js
@@ -27,8 +27,6 @@ export default class CFDStore extends BaseStore {
     @observable is_cfd_password_modal_enabled = false;
     @observable is_cfd_reset_password_modal_enabled = false;
 
-    @observable jurisdiction_selected_card = undefined;
-
     @observable is_cfd_pending_dialog_open = false;
 
     @observable current_account = undefined; // this is a tmp value, don't rely on it, unless you set it first.
@@ -181,12 +179,6 @@ export default class CFDStore extends BaseStore {
         this.is_cfd_password_modal_enabled = true;
     }
 
-    @action.bound
-    selectTypeOfCard(card_type) {
-        this.jurisdiction_selected_card = undefined;
-        this.jurisdiction_selected_card = card_type;
-    }
-
     @action.bound
     getName() {
         const { first_name } = this.root_store.client.account_settings && this.root_store.client.account_settings;