Shontzu/91018/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)', async () => {
+        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)', async () => {
+        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/cashier/src/components/cashier-onboarding/cashier-onboarding.scss

@@ -7,7 +7,7 @@
     }
 
     &__loader {
-        position: fixed;
+        position: relative;
         left: 0;
     }
 

packages/core/build/constants.js

@@ -134,6 +134,7 @@ const plugins = ({ base, is_test_env }) => {
                 process.env.DATADOG_SESSION_REPLAY_SAMPLE_RATE
             ),
             'process.env.DATADOG_SESSION_SAMPLE_RATE': JSON.stringify(process.env.DATADOG_SESSION_SAMPLE_RATE),
+            'process.env.CIRCLE_TAG': JSON.stringify(process.env.CIRCLE_TAG),
         }),
         new CleanWebpackPlugin(),
         new CopyPlugin(copyConfig(base)),

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

@@ -23,7 +23,6 @@ import {
     setCurrencies,
     toMoment,
     urlForLanguage,
-    CookieStorage,
 } from '@deriv/shared';
 import { WS, requestLogout } from 'Services';
 import { action, computed, makeObservable, observable, reaction, runInAction, toJS, when } from 'mobx';
@@ -1211,6 +1210,9 @@ export default class ClientStore extends BaseStore {
             };
             Cookies.set('region', getRegion(landing_company_shortcode, residence), { domain });
             Cookies.set('client_information', client_information, { domain });
+            // need to find other way to get the boolean value and set this cookie since `this.is_p2p_enabled` is deprecated and we can't use hooks here
+            Cookies.set('is_p2p_disabled', !this.is_p2p_enabled, { domain });
+
             this.has_cookie_account = true;
         } else {
             removeCookies('region', 'client_information', 'is_p2p_disabled');
@@ -2696,24 +2698,21 @@ export default class ClientStore extends BaseStore {
         this.prev_account_type = acc_type;
     };
 
-    /** @deprecated Use `useIsP2PEnabled` from `@deriv/stores` package instead.
+    /** @deprecated Use `useIsP2PEnabled` from `@deriv/hooks` package instead.
      *
      * This method is being used in `NotificationStore`, Once we get rid of the usage we can remove this method.
      *
      * Please `DO NOT` add the type for this method in `TCoreStores` as it is deprecated and shouldn't be used.
      * */
     get is_p2p_enabled() {
-        const { is_low_risk_cr_eu_real } = this.root_store.traders_hub;
+        const is_low_risk_cr_eu_real = this.root_store?.traders_hub?.is_low_risk_cr_eu_real;
 
         const is_p2p_supported_currency = Boolean(
             this.website_status?.p2p_config?.supported_currencies.includes(this.currency.toLocaleLowerCase())
         );
 
         const is_p2p_visible = is_p2p_supported_currency && !this.is_virtual && !is_low_risk_cr_eu_real;
 
-        const p2p_cookie = new CookieStorage('is_p2p_disabled');
-        p2p_cookie.set('is_p2p_disabled', !is_p2p_visible);
-
         return is_p2p_visible;
     }
 }

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

@@ -133,8 +133,8 @@ export default class CommonStore extends BaseStore {
                 try {
                     await changeLanguage(key, () => {
                         this.changeCurrentLanguage(key);
-                        this.root_store.client.setIsAuthorize(false);
                         BinarySocket.closeAndOpenNewConnection(key);
+                        this.root_store.client.setIsAuthorize(false);
                     });
                     resolve();
                 } catch (e) {

packages/core/src/Utils/Datadog/index.ts

@@ -4,20 +4,21 @@ const DATADOG_APP_ID = process.env.DATADOG_APPLICATION_ID ?? '';
 const DATADOG_CLIENT_TOKEN = process.env.DATADOG_CLIENT_TOKEN ?? '';
 const DATADOG_SESSION_SAMPLE_RATE = process.env.DATADOG_SESSION_SAMPLE_RATE ?? 10;
 const DATADOG_SESSION_REPLAY_SAMPLE_RATE = process.env.DATADOG_SESSION_REPLAY_SAMPLE_RATE ?? 1;
+const CIRCLE_TAG = process.env.CIRCLE_TAG ?? 'NO_VERSION';
 
 datadogRum.init({
     applicationId: DATADOG_APP_ID,
     clientToken: DATADOG_CLIENT_TOKEN,
     site: 'datadoghq.com',
-    service: 'deriv.com',
+    service: 'app.deriv.com',
     env: 'production',
     sessionSampleRate: +DATADOG_SESSION_SAMPLE_RATE,
     sessionReplaySampleRate: +DATADOG_SESSION_REPLAY_SAMPLE_RATE,
     trackUserInteractions: true,
     trackResources: true,
     trackLongTasks: true,
     defaultPrivacyLevel: 'mask-user-input',
-    version: '1.0.0',
+    version: `deriv-app-${CIRCLE_TAG}`,
     trackFrustrations: true,
     enableExperimentalFeatures: ['clickmap'],
 });

packages/shared/package.json

@@ -41,7 +41,6 @@
     },
     "dependencies": {
         "@deriv/api-types": "^1.0.94",
-        "@deriv/stores": "^1.0.0",
         "@deriv/translations": "^1.0.0",
         "@types/js-cookie": "^3.0.1",
         "@types/react-loadable": "^5.5.6",

packages/stores/src/mockStore.ts

@@ -1,7 +1,7 @@
 import merge from 'lodash.merge';
-import { TStores } from '../types';
+import type { TRootStore } from '../types';
 
-const mock = (): TStores => {
+const mock = (): TRootStore => {
     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<TRootStore>): TRootStore => 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 { TRootStore } from '../types';
 
-const StoreContext = createContext<TStores | null>(null);
+const StoreContext = createContext<TRootStore | 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 { TRootStore } from '../types';
 
-const StoreProvider = ({ children, store }: PropsWithChildren<{ store: TCoreStores }>) => {
-    const memoizedValue: TStores = useMemo(
+const StoreProvider = ({ children, store }: PropsWithChildren<{ store: TRootStore }>) => {
+    const memoizedValue: TRootStore = useMemo(
         () => ({
             ...store,
             exchange_rates: new ExchangeRatesStore(),