fix: for platform switcher

shahzaib-deriv · May 18, 2023 · ffe8d05 · ffe8d05
1 parent d35ae61
commit ffe8d05
Show file tree

Hide file tree

Showing 11 changed files with 57 additions and 37 deletions.
diff --git a/packages/core/src/App/Components/Layout/Header/__tests__/platform-dropdown.spec.tsx b/packages/core/src/App/Components/Layout/Header/__tests__/platform-dropdown.spec.tsx
@@ -5,7 +5,7 @@ import { BrowserRouter } from 'react-router-dom';
 import { PlatformDropdown, PlatformBox } from '../platform-dropdown';
 
 type TMockPlatformDropdown = {
-    platform_config: {
+    platform_configuration: {
         link_to?: string;
         href?: string;
         name: string;
@@ -22,11 +22,11 @@ jest.mock('Stores/connect.js', () => ({
             Component,
 }));
 
-const MockPlatformDropdown = ({ platform_config }: TMockPlatformDropdown) => {
+const MockPlatformDropdown = ({ platform_configuration }: TMockPlatformDropdown) => {
     return (
         <BrowserRouter>
             <PlatformDropdown
-                platform_config={platform_config}
+                platform_configuration={platform_configuration}
                 app_routing_history={[{ pathname: '' }]}
                 closeDrawer={jest.fn()}
             />
@@ -55,7 +55,7 @@ describe('PlatformDropdown component', () => {
     it('should render proper component base on the "link_to" property', () => {
         const { rerender } = render(
             <MockPlatformDropdown
-                platform_config={[
+                platform_configuration={[
                     {
                         link_to: '/test',
                         name: 'DTrader',
@@ -68,7 +68,7 @@ describe('PlatformDropdown component', () => {
 
         rerender(
             <MockPlatformDropdown
-                platform_config={[
+                platform_configuration={[
                     {
                         href: '/test',
                         name: 'DTrader',

diff --git a/packages/core/src/App/Components/Layout/Header/platform-dropdown.jsx b/packages/core/src/App/Components/Layout/Header/platform-dropdown.jsx
@@ -43,7 +43,7 @@ const PlatformDropdownContent = ({ platform, app_routing_history }) => {
     );
 };
 
-const PlatformDropdown = ({ app_routing_history, closeDrawer, platform_config, setTogglePlatformType }) => {
+const PlatformDropdown = ({ app_routing_history, closeDrawer, platform_configuration, setTogglePlatformType }) => {
     const history = useHistory();
 
     const TradersHubRedirect = () => {
@@ -86,7 +86,7 @@ const PlatformDropdown = ({ app_routing_history, closeDrawer, platform_config, s
     const platform_dropdown = (
         <div className='platform-dropdown'>
             <Div100vhContainer className='platform-dropdown__list' height_offset='15rem' is_disabled={isDesktop()}>
-                {platform_config.map(platform => {
+                {platform_configuration.map(platform => {
                     return (
                         <div key={platform.name} onClick={closeDrawer} ref={ref}>
                             <PlatformDropdownContent platform={platform} app_routing_history={app_routing_history} />

diff --git a/packages/core/src/App/Components/Layout/Header/platform-switcher.jsx b/packages/core/src/App/Components/Layout/Header/platform-switcher.jsx
@@ -1,7 +1,7 @@
 import 'Sass/app/_common/components/platform-switcher.scss';
 
 import { Icon } from '@deriv/components';
-import { getPlatformInformation, getUrlBinaryBot, isMobile } from '@deriv/shared';
+import { getPlatformInformation, isMobile } from '@deriv/shared';
 
 import { CSSTransition } from 'react-transition-group';
 import { PlatformDropdown } from './platform-dropdown.jsx';
@@ -14,7 +14,7 @@ import { withRouter } from 'react-router-dom';
 const PlatformSwitcher = ({
     toggleDrawer,
     app_routing_history,
-    platform_config,
+    platform_configuration,
     current_language,
     is_landing_company_loaded,
     is_logged_in,
@@ -25,18 +25,6 @@ const PlatformSwitcher = ({
 
     const is_close_drawer_fired_ref = React.useRef(false);
 
-    let platform_array = platform_config;
-
-    React.useEffect(() => {
-        const update_platform_array = [...platform_config];
-        platform_array = update_platform_array.map(data => {
-            const { name } = data;
-            if (name === 'Binary Bot') {
-                data.href = getUrlBinaryBot(true);
-            }
-        });
-    }, [current_language]);
-
     React.useEffect(() => {
         if (is_close_drawer_fired_ref.current) {
             if (typeof toggleDrawer === 'function') {
@@ -91,7 +79,7 @@ const PlatformSwitcher = ({
                 unmountOnExit
             >
                 <PlatformDropdown
-                    platform_config={platform_array}
+                    platform_configuration={platform_configuration}
                     closeDrawer={closeDrawer}
                     current_language={current_language}
                     app_routing_history={app_routing_history}
@@ -103,7 +91,7 @@ const PlatformSwitcher = ({
 };
 
 PlatformSwitcher.propTypes = {
-    platform_config: PropTypes.array,
+    platform_configuration: PropTypes.array,
     toggleDrawer: PropTypes.func,
     app_routing_history: PropTypes.array,
     is_landing_company_loaded: PropTypes.bool,

diff --git a/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx b/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx
@@ -168,7 +168,7 @@ const MenuLink = observer(
     }
 );
 
-const ToggleMenuDrawer = observer(({ platform_config }) => {
+const ToggleMenuDrawer = observer(({ platform_configuration }) => {
     const { common, ui, client, traders_hub, modules } = useStore();
     const { app_routing_history, current_language, is_language_changing } = common;
     const { disableApp, enableApp, is_dark_mode_on: is_dark_mode, setDarkMode: toggleTheme } = ui;
@@ -502,7 +502,7 @@ const ToggleMenuDrawer = observer(({ platform_config }) => {
                                         is_landing_company_loaded={is_landing_company_loaded}
                                         is_logged_in={is_logged_in}
                                         is_logging_in={is_logging_in}
-                                        platform_config={platform_config}
+                                        platform_configuration={platform_configuration}
                                         toggleDrawer={toggleDrawer}
                                         setTogglePlatformType={setTogglePlatformType}
                                     />

diff --git a/packages/core/src/App/Components/Routes/language-link.tsx b/packages/core/src/App/Components/Routes/language-link.tsx
@@ -4,6 +4,8 @@ import { observer, useStore } from '@deriv/stores';
 import { useTranslation } from 'react-i18next';
 import { Icon } from '@deriv/components';
 import { getAllowedLanguages } from '@deriv/translations';
+import { getUrlBinaryBot, getUrlSmartTrader } from '@deriv/shared';
+import { toJS } from 'mobx';
 
 export type TLanguageLink = {
     icon_classname?: string;
@@ -14,10 +16,25 @@ export type TLanguageLink = {
 
 const LanguageLink = observer(({ icon_classname, is_clickable = false, lang, toggleModal }: TLanguageLink) => {
     const { i18n } = useTranslation();
-    const { common } = useStore();
+    const { common, traders_hub } = useStore();
+    const { platform_configuration, setPlatFormConfig } = traders_hub;
     const { changeSelectedLanguage, current_language } = common;
     const is_active = current_language === lang;
 
+    const updatePlatformConfigLanguage = () => {
+        const tmp_array = [...platform_configuration];
+        const updated_array = tmp_array.map(data => {
+            if (data.name === 'Binary Bot') {
+                data.link_to = getUrlBinaryBot(true);
+            }
+            if (data.name === 'SmartTrader') {
+                data.link_to = getUrlSmartTrader();
+            }
+            return data;
+        });
+        setPlatFormConfig(updated_array);
+    };
+
     const link: React.ReactNode = (
         <React.Fragment>
             <Icon
@@ -56,6 +73,7 @@ const LanguageLink = observer(({ icon_classname, is_clickable = false, lang, tog
                     onClick={async () => {
                         await changeSelectedLanguage(lang);
                         await i18n.changeLanguage?.(lang);
+                        updatePlatformConfigLanguage(lang);
                         toggleModal?.();
                     }}
                     className={classNames('settings-language__language-link', {

diff --git a/packages/core/src/App/Containers/Layout/header/dashboard-platform-header.jsx b/packages/core/src/App/Containers/Layout/header/dashboard-platform-header.jsx
@@ -8,7 +8,6 @@ import { BinaryLink } from 'App/Components/Routes';
 import PropTypes from 'prop-types';
 import ToggleMenuDrawer from 'App/Components/Layout/Header/toggle-menu-drawer.jsx';
 import { connect } from 'Stores/connect';
-import platform_config from 'App/Constants/platform-config';
 
 const Divider = () => {
     return <div className='dashboard-platform-header__divider' />;
@@ -106,6 +105,7 @@ const DashboardPlatformHeader = ({
     is_notifications_visible,
     is_settings_modal_on,
     notifications_count,
+    platform_configuration,
     settings_extension,
     toggleNotifications,
     toggleSettingsModal,
@@ -122,7 +122,7 @@ const DashboardPlatformHeader = ({
         <header className='dashboard-platform-header'>
             <div className='dashboard-platform-header__menu-left'>
                 <MobileWrapper>
-                    <ToggleMenuDrawer platform_config={filterPlatformsForClients(platform_config)} />
+                    <ToggleMenuDrawer platform_configuration={filterPlatformsForClients(platform_configuration)} />
                     {header_extension && is_logged_in && <div>{header_extension}</div>}
                 </MobileWrapper>
                 <DesktopWrapper>
@@ -179,7 +179,7 @@ DashboardPlatformHeader.propTypes = {
     is_settings_modal_on: PropTypes.bool,
 };
 
-export default connect(({ client, common, notifications, ui }) => ({
+export default connect(({ client, common, notifications, trader_hub, ui }) => ({
     app_routing_history: common.app_routing_history,
     balance: client.balance,
     currency: client.currency,
@@ -190,5 +190,6 @@ export default connect(({ client, common, notifications, ui }) => ({
     is_mt5_allowed: client.is_mt5_allowed,
     is_notifications_visible: notifications.is_notifications_visible,
     notifications_count: notifications.notifications.length,
+    platform_configuration: trader_hub.platform_configuration,
     toggleNotifications: notifications.toggleNotificationsModal,
 }))(withRouter(DashboardPlatformHeader));
diff --git a/packages/core/src/App/Containers/Layout/header/default-header.jsx b/packages/core/src/App/Containers/Layout/header/default-header.jsx
@@ -10,7 +10,6 @@ import RealAccountSignup from 'App/Containers/RealAccountSignup';
 import SetAccountCurrencyModal from 'App/Containers/SetAccountCurrencyModal';
 import ToggleMenuDrawer from 'App/Components/Layout/Header/toggle-menu-drawer.jsx';
 import { connect } from 'Stores/connect';
-import platform_config from 'App/Constants/platform-config';
 import { withRouter } from 'react-router-dom';
 
 const DefaultHeader = ({
@@ -43,6 +42,7 @@ const DefaultHeader = ({
     notifications_count,
     openRealAccountSignup,
     platform,
+    platform_configuration,
     removeNotificationMessage,
     toggleAccountsDialog,
     toggleNotifications,
@@ -96,13 +96,13 @@ const DefaultHeader = ({
                             is_landing_company_loaded={is_landing_company_loaded}
                             is_logged_in={is_logged_in}
                             is_logging_in={is_logging_in}
-                            platform_config={filterPlatformsForClients(platform_config)}
+                            platform_configuration={filterPlatformsForClients(platform_configuration)}
                             setTogglePlatformType={setTogglePlatformType}
                             current_language={current_language}
                         />
                     </DesktopWrapper>
                     <MobileWrapper>
-                        <ToggleMenuDrawer platform_config={filterPlatformsForClients(platform_config)} />
+                        <ToggleMenuDrawer platform_configuration={filterPlatformsForClients(platform_configuration)} />
                         {header_extension && is_logged_in && (
                             <div className='header__menu-left-extensions'>{header_extension}</div>
                         )}
@@ -226,6 +226,7 @@ export default connect(({ client, common, ui, notifications, traders_hub }) => (
     notifications_count: notifications.notifications.length,
     openRealAccountSignup: ui.openRealAccountSignup,
     platform: common.platform,
+    platform_configuration: traders_hub.platform_configuration,
     removeNotificationMessage: notifications.removeNotificationMessage,
     toggleAccountsDialog: ui.toggleAccountsDialog,
     toggleNotifications: notifications.toggleNotificationsModal,

diff --git a/packages/core/src/App/Containers/Layout/header/dtrader-header.jsx b/packages/core/src/App/Containers/Layout/header/dtrader-header.jsx
@@ -5,7 +5,6 @@ import { withRouter } from 'react-router-dom';
 import { DesktopWrapper, MobileWrapper } from '@deriv/components';
 import { routes, isMobile, getDecimalPlaces, platforms } from '@deriv/shared';
 import { AccountActions, MenuLinks, PlatformSwitcher } from 'App/Components/Layout/Header';
-import platform_config from 'App/Constants/platform-config';
 import RealAccountSignup from 'App/Containers/RealAccountSignup';
 import SetAccountCurrencyModal from 'App/Containers/SetAccountCurrencyModal';
 import NewVersionNotification from 'App/Containers/new-version-notification.jsx';
@@ -45,6 +44,7 @@ const DTraderHeader = ({
     notifications_count,
     openRealAccountSignup,
     platform,
+    platform_configuration,
     removeNotificationMessage,
     toggleAccountsDialog,
     toggleNotifications,
@@ -102,12 +102,12 @@ const DTraderHeader = ({
                     <DesktopWrapper>
                         <PlatformSwitcher
                             app_routing_history={app_routing_history}
-                            platform_config={filterPlatformsForClients(platform_config)}
+                            platform_configuration={filterPlatformsForClients(platform_configuration)}
                             setTogglePlatformType={setTogglePlatformType}
                         />
                     </DesktopWrapper>
                     <MobileWrapper>
-                        <ToggleMenuDrawer platform_config={filterPlatformsForClients(platform_config)} />
+                        <ToggleMenuDrawer platform_configuration={filterPlatformsForClients(platform_configuration)} />
 
                         {header_extension && is_logged_in && (
                             <div className='header__menu-left-extensions'>{header_extension}</div>
@@ -234,6 +234,7 @@ export default connect(({ client, common, ui, notifications, traders_hub }) => (
     is_notifications_visible: notifications.is_notifications_visible,
     is_route_modal_on: ui.is_route_modal_on,
     is_virtual: client.is_virtual,
+    platform_configuration: traders_hub.platform_configuration,
     notifications_count: notifications.notifications.length,
     openRealAccountSignup: ui.openRealAccountSignup,
     platform: common.platform,

diff --git a/packages/core/src/App/Containers/Layout/header/trading-hub-header.jsx b/packages/core/src/App/Containers/Layout/header/trading-hub-header.jsx
@@ -6,7 +6,6 @@ import { DesktopWrapper, Icon, MobileWrapper, Popover, Text, Button } from '@der
 import { routes, platforms, formatMoney } from '@deriv/shared';
 import { Localize } from '@deriv/translations';
 import { ToggleNotifications, MenuLinks } from 'App/Components/Layout/Header';
-import platform_config from 'App/Constants/platform-config';
 import ToggleMenuDrawer from 'App/Components/Layout/Header/toggle-menu-drawer.jsx';
 import { connect } from 'Stores/connect';
 import { BinaryLink } from 'App/Components/Routes';
@@ -98,6 +97,7 @@ const TradingHubHeader = ({
     modal_data,
     notifications_count,
     platform,
+    platform_configuration,
     setIsOnboardingVisited,
     toggleIsTourOpen,
     toggleNotifications,
@@ -220,7 +220,7 @@ const TradingHubHeader = ({
         >
             <div className='trading-hub-header__menu-left'>
                 <MobileWrapper>
-                    <ToggleMenuDrawer platform_config={filterPlatformsForClients(platform_config)} />
+                    <ToggleMenuDrawer platform_configuration={filterPlatformsForClients(platform_configuration)} />
 
                     {header_extension && is_logged_in && <div>{header_extension}</div>}
                 </MobileWrapper>
@@ -365,4 +365,5 @@ export default connect(({ client, common, notifications, ui, traders_hub }) => (
     toggleReadyToDepositModal: ui.toggleReadyToDepositModal,
     toggleNeedRealAccountForCashierModal: ui.toggleNeedRealAccountForCashierModal,
     content_flag: traders_hub.content_flag,
+    platform_configuration: traders_hub.platform_configuration,
 }))(withRouter(TradingHubHeader));
diff --git a/packages/core/src/Stores/traders-hub-store.js b/packages/core/src/Stores/traders-hub-store.js
@@ -4,6 +4,7 @@ import BaseStore from './base-store';
 import { localize } from '@deriv/translations';
 import { isEuCountry } from '_common/utility';
 import { getMultipliersAccountStatus } from './Helpers/client';
+import platform_config from 'App/Constants/platform-config';
 
 export default class TradersHubStore extends BaseStore {
     available_platforms = [];
@@ -28,12 +29,15 @@ export default class TradersHubStore extends BaseStore {
     };
     is_account_transfer_modal_open = false;
     selected_account = {};
+    platform_configuration = [...platform_config];
 
     constructor(root_store) {
         super({ root_store });
 
         makeObservable(this, {
             account_type_card: observable,
+            platform_configuration: observable,
+            setPlatFormConfig: action.bound,
             available_cfd_accounts: observable,
             available_dxtrade_accounts: observable,
             available_mt5_accounts: observable,
@@ -210,6 +214,10 @@ export default class TradersHubStore extends BaseStore {
         this.selected_region = 'Non-EU';
     }
 
+    setPlatFormConfig(platform_configuration = []) {
+        this.platform_configuration = platform_configuration;
+    }
+
     selectAccountTypeCard(account_type_card) {
         this.account_type_card = account_type_card;
     }

diff --git a/packages/stores/types.ts b/packages/stores/types.ts
@@ -340,6 +340,8 @@ type TTradersHubStore = {
     setSelectedAccount: (account: { login?: string; account_id?: string }) => void;
     toggleAccountTransferModal: () => void;
     is_demo: boolean;
+    platform_configuration: Array<Record<string, any>>;
+    setPlatFormConfig: (platform_configuration: Array<Record<string, any>>) => void;
 };
 
 /**