diff --git a/packages/appstore/src/components/cfds-listing-logged-out/cfds-listing-logged-out.tsx b/packages/appstore/src/components/cfds-listing-logged-out/cfds-listing-logged-out.tsx index 62749dd07ba6..9a56ea9a4e30 100644 --- a/packages/appstore/src/components/cfds-listing-logged-out/cfds-listing-logged-out.tsx +++ b/packages/appstore/src/components/cfds-listing-logged-out/cfds-listing-logged-out.tsx @@ -1,17 +1,20 @@ import React from 'react'; -import { observer, useStore } from '@deriv/stores'; + import { Text } from '@deriv/components'; -import { redirectToLogin } from '@deriv/shared'; +import { redirectToLogin, CFD_PLATFORMS } from '@deriv/shared'; +import { observer, useStore } from '@deriv/stores'; import { getLanguage, localize } from '@deriv/translations'; -import { getHasDivider } from 'Constants/utils'; + import ListingContainer from 'Components/containers/listing-container'; import TradingAppCard from 'Components/containers/trading-app-card'; import CFDsDescription from 'Components/elements/cfds-description'; import CFDsTitle from 'Components/elements/cfds-title'; +import { getHasDivider } from 'Constants/utils'; + import './cfds-listing-logged-out.scss'; const CFDsListingLoggedOut = observer(() => { - const { traders_hub } = useStore(); + const { traders_hub, client } = useStore(); const { available_dxtrade_accounts, available_ctrader_accounts, @@ -19,6 +22,7 @@ const CFDsListingLoggedOut = observer(() => { selected_region, is_eu_user, } = traders_hub; + const { is_eu } = client; return ( } description={}> @@ -28,15 +32,20 @@ const CFDsListingLoggedOut = observer(() => { {combined_cfd_mt5_accounts.map((existing_account, index: number) => { + // This is for backward compatibility + // before BE change, EU market_type is financial. With BE change, EU market_type becomes synthetic + const is_eu_standard = is_eu && existing_account.market_type !== 'financial'; + const list_size = combined_cfd_mt5_accounts.length; + return ( ', () => { test('should render correct title for EU Clients', () => { mocked_props.trading_platforms = { platform: 'mt5', - market_type: 'financial', + market_type: 'gaming', shortcode: 'maltainvest', product: 'financial', }; mocked_props.is_eu_user = true; render(); - expect(screen.getByText('CFDs')).toBeInTheDocument(); + expect(screen.getByText('Standard')).toBeInTheDocument(); }); test('should render correct title for standard product type in demo account', () => { @@ -159,11 +159,11 @@ describe('', () => { test('should render correct title for EU clients demo accounts', () => { mocked_props.trading_platforms.platform = 'mt5'; - mocked_props.trading_platforms.market_type = 'financial'; + mocked_props.trading_platforms.market_type = 'gaming'; mocked_props.trading_platforms.shortcode = 'svg'; mocked_props.is_demo = true; mocked_props.is_eu_user = true; render(); - expect(screen.getByText('CFDs demo')).toBeInTheDocument(); + expect(screen.getByText('Standard demo')).toBeInTheDocument(); }); }); 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 index c61d15daa3af..844af092bb41 100644 --- 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 @@ -17,7 +17,10 @@ import { const CFDCompareAccountsTitleIcon = ({ trading_platforms, is_eu_user, is_demo }: TCompareAccountsCard) => { const { isDesktop } = useDevice(); - const market_type = !is_eu_user ? getMarketType(trading_platforms) : 'CFDs'; + const market_type = + is_eu_user && trading_platforms.market_type === 'financial' + ? 'CFDs' // this is for backwards compatibility with BE + : getMarketType(trading_platforms); const market_type_shortcode = generateMarketTypeShortcode(trading_platforms, market_type); diff --git a/packages/cfd/src/Helpers/compare-accounts-config.ts b/packages/cfd/src/Helpers/compare-accounts-config.ts index 8b4e2b5bb0ec..51c8ea11b6d5 100644 --- a/packages/cfd/src/Helpers/compare-accounts-config.ts +++ b/packages/cfd/src/Helpers/compare-accounts-config.ts @@ -10,6 +10,7 @@ const getHighlightedIconLabel = ( selected_region?: string ): TInstrumentsIcon[] => { const market_type = getMarketType(trading_platforms); + const market_type_shortcode = trading_platforms.product === PRODUCT.GOLD ? market_type.concat('_', trading_platforms.product) @@ -129,6 +130,7 @@ const platformsHeaderLabel = { const getAccountIcon = (shortcode: string, product?: TProducts) => { switch (shortcode) { case MARKET_TYPE.SYNTHETIC: + case MARKET_TYPE.GAMING: return 'Standard'; case MARKET_TYPE.FINANCIAL: switch (product) { @@ -276,7 +278,6 @@ const getEUAvailableAccounts = (available_accounts: TModifiedTradingPlatformAvai const financial_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 @@ -355,9 +356,7 @@ const getMT5DemoData = (available_accounts: TModifiedTradingPlatformAvailableAcc 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 gaming_demo_accounts = available_accounts.filter(item => item.market_type === MARKET_TYPE.GAMING); const gold_demo_accounts = available_accounts.filter( item => item.market_type === MARKET_TYPE.FINANCIAL && item.product === PRODUCT.GOLD diff --git a/packages/core/src/Stores/traders-hub-store.js b/packages/core/src/Stores/traders-hub-store.js index 9908a60653c9..e37ddd667ae9 100644 --- a/packages/core/src/Stores/traders-hub-store.js +++ b/packages/core/src/Stores/traders-hub-store.js @@ -422,6 +422,16 @@ export default class TradersHubStore extends BaseStore { return localize('Zero spread CFDs on financial and derived instruments'); }; + const getFinancialName = () => { + if (!this.is_eu_user || this.is_demo_low_risk) { + return 'Financial'; + } + if (is_logged_in) { + return 'CFDs'; + } + return 'Standard'; + }; + const getMT5Accounts = [ { name: 'Standard', @@ -433,12 +443,12 @@ export default class TradersHubStore extends BaseStore { availability: 'Non-EU', }, { - name: !this.is_eu_user || this.is_demo_low_risk ? 'Financial' : 'CFDs', + name: getFinancialName(), description: getAccountDesc(), platform: CFD_PLATFORMS.MT5, market_type: 'financial', product: 'financial', - icon: !this.is_eu_user || this.is_demo_low_risk ? 'Financial' : 'CFDs', + icon: getFinancialName(), availability: 'All', }, ...(this.is_real @@ -857,6 +867,7 @@ export default class TradersHubStore extends BaseStore { } else { this.combined_cfd_mt5_accounts = [ ...this.combined_cfd_mt5_accounts, + { icon: account.icon, name: account.name, diff --git a/packages/wallets/src/features/cfd/constants.tsx b/packages/wallets/src/features/cfd/constants.tsx index efcd4079df9a..cd1deb1d10fe 100644 --- a/packages/wallets/src/features/cfd/constants.tsx +++ b/packages/wallets/src/features/cfd/constants.tsx @@ -96,7 +96,7 @@ export const getMarketTypeDetails = ( title: getMarketTypeDetailsTitle(product, isEuRegion), }, synthetic: { - availability: 'Non-EU', + availability: 'All', description: localize('CFDs on derived and financial instruments'), icon: , title: 'Standard',