diff --git a/packages/appstore/src/components/cfds-listing/index.tsx b/packages/appstore/src/components/cfds-listing/index.tsx index baa503467f6a..a59eef615be4 100644 --- a/packages/appstore/src/components/cfds-listing/index.tsx +++ b/packages/appstore/src/components/cfds-listing/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { Fragment, useEffect } from 'react'; import { observer, useStore } from '@deriv/stores'; import { Loading, Text, StaticUrl } from '@deriv/components'; import { @@ -316,201 +316,201 @@ const CFDsListing = observer(() => { )} {!is_eu_user && !CFDs_restricted_countries && !financial_restricted_countries && ( -
-
-
- )} - {!is_eu_user && !CFDs_restricted_countries && !financial_restricted_countries && ( -
- {localize('Deriv cTrader')} -
- )} - {is_landing_company_loaded - ? available_ctrader_accounts.map(account => { - const existing_accounts = getExistingAccounts(account.platform, account.market_type); - const has_existing_accounts = existing_accounts.length > 0; - const track_account_name = is_demo ? `${account.name} ${'Demo'}` : account.name; - return has_existing_accounts ? ( - existing_accounts.map(existing_account => ( - ) => { - const button_name = e?.currentTarget?.name; - if (button_name === 'transfer-btn') { - Analytics.trackEvent('ce_tradershub_dashboard_form', { - action: 'account_transfer', - form_name: 'traders_hub_default', - account_mode: selected_account_type, - account_name: track_account_name, - }); - toggleCTraderTransferModal(); - } else if (button_name === 'topup-btn') { - Analytics.trackEvent('ce_tradershub_dashboard_form', { - action: 'account_topup', - form_name: 'traders_hub_default', - account_mode: selected_account_type, - account_name: track_account_name, - }); - showTopUpModal(existing_account); - setAppstorePlatform(account.platform); - } else { - Analytics.trackEvent('ce_tradershub_dashboard_form', { - action: 'account_open', - form_name: 'traders_hub_default', - account_mode: selected_account_type, - account_name: track_account_name, - }); - startTrade(account.platform, existing_account); - } - }} - /> - )) - ) : ( - { - Analytics.trackEvent('ce_tradershub_dashboard_form', { - action: 'account_get', - form_name: 'traders_hub_default', - account_mode: selected_account_type, - account_name: track_account_name, - }); - if ((has_no_real_account || no_CR_account) && is_real) { - openDerivRealAccountNeededModal(); - } else { - setAccountType({ - category: selected_account_type, - type: account.market_type, - }); - setAppstorePlatform(account.platform); - getAccount(); - } - }} - key={`trading_app_card_${account.name}`} - is_new - /> - ); - }) - : !is_real && } - {!is_eu_user && !CFDs_restricted_countries && !financial_restricted_countries && ( - +

- -
- - {localize('Deriv X')} - +
+ {localize('Deriv cTrader')}
- - )} - {is_landing_company_loaded ? ( - available_dxtrade_accounts?.map(account => { - const existing_accounts = getExistingAccounts(account.platform, account.market_type); - const has_existing_accounts = existing_accounts.length > 0; - const track_account_name = is_demo ? `${account.name} ${'Demo'}` : account.name; - - return has_existing_accounts ? ( - existing_accounts.map(existing_account => ( - ) => { - const button_name = e?.currentTarget?.name; - - if (button_name === 'transfer-btn') { - Analytics.trackEvent('ce_tradershub_dashboard_form', { - action: 'account_transfer', - form_name: 'traders_hub_default', - account_mode: selected_account_type, - account_name: track_account_name, - }); - toggleAccountTransferModal(); - setSelectedAccount(existing_account); - } else if (button_name === 'topup-btn') { + {is_landing_company_loaded ? ( + available_ctrader_accounts.map(account => { + const existing_accounts = getExistingAccounts(account.platform, account.market_type); + const has_existing_accounts = existing_accounts.length > 0; + const track_account_name = is_demo ? `${account.name} ${'Demo'}` : account.name; + return has_existing_accounts ? ( + existing_accounts.map(existing_account => ( + ) => { + const button_name = e?.currentTarget?.name; + if (button_name === 'transfer-btn') { + Analytics.trackEvent('ce_tradershub_dashboard_form', { + action: 'account_transfer', + form_name: 'traders_hub_default', + account_mode: selected_account_type, + account_name: track_account_name, + }); + toggleCTraderTransferModal(); + } else if (button_name === 'topup-btn') { + Analytics.trackEvent('ce_tradershub_dashboard_form', { + action: 'account_topup', + form_name: 'traders_hub_default', + account_mode: selected_account_type, + account_name: track_account_name, + }); + showTopUpModal(existing_account); + setAppstorePlatform(account.platform); + } else { + Analytics.trackEvent('ce_tradershub_dashboard_form', { + action: 'account_open', + form_name: 'traders_hub_default', + account_mode: selected_account_type, + account_name: track_account_name, + }); + startTrade(account.platform, existing_account); + } + }} + /> + )) + ) : ( + { Analytics.trackEvent('ce_tradershub_dashboard_form', { - action: 'account_topup', + action: 'account_get', form_name: 'traders_hub_default', account_mode: selected_account_type, account_name: track_account_name, }); - showTopUpModal(existing_account); - setAppstorePlatform(account.platform); - } else { + if ((has_no_real_account || no_CR_account) && is_real) { + openDerivRealAccountNeededModal(); + } else { + setAccountType({ + category: selected_account_type, + type: account.market_type, + }); + setAppstorePlatform(account.platform); + getAccount(); + } + }} + key={`trading_app_card_${account.name}`} + is_new + /> + ); + }) + ) : ( + + )} + +
+
+
+ +
+ + {localize('Deriv X')} + +
+
+ {is_landing_company_loaded ? ( + available_dxtrade_accounts?.map(account => { + const existing_accounts = getExistingAccounts(account.platform, account.market_type); + const has_existing_accounts = existing_accounts.length > 0; + const track_account_name = is_demo ? `${account.name} ${'Demo'}` : account.name; + + return has_existing_accounts ? ( + existing_accounts.map(existing_account => ( + ) => { + const button_name = e?.currentTarget?.name; + + if (button_name === 'transfer-btn') { + Analytics.trackEvent('ce_tradershub_dashboard_form', { + action: 'account_transfer', + form_name: 'traders_hub_default', + account_mode: selected_account_type, + account_name: track_account_name, + }); + toggleAccountTransferModal(); + setSelectedAccount(existing_account); + } else if (button_name === 'topup-btn') { + Analytics.trackEvent('ce_tradershub_dashboard_form', { + action: 'account_topup', + form_name: 'traders_hub_default', + account_mode: selected_account_type, + account_name: track_account_name, + }); + showTopUpModal(existing_account); + setAppstorePlatform(account.platform); + } else { + Analytics.trackEvent('ce_tradershub_dashboard_form', { + action: 'account_open', + form_name: 'traders_hub_default', + account_mode: selected_account_type, + account_name: track_account_name, + }); + startTrade(account.platform, existing_account); + } + }} + /> + )) + ) : ( + { Analytics.trackEvent('ce_tradershub_dashboard_form', { - action: 'account_open', + action: 'account_get', form_name: 'traders_hub_default', account_mode: selected_account_type, account_name: track_account_name, }); - startTrade(account.platform, existing_account); - } - }} - /> - )) + if ((has_no_real_account || no_CR_account) && is_real) { + openDerivRealAccountNeededModal(); + } else { + setAccountType({ + category: selected_account_type, + type: account.market_type, + }); + setAppstorePlatform(account.platform); + getAccount(); + } + }} + key={`trading_app_card_${account.name}`} + /> + ); + }) ) : ( - { - Analytics.trackEvent('ce_tradershub_dashboard_form', { - action: 'account_get', - form_name: 'traders_hub_default', - account_mode: selected_account_type, - account_name: track_account_name, - }); - if ((has_no_real_account || no_CR_account) && is_real) { - openDerivRealAccountNeededModal(); - } else { - setAccountType({ - category: selected_account_type, - type: account.market_type, - }); - setAppstorePlatform(account.platform); - getAccount(); - } - }} - key={`trading_app_card_${account.name}`} - /> - ); - }) - ) : ( - + + )} + )} ); diff --git a/packages/appstore/src/components/containers/listing-container.tsx b/packages/appstore/src/components/containers/listing-container.tsx index 4e3c77752aab..e96246fdd51d 100644 --- a/packages/appstore/src/components/containers/listing-container.tsx +++ b/packages/appstore/src/components/containers/listing-container.tsx @@ -1,9 +1,7 @@ import React, { HTMLAttributes, ReactNode } from 'react'; import classNames from 'classnames'; -import { observer, useStore } from '@deriv/stores'; import CurrencySwitcherCard from 'Components/currency-switcher-card'; import GridContainer from 'Components/containers/grid-container'; -import TitleCardLoader from 'Components/pre-loader/title-card-loader'; import './listing-container.scss'; type TListingContainerProps = { @@ -16,22 +14,14 @@ type TListingContainerProps = { type TOptionsProps = Pick; type TSwitcherProps = Pick; -const Options = observer(({ title, description, is_deriv_platform }: TOptionsProps) => { - const { - client: { is_landing_company_loaded }, - } = useStore(); - - if (is_landing_company_loaded || !is_deriv_platform) { - return ( -
- {title} - {description} -
- ); - } - - return ; -}); +const Options = ({ title, description }: TOptionsProps) => { + return ( +
+ {title} + {description} +
+ ); +}; const Switcher = ({ is_deriv_platform }: TSwitcherProps) => { if (!is_deriv_platform) return null; @@ -49,7 +39,7 @@ const ListingContainer = ({ return (
- +
{is_outside_grid_container ? children : {children}} diff --git a/packages/appstore/src/components/containers/trading-app-card.tsx b/packages/appstore/src/components/containers/trading-app-card.tsx index bf5970583492..c465e348bb4a 100644 --- a/packages/appstore/src/components/containers/trading-app-card.tsx +++ b/packages/appstore/src/components/containers/trading-app-card.tsx @@ -55,7 +55,7 @@ const TradingAppCard = ({ const { is_eu_user, is_demo_low_risk, content_flag, is_real, selected_account_type } = traders_hub; const { current_language } = common; const { is_account_being_created } = cfd; - const { account_status: { authentication } = {}, is_logged_in } = client; + const { account_status: { authentication } = {} } = client; const [is_open_position_svg_modal_open, setIsOpenPositionSvgModalOpen] = React.useState(false); const demo_label = localize('Demo'); diff --git a/packages/appstore/src/components/options-multipliers-listing-logged-out/options-multipliers-listing-logged-out.tsx b/packages/appstore/src/components/options-multipliers-listing-logged-out/options-multipliers-listing-logged-out.tsx index 3389cefcd389..8c4599ef5c83 100644 --- a/packages/appstore/src/components/options-multipliers-listing-logged-out/options-multipliers-listing-logged-out.tsx +++ b/packages/appstore/src/components/options-multipliers-listing-logged-out/options-multipliers-listing-logged-out.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useMemo } from 'react'; import { useStore, observer } from '@deriv/stores'; import ListingContainer from 'Components/containers/listing-container'; import TradingAppCard from 'Components/containers/trading-app-card'; @@ -6,34 +6,43 @@ import OptionsDescription from 'Components/elements/options-description'; import OptionsTitle from 'Components/elements/options-title'; import { BrandConfig } from 'Constants/platform-config'; import { getHasDivider } from 'Constants/utils'; -import { isEuCountry } from '@deriv/shared'; +import { isEuCountry, getAppstorePlatforms } from '@deriv/shared'; import './options-multipliers-listing-logged-out.scss'; const OptionsAndMultipliersListingLoggedOut = observer(() => { const { traders_hub, client } = useStore(); const { clients_country } = client; - const { available_platforms, is_eu_user } = traders_hub; + const { is_eu_user } = traders_hub; - const logged_out_available_platforms = isEuCountry(clients_country) - ? available_platforms.filter(platform => ['EU', 'All'].some(region => region === platform.availability)) - : available_platforms.filter(platform => ['Non-EU', 'All'].some(region => region === platform.availability)); + const logged_out_available_platforms = useMemo(() => { + const available_platforms = getAppstorePlatforms(); + return isEuCountry(clients_country) + ? available_platforms.filter((platform: BrandConfig) => + ['EU', 'All'].some(region => region === platform.availability) + ) + : available_platforms.filter((platform: BrandConfig) => + ['Non-EU', 'All'].some(region => region === platform.availability) + ); + }, [clients_country]); return ( } description={} > - {logged_out_available_platforms.map((available_platform: BrandConfig, index: number) => ( - - ))} + {logged_out_available_platforms.map( + (available_platform: BrandConfig, index: number, self: BrandConfig[]) => ( + + ) + )} ); }); diff --git a/packages/appstore/src/components/options-multipliers-listing/index.tsx b/packages/appstore/src/components/options-multipliers-listing/index.tsx index 128a298c8c4e..15d9da029b5a 100644 --- a/packages/appstore/src/components/options-multipliers-listing/index.tsx +++ b/packages/appstore/src/components/options-multipliers-listing/index.tsx @@ -5,11 +5,11 @@ import { ContentFlag, setPerformanceValue } from '@deriv/shared'; import { useStore } from '@deriv/stores'; import { Localize, localize } from '@deriv/translations'; import ListingContainer from 'Components/containers/listing-container'; -import PlatformLoader from 'Components/pre-loader/platform-loader'; import TradingAppCard from 'Components/containers/trading-app-card'; import { BrandConfig } from 'Constants/platform-config'; import { getHasDivider } from 'Constants/utils'; import { Analytics } from '@deriv-com/analytics'; +import PlatformLoader from 'Components/pre-loader/platform-loader'; const OptionsAndMultipliersListing = observer(() => { const { traders_hub, client, ui } = useStore(); @@ -115,32 +115,29 @@ const OptionsAndMultipliersListing = observer(() => {
)} - {is_landing_company_loaded ? ( - available_platforms.map((available_platform: BrandConfig, index: number) => ( - { - Analytics.trackEvent('ce_tradershub_dashboard_form', { - action: 'account_open', - form_name: 'traders_hub_default', - account_mode: selected_account_type, - account_name: is_demo ? `${available_platform.name} Demo` : available_platform.name, - }); - }} - has_divider={(!is_eu_user || is_demo) && getHasDivider(index, available_platforms.length, 3)} - /> - )) - ) : ( - - )} + {!available_platforms.length && } + {available_platforms.map((available_platform: BrandConfig, index: number) => ( + { + Analytics.trackEvent('ce_tradershub_dashboard_form', { + action: 'account_open', + form_name: 'traders_hub_default', + account_mode: selected_account_type, + account_name: is_demo ? `${available_platform.name} Demo` : available_platform.name, + }); + }} + has_divider={(!is_eu_user || is_demo) && getHasDivider(index, available_platforms.length, 3)} + /> + ))} ); }); diff --git a/packages/appstore/src/modules/traders-hub/__tests__/index.spec.tsx b/packages/appstore/src/modules/traders-hub/__tests__/index.spec.tsx index d5701b1439af..527a323d6a0d 100644 --- a/packages/appstore/src/modules/traders-hub/__tests__/index.spec.tsx +++ b/packages/appstore/src/modules/traders-hub/__tests__/index.spec.tsx @@ -32,8 +32,8 @@ describe('TradersHub', () => { expect(dashboard_sections?.textContent?.match(/CFDs/)).not.toBeNull(); }); - it('should display Multipliers section if there is no MT5 accounts availble for country of residence', () => { - render_container({ client: { is_logged_in: true, is_mt5_allowed: false } }); + it('should display Multipliers section if there is no MT5 accounts available for country of residence', () => { + render_container({ client: { is_logged_in: true, is_mt5_allowed: false, is_landing_company_loaded: true } }); const dashboard_sections = screen.getByTestId('dt_traders_hub'); expect(dashboard_sections?.textContent?.match(/Multipliers/)).not.toBeNull(); expect(dashboard_sections?.textContent?.match(/CFDs/)).toBeNull(); diff --git a/packages/appstore/src/modules/traders-hub/index.tsx b/packages/appstore/src/modules/traders-hub/index.tsx index badc04abaaed..2c5cbbea328d 100644 --- a/packages/appstore/src/modules/traders-hub/index.tsx +++ b/packages/appstore/src/modules/traders-hub/index.tsx @@ -14,6 +14,31 @@ import './traders-hub.scss'; const RealAccountCreationBanner = lazy(() => import('Components/real-account-creation-banner')); +type OrderedPlatformSectionsProps = { + is_cfd_visible?: boolean; + is_options_and_multipliers_visible?: boolean; +}; + +const OrderedPlatformSections = observer( + ({ is_cfd_visible = true, is_options_and_multipliers_visible = true }: OrderedPlatformSectionsProps) => { + const { + traders_hub: { selected_region, is_eu_user }, + } = useStore(); + + return ( +
+ {is_options_and_multipliers_visible && } + {is_cfd_visible && } +
+ ); + } +); + const TradersHub = observer(() => { const { traders_hub, client, ui } = useStore(); const { @@ -106,25 +131,9 @@ const TradersHub = observer(() => { }; if (!is_logged_in) return null; - const OrderedPlatformSections = ({ is_cfd_visible = true, is_options_and_multipliers_visible = true }) => { - return ( -
- {is_options_and_multipliers_visible && } - {is_cfd_visible && } -
- ); - }; - - const getOrderedPlatformSections = (isDesktop = false) => { + const getOrderedPlatformSections = () => { if (is_mt5_allowed) { - return isDesktop ? ( - - ) : ( + return ( { )} - {getOrderedPlatformSections(true)} + + {!is_landing_company_loaded ? ( + + ) : ( + + )} + - {is_mt5_allowed && - (is_landing_company_loaded ? ( + {is_landing_company_loaded ? ( + is_mt5_allowed && ( - ) : ( - - ))} - {!is_mt5_allowed && ( + ) + ) : ( + + )} + {is_landing_company_loaded && !is_mt5_allowed && (
diff --git a/packages/core/src/Stores/client-store.js b/packages/core/src/Stores/client-store.js index 012d7323d02c..4e0b2279ff85 100644 --- a/packages/core/src/Stores/client-store.js +++ b/packages/core/src/Stores/client-store.js @@ -427,6 +427,9 @@ export default class ClientStore extends BaseStore { ], () => { this.setCookieAccount(); + if (!this.is_logged_in) { + this.root_store.traders_hub.cleanup(); + } } ); @@ -2008,6 +2011,9 @@ export default class ClientStore extends BaseStore { } async logout() { + // makes sure to clear the cached traders-hub data when logging out + localStorage.removeItem('traders_hub_store'); + // TODO: [add-client-action] - Move logout functionality to client store const response = await requestLogout(); diff --git a/packages/core/src/Stores/traders-hub-store.js b/packages/core/src/Stores/traders-hub-store.js index b584de8e3710..874ccd05d5f5 100644 --- a/packages/core/src/Stores/traders-hub-store.js +++ b/packages/core/src/Stores/traders-hub-store.js @@ -33,9 +33,18 @@ export default class TradersHubStore extends BaseStore { is_wallet_migration_failed = false; active_modal_tab; active_modal_wallet_id; + is_cfd_restricted_country = false; + is_financial_restricted_country = false; constructor(root_store) { - super({ root_store }); + const local_storage_properties = [ + 'available_platforms', + 'selected_region', + 'is_cfd_restricted_country', + 'is_financial_restricted_country', + ]; + const store_name = 'traders_hub_store'; + super({ root_store, local_storage_properties, store_name }); makeObservable(this, { account_type_card: observable, @@ -62,6 +71,8 @@ export default class TradersHubStore extends BaseStore { open_failed_verification_for: observable, is_real_wallets_upgrade_on: observable, is_wallet_migration_failed: observable, + is_cfd_restricted_country: observable, + is_financial_restricted_country: observable, closeModal: action.bound, content_flag: computed, getAccount: action.bound, @@ -107,6 +118,7 @@ export default class TradersHubStore extends BaseStore { showTopUpModal: action.bound, toggleWalletsUpgrade: action.bound, setWalletsMigrationFailedPopup: action.bound, + cleanup: action.bound, }); reaction( @@ -117,6 +129,7 @@ export default class TradersHubStore extends BaseStore { this.root_store.client.mt5_login_list, this.root_store.client.dxtrade_accounts_list, this.root_store.client.ctrader_accounts_list, + this.root_store.client.is_landing_company_loaded, this.is_demo_low_risk, this.root_store.modules?.cfd?.current_list, this.root_store.client.landing_companies, @@ -312,6 +325,8 @@ export default class TradersHubStore extends BaseStore { } getAvailablePlatforms() { + if (!this.root_store.client.is_landing_company_loaded) return this.available_platforms; + const appstore_platforms = getAppstorePlatforms(); if ((this.financial_restricted_countries || this.is_eu_user) && !this.is_demo_low_risk) { this.available_platforms = appstore_platforms.filter(platform => @@ -416,13 +431,23 @@ export default class TradersHubStore extends BaseStore { get financial_restricted_countries() { const { financial_company, gaming_company } = this.root_store.client.landing_companies; - return financial_company?.shortcode === 'svg' && !gaming_company; + const is_restricted = + this.is_financial_restricted_country || (financial_company?.shortcode === 'svg' && !gaming_company); + // update the flag in the store + this.is_financial_restricted_country = is_restricted; + + return is_restricted; } get CFDs_restricted_countries() { const { financial_company, gaming_company } = this.root_store.client.landing_companies; - return gaming_company?.shortcode === 'svg' && !financial_company; + const is_restricted = + this.is_cfd_restricted_country || (gaming_company?.shortcode === 'svg' && !financial_company); + // update the flag in the store + this.is_cfd_restricted_country = is_restricted; + + return is_restricted; } getAvailableMt5Accounts() { @@ -766,4 +791,16 @@ export default class TradersHubStore extends BaseStore { setWalletsMigrationFailedPopup(value) { this.is_wallet_migration_failed = value; } + + cleanup() { + if ( + !localStorage.getItem('active_loginid') || + (!this.root_store.client.is_logged_in && localStorage.getItem('active_loginid') === 'null') + ) { + localStorage.removeItem('traders_hub_store'); + this.is_cfd_restricted_country = false; + this.is_financial_restricted_country = false; + this.available_platforms = []; + } + } }