Merge pull request binary-com#56 from amina-deriv/83942/exit_traders_…

…hub_modal Amina/83942/exit traders hub modal
bahar-sadeghzadeh · Jan 5, 2023 · 4c67e42 · 4c67e42
2 parents d8c6164 + 9368aae
commit 4c67e42
Show file tree

Hide file tree

Showing 7 changed files with 171 additions and 9 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
@@ -0,0 +1,36 @@
+.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;
+        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%;
+        }
+    }
+}
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
@@ -0,0 +1,77 @@
+import React from 'react';
+import { useHistory, withRouter } from 'react-router-dom';
+import { observer } from 'mobx-react-lite';
+import { useStores } from 'Stores';
+import { Button, DesktopWrapper, MobileDialog, MobileWrapper, Modal, Text, UILoader } from '@deriv/components';
+import { isMobile, 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={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>
+    );
+
+    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();
+    };
+
+    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'
+                >
+                    <ModalContent />
+                </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'
+                >
+                    <ModalContent />
+                </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
@@ -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
@@ -15,6 +15,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';
 import CurrencySelectionModal from './currency-selection-modal';
@@ -129,6 +130,7 @@ const ModalManager = () => {
             <ResetTradingPasswordModal context={store} />
             <MT5AccountTypeModal />
             <RegulatorsCompareModal />
+            <ExitTradersHubModal />
             <CompareAccountsModal
                 context={store}
                 is_demo_tab={is_demo}

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
@@ -127,8 +127,10 @@ const ToggleMenuDrawer = React.forwardRef(
             platform_switcher,
             setIsPreAppStore,
             should_allow_authentication,
+            should_show_exit_traders_modal,
             title,
             toggleTheme,
+            toggleExitTradersHubModal,
         },
         ref
     ) => {
@@ -354,9 +356,14 @@ const ToggleMenuDrawer = React.forwardRef(
 
         const tradingHubRedirect = () => {
             if (is_pre_appstore) {
-                setIsPreAppStore(false);
-                toggleDrawer();
-                history.push(routes.root);
+                if (should_show_exit_traders_modal) {
+                    toggleDrawer();
+                    toggleExitTradersHubModal();
+                } else {
+                    setIsPreAppStore(false);
+                    toggleDrawer();
+                    history.push(routes.root);
+                }
             } 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
@@ -39,18 +39,25 @@ export const TradersHubHomeButton = () => {
     );
 };
 
-const RedirectToOldInterface = ({ setIsPreAppStore }) => {
-    const disablePreAppstore = () => setIsPreAppStore(false);
-
+const RedirectToOldInterface = ({ setIsPreAppStore, should_show_exit_traders_modal, toggleExitTradersHubModal }) => {
+    const history = useHistory();
+    const disablePreAppstore = () => {
+        if (should_show_exit_traders_modal) {
+            toggleExitTradersHubModal();
+        } else {
+            setIsPreAppStore(false);
+            history.push(routes.root);
+        }
+    };
     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>
     );
 };
@@ -124,8 +131,10 @@ const TradingHubHeader = ({
     setIsOnboardingVisited,
     setIsPreAppStore,
     should_allow_authentication,
+    should_show_exit_traders_modal,
     toggleIsTourOpen,
     toggleNotifications,
+    toggleExitTradersHubModal,
 }) => {
     const is_mf = loginid?.startsWith('MF');
     const toggle_menu_drawer_ref = React.useRef(null);
@@ -171,6 +180,8 @@ 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>}
                 </MobileWrapper>
@@ -188,7 +199,11 @@ const TradingHubHeader = ({
             </div>
             <DesktopWrapper>
                 <div className='trading-hub-header__menu-right'>
-                    <RedirectToOldInterface setIsPreAppStore={setIsPreAppStore} />
+                    <RedirectToOldInterface
+                        setIsPreAppStore={setIsPreAppStore}
+                        should_show_exit_traders_modal={should_show_exit_traders_modal}
+                        toggleExitTradersHubModal={toggleExitTradersHubModal}
+                    />
                     <Divider />
                     <div className='trading-hub-header__menu-right--items'>
                         <div className='trading-hub-header__menu-right--items--onboarding'>
@@ -294,8 +309,10 @@ 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,
 };
 
 export default connect(({ client, common, modules, notifications, ui, menu, traders_hub }) => ({
@@ -328,5 +345,7 @@ export default connect(({ client, common, modules, notifications, ui, menu, trad
     replaceCashierMenuOnclick: modules.cashier.general_store.replaceCashierMenuOnclick,
     setIsOnboardingVisited: traders_hub.setIsOnboardingVisited,
     setIsPreAppStore: client.setIsPreAppStore,
+    should_show_exit_traders_modal: traders_hub.should_show_exit_traders_modal,
     toggleIsTourOpen: traders_hub.toggleIsTourOpen,
+    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
@@ -18,6 +18,7 @@ export default class TradersHubStore extends BaseStore {
     combined_cfd_mt5_accounts = [];
     selected_account_type;
     selected_region;
+    is_exit_traders_hub_modal_visible = false;
     is_regulators_compare_modal_visible = false;
     is_tour_open = false;
     is_account_type_modal_visible = false;
@@ -47,6 +48,7 @@ export default class TradersHubStore extends BaseStore {
             combined_cfd_mt5_accounts: observable,
             available_platforms: observable,
             is_regulators_compare_modal_visible: observable,
+            is_exit_traders_hub_modal_visible: observable,
             is_tour_open: observable,
             modal_data: observable,
             prev_selected_loginid: observable,
@@ -77,8 +79,10 @@ 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,
             toggleRegulatorsCompareModal: action.bound,
             setCombinedCFDMT5Accounts: action.bound,
@@ -234,6 +238,15 @@ export default class TradersHubStore extends BaseStore {
         return this.selected_region === 'EU';
     }
 
+    get should_show_exit_traders_modal() {
+        //  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') &&
+            active_accounts.some(acc => acc.landing_company_shortcode === 'svg')
+        );
+    }
+
     toggleRegulatorsCompareModal() {
         this.is_regulators_compare_modal_visible = !this.is_regulators_compare_modal_visible;
     }
@@ -419,6 +432,10 @@ export default class TradersHubStore extends BaseStore {
         }
     }
 
+    toggleExitTradersHubModal() {
+        this.is_exit_traders_hub_modal_visible = !this.is_exit_traders_hub_modal_visible;
+    }
+
     async getDemoLoginId() {
         const { account_list } = this.root_store.client;
         if (account_list || account_list.length) {