Merge pull request binary-com#75 from shontzu-deriv/compare-accounts-2

Compare accounts subtasks
shontzu-deriv · Aug 9, 2023 · 613bfcf · 613bfcf
2 parents 18909b9 + 9ad2a7c
commit 613bfcf
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 54 deletions.
diff --git a/...d/src/Containers/cfd-compare-accounts/__tests__/cfd-compare-accounts-description.spec.tsx b/...d/src/Containers/cfd-compare-accounts/__tests__/cfd-compare-accounts-description.spec.tsx
@@ -1,8 +1,14 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import CFDCompareAccountsDescription from '../cfd-compare-accounts-description';
+import { StoreProvider, mockStore } from '@deriv/stores';
 
 describe('<CFDCompareAccountsDescription />', () => {
+    const mock = mockStore({
+        traders_hub: {
+            selected_region: 'Non-EU',
+        },
+    });
     const mocked_props = {
         trading_platforms: {
             market_type: 'gaming',
@@ -24,14 +30,15 @@ describe('<CFDCompareAccountsDescription />', () => {
         expect(screen.getByText(counterpartyCompanyDescription)).toBeInTheDocument();
         expect(screen.getByText(jurisdictionDescription)).toBeInTheDocument();
     };
+    const wrapper = ({ children }: { children: JSX.Element }) => <StoreProvider store={mock}>{children}</StoreProvider>;
 
     it('should render CFDCompareAccountsDescription component on default props', () => {
-        render(<CFDCompareAccountsDescription {...mocked_props} />);
+        render(<CFDCompareAccountsDescription {...mocked_props} />, { wrapper });
     });
 
     it('should render content for gaming market type with market type svg', () => {
-        render(<CFDCompareAccountsDescription {...mocked_props} />);
-        assertContent('Maximum Leverage', '0.5 pips', 'Spreads from', 'Counterparty company', 'Jurisdiction');
+        render(<CFDCompareAccountsDescription {...mocked_props} />, { wrapper });
+        assertContent('Maximum leverage', '0.5 pips', 'Spreads from', 'Counterparty company', 'Jurisdiction');
         expect(screen.getByText('1:1000')).toBeInTheDocument();
         expect(screen.getByText('Deriv (SVG) LLC')).toBeInTheDocument();
         expect(screen.getByText('St. Vincent & Grenadines')).toBeInTheDocument();
@@ -40,8 +47,8 @@ describe('<CFDCompareAccountsDescription />', () => {
     it('should render content for gaming market type with vanuatu shortcode', () => {
         mocked_props.trading_platforms.shortcode = 'vanuatu';
 
-        render(<CFDCompareAccountsDescription {...mocked_props} />);
-        assertContent('Maximum Leverage', '0.5 pips', 'Spreads from', 'Counterparty company', 'Jurisdiction');
+        render(<CFDCompareAccountsDescription {...mocked_props} />, { wrapper });
+        assertContent('Maximum leverage', '0.5 pips', 'Spreads from', 'Counterparty company', 'Jurisdiction');
         expect(screen.getByText('1:1000')).toBeInTheDocument();
         expect(screen.getByText('Deriv (V) Ltd')).toBeInTheDocument();
         expect(screen.getByText('Vanuatu')).toBeInTheDocument();
@@ -50,8 +57,8 @@ describe('<CFDCompareAccountsDescription />', () => {
     it('should render content for all market type with svg shortcode', () => {
         mocked_props.trading_platforms.market_type = 'all';
 
-        render(<CFDCompareAccountsDescription {...mocked_props} />);
-        assertContent('Maximum Leverage', '0.5 pips', 'Spreads from', 'Counterparty company', 'Jurisdiction');
+        render(<CFDCompareAccountsDescription {...mocked_props} />, { wrapper });
+        assertContent('Maximum leverage', '0.5 pips', 'Spreads from', 'Counterparty company', 'Jurisdiction');
         expect(screen.getByText('1:1000')).toBeInTheDocument();
         expect(screen.getByText('Deriv (SVG) LLC')).toBeInTheDocument();
         expect(screen.getByText('St. Vincent & Grenadines')).toBeInTheDocument();
@@ -63,8 +70,8 @@ describe('<CFDCompareAccountsDescription />', () => {
         mocked_props.trading_platforms.market_type = 'financial';
         mocked_props.trading_platforms.shortcode = 'svg';
 
-        render(<CFDCompareAccountsDescription {...mocked_props} />);
-        assertContent('Maximum Leverage', '0.5 pips', 'Spreads from', 'Counterparty company', 'Jurisdiction');
+        render(<CFDCompareAccountsDescription {...mocked_props} />, { wrapper });
+        assertContent('Maximum leverage', '0.5 pips', 'Spreads from', 'Counterparty company', 'Jurisdiction');
         expect(screen.getByText('1:1000')).toBeInTheDocument();
         expect(screen.getByText('Deriv (SVG) LLC')).toBeInTheDocument();
         expect(screen.getByText('St. Vincent & Grenadines')).toBeInTheDocument();
@@ -76,8 +83,8 @@ describe('<CFDCompareAccountsDescription />', () => {
         mocked_props.trading_platforms.market_type = 'financial';
         mocked_props.trading_platforms.shortcode = 'vanuatu';
 
-        render(<CFDCompareAccountsDescription {...mocked_props} />);
-        assertContent('Maximum Leverage', '0.5 pips', 'Spreads from', 'Counterparty company', 'Jurisdiction');
+        render(<CFDCompareAccountsDescription {...mocked_props} />, { wrapper });
+        assertContent('Maximum leverage', '0.5 pips', 'Spreads from', 'Counterparty company', 'Jurisdiction');
         expect(screen.getByText('1:1000')).toBeInTheDocument();
         expect(screen.getByText('Deriv (V) Ltd')).toBeInTheDocument();
         expect(screen.getByText('Vanuatu')).toBeInTheDocument();
@@ -89,8 +96,8 @@ describe('<CFDCompareAccountsDescription />', () => {
         mocked_props.trading_platforms.market_type = 'financial';
         mocked_props.trading_platforms.shortcode = 'labuan';
 
-        render(<CFDCompareAccountsDescription {...mocked_props} />);
-        assertContent('Maximum Leverage', '0.5 pips', 'Spreads from', 'Counterparty company', 'Jurisdiction');
+        render(<CFDCompareAccountsDescription {...mocked_props} />, { wrapper });
+        assertContent('Maximum leverage', '0.5 pips', 'Spreads from', 'Counterparty company', 'Jurisdiction');
         expect(screen.getByText('1:100')).toBeInTheDocument();
         expect(screen.getByText('Deriv (FX) Ltd')).toBeInTheDocument();
         expect(screen.getByText('Labuan')).toBeInTheDocument();
@@ -103,9 +110,9 @@ describe('<CFDCompareAccountsDescription />', () => {
         mocked_props.trading_platforms.market_type = 'financial';
         mocked_props.trading_platforms.shortcode = 'maltainvest';
 
-        render(<CFDCompareAccountsDescription {...mocked_props} />);
-        assertContent('Maximum Leverage', '0.5 pips', 'Spreads from', 'Counterparty company', 'Jurisdiction');
-        expect(screen.getByText('1:30')).toBeInTheDocument();
+        render(<CFDCompareAccountsDescription {...mocked_props} />, { wrapper });
+        assertContent('Maximum leverage', '0.5 pips', 'Spreads from', 'Counterparty company', 'Jurisdiction');
+        expect(screen.getByText('Up to 1:30')).toBeInTheDocument();
         expect(screen.getByText('Deriv Investments (Europe) Limited')).toBeInTheDocument();
         expect(screen.getByText('Malta')).toBeInTheDocument();
         expect(screen.getByText('Financial Commission')).toBeInTheDocument();
@@ -119,9 +126,9 @@ describe('<CFDCompareAccountsDescription />', () => {
         mocked_props.trading_platforms.shortcode = 'svg';
         mocked_props.is_demo = true;
 
-        render(<CFDCompareAccountsDescription {...mocked_props} />);
+        render(<CFDCompareAccountsDescription {...mocked_props} />, { wrapper });
         expect(screen.getByText('1:1000')).toBeInTheDocument();
-        expect(screen.getByText('Maximum Leverage')).toBeInTheDocument();
+        expect(screen.getByText('Maximum leverage')).toBeInTheDocument();
         expect(screen.getByText('0.5 pips')).toBeInTheDocument();
         expect(screen.getByText('Spreads from')).toBeInTheDocument();
     });

diff --git a/.../src/Containers/cfd-compare-accounts/__tests__/cfd-instruments-label-highlighted.spec.tsx b/.../src/Containers/cfd-compare-accounts/__tests__/cfd-instruments-label-highlighted.spec.tsx
@@ -1,10 +1,17 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import CFDInstrumentsLabelHighlighted from '../cfd-instruments-label-highlighted';
+import { StoreProvider, mockStore } from '@deriv/stores';
 
 jest.mock('../instruments-icon-with-label', () => jest.fn(() => <div>Mocked Icon</div>));
 
 describe('<CFDInstrumentsLabelHighlighted />', () => {
+    const mock = mockStore({
+        traders_hub: {
+            selected_region: 'Non-EU',
+        },
+    });
+
     const mocked_props = {
         trading_platforms: {
             platform: 'mt5',
@@ -14,7 +21,10 @@ describe('<CFDInstrumentsLabelHighlighted />', () => {
     };
 
     it('should renders icons for market type gaming/synthetic', () => {
-        render(<CFDInstrumentsLabelHighlighted {...mocked_props} />);
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+        render(<CFDInstrumentsLabelHighlighted {...mocked_props} />, { wrapper });
 
         const containerElement = screen.getByTestId('dt_compare_cfd_account_outline__container');
         expect(containerElement).toBeInTheDocument();
@@ -23,17 +33,21 @@ describe('<CFDInstrumentsLabelHighlighted />', () => {
 
     it('should renders icons for market type all financial', () => {
         mocked_props.trading_platforms.market_type = 'financial';
-        render(<CFDInstrumentsLabelHighlighted {...mocked_props} />);
-
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+        render(<CFDInstrumentsLabelHighlighted {...mocked_props} />, { wrapper });
         const containerElement = screen.getByTestId('dt_compare_cfd_account_outline__container');
         expect(containerElement).toBeInTheDocument();
         expect(containerElement).toHaveClass('compare-cfd-account-outline');
     });
 
     it('should renders icons for market type all', () => {
         mocked_props.trading_platforms.market_type = 'financial';
-        render(<CFDInstrumentsLabelHighlighted {...mocked_props} />);
-
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+        render(<CFDInstrumentsLabelHighlighted {...mocked_props} />, { wrapper });
         const containerElement = screen.getByTestId('dt_compare_cfd_account_outline__container');
         expect(containerElement).toBeInTheDocument();
         expect(containerElement).toHaveClass('compare-cfd-account-outline');

diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-description.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-description.tsx
@@ -3,12 +3,15 @@ import classNames from 'classnames';
 import { Text } from '@deriv/components';
 import { TCompareAccountsCard } from 'Components/props.types';
 import { getJuridisctionDescription, getMarketType } from '../../Helpers/compare-accounts-config';
+import { useStore } from '@deriv/stores';
+import { localize } from '@deriv/translations';
 
 const CFDCompareAccountsDescription = ({ trading_platforms, is_demo }: TCompareAccountsCard) => {
     const market_type = getMarketType(trading_platforms);
     const market_type_shortcode = market_type.concat('_', trading_platforms.shortcode);
     const juridisction_data = getJuridisctionDescription(market_type_shortcode);
-
+    const { traders_hub } = useStore();
+    const { selected_region } = traders_hub;
     return (
         <div
             className={classNames('compare-cfd-account-text-container', {
@@ -20,17 +23,19 @@ const CFDCompareAccountsDescription = ({ trading_platforms, is_demo }: TCompareA
                     {juridisction_data.leverage}
                 </Text>
                 <Text as='p' size='xxxs' align='center'>
-                    {juridisction_data.leverage_description}
-                </Text>
-            </div>
-            <div className='compare-cfd-account-text-container__separator'>
-                <Text as='h1' weight='bold' size='m' align='center'>
-                    {juridisction_data.spread}
-                </Text>
-                <Text as='p' size='xxxs' align='center'>
-                    {juridisction_data.spread_description}
+                    {selected_region === 'Non-EU' ? juridisction_data.leverage_description : localize('Leverage')}
                 </Text>
             </div>
+            {selected_region === 'Non-EU' && (
+                <div className='compare-cfd-account-text-container__separator'>
+                    <Text as='h1' weight='bold' size='m' align='center'>
+                        {juridisction_data.spread}
+                    </Text>
+                    <Text as='p' size='xxxs' align='center'>
+                        {juridisction_data.spread_description}
+                    </Text>
+                </div>
+            )}
             {!is_demo && (
                 <React.Fragment>
                     <div className='compare-cfd-account-text-container__separator'>
@@ -53,11 +58,13 @@ const CFDCompareAccountsDescription = ({ trading_platforms, is_demo }: TCompareA
                         <Text as='h1' weight='bold' size='xs' align='center'>
                             {juridisction_data.regulator}
                         </Text>
+                        {juridisction_data.regulator_license && (
+                            <Text as='p' size='xxxs' align='center'>
+                                {juridisction_data.regulator_license}
+                            </Text>
+                        )}
                         <Text as='p' size='xxxs' align='center'>
-                            {juridisction_data.regulator_description.split('<br />')[0]}
-                        </Text>
-                        <Text as='p' size='xxxs' align='center'>
-                            {juridisction_data.regulator_description.split('<br />')[1]}
+                            {juridisction_data.regulator_description}
                         </Text>
                     </div>
                 </React.Fragment>

diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.scss b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.scss
@@ -27,7 +27,7 @@
             overflow-x: auto;
             overflow-y: scroll;
             padding: 0 0 20.1rem;
-            height: 80rem;
+            max-height: 80rem;
             width: 100%;
         }
         &__card-count {
@@ -84,9 +84,9 @@
         }
     }
     &-text-container {
-        height: 25.5rem;
+        max-height: 25.5rem;
         &--demo {
-            height: 13.5rem;
+            max-height: 13.5rem;
         }
         &__separator {
             margin: 0.9rem;

diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx
@@ -19,7 +19,7 @@ const CompareCFDs = observer(() => {
     const store = useStore();
     const { client, traders_hub } = store;
     const { trading_platform_available_accounts } = client;
-    const { is_demo, is_eu_user, available_dxtrade_accounts } = traders_hub;
+    const { is_demo, is_eu_user, available_dxtrade_accounts, selected_region } = traders_hub;
 
     const sorted_available_accounts = !is_eu_user
         ? getSortedCFDAvailableAccounts(trading_platform_available_accounts)
@@ -68,9 +68,14 @@ const CompareCFDs = observer(() => {
             <h1 className='compare-cfd-header-title'>
                 <Text size='m' weight='bold' color='prominent'>
                     <Localize
-                        i18n_default_text='Compare CFDs {{demo_title}} accounts'
+                        i18n_default_text={
+                            selected_region === 'EU'
+                                ? 'Deriv MT5 CFDs {{real_title}} account'
+                                : 'Compare CFDs {{demo_title}} accounts'
+                        }
                         values={{
                             demo_title: is_demo ? localize('demo') : '',
+                            real_title: is_demo ? localize('Demo') : localize('real'),
                         }}
                     />
                 </Text>

diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-instruments-label-highlighted.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-instruments-label-highlighted.tsx
@@ -2,9 +2,13 @@ import React from 'react';
 import InstrumentsIconWithLabel from './instruments-icon-with-label';
 import { TInstrumentsIcon, TCompareAccountsCard } from 'Components/props.types';
 import { getHighlightedIconLabel } from '../../Helpers/compare-accounts-config';
+import { useStore } from '@deriv/stores';
 
 const CFDInstrumentsLabelHighlighted = ({ trading_platforms, is_demo }: TCompareAccountsCard) => {
-    const iconData: TInstrumentsIcon[] = [...getHighlightedIconLabel(trading_platforms, is_demo)];
+    const { traders_hub } = useStore();
+    const selected_region = traders_hub.selected_region;
+
+    const iconData: TInstrumentsIcon[] = [...getHighlightedIconLabel(trading_platforms, selected_region, is_demo)];
 
     return (
         <div className={'compare-cfd-account-outline'} data-testid='dt_compare_cfd_account_outline__container'>