thisyahlen/chore: real account needed for cashier popup

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

@@ -4,7 +4,7 @@ import { BinaryLink } from '../../Routes';
 import { observer, useStore } from '@deriv/stores';
 import { routes } from '@deriv/shared';
 import { localize } from '@deriv/translations';
-import { useP2PNotificationCount } from '@deriv/hooks';
+import { useP2PNotificationCount, useRealAccountNeededForCashier } from '@deriv/hooks';
 import './menu-links.scss';
 import { useHistory } from 'react-router';
 
@@ -38,8 +38,9 @@ const ReportTab = () => (
 const CashierTab = observer(() => {
     const { client, ui } = 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 = useRealAccountNeededForCashier();
 
     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

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 import { Div100vhContainer, Icon, MobileDrawer, ToggleSwitch, Text, Button } from '@deriv/components';
-import { useOnrampVisible, useAccountTransferVisible } from '@deriv/hooks';
+import { useOnrampVisible, useAccountTransferVisible, useRealAccountNeededForCashier } from '@deriv/hooks';
 import { routes, PlatformContext, getStaticUrl, whatsapp_url, ContentFlag } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { localize, getAllowedLanguages, getLanguage } from '@deriv/translations';
@@ -22,7 +22,8 @@ const MenuLink = observer(
         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 = useRealAccountNeededForCashier();
 
         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,66 @@
+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, selectRegion } = 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 switchRegulation = () => {
+        return is_eu_user ? selectRegion('Non-EU') : selectRegion('EU');
+    };
+
+    const onClose = async () => {
+        await switchRegulation();
+        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/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/hooks/src/index.ts

@@ -12,3 +12,5 @@ export { default as useHasActiveRealAccount } from './useHasActiveRealAccount';
 export { default as useP2PNotificationCount } from './useP2PNotificationCount';
 export { default as useOnrampVisible } from './useOnrampVisible';
 export { default as useSwitchToRealAccount } from './useSwitchToRealAccount';
+export { default as useRealAccountNeededForCashier } from './useRealAccountNeededForCashier';
+export { default as useHasSvgAccount } from './useHasSvgAccount';

packages/hooks/src/useHasSvgAccount.ts

@@ -0,0 +1,11 @@
+import { useStore } from '@deriv/stores';
+
+const useHasSvgAccount = () => {
+    const { client } = useStore();
+    const { active_accounts } = client;
+    const has_svg_account = active_accounts.some(account => account.landing_company_shortcode === 'svg');
+
+    return has_svg_account;
+};
+
+export default useHasSvgAccount;

packages/hooks/src/useRealAccountNeededForCashier.ts

@@ -0,0 +1,18 @@
+import { useStore } from '@deriv/stores';
+import useHasSvgAccount from './useHasSvgAccount';
+import useHasMaltaInvestAccount from './useHasMaltaInvestAccount';
+
+const useRealAccountNeededForCashier = () => {
+    const { traders_hub } = useStore();
+    const { is_eu_user, is_real } = traders_hub;
+
+    const has_svg_account = useHasSvgAccount();
+    const has_maltainvest_account = useHasMaltaInvestAccount();
+
+    const no_real_mf_account = has_svg_account && !has_maltainvest_account && is_eu_user;
+    const no_real_cr_account = !has_svg_account && has_maltainvest_account && !is_eu_user;
+
+    return (no_real_mf_account || no_real_cr_account) && is_real;
+};
+
+export default useRealAccountNeededForCashier;

packages/stores/src/mockStore.ts

@@ -238,12 +238,16 @@ 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(),
             openModal: jest.fn(),
             content_flag: '',
             is_eu_user: false,
+            is_real: false,
+            selectRegion: jest.fn(),
         },
         menu: {
             attach: 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 = {
@@ -250,6 +252,8 @@ type TTradersHubStore = {
     content_flag: any;
     openModal: (modal_id: string, props?: any) => void;
     is_eu_user: boolean;
+    is_real: boolean;
+    selectRegion: (region: string) => void;
 };
 
 export type TRootStore = {