[TRAH4525] Suisin/chore: fix cfd not showing to spain users (deriv-co…

…m#17709)

* chore: fix cfd not showing to spain users

* fix: loader blinking issue

* chore: revert types changes for stores

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

@@ -69,6 +69,7 @@ describe('CFDsListing', () => {
             },
             client: {
                 is_landing_company_loaded: true,
+                is_trading_platform_available_account_loaded: true,
                 real_account_creation_unlock_date: '2022-02-02',
             },
             modules: {
@@ -108,6 +109,7 @@ describe('CFDsListing', () => {
             },
             client: {
                 is_landing_company_loaded: true,
+                is_trading_platform_available_account_loaded: true,
                 real_account_creation_unlock_date: '2022-02-02',
             },
             modules: {

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

@@ -86,6 +86,7 @@ const CFDsListing = observer(() => {
         is_populating_mt5_account_list,
         real_account_creation_unlock_date,
         ctrader_total_balance,
+        is_trading_platform_available_account_loaded,
         updateMT5AccountDetails,
         is_switching,
     } = client;
@@ -193,7 +194,11 @@ const CFDsListing = observer(() => {
     const is_cfd_accounts_supported =
         combined_cfd_mt5_accounts.length || available_dxtrade_accounts.length || available_ctrader_accounts.length;
 
-    const is_mt5_list_loaded = is_landing_company_loaded && !is_populating_mt5_account_list && !is_switching;
+    const is_mt5_list_loaded =
+        is_landing_company_loaded &&
+        !is_populating_mt5_account_list &&
+        !is_switching &&
+        is_trading_platform_available_account_loaded;
 
     if (is_mt5_list_loaded && !is_cfd_accounts_supported) {
         return null;

packages/core/src/Stores/client-store.js

@@ -60,6 +60,7 @@ export default class ClientStore extends BaseStore {
     upgrade_info;
     email;
     accounts = {};
+    is_trading_platform_available_account_loaded = false;
     trading_platform_available_accounts = [];
     ctrader_trading_platform_available_accounts = [];
     pre_switch_broadcast = false;
@@ -187,6 +188,7 @@ export default class ClientStore extends BaseStore {
             upgrade_info: observable,
             email: observable,
             accounts: observable,
+            is_trading_platform_available_account_loaded: observable,
             trading_platform_available_accounts: observable,
             ctrader_trading_platform_available_accounts: observable,
             pre_switch_broadcast: observable,
@@ -394,6 +396,7 @@ export default class ClientStore extends BaseStore {
             responseMT5TradingServers: action.bound,
             responseMt5LoginList: action.bound,
             responseDxtradeTradingServers: action.bound,
+            setIsTradingPlatformAvailableAccountLoaded: action.bound,
             responseTradingPlatformAvailableAccounts: action.bound,
             responseCTraderTradingPlatformAvailableAccounts: action.bound,
             responseTradingPlatformAccountsList: action.bound,
@@ -2522,10 +2525,15 @@ export default class ClientStore extends BaseStore {
         });
     }
 
+    setIsTradingPlatformAvailableAccountLoaded(value) {
+        this.is_trading_platform_available_account_loaded = value;
+    }
+
     responseTradingPlatformAvailableAccounts(response) {
         if (!response.error) {
             this.trading_platform_available_accounts = response.trading_platform_available_accounts;
         }
+        this.setIsTradingPlatformAvailableAccountLoaded(true);
     }
 
     responseCTraderTradingPlatformAvailableAccounts(response) {

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

@@ -139,6 +139,8 @@ export default class TradersHubStore extends BaseStore {
                 this.root_store.client.dxtrade_accounts_list,
                 this.root_store.client.ctrader_accounts_list,
                 this.root_store.client.is_landing_company_loaded,
+                this.root_store.client.trading_platform_available_accounts,
+                this.root_store.client.is_trading_platform_available_account_loaded,
                 this.is_demo_low_risk,
                 this.root_store.modules?.cfd?.current_list,
                 this.root_store.client.landing_companies,
@@ -401,7 +403,13 @@ export default class TradersHubStore extends BaseStore {
     }
 
     getAvailableCFDAccounts() {
-        const { trading_platform_available_accounts } = this.root_store.client;
+        const {
+            trading_platform_available_accounts,
+            mt5_login_list,
+            landing_company_shortcode,
+            is_logged_in,
+            is_trading_platform_available_account_loaded,
+        } = this.root_store.client;
         const getAccountDesc = () => {
             return !this.is_eu_user || this.is_demo_low_risk
                 ? localize('CFDs on financial instruments.')
@@ -465,7 +473,6 @@ export default class TradersHubStore extends BaseStore {
                 availability: 'Non-EU',
             },
         ];
-
         const groupedByProduct = trading_platform_available_accounts.reduce((acc, item) => {
             const { product, is_default_jurisdiction, linkable_landing_companies } = item;
             if (this.is_demo || (this.no_CR_account && !this.is_eu_user)) {
@@ -479,7 +486,7 @@ export default class TradersHubStore extends BaseStore {
                     acc[product].push(item);
                 }
             } else if (
-                (linkable_landing_companies.includes(this.root_store.client.landing_company_shortcode) &&
+                (linkable_landing_companies.includes(landing_company_shortcode) &&
                     is_default_jurisdiction === 'true') ||
                 (acc[product] && acc[product].some(i => i.is_default_jurisdiction === 'true'))
             ) {
@@ -493,13 +500,13 @@ export default class TradersHubStore extends BaseStore {
 
         const getFilteredAccounts = () => {
             if (this.content_flag === ContentFlag.LOW_RISK_CR_EU) {
-                const existing_account = this.root_store.client.mt5_login_list.filter(
-                    account => account.landing_company_short === this.root_store.client.landing_company_shortcode
+                const existing_account = mt5_login_list.filter(
+                    account => account.landing_company_short === 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) {
+            } else if (is_logged_in && is_trading_platform_available_account_loaded) {
                 return getMT5Accounts.filter(account =>
                     Object.prototype.hasOwnProperty.call(groupedByProduct, account.product)
                 );

packages/stores/src/mockStore.ts

@@ -132,6 +132,8 @@ const mock = (): TStores & { is_mock: boolean } => {
             has_restricted_mt5_account: false,
             has_wallet: false,
             initialized_broadcast: false,
+            is_trading_platform_available_account_loaded: false,
+            setIsTradingPlatformAvailableAccountLoaded: jest.fn(),
             is_account_setting_loaded: false,
             is_authorize: false,
             is_deposit_lock: false,

packages/stores/types.ts

@@ -482,6 +482,8 @@ export type TClientStore = {
     has_maltainvest_account: boolean;
     has_restricted_mt5_account: boolean;
     initialized_broadcast: boolean;
+    is_trading_platform_available_account_loaded: boolean;
+    setIsTradingPlatformAvailableAccountLoaded: (value: boolean) => void;
     is_account_setting_loaded: boolean;
     is_deposit_lock: boolean;
     is_duplicate_dob_phone: boolean;