Merge pull request binary-com#50 from hamza-deriv/hamza/WALL-1263/fix…

…es_compare_account fix: comapre account fixes first round
shontzu-deriv · Jul 6, 2023 · 2d1b443 · 2d1b443
2 parents a855a7a + 873f84a
commit 2d1b443
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 23 deletions.
diff --git a/...es/cfd/src/Containers/cfd-compare-accounts/__tests__/cfd-compare-accounts-button.spec.tsx b/...es/cfd/src/Containers/cfd-compare-accounts/__tests__/cfd-compare-accounts-button.spec.tsx
@@ -229,8 +229,6 @@ describe('<CFDCompareAccountsButton />', () => {
         userEvent.click(buttonElement);
         await waitFor(() => {
             expect(mock.common.setAppstorePlatform).toHaveBeenCalledWith('dxtrade');
-            // expect(mock.modules.cfd.setJurisdictionSelectedShortcode).toHaveBeenCalled();
-            // expect(mock.modules.cfd.toggleCFDVerificationModal).toHaveBeenCalledTimes(1);
             expect(mock.traders_hub.getAccount).toHaveBeenCalled();
         });
     });

diff --git a/...ages/cfd/src/Containers/cfd-compare-accounts/__tests__/cfd-compare-accounts-card.spec.tsx b/...ages/cfd/src/Containers/cfd-compare-accounts/__tests__/cfd-compare-accounts-card.spec.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { CFD_PLATFORMS } from '@deriv/shared';
 import { StoreProvider, mockStore } from '@deriv/stores';
-// import { Localize } from '@deriv/translations';
 import CFDCompareAccountsCard from '../cfd-compare-accounts-card';
 
 jest.mock('../../../Assets/svgs/trading-platform', () => jest.fn(() => <div>Mocked Icon</div>));

diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/__tests__/cfd-compare-accounts.spec.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/__tests__/cfd-compare-accounts.spec.tsx
@@ -103,7 +103,6 @@ describe('<CompareCFDs />', () => {
         const navigationElement = screen.getByText(/Trader's hub/i);
         navigationElement.click();
 
-        // Assert that the history.push function is called with the correct route
         expect(historyMock.push).toHaveBeenCalledWith(routes.traders_hub);
     });
 });
diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-card.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-card.tsx
@@ -26,7 +26,7 @@ const CFDCompareAccountsCard = ({ trading_platforms, is_eu_user, is_demo }: TCom
                     is_demo={is_demo}
                 />
                 <CFDCompareAccountsDescription trading_platforms={trading_platforms} is_demo={is_demo} />
-                <CFDInstrumentsLabelHighlighted trading_platforms={trading_platforms} />
+                <CFDInstrumentsLabelHighlighted trading_platforms={trading_platforms} is_demo={is_demo} />
                 {is_eu_user && (
                     <div className='compare-cfd-account-card-container__eu-clients'>
                         <Text color='red' size='xxs' weight='bold'>

diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-title-icon.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-title-icon.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Text, Popover } from '@deriv/components';
+import { isMobile } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import TradigPlatformIconProps from '../../Assets/svgs/trading-platform';
 import { TCompareAccountsCard } from 'Components/props.types';
@@ -30,7 +31,7 @@ const CFDCompareAccountsTitleIcon = ({ trading_platforms, is_eu_user, is_demo }:
                     </Text>
                     {jurisdiction_shortcode === 'financial_labuan' && (
                         <Popover
-                            alignment='right'
+                            alignment={isMobile ? 'top' : 'right'}
                             className='cfd-compare-account-labuan-tooltip'
                             classNameBubble='cfd-compare-accounts-tooltip--msg'
                             icon='info'

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
@@ -11,7 +11,7 @@
     &-title {
         flex: 1;
         @include mobile {
-            text-align: left;
+            text-align: center;
             padding: 1rem;
         }
     }
@@ -29,6 +29,15 @@
             overflow-y: scroll;
             padding: 0 0 20.1rem;
             height: 80rem;
+            width: 100%;
+        }
+        &__eu {
+            display: flex;
+            justify-content: center;
+            margin-left: 13rem;
+            &--mobile {
+                margin-left: 25%;
+            }
         }
     }
     &-main-container {
@@ -139,4 +148,7 @@
         font-size: 1.6rem;
         color: var(--text-red);
     }
+    &__text {
+        margin-left: 0.5rem;
+    }
 }
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
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
+import classNames from 'classnames';
 import { Text, Icon, PageOverlay, DesktopWrapper, MobileWrapper, CFDCompareAccountsCarousel } from '@deriv/components';
 import { routes } from '@deriv/shared';
 import { Localize, localize } from '@deriv/translations';
@@ -75,7 +76,11 @@ const CompareCFDs = observer(() => {
             <DesktopWrapper>
                 <div className='compare-cfd-account'>
                     <PageOverlay header={DesktopHeader} is_from_app={routes.traders_hub} />
-                    <div className='compare-cfd-account-container'>
+                    <div
+                        className={classNames('compare-cfd-account-container', {
+                            'compare-cfd-account-container__eu': is_eu_user,
+                        })}
+                    >
                         <div className='card-list'>
                             <CFDCompareAccountsCarousel>
                                 {all_available_accounts.map(item => (
@@ -101,12 +106,23 @@ const CompareCFDs = observer(() => {
             </DesktopWrapper>
             <MobileWrapper>
                 <PageOverlay
-                    header={localize('Compare CFDs accounts')}
+                    header={
+                        <Localize
+                            i18n_default_text='Compare CFDs {{demo_title}} accounts'
+                            values={{
+                                demo_title: is_demo ? localize('demo') : '',
+                            }}
+                        />
+                    }
                     header_classname='compare-cfd-header-title'
                     is_from_app={!routes.traders_hub}
                     onClickClose={() => history.push(routes.traders_hub)}
                 >
-                    <div className='compare-cfd-account-container'>
+                    <div
+                        className={classNames('compare-cfd-account-container', {
+                            'compare-cfd-account-container__eu--mobile': is_eu_user,
+                        })}
+                    >
                         <CFDCompareAccountsCarousel>
                             {all_available_accounts.map(item => (
                                 <CFDCompareAccountsCard

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
@@ -3,8 +3,8 @@ import InstrumentsIconWithLabel from './instruments-icon-with-label';
 import { TInstrumentsIcon, TCompareAccountsCard } from 'Components/props.types';
 import { getHighlightedIconLabel } from '../../Helpers/compare-accounts-config';
 
-const CFDInstrumentsLabelHighlighted = ({ trading_platforms }: TCompareAccountsCard) => {
-    const iconData: TInstrumentsIcon[] = [...getHighlightedIconLabel(trading_platforms)];
+const CFDInstrumentsLabelHighlighted = ({ trading_platforms, is_demo }: TCompareAccountsCard) => {
+    const iconData: TInstrumentsIcon[] = [...getHighlightedIconLabel(trading_platforms, is_demo)];
 
     return (
         <div className={'compare-cfd-account-outline'} data-testid='dt_compare_cfd_account_outline__container'>

diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/instruments-icon-with-label.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/instruments-icon-with-label.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Text } from '@deriv/components';
 import { TInstrumentsIcon } from 'Components/props.types';
 import TradingInstrumentsIcon from '../../Assets/svgs/trading-instruments';
 
@@ -12,14 +13,16 @@ const InstrumentsIconWithLabel = ({ icon, text, highlighted, className, is_aster
             className={className}
         >
             <TradingInstrumentsIcon icon={icon} size={24} className='trading-instruments__icon' />
-            <span
-                style={{
-                    marginLeft: '0.5rem',
-                    fontWeight: 'bold',
-                }}
+            <Text
+                as='p'
+                weight='bolder'
+                size='xxs'
+                align='center'
+                color='general'
+                className='trading-instruments__text'
             >
                 {text}
-            </span>
+            </Text>
             {is_asterik && (
                 <span className='trading-instruments__span' style={{ display: is_asterik ? 'block' : 'none' }}>
                     *

diff --git a/packages/cfd/src/Helpers/compare-accounts-config.ts b/packages/cfd/src/Helpers/compare-accounts-config.ts
@@ -7,12 +7,15 @@ import {
 } from '../Components/props.types';
 
 // Map the accounts according to the market type
-const getHighlightedIconLabel = (trading_platforms: TModifiedTradingPlatformAvailableAccount): TInstrumentsIcon[] => {
+const getHighlightedIconLabel = (
+    trading_platforms: TModifiedTradingPlatformAvailableAccount,
+    is_demo?: boolean
+): TInstrumentsIcon[] => {
     const market_type = getMarketType(trading_platforms);
     const jurisdiction_shortcode = market_type.concat('_', trading_platforms.shortcode);
     // Forex for these: MT5 Financial Vanuatu, MT5 Financial Labuan
     const forex_label =
-        jurisdiction_shortcode === 'financial_labuan' || jurisdiction_shortcode === 'financial_vanuatu'
+        jurisdiction_shortcode === 'financial_labuan' || jurisdiction_shortcode === 'financial_vanuatu' || is_demo
             ? localize('Forex')
             : localize('Forex: standard/micro');
 
@@ -25,15 +28,15 @@ const getHighlightedIconLabel = (trading_platforms: TModifiedTradingPlatformAvai
                 { icon: 'Stocks', text: localize('Stocks'), highlighted: false },
                 { icon: 'StockIndices', text: localize('Stock Indices'), highlighted: false },
                 { icon: 'Commodities', text: localize('Commodities'), highlighted: false },
-                { icon: 'Forex', text: localize('Forex: standard/micro'), highlighted: false },
+                { icon: 'Forex', text: forex_label, highlighted: false },
                 { icon: 'Cryptocurrencies', text: localize('Cryptocurrencies'), highlighted: false },
                 { icon: 'ETF', text: localize('ETF'), highlighted: false },
             ];
         case 'financial':
             if (trading_platforms.shortcode === 'maltainvest') {
                 return [
                     { icon: 'Synthetics', text: localize('Synthetics'), highlighted: true, is_asterik: true },
-                    { icon: 'Forex', text: localize('Forex'), highlighted: true },
+                    { icon: 'Forex', text: forex_label, highlighted: true },
                     { icon: 'Stocks', text: localize('Stocks'), highlighted: true },
                     { icon: 'StockIndices', text: localize('Stock Indices'), highlighted: true },
                     { icon: 'Commodities', text: localize('Commodities'), highlighted: true },
@@ -60,7 +63,7 @@ const getHighlightedIconLabel = (trading_platforms: TModifiedTradingPlatformAvai
                 { icon: 'Stocks', text: localize('Stocks'), highlighted: true },
                 { icon: 'StockIndices', text: localize('Stock Indices'), highlighted: true },
                 { icon: 'Commodities', text: localize('Commodities'), highlighted: true },
-                { icon: 'Forex', text: localize('Forex: standard/micro'), highlighted: true },
+                { icon: 'Forex', text: forex_label, highlighted: true },
                 { icon: 'Cryptocurrencies', text: localize('Cryptocurrencies'), highlighted: true },
                 { icon: 'ETF', text: localize('ETF'), highlighted: true },
             ];