From 5b6f56ec26f83374e8b0dbbdcec0c8b47e51f3d5 Mon Sep 17 00:00:00 2001
From: amina-deriv <amina@deriv.com>
Date: Wed, 21 Dec 2022 12:33:00 +0400
Subject: [PATCH 1/6] feat:ui for traders hub exit modal

---
 .../exit-traders-hub-modal.scss               | 39 ++++++++++
 .../exit-traders-hub-modal.tsx                | 73 +++++++++++++++++++
 .../modals/exit-traders-hub-modal/index.ts    |  4 +
 .../src/components/modals/modal-manager.tsx   |  2 +
 .../Layout/Header/toggle-menu-drawer.jsx      |  6 +-
 .../Layout/header/trading-hub-header.jsx      | 23 ++++--
 packages/core/src/Stores/traders-hub-store.js |  7 ++
 7 files changed, 147 insertions(+), 7 deletions(-)
 create mode 100644 packages/appstore/src/components/modals/exit-traders-hub-modal/exit-traders-hub-modal.scss
 create mode 100644 packages/appstore/src/components/modals/exit-traders-hub-modal/exit-traders-hub-modal.tsx
 create mode 100644 packages/appstore/src/components/modals/exit-traders-hub-modal/index.ts

diff --git a/packages/appstore/src/components/modals/exit-traders-hub-modal/exit-traders-hub-modal.scss b/packages/appstore/src/components/modals/exit-traders-hub-modal/exit-traders-hub-modal.scss
new file mode 100644
index 000000000000..e16881460072
--- /dev/null
+++ b/packages/appstore/src/components/modals/exit-traders-hub-modal/exit-traders-hub-modal.scss
@@ -0,0 +1,39 @@
+.dc-modal__container_exit-traders-hub-modal {
+    .dc-modal-header {
+        border-bottom: 2px solid var(--general-section-2);
+    }
+}
+
+.dc-mobile-dialog__exit-traders-hub-modal_mobile_content {
+    .dc-modal-body {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        min-height: calc(100vh- 4rem);
+        height: calc(100vh - 12rem);
+        padding: 2.4rem;
+    }
+
+    .dc-modal-footer {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 0.8rem;
+        align-self: flex-end;
+        top: initial;
+        bottom: 0;
+        left: 0;
+        position: fixed;
+        padding: 1.6rem;
+        max-height: 70px;
+        width: 100%;
+      
+
+        .dc-btn {
+            margin: 0;
+            width: 100%
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/packages/appstore/src/components/modals/exit-traders-hub-modal/exit-traders-hub-modal.tsx b/packages/appstore/src/components/modals/exit-traders-hub-modal/exit-traders-hub-modal.tsx
new file mode 100644
index 000000000000..e66d33974ef1
--- /dev/null
+++ b/packages/appstore/src/components/modals/exit-traders-hub-modal/exit-traders-hub-modal.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { withRouter, useHistory } from 'react-router-dom';
+import { useStores } from 'Stores';
+import { Modal, DesktopWrapper, MobileDialog, MobileWrapper, UILoader, Text, Button } from '@deriv/components';
+import { routes } from '@deriv/shared';
+import { localize } from '@deriv/translations';
+
+const ExitTradersHubModal = () => {
+    const history = useHistory();
+    const { ui, traders_hub, client } = useStores();
+    const { disableApp, enableApp } = ui;
+    const { setIsPreAppStore } = client;
+    const { is_exit_traders_hub_modal_visible, toggleExitTradersHubModal } = traders_hub;
+
+    const exit_traders_hub_modal_content = (
+        <Text size='xs'>
+            {localize(`You won’t be able to see your EU account in the traditional view. The open positions in your EU
+        account will remain open. You can switch back to this view at any time.`)}
+        </Text>
+    );
+
+    const closeModal = () => {
+        toggleExitTradersHubModal();
+    };
+
+    const onClickExitButton = () => {
+        toggleExitTradersHubModal();
+        setIsPreAppStore(false);
+        history.push(routes.root);
+    };
+    return (
+        <React.Suspense fallback={<UILoader />}>
+            <DesktopWrapper>
+                <Modal
+                    disableApp={disableApp}
+                    enableApp={enableApp}
+                    is_open={is_exit_traders_hub_modal_visible}
+                    title={localize('Are you sure?')}
+                    toggleModal={closeModal}
+                    type='button'
+                    height='256px'
+                    width='440px'
+                    className='exit-traders-hub-modal'
+                >
+                    <Modal.Body>{exit_traders_hub_modal_content}</Modal.Body>
+                    <Modal.Footer has_separator>
+                        <Button onClick={closeModal} has_effect text={localize('Not now')} secondary large />
+                        <Button has_effect onClick={onClickExitButton} text={localize('Yes, exit')} primary large />
+                    </Modal.Footer>
+                </Modal>
+            </DesktopWrapper>
+            <MobileWrapper>
+                <MobileDialog
+                    portal_element_id='deriv_app'
+                    title={localize('Are you sure?')}
+                    visible={is_exit_traders_hub_modal_visible}
+                    onClose={closeModal}
+                    has_full_height
+                    wrapper_classname='exit-traders-hub-modal_mobile_content'
+                >
+                    <Modal.Body>{exit_traders_hub_modal_content}</Modal.Body>
+                    <Modal.Footer has_separator>
+                        <Button onClick={closeModal} has_effect text={localize('Not now')} secondary large />
+                        <Button has_effect onClick={onClickExitButton} text={localize('Yes, exit')} primary large />
+                    </Modal.Footer>
+                </MobileDialog>
+            </MobileWrapper>
+        </React.Suspense>
+    );
+};
+
+export default withRouter(observer(ExitTradersHubModal));
diff --git a/packages/appstore/src/components/modals/exit-traders-hub-modal/index.ts b/packages/appstore/src/components/modals/exit-traders-hub-modal/index.ts
new file mode 100644
index 000000000000..1022aab54003
--- /dev/null
+++ b/packages/appstore/src/components/modals/exit-traders-hub-modal/index.ts
@@ -0,0 +1,4 @@
+import ExitTradersHubModal from './exit-traders-hub-modal';
+import './exit-traders-hub-modal.scss';
+
+export default ExitTradersHubModal;
diff --git a/packages/appstore/src/components/modals/modal-manager.tsx b/packages/appstore/src/components/modals/modal-manager.tsx
index 66f8229d1163..f43ccaf0ae7c 100644
--- a/packages/appstore/src/components/modals/modal-manager.tsx
+++ b/packages/appstore/src/components/modals/modal-manager.tsx
@@ -14,6 +14,7 @@ import {
 } from '@deriv/cfd';
 import MT5AccountTypeModal from './account-type-modal';
 import RegulatorsCompareModal from './regulators-compare-modal';
+import ExitTradersHubModal from './exit-traders-hub-modal';
 import { useStores } from 'Stores';
 import { TOpenAccountTransferMeta } from 'Types';
 
@@ -57,6 +58,7 @@ const ModalManager = () => {
             <ResetTradingPasswordModal context={store} />
             <MT5AccountTypeModal />
             <RegulatorsCompareModal />
+            <ExitTradersHubModal />
         </React.Fragment>
     );
 };
diff --git a/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx b/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx
index fbe12afefc18..9411e44fe0e5 100644
--- a/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx
+++ b/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx
@@ -126,6 +126,7 @@ const ToggleMenuDrawer = React.forwardRef(
             should_allow_authentication,
             title,
             toggleTheme,
+            toggleExitTradersHubModal,
         },
         ref
     ) => {
@@ -343,7 +344,10 @@ const ToggleMenuDrawer = React.forwardRef(
             if (is_pre_appstore) {
                 setIsPreAppStore(false);
                 toggleDrawer();
-                history.push(routes.root);
+                // history.push(routes.root);
+                if (toggleExitTradersHubModal()) {
+                    toggleExitTradersHubModal();
+                }
             } else {
                 setIsPreAppStore(true);
                 toggleDrawer();
diff --git a/packages/core/src/App/Containers/Layout/header/trading-hub-header.jsx b/packages/core/src/App/Containers/Layout/header/trading-hub-header.jsx
index e906fbd2791a..13000756d1b6 100644
--- a/packages/core/src/App/Containers/Layout/header/trading-hub-header.jsx
+++ b/packages/core/src/App/Containers/Layout/header/trading-hub-header.jsx
@@ -32,18 +32,22 @@ export const TradersHubHomeButton = () => {
     );
 };
 
-const RedirectToOldInterface = ({ setIsPreAppStore }) => {
-    const disablePreAppstore = () => setIsPreAppStore(false);
-
+const RedirectToOldInterface = ({ setIsPreAppStore, toggleExitTradersHubModal }) => {
+    const disablePreAppstore = () => {
+        // toggleExitTradersHubModal();
+        console.log('inside tradingb hub header');
+        // setIsPreAppStore(false);
+        toggleExitTradersHubModal();
+    };
     return (
         <div className='trading-hub-header__redirect'>
-            <BinaryLink to={routes.trade} className='trading-hub-header__redirect--link' onClick={disablePreAppstore}>
+            <div className='trading-hub-header__redirect--link' onClick={disablePreAppstore}>
                 <Text as='p' size='xs' color='general'>
                     <Localize i18n_default_text="Exit Trader's hub" />
                 </Text>
                 <Icon className='trading-hub-header__redirect--beta' icon='IcAppstoreTradingHubBeta' size={50} />
                 <Icon icon='IcArrowRight' size={18} color='red' />
-            </BinaryLink>
+            </div>
         </div>
     );
 };
@@ -119,6 +123,7 @@ const TradingHubHeader = ({
     should_allow_authentication,
     toggleIsTourOpen,
     toggleNotifications,
+    toggleExitTradersHubModal,
 }) => {
     const is_mf = loginid?.startsWith('MF');
     const toggle_menu_drawer_ref = React.useRef(null);
@@ -164,6 +169,7 @@ const TradingHubHeader = ({
                         }
                         is_social_signup={is_social_signup}
                         setIsPreAppStore={setIsPreAppStore}
+                        toggleExitTradersHubModal={toggleExitTradersHubModal}
                     />
                     {header_extension && is_logged_in && <div>{header_extension}</div>}
                 </MobileWrapper>
@@ -181,7 +187,10 @@ const TradingHubHeader = ({
             </div>
             <DesktopWrapper>
                 <div className='trading-hub-header__menu-right'>
-                    <RedirectToOldInterface setIsPreAppStore={setIsPreAppStore} />
+                    <RedirectToOldInterface
+                        setIsPreAppStore={setIsPreAppStore}
+                        toggleExitTradersHubModal={toggleExitTradersHubModal}
+                    />
                     <Divider />
                     <div className='trading-hub-header__menu-right--items'>
                         <div className='trading-hub-header__menu-right--items--onboarding'>
@@ -289,6 +298,7 @@ TradingHubHeader.propTypes = {
     should_allow_authentication: PropTypes.bool,
     toggleIsTourOpen: PropTypes.func,
     toggleNotifications: PropTypes.func,
+    toggleExitTradersHubModal: PropTypes.func,
 };
 
 export default connect(({ client, common, modules, notifications, ui, menu, traders_hub }) => ({
@@ -322,4 +332,5 @@ export default connect(({ client, common, modules, notifications, ui, menu, trad
     should_allow_authentication: client.should_allow_authentication,
     toggleIsTourOpen: traders_hub.toggleIsTourOpen,
     toggleNotifications: notifications.toggleNotificationsModal,
+    toggleExitTradersHubModal: traders_hub.toggleExitTradersHubModal,
 }))(withRouter(TradingHubHeader));
diff --git a/packages/core/src/Stores/traders-hub-store.js b/packages/core/src/Stores/traders-hub-store.js
index da2e667f03bb..a1a990ece8c0 100644
--- a/packages/core/src/Stores/traders-hub-store.js
+++ b/packages/core/src/Stores/traders-hub-store.js
@@ -15,6 +15,7 @@ export default class TradersHubStore extends BaseStore {
     available_dxtrade_accounts = [];
     selected_region;
     selected_account_type = 'demo';
+    is_exit_traders_hub_modal_visible = false;
     is_regulators_compare_modal_visible = false;
     is_tour_open = false;
     is_account_type_modal_visible = false;
@@ -31,6 +32,7 @@ export default class TradersHubStore extends BaseStore {
             available_dxtrade_accounts: observable,
             available_mt5_accounts: observable,
             is_regulators_compare_modal_visible: observable,
+            is_exit_traders_hub_modal_visible: observable,
             selected_account_type: observable,
             account_type_card: observable,
             selected_platform_type: observable,
@@ -44,6 +46,7 @@ export default class TradersHubStore extends BaseStore {
             toggleIsTourOpen: action.bound,
             toggleAccountTypeModalVisibility: action.bound,
             handleTabItemClick: action.bound,
+            toggleExitTradersHubModal: action.bound,
             toggleRegulatorsCompareModal: action.bound,
             has_any_real_account: computed,
             is_demo: computed,
@@ -295,4 +298,8 @@ export default class TradersHubStore extends BaseStore {
             this.openRealAccount(account_type, platform);
         }
     }
+    toggleExitTradersHubModal() {
+        this.is_exit_traders_hub_modal_visible = !this.is_exit_traders_hub_modal_visible;
+        console.log(' this.is_exit_traders_hub_modal_visible ', this.is_exit_traders_hub_modal_visible);
+    }
 }

From 42ce5956b5a0357190091635d8031c3243e0c3da Mon Sep 17 00:00:00 2001
From: amina-deriv <amina@deriv.com>
Date: Wed, 21 Dec 2022 15:11:25 +0400
Subject: [PATCH 2/6] feat: added observable to show the exit modal

---
 .../exit-traders-hub-modal.scss                   |  1 -
 .../Layout/Header/toggle-menu-drawer.jsx          | 11 +++++++----
 .../Layout/header/trading-hub-header.jsx          | 15 ++++++++++++---
 packages/core/src/Stores/traders-hub-store.js     |  6 ++++++
 4 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/packages/appstore/src/components/modals/exit-traders-hub-modal/exit-traders-hub-modal.scss b/packages/appstore/src/components/modals/exit-traders-hub-modal/exit-traders-hub-modal.scss
index f3a28348e584..44d426e658e5 100644
--- a/packages/appstore/src/components/modals/exit-traders-hub-modal/exit-traders-hub-modal.scss
+++ b/packages/appstore/src/components/modals/exit-traders-hub-modal/exit-traders-hub-modal.scss
@@ -10,7 +10,6 @@
         justify-content: center;
         align-items: center;
         text-align: center;
-        min-height: calc(100vh - 4rem);
         height: calc(100vh - 12rem);
         padding: 2.4rem;
     }
diff --git a/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx b/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx
index 12c9e4379a26..b3489397a225 100644
--- a/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx
+++ b/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx
@@ -127,6 +127,7 @@ const ToggleMenuDrawer = React.forwardRef(
             platform_switcher,
             setIsPreAppStore,
             should_allow_authentication,
+            should_show_exit_traders_modal,
             title,
             toggleTheme,
             toggleExitTradersHubModal,
@@ -353,11 +354,13 @@ const ToggleMenuDrawer = React.forwardRef(
 
         const tradingHubRedirect = () => {
             if (is_pre_appstore) {
-                setIsPreAppStore(false);
-                toggleDrawer();
-                // history.push(routes.root);
-                if (toggleExitTradersHubModal()) {
+                if (should_show_exit_traders_modal) {
+                    toggleDrawer();
                     toggleExitTradersHubModal();
+                } else {
+                    setIsPreAppStore(false);
+                    toggleDrawer();
+                    history.push(routes.root);
                 }
             } else {
                 setIsPreAppStore(true);
diff --git a/packages/core/src/App/Containers/Layout/header/trading-hub-header.jsx b/packages/core/src/App/Containers/Layout/header/trading-hub-header.jsx
index 021058f883b2..6c2516260c69 100644
--- a/packages/core/src/App/Containers/Layout/header/trading-hub-header.jsx
+++ b/packages/core/src/App/Containers/Layout/header/trading-hub-header.jsx
@@ -32,10 +32,14 @@ export const TradersHubHomeButton = () => {
     );
 };
 
-const RedirectToOldInterface = ({ setIsPreAppStore, toggleExitTradersHubModal }) => {
+const RedirectToOldInterface = ({ setIsPreAppStore, should_show_exit_traders_modal, toggleExitTradersHubModal }) => {
     const disablePreAppstore = () => {
-        setIsPreAppStore(false);
-        toggleExitTradersHubModal();
+        if (should_show_exit_traders_modal) {
+            toggleExitTradersHubModal();
+        } else {
+            setIsPreAppStore(false);
+            history.push(routes.root);
+        }
     };
     return (
         <div className='trading-hub-header__redirect'>
@@ -119,6 +123,7 @@ const TradingHubHeader = ({
     setIsOnboardingVisited,
     setIsPreAppStore,
     should_allow_authentication,
+    should_show_exit_traders_modal,
     toggleIsTourOpen,
     toggleNotifications,
     toggleExitTradersHubModal,
@@ -167,6 +172,7 @@ const TradingHubHeader = ({
                         }
                         is_social_signup={is_social_signup}
                         setIsPreAppStore={setIsPreAppStore}
+                        should_show_exit_traders_modal={should_show_exit_traders_modal}
                         toggleExitTradersHubModal={toggleExitTradersHubModal}
                     />
                     {header_extension && is_logged_in && <div>{header_extension}</div>}
@@ -187,6 +193,7 @@ const TradingHubHeader = ({
                 <div className='trading-hub-header__menu-right'>
                     <RedirectToOldInterface
                         setIsPreAppStore={setIsPreAppStore}
+                        should_show_exit_traders_modal={should_show_exit_traders_modal}
                         toggleExitTradersHubModal={toggleExitTradersHubModal}
                     />
                     <Divider />
@@ -294,6 +301,7 @@ TradingHubHeader.propTypes = {
     setIsOnboardingVisited: PropTypes.func,
     settings_extension: PropTypes.array,
     should_allow_authentication: PropTypes.bool,
+    should_show_exit_traders_modal: PropTypes.bool,
     toggleIsTourOpen: PropTypes.func,
     toggleNotifications: PropTypes.func,
     toggleExitTradersHubModal: PropTypes.func,
@@ -328,6 +336,7 @@ export default connect(({ client, common, modules, notifications, ui, menu, trad
     setIsOnboardingVisited: traders_hub.setIsOnboardingVisited,
     setIsPreAppStore: client.setIsPreAppStore,
     should_allow_authentication: client.should_allow_authentication,
+    should_show_exit_traders_modal: traders_hub.should_show_exit_traders_modal,
     toggleIsTourOpen: traders_hub.toggleIsTourOpen,
     toggleNotifications: notifications.toggleNotificationsModal,
     toggleExitTradersHubModal: traders_hub.toggleExitTradersHubModal,
diff --git a/packages/core/src/Stores/traders-hub-store.js b/packages/core/src/Stores/traders-hub-store.js
index 7f3f4e4392f4..06a8e06d21d1 100644
--- a/packages/core/src/Stores/traders-hub-store.js
+++ b/packages/core/src/Stores/traders-hub-store.js
@@ -51,6 +51,7 @@ export default class TradersHubStore extends BaseStore {
             has_any_real_account: computed,
             is_demo: computed,
             is_eu_selected: computed,
+            should_show_exit_traders_modal: computed,
             getAvailableDxtradeAccounts: action.bound,
             getAvailableCFDAccounts: action.bound,
             getExistingAccounts: action.bound,
@@ -105,6 +106,10 @@ export default class TradersHubStore extends BaseStore {
         return this.selected_region === 'EU';
     }
 
+    get should_show_exit_traders_modal() {
+        return this.selected_account_type === 'real';
+    }
+
     toggleRegulatorsCompareModal() {
         this.is_regulators_compare_modal_visible = !this.is_regulators_compare_modal_visible;
     }
@@ -298,6 +303,7 @@ export default class TradersHubStore extends BaseStore {
             this.openRealAccount(account_type, platform);
         }
     }
+
     toggleExitTradersHubModal() {
         this.is_exit_traders_hub_modal_visible = !this.is_exit_traders_hub_modal_visible;
     }

From 79e8624631d59242e9e4a7579ad7af74d531a8a7 Mon Sep 17 00:00:00 2001
From: amina-deriv <amina@deriv.com>
Date: Wed, 21 Dec 2022 15:26:40 +0400
Subject: [PATCH 3/6] feat: exit modal

---
 .../exit-traders-hub-modal/exit-traders-hub-modal.tsx     | 8 ++++----
 packages/core/src/Stores/traders-hub-store.js             | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/appstore/src/components/modals/exit-traders-hub-modal/exit-traders-hub-modal.tsx b/packages/appstore/src/components/modals/exit-traders-hub-modal/exit-traders-hub-modal.tsx
index e66d33974ef1..de9643a4852d 100644
--- a/packages/appstore/src/components/modals/exit-traders-hub-modal/exit-traders-hub-modal.tsx
+++ b/packages/appstore/src/components/modals/exit-traders-hub-modal/exit-traders-hub-modal.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
+import { useHistory, withRouter } from 'react-router-dom';
 import { observer } from 'mobx-react-lite';
-import { withRouter, useHistory } from 'react-router-dom';
 import { useStores } from 'Stores';
-import { Modal, DesktopWrapper, MobileDialog, MobileWrapper, UILoader, Text, Button } from '@deriv/components';
-import { routes } from '@deriv/shared';
+import { Button, DesktopWrapper, MobileDialog, MobileWrapper, Modal, Text, UILoader } from '@deriv/components';
+import { isMobile, routes } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 
 const ExitTradersHubModal = () => {
@@ -14,7 +14,7 @@ const ExitTradersHubModal = () => {
     const { is_exit_traders_hub_modal_visible, toggleExitTradersHubModal } = traders_hub;
 
     const exit_traders_hub_modal_content = (
-        <Text size='xs'>
+        <Text size={isMobile() ? 'xxs' : 'xs'}>
             {localize(`You won’t be able to see your EU account in the traditional view. The open positions in your EU
         account will remain open. You can switch back to this view at any time.`)}
         </Text>
diff --git a/packages/core/src/Stores/traders-hub-store.js b/packages/core/src/Stores/traders-hub-store.js
index 06a8e06d21d1..cfe421c8f699 100644
--- a/packages/core/src/Stores/traders-hub-store.js
+++ b/packages/core/src/Stores/traders-hub-store.js
@@ -107,7 +107,7 @@ export default class TradersHubStore extends BaseStore {
     }
 
     get should_show_exit_traders_modal() {
-        return this.selected_account_type === 'real';
+        return this.selected_account_type === 'real'; //added just for testing , should change this
     }
 
     toggleRegulatorsCompareModal() {

From 40fc9cc6475773e3e82450914997363697b65a5a Mon Sep 17 00:00:00 2001
From: amina-deriv <amina@deriv.com>
Date: Wed, 4 Jan 2023 13:29:17 +0400
Subject: [PATCH 4/6] fix: condition to show exit modal

---
 .../Containers/Layout/header/trading-hub-header.jsx   |  1 +
 packages/core/src/Stores/traders-hub-store.js         | 11 ++++++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/App/Containers/Layout/header/trading-hub-header.jsx b/packages/core/src/App/Containers/Layout/header/trading-hub-header.jsx
index e7e150b9ba72..78d116564077 100644
--- a/packages/core/src/App/Containers/Layout/header/trading-hub-header.jsx
+++ b/packages/core/src/App/Containers/Layout/header/trading-hub-header.jsx
@@ -40,6 +40,7 @@ export const TradersHubHomeButton = () => {
 };
 
 const RedirectToOldInterface = ({ setIsPreAppStore, should_show_exit_traders_modal, toggleExitTradersHubModal }) => {
+    const history = useHistory();
     const disablePreAppstore = () => {
         if (should_show_exit_traders_modal) {
             toggleExitTradersHubModal();
diff --git a/packages/core/src/Stores/traders-hub-store.js b/packages/core/src/Stores/traders-hub-store.js
index 62e71dcba17e..aff2e50abc31 100644
--- a/packages/core/src/Stores/traders-hub-store.js
+++ b/packages/core/src/Stores/traders-hub-store.js
@@ -67,8 +67,6 @@ export default class TradersHubStore extends BaseStore {
             is_demo: computed,
             is_demo_low_risk: computed,
             is_eu_selected: computed,
-            should_show_exit_traders_modal: computed,
-            startTrade: action.bound,
             is_real: computed,
             can_get_more_cfd_mt5_accounts: computed,
             no_CR_account: computed,
@@ -82,6 +80,8 @@ export default class TradersHubStore extends BaseStore {
             selectRegion: action.bound,
             setActiveIndex: action.bound,
             setTogglePlatformType: action.bound,
+            should_show_exit_traders_modal: computed,
+            startTrade: action.bound,
             toggleAccountTypeModalVisibility: action.bound,
             toggleExitTradersHubModal: action.bound,
             toggleIsTourOpen: action.bound,
@@ -240,7 +240,12 @@ export default class TradersHubStore extends BaseStore {
     }
 
     get should_show_exit_traders_modal() {
-        return this.selected_account_type === 'real'; //added just for testing , should change this
+        //  should display the modal user have atleast one mf account and cr account
+        const { active_accounts } = this.root_store.client;
+        return (
+            active_accounts.some(acc => acc.landing_company_shortcode === 'maltainvest') &&
+            active_accounts.some(acc => acc.landing_company_shortcode === 'svg')
+        );
     }
 
     toggleRegulatorsCompareModal() {

From 3ea509df73d2449be9cc06d3b2e21287caa27f1f Mon Sep 17 00:00:00 2001
From: amina-deriv <amina@deriv.com>
Date: Wed, 4 Jan 2023 13:43:44 +0400
Subject: [PATCH 5/6] fix: modal content

---
 .../exit-traders-hub-modal.tsx                | 24 +++++++++++--------
 packages/core/src/Stores/traders-hub-store.js |  2 +-
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/appstore/src/components/modals/exit-traders-hub-modal/exit-traders-hub-modal.tsx b/packages/appstore/src/components/modals/exit-traders-hub-modal/exit-traders-hub-modal.tsx
index de9643a4852d..b5bdbb74a409 100644
--- a/packages/appstore/src/components/modals/exit-traders-hub-modal/exit-traders-hub-modal.tsx
+++ b/packages/appstore/src/components/modals/exit-traders-hub-modal/exit-traders-hub-modal.tsx
@@ -20,6 +20,18 @@ const ExitTradersHubModal = () => {
         </Text>
     );
 
+    const ModalContent = () => {
+        return (
+            <React.Fragment>
+                <Modal.Body>{exit_traders_hub_modal_content}</Modal.Body>
+                <Modal.Footer has_separator>
+                    <Button onClick={closeModal} has_effect text={localize('Not now')} secondary large />
+                    <Button has_effect onClick={onClickExitButton} text={localize('Yes, exit')} primary large />
+                </Modal.Footer>
+            </React.Fragment>
+        );
+    };
+
     const closeModal = () => {
         toggleExitTradersHubModal();
     };
@@ -43,11 +55,7 @@ const ExitTradersHubModal = () => {
                     width='440px'
                     className='exit-traders-hub-modal'
                 >
-                    <Modal.Body>{exit_traders_hub_modal_content}</Modal.Body>
-                    <Modal.Footer has_separator>
-                        <Button onClick={closeModal} has_effect text={localize('Not now')} secondary large />
-                        <Button has_effect onClick={onClickExitButton} text={localize('Yes, exit')} primary large />
-                    </Modal.Footer>
+                    <ModalContent />
                 </Modal>
             </DesktopWrapper>
             <MobileWrapper>
@@ -59,11 +67,7 @@ const ExitTradersHubModal = () => {
                     has_full_height
                     wrapper_classname='exit-traders-hub-modal_mobile_content'
                 >
-                    <Modal.Body>{exit_traders_hub_modal_content}</Modal.Body>
-                    <Modal.Footer has_separator>
-                        <Button onClick={closeModal} has_effect text={localize('Not now')} secondary large />
-                        <Button has_effect onClick={onClickExitButton} text={localize('Yes, exit')} primary large />
-                    </Modal.Footer>
+                    <ModalContent />
                 </MobileDialog>
             </MobileWrapper>
         </React.Suspense>
diff --git a/packages/core/src/Stores/traders-hub-store.js b/packages/core/src/Stores/traders-hub-store.js
index aff2e50abc31..1dd499e1f9dd 100644
--- a/packages/core/src/Stores/traders-hub-store.js
+++ b/packages/core/src/Stores/traders-hub-store.js
@@ -240,7 +240,7 @@ export default class TradersHubStore extends BaseStore {
     }
 
     get should_show_exit_traders_modal() {
-        //  should display the modal user have atleast one mf account and cr account
+        //  should display the modal when user have atleast one mf account and cr account
         const { active_accounts } = this.root_store.client;
         return (
             active_accounts.some(acc => acc.landing_company_shortcode === 'maltainvest') &&

From 9368aae79d40d40310fa23c28c66e930df9be3c3 Mon Sep 17 00:00:00 2001
From: amina-deriv <amina@deriv.com>
Date: Wed, 4 Jan 2023 14:44:50 +0400
Subject: [PATCH 6/6] fix: modal content

---
 packages/core/src/Stores/traders-hub-store.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/core/src/Stores/traders-hub-store.js b/packages/core/src/Stores/traders-hub-store.js
index 1dd499e1f9dd..e61bd6a2ed09 100644
--- a/packages/core/src/Stores/traders-hub-store.js
+++ b/packages/core/src/Stores/traders-hub-store.js
@@ -18,7 +18,6 @@ export default class TradersHubStore extends BaseStore {
     combined_cfd_mt5_accounts = [];
     selected_account_type;
     selected_region;
-    selected_account_type = 'demo';
     is_exit_traders_hub_modal_visible = false;
     is_regulators_compare_modal_visible = false;
     is_tour_open = false;