[TRAH-3380] shahzaib / remove authorization and loader from options &…

… multipliers] (binary-com#15013) * chore: removed platfrom loader from options & multiplier * chore: check for residence from account list * fix: platform description for trading card * chore: removed unused variables * chore: removed unused imports * chore: cfd section loading * chore: persist available trading platforms in localstorage
mitra-deriv · May 21, 2024 · c3ecc88 · c3ecc88
1 parent 3604f17
commit c3ecc88
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 98 deletions.
diff --git 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<TListingContainerProps, 'title' | 'description' | 'is_deriv_platform'>;
 type TSwitcherProps = Pick<TListingContainerProps, 'is_deriv_platform'>;
 
-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 (
-            <div className='listing-container__title'>
-                {title}
-                {description}
-            </div>
-        );
-    }
+const Options = ({ title, description, is_deriv_platform }: TOptionsProps) => {
+    if (!is_deriv_platform) return null;
 
-    return <TitleCardLoader />;
-});
+    return (
+        <div className='listing-container__title'>
+            {title}
+            {description}
+        </div>
+    );
+};
 
 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
@@ -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
@@ -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 (
                 <Text size='sm' weight='bold'>
                     <Localize i18n_default_text='Options' />
                 </Text>
             );
-        } else if (low_risk_cr_eu || is_eu) {
+        } else if (!platforms.includes('options')) {
             return (
                 <Text size='sm' weight='bold' color='prominent'>
                     <Localize i18n_default_text='Multipliers' />
@@ -63,7 +49,7 @@ const OptionsAndMultipliersListing = observer(() => {
         <ListingContainer
             title={<OptionsTitle />}
             description={
-                low_risk_cr_non_eu || high_risk_cr || cr_demo ? (
+                platforms.includes('options') && platforms.includes('multipliers') ? (
                     <Text size='xs' line_height='s'>
                         <Localize
                             i18n_default_text='Buy or sell at a specific time for a specific price. <0>Learn more</0>'
@@ -115,34 +101,30 @@ const OptionsAndMultipliersListing = observer(() => {
                 </div>
             )}
 
-            {is_landing_company_loaded ? (
-                available_platforms.map((available_platform: BrandConfig, index: number) => (
-                    <TradingAppCard
-                        key={`trading_app_card_${available_platform.name}`}
-                        {...available_platform}
-                        clickable_icon
-                        action_type={
-                            is_demo || (!no_CR_account && !is_eu_user) || (has_maltainvest_account && is_eu_user)
-                                ? 'trade'
-                                : 'none'
-                        }
-                        is_deriv_platform
-                        onAction={() => {
-                            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)}
-                    />
-                ))
-            ) : (
-                <PlatformLoader />
-            )}
+            {available_platforms?.map((available_platform: BrandConfig, index: number) => (
+                <TradingAppCard
+                    key={`trading_app_card_${available_platform.name}`}
+                    {...available_platform}
+                    clickable_icon
+                    action_type={
+                        is_demo || (!no_CR_account && !is_eu_user) || (has_maltainvest_account && is_eu_user)
+                            ? 'trade'
+                            : 'none'
+                    }
+                    is_deriv_platform
+                    onAction={() => {
+                        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)}
+                />
+            ))}
         </ListingContainer>
     );
 });

diff --git a/packages/appstore/src/helpers/available-platforms-helper.ts 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
@@ -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
@@ -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
@@ -117,11 +117,9 @@ const TradersHub = observer(() => {
         );
     };
 
-    const getOrderedPlatformSections = (isDesktop = false) => {
+    const getOrderedPlatformSections = () => {
         if (is_mt5_allowed) {
-            return isDesktop ? (
-                <OrderedPlatformSections />
-            ) : (
+            return (
                 <OrderedPlatformSections
                     is_cfd_visible={selected_platform_type === 'cfd'}
                     is_options_and_multipliers_visible={selected_platform_type === 'options'}
@@ -144,23 +142,30 @@ const TradersHub = observer(() => {
                     ref={traders_hub_ref}
                 >
                     <MainTitleBar />
-                    <DesktopWrapper>{getOrderedPlatformSections(true)}</DesktopWrapper>
+                    <DesktopWrapper>
+                        {!is_landing_company_loaded ? (
+                            <OrderedPlatformSections />
+                        ) : (
+                            <OrderedPlatformSections is_cfd_visible={is_mt5_allowed} />
+                        )}
+                    </DesktopWrapper>
                     <MobileWrapper>
-                        {is_mt5_allowed &&
-                            (is_landing_company_loaded ? (
+                        {is_landing_company_loaded ? (
+                            is_mt5_allowed && (
                                 <ButtonToggle
                                     buttons_arr={is_eu_user ? platform_toggle_options_eu : platform_toggle_options}
                                     className='traders-hub__button-toggle'
                                     has_rounded_button
                                     is_traders_hub={window.location.pathname === routes.traders_hub}
-                                    name='platforn_type'
+                                    name='platform_type'
                                     onChange={platformTypeChange}
                                     value={selected_platform_type}
                                 />
-                            ) : (
-                                <ButtonToggleLoader />
-                            ))}
-                        {!is_mt5_allowed && (
+                            )
+                        ) : (
+                            <ButtonToggleLoader />
+                        )}
+                        {is_landing_company_loaded && !is_mt5_allowed && (
                             <div className='traders-hub--mt5-not-allowed'>
                                 <Text size='s' weight='bold' color='prominent'>
                                     <Localize i18n_default_text='Multipliers' />

diff --git 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) {