diff --git a/packages/appstore/src/components/containers/listing-container.tsx b/packages/appstore/src/components/containers/listing-container.tsx index 4e3c77752aab..51f07e7a85b8 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,16 @@ 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} -
- ); - } +const Options = ({ title, description, is_deriv_platform }: TOptionsProps) => { + if (!is_deriv_platform) return null; - return ; -}); + return ( +
+ {title} + {description} +
+ ); +}; const Switcher = ({ is_deriv_platform }: TSwitcherProps) => { if (!is_deriv_platform) return null; diff --git a/packages/appstore/src/components/containers/trading-app-card.tsx b/packages/appstore/src/components/containers/trading-app-card.tsx index c465e348bb4a..a8fc0eba04c8 100644 --- a/packages/appstore/src/components/containers/trading-app-card.tsx +++ b/packages/appstore/src/components/containers/trading-app-card.tsx @@ -14,15 +14,9 @@ import { import TradingAppCardActions, { Actions } from './trading-app-card-actions'; import { AvailableAccount, TDetailsOfEachMT5Loginid } from 'Types'; import { observer, useStore } from '@deriv/stores'; -import { - CFD_PLATFORMS, - ContentFlag, - getStaticUrl, - getUrlSmartTrader, - getUrlBinaryBot, - MT5_ACCOUNT_STATUS, -} from '@deriv/shared'; +import { CFD_PLATFORMS, getStaticUrl, getUrlSmartTrader, getUrlBinaryBot, MT5_ACCOUNT_STATUS } from '@deriv/shared'; import OpenPositionsSVGModal from '../modals/open-positions-svg-modal'; +import { getAvailablePlatforms } from '../../helpers'; import './trading-app-card.scss'; const TradingAppCard = ({ @@ -52,18 +46,17 @@ const TradingAppCard = ({ client, } = useStore(); const { setIsVerificationModalVisible } = ui; - const { is_eu_user, is_demo_low_risk, content_flag, is_real, selected_account_type } = traders_hub; + const { is_eu_user, is_real, selected_account_type } = traders_hub; const { current_language } = common; const { is_account_being_created } = cfd; const { account_status: { authentication } = {} } = client; const [is_open_position_svg_modal_open, setIsOpenPositionSvgModalOpen] = React.useState(false); - const demo_label = localize('Demo'); + const available_platforms = getAvailablePlatforms(); - const low_risk_cr_non_eu = content_flag === ContentFlag.LOW_RISK_CR_NON_EU; + const demo_label = localize('Demo'); - const app_platform = - !is_eu_user || low_risk_cr_non_eu || is_demo_low_risk ? getAppstorePlatforms() : getMFAppstorePlatforms(); + const app_platform = available_platforms.includes('options') ? getAppstorePlatforms() : getMFAppstorePlatforms(); const { app_desc, link_to, is_external, new_tab } = app_platform.find(config => config.name === name) || { app_desc: description, diff --git a/packages/appstore/src/components/options-multipliers-listing/index.tsx b/packages/appstore/src/components/options-multipliers-listing/index.tsx index 7565255d255e..fb197ac8ac99 100644 --- a/packages/appstore/src/components/options-multipliers-listing/index.tsx +++ b/packages/appstore/src/components/options-multipliers-listing/index.tsx @@ -1,49 +1,35 @@ import React, { useEffect } from 'react'; import { observer } from 'mobx-react-lite'; import { Text, StaticUrl } from '@deriv/components'; -import { ContentFlag, setPerformanceValue } from '@deriv/shared'; +import { 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 { getAvailablePlatforms } from '../../helpers'; const OptionsAndMultipliersListing = observer(() => { const { traders_hub, client, ui } = useStore(); - const { - available_platforms, - is_eu_user, - is_real, - no_MF_account, - no_CR_account, - is_demo, - content_flag, - selected_account_type, - } = traders_hub; - const { is_landing_company_loaded, is_eu, has_maltainvest_account, real_account_creation_unlock_date } = client; + const { available_platforms, is_eu_user, is_real, no_MF_account, no_CR_account, is_demo, selected_account_type } = + traders_hub; + const { has_maltainvest_account, real_account_creation_unlock_date, is_landing_company_loaded } = client; const { setShouldShowCooldownModal, openRealAccountSignup, is_mobile } = ui; - const low_risk_cr_non_eu = content_flag === ContentFlag.LOW_RISK_CR_NON_EU; - - const low_risk_cr_eu = content_flag === ContentFlag.LOW_RISK_CR_EU; - - const high_risk_cr = content_flag === ContentFlag.HIGH_RISK_CR; - - const cr_demo = content_flag === ContentFlag.CR_DEMO; + const platforms = getAvailablePlatforms(); const OptionsTitle = () => { if (is_mobile) return null; - if (low_risk_cr_non_eu || high_risk_cr || cr_demo) { + if (platforms.includes('options')) { return ( ); - } else if (low_risk_cr_eu || is_eu) { + } else if (!platforms.includes('options')) { return ( @@ -63,7 +49,7 @@ const OptionsAndMultipliersListing = observer(() => { } description={ - low_risk_cr_non_eu || high_risk_cr || cr_demo ? ( + platforms.includes('options') && platforms.includes('multipliers') ? ( { )} - {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} ${localize('Demo')}` - : available_platform.name, - }); - }} - has_divider={(!is_eu_user || is_demo) && getHasDivider(index, available_platforms.length, 3)} - /> - )) - ) : ( - - )} + {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} ${localize('Demo')}` + : available_platform.name, + }); + }} + has_divider={(!is_eu_user || is_demo) && getHasDivider(index, available_platforms.length, 3)} + /> + ))} ); }); diff --git a/packages/appstore/src/helpers/available-platforms-helper.ts b/packages/appstore/src/helpers/available-platforms-helper.ts new file mode 100644 index 000000000000..44325ead972e --- /dev/null +++ b/packages/appstore/src/helpers/available-platforms-helper.ts @@ -0,0 +1,4 @@ +export const getAvailablePlatforms = (): Array<'options' | 'multipliers' | 'cfds'> => { + const platforms = localStorage.getItem('th_platforms'); + return platforms ? JSON.parse(platforms) : []; +}; diff --git a/packages/appstore/src/helpers/index.ts b/packages/appstore/src/helpers/index.ts index afd9ee6328ca..ddae119a08a8 100644 --- a/packages/appstore/src/helpers/index.ts +++ b/packages/appstore/src/helpers/index.ts @@ -1,2 +1,3 @@ export * from './account-helper'; export * from './total-assets-helper'; +export * from './available-platforms-helper'; 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 105a7c9e647f..639d1340cf48 100644 --- a/packages/appstore/src/modules/traders-hub/__tests__/index.spec.tsx +++ b/packages/appstore/src/modules/traders-hub/__tests__/index.spec.tsx @@ -33,8 +33,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 5b8a804330af..4faa0c960a35 100644 --- a/packages/appstore/src/modules/traders-hub/index.tsx +++ b/packages/appstore/src/modules/traders-hub/index.tsx @@ -117,11 +117,9 @@ const TradersHub = observer(() => { ); }; - const getOrderedPlatformSections = (isDesktop = false) => { + const getOrderedPlatformSections = () => { if (is_mt5_allowed) { - return isDesktop ? ( - - ) : ( + return ( { ref={traders_hub_ref} > - {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/traders-hub-store.js b/packages/core/src/Stores/traders-hub-store.js index 13f57968e645..595fa3981ef6 100644 --- a/packages/core/src/Stores/traders-hub-store.js +++ b/packages/core/src/Stores/traders-hub-store.js @@ -1,6 +1,13 @@ import { action, computed, makeObservable, observable, reaction } from 'mobx'; -import { CFD_PLATFORMS, ContentFlag, formatMoney, getAppstorePlatforms, getCFDAvailableAccount } from '@deriv/shared'; +import { + CFD_PLATFORMS, + ContentFlag, + LocalStore, + formatMoney, + getAppstorePlatforms, + getCFDAvailableAccount, +} from '@deriv/shared'; import { localize } from '@deriv/translations'; import BaseStore from './base-store'; import { isEuCountry } from '_common/utility'; @@ -129,6 +136,20 @@ export default class TradersHubStore extends BaseStore { () => { this.getAvailablePlatforms(); this.getAvailableCFDAccounts(); + + // Set the platforms for the trading app cards based on the content flag and the client's residence status (EU/Non-EU) + const low_risk_cr_non_eu = this.content_flag === ContentFlag.LOW_RISK_CR_NON_EU; + const high_risk_cr = this.content_flag === ContentFlag.HIGH_RISK_CR; + const cr_demo = this.content_flag === ContentFlag.CR_DEMO; + const platforms = this.root_store.client.is_mt5_allowed ? ['multipliers', 'cfds'] : ['multipliers']; + + if ( + this.root_store.client.is_landing_company_loaded && + (low_risk_cr_non_eu || high_risk_cr || cr_demo) + ) { + platforms.push('options'); + } + localStorage.setItem('th_platforms', JSON.stringify(platforms)); } ); @@ -153,6 +174,8 @@ export default class TradersHubStore extends BaseStore { const active_real_mf = /^MF|MFW/.test(this.root_store.client.loginid); const default_region = () => { if (((active_demo || active_real_mf) && isEuCountry(residence)) || active_real_mf) { + // store the user's region in localStorage to remember the user's region selection on page refresh + localStorage.setItem('is_eu_user', true); return 'EU'; } return 'Non-EU'; @@ -240,6 +263,9 @@ export default class TradersHubStore extends BaseStore { this.selected_account_type = 'real'; this.selected_region = 'Non-EU'; + + // remove the user's region selection from localStorage to reset the user's region selection + localStorage.removeItem('is_eu_user'); } selectAccountTypeCard(account_type_card) { @@ -315,7 +341,16 @@ export default class TradersHubStore extends BaseStore { getAvailablePlatforms() { const appstore_platforms = getAppstorePlatforms(); - if ((this.financial_restricted_countries || this.is_eu_user) && !this.is_demo_low_risk) { + + const accounts = JSON.parse(LocalStore.get('client.accounts')); + const loginid = LocalStore.get('active_loginid'); + + if (!accounts || !loginid) return (this.available_platforms = appstore_platforms); + + if ( + isEuCountry(accounts[loginid]?.residence ?? '') || + ((this.financial_restricted_countries || this.is_eu_user) && !this.is_demo_low_risk) + ) { this.available_platforms = appstore_platforms.filter(platform => ['EU', 'All'].some(region => region === platform.availability) ); @@ -546,7 +581,8 @@ export default class TradersHubStore extends BaseStore { return this.selected_account_type === 'real'; } get is_eu_user() { - return this.selected_region === 'EU'; + // directly return the user's region selection from localStorage or the selected region from the store + return localStorage.getItem('is_eu_user') === 'true' || this.selected_region === 'EU'; } handleTabItemClick(idx) {