Amina/cfd 4813 diel (deriv-com#17474)

* fix: diel

* fix: loading

* fix: loading

packages/appstore/src/components/cfds-listing/__tests__/index.spec.tsx

@@ -55,33 +55,74 @@ mockUseTradingPlatformStatus.mockReturnValue({
     getPlatformStatus: jest.fn(),
 });
 describe('CFDsListing', () => {
-    const mock = mockStore({
-        traders_hub: {
-            selected_region: 'Non-EU',
-            has_any_real_account: true,
-            is_real: true,
-            no_MF_account: true,
-            is_demo_low_risk: true,
-        },
-        client: {
-            is_landing_company_loaded: true,
-            real_account_creation_unlock_date: '2022-02-02',
-        },
-        modules: {
-            cfd: {
-                toggleCompareAccountsModal: jest.fn(),
-                setAccountType: jest.fn(),
-                current_list: {},
+    it('should not render the component when cfd accounts are not supported', () => {
+        const mock = mockStore({
+            traders_hub: {
+                selected_region: 'Non-EU',
+                has_any_real_account: true,
+                is_real: true,
+                no_MF_account: true,
+                is_demo_low_risk: true,
+                available_dxtrade_accounts: [],
+                available_ctrader_accounts: [],
+                combined_cfd_mt5_accounts: [],
             },
-        },
+            client: {
+                is_landing_company_loaded: true,
+                real_account_creation_unlock_date: '2022-02-02',
+            },
+            modules: {
+                cfd: {
+                    toggleCompareAccountsModal: jest.fn(),
+                    setAccountType: jest.fn(),
+                    current_list: {},
+                },
+            },
+        });
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+
+        render(<CFDsListing />, { wrapper });
+        expect(screen.queryByTestId('listing-container')).not.toBeInTheDocument();
     });
 
-    it('should render the component', () => {
+    it('should render the component when cfd accounts are  supported', () => {
+        const mock = mockStore({
+            traders_hub: {
+                selected_region: 'Non-EU',
+                has_any_real_account: true,
+                is_real: true,
+                no_MF_account: true,
+                is_demo_low_risk: true,
+                available_dxtrade_accounts: [],
+                available_ctrader_accounts: [],
+                combined_cfd_mt5_accounts: [
+                    {
+                        landing_company_short: 'svg',
+                        product: 'financial',
+                        status: 'proof_failed',
+                        login: '123',
+                    },
+                ],
+            },
+            client: {
+                is_landing_company_loaded: true,
+                real_account_creation_unlock_date: '2022-02-02',
+            },
+            modules: {
+                cfd: {
+                    toggleCompareAccountsModal: jest.fn(),
+                    setAccountType: jest.fn(),
+                    current_list: {},
+                },
+            },
+        });
         const wrapper = ({ children }: { children: JSX.Element }) => (
             <StoreProvider store={mock}>{children}</StoreProvider>
         );
 
         render(<CFDsListing />, { wrapper });
-        expect(screen.getByTestId('listing-container')).toBeInTheDocument();
+        expect(screen.queryByTestId('listing-container')).toBeInTheDocument();
     });
 });

packages/appstore/src/components/cfds-listing/index.tsx

@@ -190,8 +190,12 @@ const CFDsListing = observer(() => {
         updateMT5AccountDetails();
     }, [is_landing_company_loaded, is_populating_mt5_account_list]);
 
+    const is_cfd_accounts_supported =
+        combined_cfd_mt5_accounts.length || available_dxtrade_accounts.length || available_ctrader_accounts.length;
+
     const is_mt5_list_loading = !is_landing_company_loaded || is_populating_mt5_account_list || is_switching;
-    return (
+
+    return is_cfd_accounts_supported ? (
         <ListingContainer
             title={
                 isDesktop && (
@@ -213,7 +217,7 @@ const CFDsListing = observer(() => {
                 </Text>
             </div>
             {has_svg_accounts_to_migrate && is_landing_company_loaded && <MigrationBanner />}
-            {!is_mt5_list_loading ? (
+            {!is_mt5_list_loading && combined_cfd_mt5_accounts.length ? (
                 <React.Fragment>
                     {/* MT5 */}
                     {combined_cfd_mt5_accounts.map((existing_account, index: number) => {
@@ -553,7 +557,7 @@ const CFDsListing = observer(() => {
                 </Fragment>
             )}
         </ListingContainer>
-    );
+    ) : null;
 });
 
 export default CFDsListing;

packages/appstore/src/modules/traders-hub/index.tsx

@@ -57,7 +57,14 @@ const TradersHub = observer(() => {
     } = client;
 
     const { is_eu_demo, is_eu_real } = useContentFlag();
-    const { selected_platform_type, setTogglePlatformType, is_eu_user } = traders_hub;
+    const {
+        selected_platform_type,
+        setTogglePlatformType,
+        is_eu_user,
+        combined_cfd_mt5_accounts,
+        available_ctrader_accounts,
+        available_dxtrade_accounts,
+    } = traders_hub;
     const traders_hub_ref = React.useRef<HTMLDivElement>(null);
 
     const can_show_notify =
@@ -95,9 +102,12 @@ const TradersHub = observer(() => {
         setTogglePlatformType(event.target.value);
     };
     if (!is_logged_in) return null;
+    const is_cfd_accounts_supported =
+        combined_cfd_mt5_accounts.length || available_dxtrade_accounts.length || available_ctrader_accounts.length;
+    const should_show_cfd_section = !!(is_mt5_allowed && is_cfd_accounts_supported);
 
     const getOrderedPlatformSections = () => {
-        if (is_mt5_allowed) {
+        if (should_show_cfd_section) {
             return (
                 <OrderedPlatformSections
                     is_cfd_visible={selected_platform_type === 'cfd'}
@@ -111,13 +121,13 @@ const TradersHub = observer(() => {
     const desktopContent = !is_landing_company_loaded ? (
         <OrderedPlatformSections />
     ) : (
-        <OrderedPlatformSections is_cfd_visible={is_mt5_allowed} />
+        <OrderedPlatformSections is_cfd_visible={should_show_cfd_section} />
     );
 
     const mobileTabletContent = (
         <React.Fragment>
             {is_landing_company_loaded ? (
-                is_mt5_allowed && (
+                should_show_cfd_section && (
                     <ButtonToggle
                         buttons_arr={is_eu_user ? platform_toggle_options_eu : platform_toggle_options}
                         className='traders-hub__button-toggle'
@@ -131,7 +141,7 @@ const TradersHub = observer(() => {
             ) : (
                 <ButtonToggleLoader />
             )}
-            {is_landing_company_loaded && !is_mt5_allowed && (
+            {is_landing_company_loaded && !should_show_cfd_section && (
                 <div className='traders-hub--mt5-not-allowed'>
                     <Text size='s' weight='bold' color='prominent'>
                         <Localize i18n_default_text='Multipliers' />
@@ -151,8 +161,8 @@ const TradersHub = observer(() => {
                 <div
                     id='traders-hub'
                     className={classNames('traders-hub', {
-                        'traders-hub--eu-user': is_eu_user && is_mt5_allowed,
-                        'traders-hub--eu-user-without-mt5': is_eu_user && !is_mt5_allowed,
+                        'traders-hub--eu-user': is_eu_user && should_show_cfd_section,
+                        'traders-hub--eu-user-without-mt5': is_eu_user && !should_show_cfd_section,
                     })}
                     ref={traders_hub_ref}
                 >

packages/cfd/src/Containers/cfd-password-modal-info.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Icon, Text } from '@deriv/components';
 import { Localize } from '@deriv/translations';
-import { DBVI_COMPANY_NAMES } from '@deriv/shared';
 import { useIsSelectedMT5AccountCreated } from '@deriv/hooks';
 
 type CfdPasswordModalInfoProps = {

packages/core/src/Stores/traders-hub-store.js

@@ -467,26 +467,45 @@ export default class TradersHubStore extends BaseStore {
         ];
 
         const groupedByProduct = trading_platform_available_accounts.reduce((acc, item) => {
-            const { product, is_default_jurisdiction } = item;
-            if (
-                is_default_jurisdiction === 'true' ||
+            const { product, is_default_jurisdiction, linkable_landing_companies } = item;
+            if (this.is_demo || (this.no_CR_account && !this.is_eu_user)) {
+                if (
+                    is_default_jurisdiction === 'true' ||
+                    (acc[product] && acc[product].some(i => i.is_default_jurisdiction === 'true'))
+                ) {
+                    if (!acc[product]) {
+                        acc[product] = [];
+                    }
+                    acc[product].push(item);
+                }
+            } else if (
+                (linkable_landing_companies.includes(this.root_store.client.landing_company_shortcode) &&
+                    is_default_jurisdiction === 'true') ||
                 (acc[product] && acc[product].some(i => i.is_default_jurisdiction === 'true'))
             ) {
                 if (!acc[product]) {
                     acc[product] = [];
                 }
                 acc[product].push(item);
             }
-
             return acc;
         }, {});
 
-        const getFilteredAccounts = () =>
-            this.root_store.client.is_logged_in
-                ? getMT5Accounts.filter(account =>
-                      Object.prototype.hasOwnProperty.call(groupedByProduct, account.product)
-                  )
-                : getMT5Accounts;
+        const getFilteredAccounts = () => {
+            if (this.is_low_risk_cr_eu_real) {
+                const existing_account = this.root_store.client.mt5_login_list.filter(
+                    account => account.landing_company_short === this.root_store.client.landing_company_shortcode
+                );
+                return existing_account.length
+                    ? getMT5Accounts.filter(account => account.product === existing_account[0].product)
+                    : [];
+            } else if (this.root_store.client.is_logged_in) {
+                return getMT5Accounts.filter(account =>
+                    Object.prototype.hasOwnProperty.call(groupedByProduct, account.product)
+                );
+            }
+            return getMT5Accounts;
+        };
 
         const all_available_accounts = [...getCFDAvailableAccount(), ...getFilteredAccounts()];
         this.available_cfd_accounts = all_available_accounts.map(account => {
@@ -534,6 +553,7 @@ export default class TradersHubStore extends BaseStore {
             );
             return;
         }
+
         if (this.financial_restricted_countries) {
             this.available_mt5_accounts = this.available_cfd_accounts.filter(
                 account => account.market_type === 'financial' && account.platform === CFD_PLATFORMS.MT5
@@ -891,14 +911,20 @@ export default class TradersHubStore extends BaseStore {
         );
         const { mt5_login_list } = await WS.authorized.mt5LoginList();
         const current_account = mt5_login_list?.filter(
-            account => account.landing_company_short === jurisdiction_selected_shortcode && account.product === product
+            account =>
+                account.landing_company_short === jurisdiction_selected_shortcode &&
+                account.product === product &&
+                account.account_type === this.selected_account_type
         );
 
         if (current_account.length) {
             this.setSelectedJurisdictionKYCStatus(current_account[0]?.client_kyc_status ?? {});
         } else {
             const selected_mt5_account = trading_platform_available_accounts?.filter(
-                account => account.shortcode === jurisdiction_selected_shortcode && account.product === product
+                account =>
+                    account.shortcode === jurisdiction_selected_shortcode &&
+                    account.product === product &&
+                    account.is_default_jurisdiction === 'true'
             );
             if (selected_mt5_account.length) {
                 this.setSelectedJurisdictionKYCStatus(selected_mt5_account[0]?.client_kyc_status ?? {});