Merge branch 'master' of github.com:binary-com/deriv-app into suisin/…

…DIEL_flow_change

package.json

@@ -90,6 +90,7 @@
     },
     "dependencies": {
         "@babel/preset-typescript": "^7.16.5",
+        "@sendbird/chat": "^4.9.3",
         "@types/react-transition-group": "^4.4.4",
         "babel-jest": "^27.3.1",
         "dotenv": "^8.2.0",

packages/appstore/src/components/cfds-listing/cfds-listing.scss

@@ -449,6 +449,9 @@
     &__spec-text {
         font-family: 'Courier', monospace;
         overflow: hidden;
+        &-broker {
+            text-align: right;
+        }
     }
     &__download-center {
         border-top: 2px solid var(--general-section-1);

packages/appstore/src/components/main-title-bar/__tests__/index.spec.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { StoreProvider, mockStore } from '@deriv/stores';
+import MainTitleBar from '..';
+
+describe('MainTitleBar', () => {
+    const render_container = () => {
+        const mock = mockStore({});
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+
+        return render(<MainTitleBar />, {
+            wrapper,
+        });
+    };
+
+    it('should render the component', () => {
+        const { container } = render_container();
+        expect(container).toBeInTheDocument();
+    });
+
+    it('should render the correct title text', () => {
+        render_container();
+        expect(screen.getByText(/Trader's Hub/)).toBeInTheDocument();
+    });
+
+    it('should render the total assets text', () => {
+        render_container();
+        expect(screen.getByText(/Total assets/)).toBeInTheDocument();
+    });
+});

packages/appstore/src/components/main-title-bar/index.tsx

@@ -1,23 +1,25 @@
 import React from 'react';
 import { Text, DesktopWrapper, MobileWrapper, Tabs, Icon } from '@deriv/components';
 import { ContentFlag } from '@deriv/shared';
+import { observer, useStore } from '@deriv/stores';
 import AccountTypeDropdown from './account-type-dropdown';
 import AssetSummary from './asset-summary';
 import RegulatorSwitcher from './regulators-switcher';
 import { localize } from '@deriv/translations';
 import './main-title-bar.scss';
-import { observer } from 'mobx-react-lite';
-import { useStores } from 'Stores/index';
 import RegulationsSwitcherLoader from 'Components/pre-loader/regulations-switcher-loader';
 
 const MainTitleBar = () => {
-    const { traders_hub, client } = useStores();
+    const { traders_hub, client } = useStore();
     const { selected_region, handleTabItemClick, toggleRegulatorsCompareModal, content_flag } = traders_hub;
     const { is_landing_company_loaded, is_switching } = client;
     const is_low_risk_cr_real_account =
         content_flag === ContentFlag.LOW_RISK_CR_NON_EU || content_flag === ContentFlag.LOW_RISK_CR_EU;
 
-    const [active_index, setActiveIndex] = React.useState(selected_region === 'Non-EU' ? 0 : 1);
+    const [active_index, setActiveIndex] = React.useState(0);
+    React.useEffect(() => {
+        setActiveIndex(selected_region === 'Non-EU' ? 0 : 1);
+    }, [selected_region]);
 
     return (
         <React.Fragment>

packages/appstore/src/components/modals/regulators-compare-modal/regulators-compare-modal.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
-import { observer } from 'mobx-react-lite';
-import { useStores } from 'Stores';
+import { observer, useStore } from '@deriv/stores';
 import { localize } from '@deriv/translations';
 import RegulatorsCompareModalContent from './regulators-compare-modal-content';
 import { Modal, DesktopWrapper, MobileDialog, MobileWrapper, UILoader } from '@deriv/components';
 
 const RegulatorsCompareModal = () => {
-    const { traders_hub, ui } = useStores();
+    const { traders_hub, ui } = useStore();
     const { is_regulators_compare_modal_visible, toggleRegulatorsCompareModal } = traders_hub;
     const { disableApp, enableApp } = ui;
     const closeModal = () => {

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { ContentFlag } from '@deriv/shared';
+import { StoreProvider, mockStore } from '@deriv/stores';
+import { render, screen } from '@testing-library/react';
+import StaticDashboard, { TStaticDashboard } from '../static-dashboard';
+
+describe('StaticDashboard', () => {
+    const render_container = (mock_store_override = {}) => {
+        const mock_store = mockStore(mock_store_override);
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock_store}>{children}</StoreProvider>
+        );
+        const mock_props: TStaticDashboard = {
+            is_blurry: {
+                icon: false,
+                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,
+            },
+            is_onboarding_animated: {
+                text: false,
+                trade: false,
+                topup: false,
+                button: false,
+                get: false,
+            },
+        };
+        return render(<StaticDashboard {...mock_props} />, {
+            wrapper,
+        });
+    };
+
+    it('should display the component', () => {
+        const { container } = render_container();
+        expect(container).toBeInTheDocument();
+    });
+
+    it('should display both CFDs and Multipliers section', () => {
+        render_container();
+        const dashboard_sections = screen.getByTestId('dt_onboarding_dashboard');
+        expect(dashboard_sections?.textContent?.match(/Multipliers/)).not.toBeNull();
+        expect(dashboard_sections?.textContent?.match(/CFDs/)).not.toBeNull();
+    });
+
+    it('should display Multipliers and CFDs section in order if the user is non eu', () => {
+        render_container({
+            client: { is_logged_in: true },
+            traders_hub: { content_flag: ContentFlag.LOW_RISK_CR_NON_EU },
+        });
+        const dashboard_sections = screen.getByTestId('dt_onboarding_dashboard');
+        expect(dashboard_sections).not.toHaveClass('static-dashboard--eu');
+    });
+
+    it('should display Multipliers and CFDs section in reverse order if the user is eu', () => {
+        render_container({ client: { is_logged_in: true }, traders_hub: { content_flag: ContentFlag.EU_REAL } });
+        const dashboard_sections = screen.getByTestId('dt_onboarding_dashboard');
+        expect(dashboard_sections).toHaveClass('static-dashboard--eu');
+    });
+});