[TRAH]/Hasan/[TRAH-4541]/Gold Account in compare account table (#17737)

* fix: add product to create unique key

* fix: add gold to type

* feat: add generateMarketTypeShortcode

* feat: add new tag to gold account

* feat: used generate market type shortcode func

* feat: added gold to product obj

* feat: mapped gold account in getSortedCFDAvailableAccounts

* feat: added gold icon

* feat: added gold title

* fix: forex instruments

* fix: fixed eu title and icon

* fix: cfds icon

* fix: eu sorting

* fix: eu instruments

* fix: non eu demo accounts

* fix: commit issue

* fix: test failures

* fix: demo accounts filtering

* fix: removed unwanter import

* fix: compare accounts header

* fix: accounts demo title case

* fix: demo title test cases

* fix: new tag demo size

* fix: title alignment

* fix: new tag css for mobile

packages/cfd/src/Components/props.types.ts

@@ -249,6 +249,7 @@ export type TInstrumentsIcon = {
     highlighted?: boolean;
     className?: string;
     is_asterisk?: boolean;
+    is_available?: boolean;
 };
 
 export type TCompareAccountsCard = {

packages/cfd/src/Containers/cfd-compare-accounts/__tests__/cfd-compare-accounts-title-icon.spec.tsx

@@ -101,7 +101,7 @@ describe('<CFDCompareAccountsTitleIcon />', () => {
         mocked_props.is_demo = true;
         mocked_props.is_eu_user = false;
         render(<CFDCompareAccountsTitleIcon {...mocked_props} />);
-        expect(screen.getByText('Standard Demo')).toBeInTheDocument();
+        expect(screen.getByText('Standard demo')).toBeInTheDocument();
     });
 
     test('should render correct title for financial product in demo account', () => {
@@ -115,7 +115,7 @@ describe('<CFDCompareAccountsTitleIcon />', () => {
         mocked_props.is_demo = true;
         mocked_props.is_eu_user = false;
         render(<CFDCompareAccountsTitleIcon {...mocked_props} />);
-        expect(screen.getByText('Financial Demo')).toBeInTheDocument();
+        expect(screen.getByText('Financial demo')).toBeInTheDocument();
     });
 
     test('should render correct title for Swap-Free with correct product type  demo account', () => {
@@ -128,7 +128,7 @@ describe('<CFDCompareAccountsTitleIcon />', () => {
         mocked_props.is_demo = true;
         mocked_props.is_eu_user = false;
         render(<CFDCompareAccountsTitleIcon {...mocked_props} />);
-        expect(screen.getByText('Swap-Free Demo')).toBeInTheDocument();
+        expect(screen.getByText('Swap-Free demo')).toBeInTheDocument();
     });
 
     test('should render correct title for Zero Spread with correct product type  demo account', () => {
@@ -142,7 +142,7 @@ describe('<CFDCompareAccountsTitleIcon />', () => {
         mocked_props.is_demo = true;
         mocked_props.is_eu_user = false;
         render(<CFDCompareAccountsTitleIcon {...mocked_props} />);
-        expect(screen.getByText('Zero Spread Demo')).toBeInTheDocument();
+        expect(screen.getByText('Zero Spread demo')).toBeInTheDocument();
     });
 
     test('should render correct title for DerivX with correct product type demo account', () => {
@@ -154,7 +154,7 @@ describe('<CFDCompareAccountsTitleIcon />', () => {
         mocked_props.is_demo = true;
         mocked_props.is_eu_user = false;
         render(<CFDCompareAccountsTitleIcon {...mocked_props} />);
-        expect(screen.getByText('Deriv X Demo')).toBeInTheDocument();
+        expect(screen.getByText('Deriv X demo')).toBeInTheDocument();
     });
 
     test('should render correct title for EU clients demo accounts', () => {
@@ -164,6 +164,6 @@ describe('<CFDCompareAccountsTitleIcon />', () => {
         mocked_props.is_demo = true;
         mocked_props.is_eu_user = true;
         render(<CFDCompareAccountsTitleIcon {...mocked_props} />);
-        expect(screen.getByText('CFDs Demo')).toBeInTheDocument();
+        expect(screen.getByText('CFDs demo')).toBeInTheDocument();
     });
 });

packages/cfd/src/Containers/cfd-compare-accounts/__tests__/cfd-instruments-label-highlighted.spec.tsx

@@ -55,20 +55,4 @@ describe('<CFDInstrumentsLabelHighlighted />', () => {
         expect(containerElement).toBeInTheDocument();
         expect(containerElement).toHaveClass('compare-cfd-account-outline');
     });
-
-    it('should render the "Boom 300 and Crash 300 Index" for EU user', () => {
-        const mockStoreEU = mockStore({
-            traders_hub: {
-                selected_region: 'EU',
-                is_eu_user: true,
-            },
-        });
-
-        const wrapper = ({ children }: { children: JSX.Element }) => (
-            <StoreProvider store={mockStoreEU}>{children}</StoreProvider>
-        );
-
-        render(<CFDInstrumentsLabelHighlighted {...mocked_props} />, { wrapper });
-        expect(screen.getByText(/Boom 300 and Crash 300 Index/i)).toBeInTheDocument();
-    });
 });

packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts-card.tsx

@@ -13,7 +13,7 @@ const CFDCompareAccountsCard = ({ trading_platforms, is_eu_user, is_demo }: TCom
         <div className='compare-cfd-account-main-container'>
             <div className='compare-cfd-account-card-container'>
                 <CFDCompareAccountsPlatformLabel trading_platforms={trading_platforms} />
-                {trading_platforms.product === PRODUCT.ZEROSPREAD && (
+                {trading_platforms.product === PRODUCT.GOLD && (
                     <Text
                         className='compare-cfd-account-card-container__banner'
                         weight='bold'

packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.scss

@@ -78,6 +78,14 @@
                 transform: translateX(8rem) translateY(-2rem) rotate(45deg);
                 padding: 0.1rem;
             }
+            @include mobile-screen {
+                transform: rotate(45deg);
+                right: -32px;
+                top: 10px;
+                width: 108px;
+                height: 16px;
+                font-size: var(--text-size-xxxs);
+            }
         }
     }
     &-outline {

packages/cfd/src/Containers/cfd-compare-accounts/cfd-compare-accounts.tsx

@@ -17,7 +17,6 @@ import {
     dxtrade_data,
     ctrader_data,
 } from '../../Helpers/compare-accounts-config';
-import { REGION } from '../../Helpers/cfd-config';
 
 const CompareCFDs = observer(() => {
     const { isDesktop } = useDevice();
@@ -26,8 +25,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, selected_region, available_ctrader_accounts } =
-        traders_hub;
+    const { is_demo, is_eu_user, available_dxtrade_accounts, available_ctrader_accounts } = traders_hub;
 
     const sorted_available_accounts = !is_eu_user
         ? getSortedCFDAvailableAccounts(trading_platform_available_accounts)
@@ -64,20 +62,12 @@ const CompareCFDs = observer(() => {
             ? all_cfd_available_accounts.length + 1
             : all_cfd_available_accounts.length;
 
-    const getCompareAccountsHeader = () =>
-        selected_region === REGION.EU ? (
-            <Localize
-                i18n_default_text='Deriv MT5 CFDs {{title}} account'
-                values={{
-                    title: is_demo ? localize('demo') : localize('real'),
-                }}
-            />
-        ) : (
-            <Localize
-                i18n_default_text='Compare CFDs {{title}} accounts'
-                values={{ title: is_demo ? localize('demo') : '' }}
-            />
-        );
+    const getCompareAccountsHeader = () => (
+        <Localize
+            i18n_default_text='Compare CFDs {{title}} accounts'
+            values={{ title: is_demo ? localize('demo') : '' }}
+        />
+    );
 
     const DesktopHeader = (
         <div className='compare-cfd-header'>
@@ -93,7 +83,7 @@ const CompareCFDs = observer(() => {
                 </Text>
             </div>
             <h1 className='compare-cfd-header-title'>
-                <Text size='m' weight='bold' color='prominent'>
+                <Text size='m' weight='bold' color='prominent' align='center'>
                     {getCompareAccountsHeader()}
                 </Text>
             </h1>

packages/cfd/src/Containers/cfd-compare-accounts/cfd-instruments-label-highlighted.tsx

@@ -1,6 +1,4 @@
 import React from 'react';
-import { Text } from '@deriv/components';
-import { Localize } from '@deriv/translations';
 import InstrumentsIconWithLabel from './instruments-icon-with-label';
 import { TInstrumentsIcon, TCompareAccountsCard } from 'Components/props.types';
 import { getHighlightedIconLabel } from '../../Helpers/compare-accounts-config';
@@ -17,19 +15,14 @@ const CFDInstrumentsLabelHighlighted = ({ trading_platforms }: TCompareAccountsC
             {is_eu_user ? (
                 <React.Fragment>
                     {iconData
-                        .filter(item => item.highlighted)
+                        .filter(instrument => instrument.is_available !== false)
                         .map(item => (
                             <InstrumentsIconWithLabel
                                 key={item.text}
                                 {...item}
                                 className='compare-cfd-account-instrument-icon'
                             />
                         ))}
-                    <div className='compare-cfd-account-card-container__eu-clients'>
-                        <Text color='red' size='xxs' weight='bold'>
-                            <Localize i18n_default_text='*Boom 300 and Crash 300 Index' />
-                        </Text>
-                    </div>
                 </React.Fragment>
             ) : (
                 iconData.map(item => (

packages/cfd/src/Containers/cfd-compare-accounts/instruments-icon-with-label.tsx

@@ -6,6 +6,7 @@ import TradingInstrumentsIcon from '../../Assets/svgs/trading-instruments';
 
 const InstrumentsIconWithLabel = ({ icon, text, highlighted, className, is_asterisk }: TInstrumentsIcon) => {
     const { isMobile } = useDevice();
+
     return (
         <div
             style={{

packages/cfd/src/Helpers/cfd-config.ts

@@ -59,6 +59,7 @@ export const MARKET_TYPE_SHORTCODE = {
     FINANCIAL_LABUAN: 'financial_stp_labuan',
     FINANCIAL_MALTA_INVEST: 'financial_maltainvest',
     FINANCIAL_GOLD: 'financial_gold',
+    CFDS_GOLD: 'CFDs_gold',
     ALL_SWAP_FREE_SVG: 'all_swap_free_svg',
     ALL_ZERO_SPREAD_BVI: 'all_zero_spread_bvi',
     ALL_ZS_BVI: 'all_bvi',

packages/cfd/src/Helpers/compare-accounts-config.ts

@@ -57,15 +57,24 @@ const getHighlightedIconLabel = (
             icon: 'Cryptocurrencies',
             text: localize('Cryptocurrencies'),
         },
-        { id: 'ETFs', icon: 'ETF', text: localize('ETFs') },
+        { id: 'ETFs', icon: 'ETF', text: localize('ETFs'), is_available: selected_region === REGION.NON_EU },
         {
             id: 'synthetic_indices',
             icon: 'Synthetics',
             text: localize('Synthetic indices'),
-            is_asterisk: selected_region === REGION.EU,
         },
-        { id: 'basket_indices', icon: 'Baskets', text: localize('Basket indices') },
-        { id: 'derived_FX', icon: 'DerivedFX', text: localize('Derived FX') },
+        {
+            id: 'basket_indices',
+            icon: 'Baskets',
+            text: localize('Basket indices'),
+            is_available: selected_region === REGION.NON_EU,
+        },
+        {
+            id: 'derived_FX',
+            icon: 'DerivedFX',
+            text: localize('Derived FX'),
+            is_available: selected_region === REGION.NON_EU,
+        },
     ];
 
     return instrumentsData.map((item: TInstrumentsIcon) => ({
@@ -78,23 +87,24 @@ const getHighlightedIconLabel = (
 const getAccountCardTitle = (shortcode: string, is_demo?: boolean) => {
     switch (shortcode) {
         case MARKET_TYPE_SHORTCODE.SYNTHETIC:
-            return is_demo ? localize('Standard Demo') : localize('Standard');
+            return is_demo ? localize('Standard demo') : localize('Standard');
         case MARKET_TYPE_SHORTCODE.FINANCIAL:
-            return is_demo ? localize('Financial Demo') : localize('Financial');
+            return is_demo ? localize('Financial demo') : localize('Financial');
         case MARKET_TYPE_SHORTCODE.FINANCIAL_LABUAN:
             return localize('Financial - STP');
         case MARKET_TYPE_SHORTCODE.FINANCIAL_GOLD:
-            return is_demo ? localize('Gold Demo') : localize('Gold');
+        case MARKET_TYPE_SHORTCODE.CFDS_GOLD:
+            return is_demo ? localize('Gold demo') : localize('Gold');
         case MARKET_TYPE_SHORTCODE.ALL_SWAP_FREE_SVG:
-            return is_demo ? localize('Swap-Free Demo') : localize('Swap-Free');
+            return is_demo ? localize('Swap-Free demo') : localize('Swap-Free');
         case MARKET_TYPE_SHORTCODE.ALL_ZERO_SPREAD_BVI:
-            return is_demo ? localize('Zero Spread Demo') : localize('Zero Spread');
+            return is_demo ? localize('Zero Spread demo') : localize('Zero Spread');
         case CFD_PLATFORMS.DXTRADE:
-            return is_demo ? localize('Deriv X Demo') : localize('Deriv X');
+            return is_demo ? localize('Deriv X demo') : localize('Deriv X');
         case CFD_PLATFORMS.CTRADER:
-            return is_demo ? localize('Deriv cTrader Demo') : localize('Deriv cTrader');
+            return is_demo ? localize('Deriv cTrader demo') : localize('Deriv cTrader');
         default:
-            return is_demo ? localize('CFDs Demo') : localize('CFDs');
+            return is_demo ? localize('CFDs demo') : localize('CFDs');
     }
 };
 
@@ -146,7 +156,12 @@ const getAccountIcon = (shortcode: string, product?: TProducts) => {
         case CFD_PLATFORMS.CTRADER:
             return 'CTrader';
         default:
-            return 'CFDs';
+            switch (product) {
+                case PRODUCT.GOLD:
+                    return 'Gold';
+                default:
+                    return 'CFDs';
+            }
     }
 };
 
@@ -240,10 +255,26 @@ const getSortedCFDAvailableAccounts = (available_accounts: TModifiedTradingPlatf
         )
         .map(item => ({ ...item, platform: CFD_PLATFORMS.MT5 }) as const);
 
+    const gold_accounts = available_accounts
+        .filter(
+            item =>
+                item.market_type === MARKET_TYPE.FINANCIAL &&
+                item.shortcode !== JURISDICTION.MALTA_INVEST &&
+                item.product === PRODUCT.GOLD &&
+                item.is_default_jurisdiction === 'true'
+        )
+        .map(item => ({ ...item, platform: CFD_PLATFORMS.MT5 }) as const);
+
     const gaming_accounts = available_accounts
         .filter(item => item.market_type === MARKET_TYPE.GAMING && item.is_default_jurisdiction === 'true')
         .map(item => ({ ...item, platform: CFD_PLATFORMS.MT5 }) as const);
-    return [...gaming_accounts, ...financial_accounts, ...swap_free_accounts, ...zero_spread_accounts];
+    return [
+        ...gaming_accounts,
+        ...financial_accounts,
+        ...swap_free_accounts,
+        ...zero_spread_accounts,
+        ...gold_accounts,
+    ];
 };
 
 // Get the maltainvest accounts for EU and DIEL clients
@@ -253,11 +284,22 @@ const getEUAvailableAccounts = (available_accounts: TModifiedTradingPlatformAvai
             item =>
                 item.market_type === MARKET_TYPE.FINANCIAL &&
                 item.shortcode === JURISDICTION.MALTA_INVEST &&
-                item.product !== PRODUCT.GOLD &&
-                item.is_default_jurisdiction === 'true'
+                item.is_default_jurisdiction === 'true' &&
+                item.product !== PRODUCT.GOLD
+        )
+        .map(item => ({ ...item, platform: CFD_PLATFORMS.MT5 }) as const);
+
+    const gold_accounts = available_accounts
+        .filter(
+            item =>
+                item.market_type === MARKET_TYPE.FINANCIAL &&
+                item.shortcode === JURISDICTION.MALTA_INVEST &&
+                item.is_default_jurisdiction === 'true' &&
+                item.product === PRODUCT.GOLD
         )
         .map(item => ({ ...item, platform: CFD_PLATFORMS.MT5 }) as const);
-    return [...financial_accounts];
+
+    return [...financial_accounts, ...gold_accounts];
 };
 
 // Make the Deriv X data same as trading_platform_available_accounts
@@ -316,14 +358,17 @@ const getMT5DemoData = (available_accounts: TModifiedTradingPlatformAvailableAcc
             item.platform === CFD_PLATFORMS.MT5
     );
     const financial_demo_accounts = available_accounts.filter(
-        item => item.market_type === MARKET_TYPE.FINANCIAL && item.shortcode === JURISDICTION.SVG
+        item =>
+            item.market_type === MARKET_TYPE.FINANCIAL && item.product !== PRODUCT.STP && item.product !== PRODUCT.GOLD
     );
     const gaming_demo_accounts = available_accounts.filter(
         item => item.market_type === MARKET_TYPE.GAMING && item.shortcode === JURISDICTION.SVG
     );
+
     const gold_demo_accounts = available_accounts.filter(
         item => item.market_type === MARKET_TYPE.FINANCIAL && item.product === PRODUCT.GOLD
     );
+
     return [
         ...gaming_demo_accounts,
         ...financial_demo_accounts,