chore: add unit test for static derivez

packages/appstore/src/components/elements/text/balance-text.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { Text } from '@deriv/components';
 import { formatMoney } from '@deriv/shared';
-import { useStores } from 'Stores';
+import { useStore } from '@deriv/stores';
 import './balance-text.scss';
 
 // Todo: this definitely needs to be somewhere else
@@ -16,7 +16,7 @@ type BalanceTextProps = {
 };
 
 const BalanceText = ({ balance, currency, size = 'm', underline_style = 'none' }: BalanceTextProps) => {
-    const { traders_hub } = useStores();
+    const { traders_hub } = useStore();
     const { selected_account_type } = traders_hub;
 
     const getTextClassName = () => {

packages/appstore/src/components/onboarding-new/__tests__/static-dashboard.spec.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import StaticDashboard from '../static-dashboard';
+import { StoreProvider, mockStore } from '@deriv/stores';
+
+describe('<StaticDashboard />', () => {
+    const is_blurry = {
+        icon: true,
+        item: false,
+        text: false,
+        get: false,
+        topup: false,
+        trade: false,
+        cfd_item: false,
+        cfd_text: false,
+        options_item: false,
+        options_text: false,
+        cfd_description: false,
+        options_description: false,
+        platformlauncher: false,
+    };
+
+    const is_onboarding_animated = {
+        text: false,
+        trade: false,
+        topup: false,
+        button: false,
+        get: false,
+    };
+
+    test('should render derivez in page if !CFDs_restricted_countries (non-eu countries)', () => {
+        const mock = mockStore({});
+
+        render(
+            <StoreProvider store={mock}>
+                <StaticDashboard is_blurry={is_blurry} is_onboarding_animated={is_onboarding_animated} />
+            </StoreProvider>
+        );
+        expect(screen.queryByText('Deriv EZ')).toBeInTheDocument();
+    });
+
+    test('should not render derivez if CFDs_restricted_countries: true (eu countries)', () => {
+        const mock = mockStore({
+            traders_hub: {
+                CFDs_restricted_countries: true,
+            },
+        });
+
+        render(
+            <StoreProvider store={mock}>
+                <StaticDashboard is_blurry={is_blurry} is_onboarding_animated={is_onboarding_animated} />
+            </StoreProvider>
+        );
+        expect(screen.queryByText('Deriv Ez')).not.toBeInTheDocument();
+    });
+});

packages/appstore/src/components/onboarding-new/static-dashboard.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useStores } from 'Stores';
+import { useStore } from '@deriv/stores';
 import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { Text, ButtonToggle, ThemedScrollbars, Button } from '@deriv/components';
@@ -63,7 +63,7 @@ const StaticDashboard = ({
     is_onboarding_animated,
     loginid,
 }: TStaticDashboard) => {
-    const { client, traders_hub } = useStores();
+    const { client, traders_hub } = useStore();
     const { content_flag, CFDs_restricted_countries, financial_restricted_countries } = traders_hub;
     const { is_eu_country, is_logged_in } = client;
 

packages/stores/src/mockStore.ts

@@ -1,7 +1,7 @@
 import merge from 'lodash.merge';
-import { TStores } from '../types';
+import type { TCoreStores } from '../types';
 
-const mock = (): TStores => {
+const mock = (): TCoreStores => {
     return {
         client: {
             accounts: {
@@ -11,6 +11,7 @@ const mock = (): TStores => {
                     currency: 'USD',
                     is_disabled: 0,
                     is_virtual: 0,
+                    trading: {},
                     excluded_until: 0,
                     landing_company_name: 'svg',
                 },
@@ -126,18 +127,16 @@ const mock = (): TStores => {
             has_maltainvest_account: false,
             initialized_broadcast: false,
             is_account_setting_loaded: false,
-            is_authorize: false,
             is_deposit_lock: false,
             is_dxtrade_allowed: false,
             is_eu: false,
+            is_eu_country: false,
             is_financial_account: false,
             is_financial_information_incomplete: false,
-            is_low_risk: false,
             is_identity_verification_needed: false,
             is_landing_company_loaded: false,
             is_logged_in: false,
             is_logging_in: false,
-            is_pending_proof_of_ownership: false,
             is_switching: false,
             is_tnc_needed: false,
             is_trading_experience_incomplete: false,
@@ -190,14 +189,7 @@ const mock = (): TStores => {
             switched: false,
             switch_broadcast: false,
             switchEndSignal: jest.fn(),
-            is_crypto: jest.fn(),
-            dxtrade_accounts_list: [],
-            default_currency: 'USD',
-            resetVirtualBalance: jest.fn(),
-            has_enabled_two_fa: false,
-            setTwoFAStatus: jest.fn(),
-            has_changed_two_fa: false,
-            setTwoFAChangedStatus: jest.fn(),
+            is_crypto: false,
         },
         common: {
             error: {
@@ -256,22 +248,20 @@ const mock = (): TStores => {
         },
         traders_hub: {
             closeModal: jest.fn(),
-            combined_cfd_mt5_accounts: [],
-            content_flag: '',
             openModal: jest.fn(),
-            selected_account: {
-                login: '',
-                account_id: '',
-            },
+            content_flag: '',
             is_eu_user: false,
             is_real: false,
+            selected_account_type: '',
             selectRegion: jest.fn(),
-            is_low_risk_cr_eu_real: false,
+            is_low_risk_cr_eu_real: true,
+            CFDs_restricted_countries: false,
             financial_restricted_countries: false,
-            selected_account_type: 'real',
-            no_CR_account: false,
-            no_MF_account: false,
-            setTogglePlatformType: jest.fn(),
+            gaming_restricted_countries: false,
+            is_cfd: true,
+            is_financial: false,
+            is_gaming: true,
+            is_high_risk_cr_eu_real: false,
         },
         menu: {
             attach: jest.fn(),
@@ -289,14 +279,9 @@ const mock = (): TStores => {
             setP2PRedirectTo: jest.fn(),
         },
         modules: {},
-        exchange_rates: {
-            data: undefined,
-            update: jest.fn(),
-            unmount: jest.fn(),
-        },
     };
 };
 
-const mockStore = (override: DeepPartial<TStores>): TStores => merge(mock(), override);
+const mockStore = (override: DeepPartial<TCoreStores>): TCoreStores => merge(mock(), override);
 
 export { mockStore };

packages/stores/src/storeContext.ts

@@ -1,6 +1,6 @@
 import { createContext } from 'react';
-import type { TStores } from '../types';
+import type { TCoreStores } from '../types';
 
-const StoreContext = createContext<TStores | null>(null);
+const StoreContext = createContext<TCoreStores | null>(null);
 
 export default StoreContext;

packages/stores/src/storeProvider.tsx

@@ -2,10 +2,10 @@ import React, { PropsWithChildren, useEffect, useMemo } from 'react';
 import StoreContext from './storeContext';
 import { ExchangeRatesStore } from './stores';
 import { ExchangeRatesProvider } from './providers';
-import type { TCoreStores, TStores } from '../types';
+import type { TCoreStores } from '../types';
 
 const StoreProvider = ({ children, store }: PropsWithChildren<{ store: TCoreStores }>) => {
-    const memoizedValue: TStores = useMemo(
+    const memoizedValue: TCoreStores = useMemo(
         () => ({
             ...store,
             exchange_rates: new ExchangeRatesStore(),

packages/stores/types.ts

@@ -1,6 +1,6 @@
 import type { Authorize, DetailsOfEachMT5Loginid, GetAccountStatus, GetLimits, LogOutResponse } from '@deriv/api-types';
+
 import type { RouteComponentProps } from 'react-router';
-import { ExchangeRatesStore } from './src/stores';
 
 type TAccount = NonNullable<Authorize['account_list']>[0];
 
@@ -15,12 +15,7 @@ type TAccountsList = {
         is_mt?: boolean;
         market_type?: string;
         nativepicker_text?: string;
-        platform_icon?: {
-            Derived: React.SVGAttributes<SVGElement>;
-            Financial: React.SVGAttributes<SVGElement>;
-            Options: React.SVGAttributes<SVGElement>;
-            CFDs: React.SVGAttributes<SVGAElement>;
-        };
+        platform_icon?: string;
         text?: JSX.Element | string;
         value?: string;
     };
@@ -87,8 +82,6 @@ type TNotification =
     | ((withdrawal_locked: boolean, deposit_locked: boolean) => TNotificationMessage)
     | ((excluded_until: number) => TNotificationMessage);
 
-type TAccountStatus = Omit<GetAccountStatus, 'status'> & Partial<Pick<GetAccountStatus, 'status'>>;
-
 type TClientStore = {
     accounts: { [k: string]: TAccount };
     active_accounts: TActiveAccount[];
@@ -102,7 +95,7 @@ type TClientStore = {
         };
     };
     account_list: TAccountsList;
-    account_status: TAccountStatus;
+    account_status: GetAccountStatus;
     available_crypto_currencies: string[];
     balance?: string | number;
     can_change_fiat_currency: boolean;
@@ -120,15 +113,13 @@ type TClientStore = {
     is_deposit_lock: boolean;
     is_dxtrade_allowed: boolean;
     is_eu: boolean;
-    is_authorize: boolean;
+    is_eu_country: boolean;
     is_financial_account: boolean;
     is_financial_information_incomplete: boolean;
     is_identity_verification_needed: boolean;
     is_landing_company_loaded: boolean;
     is_logged_in: boolean;
     is_logging_in: boolean;
-    is_low_risk: boolean;
-    is_pending_proof_of_ownership: boolean;
     is_switching: boolean;
     is_tnc_needed: boolean;
     is_trading_experience_incomplete: boolean;
@@ -183,27 +174,20 @@ type TClientStore = {
     mt5_login_list: DetailsOfEachMT5Loginid[];
     logout: () => Promise<LogOutResponse>;
     should_allow_authentication: boolean;
-    is_crypto: (currency?: string) => boolean;
-    dxtrade_accounts_list: DetailsOfEachMT5Loginid[];
-    default_currency: string;
-    resetVirtualBalance: () => Promise<void>;
-    has_enabled_two_fa: boolean;
-    setTwoFAStatus: (status: boolean) => void;
-    has_changed_two_fa: boolean;
-    setTwoFAChangedStatus: (status: boolean) => void;
+    is_crypto: boolean;
 };
 
 type TCommonStoreError = {
-    app_routing_history: unknown[];
     header: string | JSX.Element;
     message: string | JSX.Element;
+    type?: string;
     redirect_label: string;
     redirect_to: string;
-    redirectOnClick: () => void;
-    setError: (has_error: boolean, error: React.ReactNode | null) => void;
     should_clear_error_on_click: boolean;
     should_show_refresh: boolean;
-    type?: string;
+    redirectOnClick: () => void;
+    setError: (has_error: boolean, error: TCommonStoreError | null) => void;
+    app_routing_history: unknown[];
 };
 
 type TCommonStore = {
@@ -232,7 +216,7 @@ type TUiStore = {
     is_language_settings_modal_on: boolean;
     is_mobile: boolean;
     notification_messages_ui: JSX.Element | null;
-    openRealAccountSignup: (value?: string) => void;
+    openRealAccountSignup: (value: string) => void;
     setCurrentFocus: (value: string) => void;
     setDarkMode: (is_dark_mode_on: boolean) => boolean;
     setIsClosingCreateRealAccountModal: (value: boolean) => void;
@@ -269,45 +253,28 @@ type TNotificationStore = {
 
 type TTradersHubStore = {
     closeModal: () => void;
-    content_flag: 'low_risk_cr_eu' | 'low_risk_cr_non_eu' | 'high_risk_cr' | 'cr_demo' | 'eu_demo' | 'eu_real' | '';
-    combined_cfd_mt5_accounts: DetailsOfEachMT5Loginid &
-        {
-            short_code_and_region: string;
-            login: string;
-            sub_title: string;
-            icon: 'Derived' | 'Financial' | 'Options' | 'CFDs';
-        }[];
-    openModal: (modal_id: string, props?: unknown) => void;
-    selected_account: {
-        login: string;
-        account_id: string;
-    };
+    content_flag: any;
     is_low_risk_cr_eu_real: boolean;
+    openModal: (modal_id: string, props?: any) => void;
     is_eu_user: boolean;
-    setTogglePlatformType: (platform_type: string) => void;
     is_real: boolean;
+    selected_account_type: string;
     selectRegion: (region: string) => void;
+    CFDs_restricted_countries: boolean;
     financial_restricted_countries: boolean;
-    selected_account_type: string;
-    no_CR_account: boolean;
-    no_MF_account: boolean;
+    gaming_restricted_countries: boolean;
+    is_cfd: boolean;
+    is_financial: boolean;
+    is_gaming: boolean;
+    is_high_risk_cr_eu_real: boolean;
 };
 
-/**
- * This is the type that contains all the `core` package stores
- */
 export type TCoreStores = {
     client: TClientStore;
     common: TCommonStore;
     menu: TMenuStore;
     ui: TUiStore;
-    // This should be `any` as this property will be handled in each package.
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    modules: any;
+    modules: Record<string, any>;
     notifications: TNotificationStore;
     traders_hub: TTradersHubStore;
 };
-
-export type TStores = TCoreStores & {
-    exchange_rates: ExchangeRatesStore;
-};