diff --git a/packages/cfd/src/Components/props.types.ts b/packages/cfd/src/Components/props.types.ts index 1883762fa79a..fc4c6fcb4b8a 100644 --- a/packages/cfd/src/Components/props.types.ts +++ b/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 = { diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/__tests__/cfd-compare-accounts-title-icon.spec.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/__tests__/cfd-compare-accounts-title-icon.spec.tsx index be78c5baf695..762c4eb99448 100644 --- a/packages/cfd/src/Containers/cfd-compare-accounts/__tests__/cfd-compare-accounts-title-icon.spec.tsx +++ b/packages/cfd/src/Containers/cfd-compare-accounts/__tests__/cfd-compare-accounts-title-icon.spec.tsx @@ -101,7 +101,7 @@ describe('', () => { mocked_props.is_demo = true; mocked_props.is_eu_user = false; render(); - 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('', () => { mocked_props.is_demo = true; mocked_props.is_eu_user = false; render(); - 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('', () => { mocked_props.is_demo = true; mocked_props.is_eu_user = false; render(); - 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('', () => { mocked_props.is_demo = true; mocked_props.is_eu_user = false; render(); - 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('', () => { mocked_props.is_demo = true; mocked_props.is_eu_user = false; render(); - 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('', () => { mocked_props.is_demo = true; mocked_props.is_eu_user = true; render(); - expect(screen.getByText('CFDs Demo')).toBeInTheDocument(); + expect(screen.getByText('CFDs demo')).toBeInTheDocument(); }); }); diff --git a/packages/cfd/src/Containers/cfd-compare-accounts/__tests__/cfd-instruments-label-highlighted.spec.tsx b/packages/cfd/src/Containers/cfd-compare-accounts/__tests__/cfd-instruments-label-highlighted.spec.tsx index f496590f33dc..8b47ff2073d3 100644 --- a/packages/cfd/src/Containers/cfd-compare-accounts/__tests__/cfd-instruments-label-highlighted.spec.tsx +++ b/packages/cfd/src/Containers/cfd-compare-accounts/__tests__/cfd-instruments-label-highlighted.spec.tsx @@ -55,20 +55,4 @@ describe('', () => { 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 }) => ( - {children} - ); - - render(, { wrapper }); - expect(screen.getByText(/Boom 300 and Crash 300 Index/i)).toBeInTheDocument(); - }); }); 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 index 1900c679cd1c..46ab7faecc2f 100644 --- 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 @@ -13,7 +13,7 @@ const CFDCompareAccountsCard = ({ trading_platforms, is_eu_user, is_demo }: TCom
- {trading_platforms.product === PRODUCT.ZEROSPREAD && ( + {trading_platforms.product === PRODUCT.GOLD && ( { 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 ? ( - - ) : ( - - ); + const getCompareAccountsHeader = () => ( + + ); const DesktopHeader = (
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 index 5d542839c2ab..5d63800f9776 100644 --- 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 @@ -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,7 +15,7 @@ const CFDInstrumentsLabelHighlighted = ({ trading_platforms }: TCompareAccountsC {is_eu_user ? ( {iconData - .filter(item => item.highlighted) + .filter(instrument => instrument.is_available !== false) .map(item => ( ))} -
- - - -
) : ( iconData.map(item => ( 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 index 2ff4404647bd..237171117a3e 100644 --- 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 @@ -6,6 +6,7 @@ import TradingInstrumentsIcon from '../../Assets/svgs/trading-instruments'; const InstrumentsIconWithLabel = ({ icon, text, highlighted, className, is_asterisk }: TInstrumentsIcon) => { const { isMobile } = useDevice(); + return (
({ @@ -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,