[TRAH-3380] shahzaib / auth call from options multipliers (deriv-com#…

…15407)

* 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

* chore(traderhub-store): fix tradershub sections for diel clients

* fix(diel): diel real/demo switching

* chore: traderhub store

* fix: traderhub logged out platform render

* fix: traderhub logged out platform render

* chore: removed unused imports

* chore: removed unused prop
;

* chore: use mobx localstorage to store tradershub store values

* chore: revert tradershub store conditions after using base store localstorage methods

* fix: mt5 platform loading for restricted countries

* chore(logout): remove traders_hub_store from localstorage on logout

* chore(tradershub): show loading until the landing company is loaded once

* chore: fix logged out available platforms

* chore: fix logged out available platforms

* fix: card divider in logged out tradershub

* fix: tradershub localstorage cleanup upon logout

---------

Co-authored-by: thisyahlen <104053934+thisyahlen-deriv@users.noreply.github.com>

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<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>
-        );
-    }
-
-    return <TitleCardLoader />;
-});
+const Options = ({ title, description }: TOptionsProps) => {
+    return (
+        <div className='listing-container__title'>
+            {title}
+            {description}
+        </div>
+    );
+};
 
 const Switcher = ({ is_deriv_platform }: TSwitcherProps) => {
     if (!is_deriv_platform) return null;
@@ -49,7 +39,7 @@ const ListingContainer = ({
     return (
         <div className={classNames('listing-container', className)}>
             <div className='listing-container__top-container'>
-                <Options title={title} description={description} is_deriv_platform={is_deriv_platform} />
+                <Options title={title} description={description} />
                 <Switcher is_deriv_platform={is_deriv_platform} />
             </div>
             {is_outside_grid_container ? children : <GridContainer>{children}</GridContainer>}

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');

packages/appstore/src/components/options-multipliers-listing-logged-out/options-multipliers-listing-logged-out.tsx

@@ -1,39 +1,48 @@
-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';
 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 (
         <ListingContainer
             title={<OptionsTitle is_eu_user={is_eu_user} />}
             description={<OptionsDescription is_eu_user={is_eu_user} />}
         >
-            {logged_out_available_platforms.map((available_platform: BrandConfig, index: number) => (
-                <TradingAppCard
-                    key={`trading_app_card_${available_platform.name}`}
-                    {...available_platform}
-                    action_type='trade'
-                    clickable_icon
-                    is_deriv_platform
-                    market_type='all'
-                    has_divider={!is_eu_user && getHasDivider(index, available_platforms.length, 3)}
-                />
-            ))}
+            {logged_out_available_platforms.map(
+                (available_platform: BrandConfig, index: number, self: BrandConfig[]) => (
+                    <TradingAppCard
+                        key={`trading_app_card_${available_platform.name}`}
+                        {...available_platform}
+                        action_type='trade'
+                        clickable_icon
+                        is_deriv_platform
+                        market_type='all'
+                        has_divider={!is_eu_user && getHasDivider(index, self.length, 3)}
+                    />
+                )
+            )}
         </ListingContainer>
     );
 });

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(() => {
                 </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} Demo` : available_platform.name,
-                            });
-                        }}
-                        has_divider={(!is_eu_user || is_demo) && getHasDivider(index, available_platforms.length, 3)}
-                    />
-                ))
-            ) : (
-                <PlatformLoader />
-            )}
+            {!available_platforms.length && <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} Demo` : available_platform.name,
+                        });
+                    }}
+                    has_divider={(!is_eu_user || is_demo) && getHasDivider(index, available_platforms.length, 3)}
+                />
+            ))}
         </ListingContainer>
     );
 });

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();

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 (
+            <div
+                data-testid='dt_traders_hub'
+                className={classNames('traders-hub__main-container', {
+                    'traders-hub__main-container-reversed': is_eu_user || selected_region === 'EU',
+                })}
+            >
+                {is_options_and_multipliers_visible && <OptionsAndMultipliersListing />}
+                {is_cfd_visible && <CFDsListing />}
+            </div>
+        );
+    }
+);
+
 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 (
-            <div
-                data-testid='dt_traders_hub'
-                className={classNames('traders-hub__main-container', {
-                    'traders-hub__main-container-reversed': is_eu_user,
-                })}
-            >
-                {is_options_and_multipliers_visible && <OptionsAndMultipliersListing />}
-                {is_cfd_visible && <CFDsListing />}
-            </div>
-        );
-    };
-
-    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'}
@@ -153,23 +162,30 @@ const TradersHub = observer(() => {
                     )}
 
                     <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' />

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();