Farzin/85955/Extract replaceCashierMenuOnclick method from cashier …

…`GeneralStore` to reusable hook in `@deriv/hooks` (#7434)

* Shayan/52349/react17 migration (#6908)

* refactor: react version is upgraded to version 17

* fix: fixed typo

* fix: changed declaration file location

* fix: temporarily commented our two test cases that are failing

* fix: fixed react-content-loader props

* fix: fixed some bugs

* fix: fixed z-index issue for popover in DBot page

* fix: fixed popover position issue in DBot page

* chore: an small change on how to turn string to array

* fix: merge upstream develop into my branch and resolved conflicts

* fix: resolved pr comments

* fix: removed rc-drawer and refactored mobile drawer

* fix: fixed test cases

* fix: resolved pr comments

* fix: resolved pr comment

* fix: fixed typo

* fix: resolved pr comments

* fix: fixed slide-in component bug

* fix: resolved pr comments

* fix: resolved pr comments

* fix: removed unnecessary lines

* fix: resolved pr comments

* Update packages/account/src/Components/personal-details/__tests__/personal-details.spec.js

Co-authored-by: Niloofar Sadeghi <93518187+niloo-fs@users.noreply.github.com>

* Update packages/account/src/Components/personal-details/__tests__/personal-details.spec.js

Co-authored-by: Niloofar Sadeghi <93518187+niloo-fs@users.noreply.github.com>

* Update packages/account/src/Components/personal-details/personal-details.jsx

Co-authored-by: Niloofar Sadeghi <93518187+niloo-fs@users.noreply.github.com>

* fix: fixed mt5 modal not appear on screen when clicking on trade button

* fix: fixed Bug #84787

Co-authored-by: Shayan Khaleghparast <100833613+iman-fs@users.noreply.github.com>
Co-authored-by: Niloofar Sadeghi <93518187+niloo-fs@users.noreply.github.com>

* fix: add optional chaining in getMinDuration function (#7344)

* fix: 🐛 resolved issue with trade. odal (#7291)

* Revert "fix: 🐛 resolved issue with trade. odal (#7291)" (#7364)

This reverts commit b6f7e4c.

* feat(core): ✨ add `@deriv/hooks` and `@deriv/stores` to `@deriv/core`

* refactor(core): 🔥 remove `ToggleMenuDrawer` prop drilling and use `useStore` hook

* refactor(core): 🔥 remove dead props

* refactor(core): 🔥 remove unnecessary ref in `ToggleMenuDrawer`

* refactor(core): 🔥 remove `react-import-loader` from `@deriv/core`

* refactor(core): 🔥 remove `platform_switcher` prop from `ToggleMenuDrawer`

* Farzin/85054/Call `resetWithrawForm` on `CryptoWithdrawForm` component `onunmount` (#7331)

* fix(cashier): 🐛 call `resetWithrawForm` on `CryptoWithdrawForm` component `onunmount`

* test(cashier): ✅ fix failing test

Co-authored-by: Farzin Mirzaie <farzin@deriv.com>

* Niloofar Sadeghi / Task - Refactor tests in the language.spec.js file (#7325)

* refactor: language tests

* fix: typo

Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech>

* refactor: proposal tests (#7327)

Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech>

* Niloofar Sadeghi / Task - Refactor tests in the error.spec.js file (#7324)

* refactor: errors validator tests

* fix: typo

Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech>

* Niloofar Sadeghi / Task - Refactor tests in the binary-link.spec.tsx file (#7288)

* refactor: binary-link tests

* refactor: improve testids namings

Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech>

* refactor: money tests (#7353)

* refactor: toggle-positions tests (#7287)

Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech>

* refactor: toggle-button tests (#7328)

Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech>

* Niloofar Sadeghi / Task - Refactor tests in the toggle-button-group.spec.tsx file (#7330)

* refactor: toggle-button-group tests

* fix: test issue

Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech>

* refactor: open-positions-table tests (#7374)

* Niloofar Sadeghi / Task - Refactor tests in the marker-spot-label.spec.tsx file (#7355)

* refactor: remove extra files from reports

* refactor: marker-spot-label tests

* Niloofar Sadeghi / Task - Refactor tests in the binary-link.spec.tsx file (#7286)

* refactor: binary-link tests

* test: added more tests

Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech>

* Niloofar Sadeghi / Task - Refactor tests in the contract-type-dialog.spec.tsx file (#7285)

* refactor: contract-type-dialog tests

* test: added more tests

* fix: circle/ci issue

Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech>

* Niloofar Sadeghi / Task - Refactor tests in the platform-dropdown.spec.tsx file (#7282)

* refactor: platform-dropdown tests

* refactor: improve testids namings

Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech>

* fix(core): 📝 resolve conflicts

* fix(core): 📝 resolve conflicts

* feat(hooks): ✨ add `useP2PNotificationCount` hook

* feat(hooks): ✨ add `useHasSetCurrency` and `useHasActiveRealAccount` hooks

* refactor(core): ♻️ refactor `MenuLinks` component

* refactor(cashier): 🔥 remove `CashierNotifications` component

* refactor(core): 🔥 remove `MenuStore` store

* refactor(cashier): 🔥 remove `attachCashierToMenu` and `replaceCashierMenuOnclick` methods

* fix(stores): 💚 add missing default value to `mockStore`

---------

Co-authored-by: Shayan Khaleghparast <100833613+shayan-deriv@users.noreply.github.com>
Co-authored-by: Shayan Khaleghparast <100833613+iman-fs@users.noreply.github.com>
Co-authored-by: Niloofar Sadeghi <93518187+niloo-fs@users.noreply.github.com>
Co-authored-by: kate-deriv <121025168+kate-deriv@users.noreply.github.com>
Co-authored-by: Likhith Kolayari <98398322+likhith-deriv@users.noreply.github.com>
Co-authored-by: Farrah Mae Ochoa <farrah@deriv.com>
Co-authored-by: Matin shafiei <matin@deriv.com>
Co-authored-by: Farzin Mirzaie <farzin@deriv.com>
Co-authored-by: Niloofar Sadeghi <93518187+niloofar-deriv@users.noreply.github.com>
Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech>

packages/cashier/src/stores/__tests__/general-store.spec.ts

@@ -2,24 +2,11 @@ import { configure } from 'mobx';
 import { waitFor } from '@testing-library/react';
 import { routes } from '@deriv/shared';
 import GeneralStore from '../general-store';
-import CashierNotifications from 'Components/cashier-notifications';
 import type { TWebSocket, TRootStore } from 'Types';
 
-type TMenuItem = {
-    icon: JSX.Element;
-    id: string;
-    link_to: string | boolean;
-    login_only: boolean;
-    onClick: boolean | (() => void);
-    text: () => string;
-};
-
 configure({ safeDescriptors: false });
 
-let cashier_menu: TMenuItem,
-    general_store: GeneralStore,
-    root_store: DeepPartial<TRootStore>,
-    WS: DeepPartial<TWebSocket>;
+let general_store: GeneralStore, root_store: DeepPartial<TRootStore>, WS: DeepPartial<TWebSocket>;
 
 beforeEach(() => {
     root_store = {
@@ -97,23 +84,9 @@ beforeEach(() => {
         wait: jest.fn(),
     };
     general_store = new GeneralStore(WS as TWebSocket, root_store as TRootStore);
-
-    cashier_menu = {
-        id: 'dt_cashier_tab',
-        icon: CashierNotifications({ p2p_notification_count: general_store.p2p_notification_count }),
-        text: expect.any(Function),
-        link_to: routes.cashier,
-        onClick: false,
-        login_only: true,
-    };
 });
 
 describe('GeneralStore', () => {
-    it('should set has_set_currency equal to true and attach cashier menu with proper data, if "when" reaction was called in constructor', () => {
-        expect(general_store.has_set_currency).toBeTruthy();
-        expect(general_store.root_store.menu.attach).toHaveBeenCalledWith(cashier_menu);
-    });
-
     it('should set function on remount', () => {
         // TODO: Check this
         // const remountFunc = () => 'function';
@@ -180,49 +153,6 @@ describe('GeneralStore', () => {
         expect(general_store.show_p2p_in_cashier_onboarding).toBeTruthy();
     });
 
-    it('should call setHasSetCurrency method if has_set_currency is equal to false and attach cashier menu with proper properties', () => {
-        general_store.has_set_currency = false;
-        const spySetHasSetCurrency = jest.spyOn(general_store, 'setHasSetCurrency');
-        general_store.attachCashierToMenu();
-
-        expect(spySetHasSetCurrency).toHaveBeenCalledTimes(1);
-        expect(general_store.root_store.menu.attach).toHaveBeenCalledWith(cashier_menu);
-    });
-
-    it('should attach cashier menu and set onClick property to ui.toggleSetCurrencyModal and link_to = false if the client did not set the currency', () => {
-        general_store.has_set_currency = false;
-        general_store.root_store.client.account_list = [{ is_virtual: 0, title: 'Real' }];
-        general_store.root_store.client.has_active_real_account = true;
-        general_store.attachCashierToMenu();
-
-        expect(general_store.root_store.menu.attach).toHaveBeenCalledWith({
-            ...cashier_menu,
-            link_to: false,
-            onClick: general_store.root_store.ui.toggleSetCurrencyModal,
-        });
-    });
-
-    it('should replace cashier menu onClick to false if the client set the currency', () => {
-        general_store.replaceCashierMenuOnclick();
-
-        expect(general_store.root_store.menu.update).toHaveBeenCalledWith(cashier_menu, 1);
-    });
-
-    it('should replace cashier menu onClick to ui.toggleSetCurrencyModal if the client did not set the currency', () => {
-        general_store.root_store.client.account_list = [{ is_virtual: 0, title: 'Real' }];
-        general_store.root_store.client.has_active_real_account = true;
-        general_store.replaceCashierMenuOnclick();
-
-        expect(general_store.root_store.menu.update).toHaveBeenCalledWith(
-            {
-                ...cashier_menu,
-                link_to: false,
-                onClick: general_store.root_store.ui.toggleSetCurrencyModal,
-            },
-            1
-        );
-    });
-
     it('should set has_set_currency equal to true if the client has real USD account', () => {
         general_store.setHasSetCurrency();
 

packages/cashier/src/stores/general-store.ts

@@ -1,9 +1,7 @@
 import { action, computed, observable, reaction, when, makeObservable } from 'mobx';
 import { isCryptocurrency, isEmptyObject, getPropertyValue, routes, ContentFlag } from '@deriv/shared';
 import type { P2PAdvertInfo } from '@deriv/api-types';
-import { localize } from '@deriv/translations';
 import Constants from 'Constants/constants';
-import CashierNotifications from 'Components/cashier-notifications';
 import BaseStore from './base-store';
 import PaymentAgentStore from './payment-agent-store';
 import type { TRootStore, TWebSocket } from 'Types';
@@ -13,7 +11,6 @@ export default class GeneralStore extends BaseStore {
         super({ root_store });
 
         makeObservable(this, {
-            attachCashierToMenu: action.bound,
             calculatePercentage: action.bound,
             cashier_route_tab_index: observable,
             changeSetCurrencyModalTitle: action.bound,
@@ -42,7 +39,6 @@ export default class GeneralStore extends BaseStore {
             percentage: observable,
             percentageSelectorSelectionStatus: action.bound,
             payment_agent: observable,
-            replaceCashierMenuOnclick: action.bound,
             setAccountSwitchListener: action.bound,
             setActiveTab: action.bound,
             setCashierTabIndex: action.bound,
@@ -68,7 +64,6 @@ export default class GeneralStore extends BaseStore {
             () => this.root_store.client.is_logged_in,
             () => {
                 this.setHasSetCurrency();
-                this.attachCashierToMenu();
             }
         );
 
@@ -161,41 +156,6 @@ export default class GeneralStore extends BaseStore {
         }
     }
 
-    attachCashierToMenu(): void {
-        const { menu, ui } = this.root_store;
-
-        if (!this.has_set_currency) {
-            this.setHasSetCurrency();
-        }
-
-        menu.attach({
-            id: 'dt_cashier_tab',
-            icon: CashierNotifications({ p2p_notification_count: this.p2p_notification_count }),
-            text: () => localize('Cashier'),
-            link_to: this.has_set_currency && routes.cashier,
-            onClick: !this.has_set_currency && ui.toggleSetCurrencyModal,
-            login_only: true,
-        });
-    }
-
-    replaceCashierMenuOnclick(): void {
-        const { menu, ui } = this.root_store;
-
-        this.setHasSetCurrency();
-
-        menu.update(
-            {
-                id: 'dt_cashier_tab',
-                icon: CashierNotifications({ p2p_notification_count: this.p2p_notification_count }),
-                text: () => localize('Cashier'),
-                link_to: this.has_set_currency && routes.cashier,
-                onClick: !this.has_set_currency ? ui.toggleSetCurrencyModal : false,
-                login_only: true,
-            },
-            1
-        );
-    }
-
     setHasSetCurrency(): void {
         const { account_list, has_active_real_account } = this.root_store.client;
 

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

@@ -1,70 +1,71 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-import { Text } from '@deriv/components';
+import { Text, Icon, Counter } from '@deriv/components';
 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 './menu-links.scss';
 
-const MenuItems = ({ item, hide_menu_item }) => {
-    const { id, link_to, href, text, image, logo, icon } = item;
-    return hide_menu_item ? null : (
+const MenuItems = ({ id, text, icon, link_to }) => {
+    return (
         <BinaryLink
             id={id}
             key={icon}
             to={link_to}
-            href={href}
             className='header__menu-link'
             active_class='header__menu-link--active'
         >
-            <Text size='m' line_height='xs' title={text()} className='header__menu-link-text'>
+            <Text size='m' line_height='xs' title={text} className='header__menu-link-text'>
                 {icon}
-                {text()}
-                {logo}
+                {text}
             </Text>
-            <span className='header__menu-link-text'>
-                {image}
-                {logo}
-            </span>
         </BinaryLink>
     );
 };
 
-const MenuLinks = ({ is_logged_in, is_mobile, items, is_pre_appstore }) => (
-    <React.Fragment>
-        {!!items.length && (
-            <div className='header__menu-links'>
-                {items.map(item => {
-                    return (
-                        is_logged_in && (
-                            <MenuItems
-                                key={`${item.icon}${item.id}`}
-                                item={item}
-                                hide_menu_item={
-                                    is_pre_appstore &&
-                                    (item?.link_to?.toLowerCase() === '/reports' ||
-                                        (item?.link_to?.toLowerCase() === '/cashier' && is_mobile))
-                                }
-                            />
-                        )
-                    );
-                })}
-            </div>
-        )}
-    </React.Fragment>
+const ReportTab = () => (
+    <MenuItems
+        id={'dt_reports_tab'}
+        icon={<Icon icon='IcReports' className='header__icon' />}
+        text={localize('Reports')}
+        link_to={routes.reports}
+    />
 );
 
-MenuLinks.propTypes = {
-    items: PropTypes.arrayOf(
-        PropTypes.shape({
-            icon: PropTypes.shape({
-                className: PropTypes.string,
-            }),
-            is_logged_in: PropTypes.bool,
-            link_to: PropTypes.string,
-            text: PropTypes.func,
-        })
-    ),
-    is_mobile: PropTypes.bool,
-    is_logged_in: PropTypes.bool,
-    is_pre_appstore: PropTypes.bool,
-};
+const CashierTab = observer(() => {
+    const p2p_notification_count = useP2PNotificationCount();
+
+    return (
+        <MenuItems
+            id={'dt_cashier_tab'}
+            icon={
+                <>
+                    <Icon icon='IcCashier' className='header__icon' />
+                    {p2p_notification_count > 0 && (
+                        <Counter className='cashier__counter' count={p2p_notification_count} />
+                    )}
+                </>
+            }
+            text={localize('Cashier')}
+            link_to={routes.cashier}
+        />
+    );
+});
+
+const MenuLinks = observer(() => {
+    const { client, ui } = useStore();
+    const { is_logged_in, is_pre_appstore } = client;
+    const { is_mobile } = ui;
+
+    if (!is_logged_in) return <></>;
+
+    return (
+        <div className='header__menu-links'>
+            {!is_pre_appstore && <ReportTab />}
+            {!is_pre_appstore && !is_mobile && <CashierTab />}
+        </div>
+    );
+});
 
 export { MenuLinks };

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

@@ -0,0 +1,7 @@
+.cashier {
+    &__counter {
+        position: absolute;
+        top: 0.4rem;
+        right: -1.5rem;
+    }
+}