[TRAH] shontzu/TRAH-5356/fe-implementation-api-group-cleanup (#18070)

* chore: Backwards compatibility for API updates * chore: logout screen * fix: logged out version shouldnt break logged in config * chore: empty commit
deriv-com · Feb 26, 2025 · ccce2a4 · ccce2a4
1 parent 2df5fb6
commit ccce2a4
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 18 deletions.
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
@@ -1,24 +1,28 @@
 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,
         combined_cfd_mt5_accounts,
         selected_region,
         is_eu_user,
     } = traders_hub;
+    const { is_eu } = client;
 
     return (
         <ListingContainer title={<CFDsTitle />} description={<CFDsDescription />}>
@@ -28,15 +32,20 @@ const CFDsListingLoggedOut = observer(() => {
                 </Text>
             </div>
             {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 (
                     <TradingAppCard
                         action_type={existing_account.action_type}
                         availability={selected_region}
                         clickable_icon
-                        icon={existing_account.icon}
+                        icon={is_eu_standard ? 'Derived' : existing_account.icon}
                         sub_title={existing_account?.sub_title}
-                        name={existing_account?.name ?? ''}
+                        name={is_eu_standard ? 'Standard' : existing_account.name}
                         short_code_and_region={existing_account?.short_code_and_region}
                         platform={existing_account.platform}
                         description={existing_account.description}

diff --git a/...fd/src/Containers/cfd-compare-accounts/__tests__/cfd-compare-accounts-title-icon.spec.tsx b/...fd/src/Containers/cfd-compare-accounts/__tests__/cfd-compare-accounts-title-icon.spec.tsx
@@ -82,13 +82,13 @@ describe('<CFDCompareAccountsTitleIcon />', () => {
     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(<CFDCompareAccountsTitleIcon {...mocked_props} />);
-        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('<CFDCompareAccountsTitleIcon />', () => {
 
     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(<CFDCompareAccountsTitleIcon {...mocked_props} />);
-        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
@@ -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
@@ -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
@@ -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
@@ -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: <AccountsDmt5StandardIcon height={48} width={48} />,
             title: 'Standard',