[TRAH]/Hasan/[TRAH-4541]/Gold Account in compare account table

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-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-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) => ({
@@ -84,6 +93,7 @@ const getAccountCardTitle = (shortcode: string, is_demo?: boolean) => {
         case MARKET_TYPE_SHORTCODE.FINANCIAL_LABUAN:
             return localize('Financial - STP');
         case MARKET_TYPE_SHORTCODE.FINANCIAL_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');
@@ -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,