thisyahlen/chore: real account needed for cashier popup

packages/core/src/App/Components/Layout/Header/menu-links.jsx

@@ -36,10 +36,11 @@ const ReportTab = () => (
 );
 
 const CashierTab = observer(() => {
-    const { client, ui } = useStore();
+    const { client, ui, traders_hub } = useStore();
     const { has_any_real_account, is_virtual } = client;
-    const { toggleReadyToDepositModal } = ui;
+    const { toggleReadyToDepositModal, toggleNeedRealAccountForCashierModal } = ui;
     const p2p_notification_count = useP2PNotificationCount();
+    const { real_account_needed_for_cashier } = traders_hub;
 
     const history = useHistory();
 
@@ -49,18 +50,23 @@ const CashierTab = observer(() => {
     const toggleModal = () => {
         if (toggle_modal_routes && !has_any_real_account) {
             toggleReadyToDepositModal();
+        } else if (window.location.pathname === routes.traders_hub) {
+            toggleNeedRealAccountForCashierModal();
         }
     };
 
     const handleClickCashier = () => {
         if (!has_any_real_account && is_virtual) {
             toggleModal();
+        } else if (real_account_needed_for_cashier) {
+            toggleModal();
         } else {
             history.push(routes.cashier_deposit);
         }
     };
 
-    const cashier_redirect = toggle_modal_routes && !has_any_real_account && is_virtual;
+    const cashier_redirect =
+        (toggle_modal_routes && !has_any_real_account && is_virtual) || real_account_needed_for_cashier;
 
     return (
         <MenuItems

packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx

@@ -17,12 +17,13 @@ import PlatformSwitcher from './platform-switcher';
 
 const MenuLink = observer(
     ({ link_to, icon, is_active, is_disabled, is_language, suffix_icon, text, onClickLink, is_hidden }) => {
-        const { common, ui, client } = useStore();
+        const { common, ui, client, traders_hub } = useStore();
         const { changeCurrentLanguage } = common;
         const deriv_static_url = getStaticUrl(link_to);
         const history = useHistory();
         const { has_any_real_account, is_virtual } = client;
-        const { toggleReadyToDepositModal } = ui;
+        const { toggleReadyToDepositModal, toggleNeedRealAccountForCashierModal } = ui;
+        const { real_account_needed_for_cashier } = traders_hub;
 
         const cashier_link =
             link_to === routes.cashier_deposit ||
@@ -31,6 +32,27 @@ const MenuLink = observer(
 
         if (is_hidden) return null;
 
+        const traders_hub_path = window.location.pathname === routes.traders_hub;
+
+        if (real_account_needed_for_cashier && cashier_link && traders_hub_path) {
+            const handleClickCashier = () => {
+                onClickLink();
+                toggleNeedRealAccountForCashierModal();
+            };
+            return (
+                <div
+                    className={classNames('header__menu-mobile-link', {
+                        'header__menu-mobile-link--disabled': is_disabled,
+                    })}
+                    onClick={handleClickCashier}
+                >
+                    <Icon className='header__menu-mobile-link-icon' icon={icon} />
+                    <span className='header__menu-mobile-link-text'>{text}</span>
+                    {suffix_icon && <Icon className='header__menu-mobile-link-suffix-icon' icon={suffix_icon} />}
+                </div>
+            );
+        }
+
         if (cashier_link && is_virtual && !has_any_real_account) {
             const toggle_modal_routes =
                 window.location.pathname === routes.root || window.location.pathname === routes.traders_hub;

packages/core/src/App/Containers/Modals/app-modals.jsx

@@ -11,6 +11,7 @@ import DerivRealAccountRequiredModal from 'App/Components/Elements/Modals/deriv-
 import ExitTradersHubModal from './exit-traders-hub-modal';
 import ReadyToDepositModal from './ready-to-deposit-modal';
 import RiskAcceptTestWarningModal from './risk-accept-test-warning-modal';
+import NeedRealAccountForCashierModal from './need-real-account-for-cashier-modal';
 
 const AccountSignupModal = React.lazy(() =>
     moduleLoader(() => import(/* webpackChunkName: "account-signup-modal" */ '../AccountSignupModal'))
@@ -80,6 +81,7 @@ const AppModals = ({
     is_ready_to_deposit_modal_visible,
     is_trading_experience_incomplete,
     should_show_risk_accept_modal,
+    is_need_real_account_for_cashier_modal_visible,
 }) => {
     const url_params = new URLSearchParams(useLocation().search);
     const url_action_param = url_params.get('action');
@@ -162,6 +164,10 @@ const AppModals = ({
         ComponentToLoad = <ReadyToDepositModal />;
     }
 
+    if (is_need_real_account_for_cashier_modal_visible) {
+        ComponentToLoad = <NeedRealAccountForCashierModal />;
+    }
+
     return (
         <>
             <RedirectNoticeModal is_logged_in={is_logged_in} is_eu={is_eu_user} portal_id='popup_root' />
@@ -193,6 +199,7 @@ export default connect(({ client, ui, traders_hub }) => ({
     is_warning_scam_message_modal_visible: ui.is_warning_scam_message_modal_visible,
     is_exit_traders_hub_modal_visible: ui.is_exit_traders_hub_modal_visible,
     is_ready_to_deposit_modal_visible: ui.is_ready_to_deposit_modal_visible,
+    is_need_real_account_for_cashier_modal_visible: ui.is_need_real_account_for_cashier_modal_visible,
     content_flag: traders_hub.content_flag,
     is_trading_experience_incomplete: client.is_trading_experience_incomplete,
     should_show_risk_accept_modal: ui.should_show_risk_accept_modal,

packages/core/src/App/Containers/Modals/need-real-account-for-cashier-modal/index.ts

@@ -0,0 +1,4 @@
+import NeedRealAccountForCashierModal from './need-real-account-for-cashier-modal';
+import './need-real-account-for-cashier-modal.scss';
+
+export default NeedRealAccountForCashierModal;

packages/core/src/App/Containers/Modals/need-real-account-for-cashier-modal/need-real-account-for-cashier-modal.scss

@@ -0,0 +1,15 @@
+.need-real-account-for-cashier-dialog {
+    .dc-dialog {
+        &__header-wrapper {
+            margin: 0 0 2rem;
+        }
+    }
+    @include mobile {
+        .dc-dialog {
+            &__content,
+            &__button {
+                font-size: 1.2rem;
+            }
+        }
+    }
+}

packages/core/src/App/Containers/Modals/need-real-account-for-cashier-modal/need-real-account-for-cashier-modal.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Dialog } from '@deriv/components';
+import { Localize, localize } from '@deriv/translations';
+import { useStore, observer } from '@deriv/stores';
+import { useHistory } from 'react-router-dom';
+import { routes } from '@deriv/shared';
+import './need-real-account-for-cashier-modal.scss';
+
+const NeedRealAccountForCashierModal = observer(() => {
+    const { ui, traders_hub } = useStore();
+    const { is_eu_user } = traders_hub;
+    const {
+        is_need_real_account_for_cashier_modal_visible: is_open,
+        toggleNeedRealAccountForCashierModal,
+        disableApp,
+        enableApp,
+        openRealAccountSignup,
+    } = ui;
+
+    const history = useHistory();
+
+    const createAccount = () => {
+        toggleNeedRealAccountForCashierModal();
+        return is_eu_user ? openRealAccountSignup('maltainvest') : openRealAccountSignup();
+    };
+
+    const onClose = () => {
+        toggleNeedRealAccountForCashierModal();
+        history.push(routes.cashier_deposit);
+    };
+
+    const regulation = is_eu_user ? 'EU' : 'non-EU';
+
+    const active_real_regulation = is_eu_user ? 'non-EU' : 'EU';
+
+    return (
+        <Dialog
+            className='need-real-account-for-cashier-dialog'
+            title={localize('The cashier is for real accounts only')}
+            confirm_button_text={localize('Add account')}
+            onConfirm={createAccount}
+            cancel_button_text={localize('Switch account')}
+            onCancel={onClose}
+            is_closed_on_cancel
+            disableApp={disableApp}
+            enableApp={enableApp}
+            is_closed_on_confirm
+            is_visible={is_open}
+            dismissable={false}
+            has_close_icon
+            onClose={toggleNeedRealAccountForCashierModal}
+        >
+            <Localize
+                i18n_default_text='It looks like you don’t have a real {{regulation}} account. To use the cashier, switch to your {{active_real_regulation}} real account, or get an {{regulation}} real account.'
+                values={{ regulation, active_real_regulation }}
+            />
+        </Dialog>
+    );
+});
+
+export default NeedRealAccountForCashierModal;

packages/core/src/Stores/client-store.js

@@ -220,6 +220,7 @@ export default class ClientStore extends BaseStore {
             reality_check_duration: computed,
             reality_check_dismissed: computed,
             has_active_real_account: computed,
+            has_svg_account: computed,
             has_maltainvest_account: computed,
             has_malta_account: computed,
             has_any_real_account: computed,
@@ -491,6 +492,10 @@ export default class ClientStore extends BaseStore {
         return this.active_accounts.some(acc => acc.is_virtual === 0);
     }
 
+    get has_svg_account() {
+        return this.active_accounts.some(acc => acc.landing_company_shortcode === 'svg');
+    }
+
     get has_maltainvest_account() {
         return this.active_accounts.some(acc => acc.landing_company_shortcode === 'maltainvest');
     }

packages/core/src/Stores/traders-hub-store.js

@@ -74,6 +74,7 @@ export default class TradersHubStore extends BaseStore {
             is_demo: computed,
             is_eu_selected: computed,
             is_real: computed,
+            real_account_needed_for_cashier: computed,
             is_currency_switcher_disabled_for_mf: computed,
             no_CR_account: computed,
             no_MF_account: computed,
@@ -478,6 +479,12 @@ export default class TradersHubStore extends BaseStore {
         return this.selected_region === 'EU';
     }
 
+    get real_account_needed_for_cashier() {
+        const { has_svg_account, has_maltainvest_account } = this.root_store.client;
+
+        return ((has_svg_account && this.is_eu_user) || (has_maltainvest_account && !this.is_eu_user)) && this.is_real;
+    }
+
     get multipliers_account_status() {
         const {
             has_maltainvest_account,

packages/core/src/Stores/ui-store.js

@@ -169,6 +169,7 @@ export default class UIStore extends BaseStore {
     is_deriv_account_needed_modal_visible = false;
     is_exit_traders_hub_modal_visible = false;
     is_ready_to_deposit_modal_visible = false;
+    is_need_real_account_for_cashier_modal_visible = false;
     is_switch_to_deriv_account_modal_visible = false;
     is_cfd_reset_password_modal_enabled = false;
     sub_section_index = 0;
@@ -208,6 +209,7 @@ export default class UIStore extends BaseStore {
             has_read_scam_message: observable,
             is_exit_traders_hub_modal_visible: observable,
             is_ready_to_deposit_modal_visible: observable,
+            is_need_real_account_for_cashier_modal_visible: observable,
             is_services_error_visible: observable,
             is_unsupported_contract_modal_visible: observable,
             is_new_account: observable,
@@ -349,6 +351,7 @@ export default class UIStore extends BaseStore {
             toggleWelcomeModal: action.bound,
             toggleExitTradersHubModal: action.bound,
             toggleReadyToDepositModal: action.bound,
+            toggleNeedRealAccountForCashierModal: action.bound,
             toggleShouldShowRealAccountsList: action.bound,
             toggleShouldShowMultipliersOnboarding: action.bound,
             shouldNavigateAfterChooseCrypto: action.bound,
@@ -904,6 +907,10 @@ export default class UIStore extends BaseStore {
         this.is_ready_to_deposit_modal_visible = !this.is_ready_to_deposit_modal_visible;
     }
 
+    toggleNeedRealAccountForCashierModal() {
+        this.is_need_real_account_for_cashier_modal_visible = !this.is_need_real_account_for_cashier_modal_visible;
+    }
+
     setCFDPasswordResetModal(val) {
         this.is_cfd_reset_password_modal_enabled = !!val;
     }

packages/stores/src/mockStore.ts

@@ -238,6 +238,8 @@ const mock = (): TRootStore => {
             sub_section_index: 0,
             toggleReadyToDepositModal: jest.fn(),
             is_ready_to_deposit_modal_visible: false,
+            is_need_real_account_for_cashier_modal_visible: false,
+            toggleNeedRealAccountForCashierModal: jest.fn(),
         },
         traders_hub: {
             closeModal: jest.fn(),

packages/stores/types.ts

@@ -226,6 +226,8 @@ type TUiStore = {
     setSubSectionIndex: (index: number) => void;
     toggleReadyToDepositModal: () => void;
     is_ready_to_deposit_modal_visible: boolean;
+    is_need_real_account_for_cashier_modal_visible: boolean;
+    toggleNeedRealAccountForCashierModal: () => void;
 };
 
 type TMenuStore = {