diff --git a/packages/bot-web-ui/src/components/dashboard/dashboard.tsx b/packages/bot-web-ui/src/components/dashboard/dashboard.tsx index 88491d3d57ac..4173b0a8efc3 100644 --- a/packages/bot-web-ui/src/components/dashboard/dashboard.tsx +++ b/packages/bot-web-ui/src/components/dashboard/dashboard.tsx @@ -3,6 +3,7 @@ import classNames from 'classnames'; import { initTrashCan } from '@deriv/bot-skeleton/src/scratch/hooks/trashcan'; import { DesktopWrapper, Dialog, MobileWrapper, Tabs } from '@deriv/components'; import { isMobile } from '@deriv/shared'; +import { useStore } from '@deriv/stores'; import { localize } from '@deriv/translations'; import Chart from 'Components/chart'; import { DBOT_TABS, TAB_IDS } from 'Constants/bot-contents'; @@ -81,13 +82,44 @@ const Dashboard = ({ setTourDialogVisibility, setHasTourEnded, }: TDashboard) => { - const { DASHBOARD, BOT_BUILDER, CHART } = DBOT_TABS; + const { DASHBOARD, BOT_BUILDER, CHART, TUTORIAL } = DBOT_TABS; const is_tour_complete = React.useRef(true); let bot_tour_token: string | number = ''; let onboard_tour_token: string | number = ''; let storage = ''; let tour_status: { [key: string]: string }; const is_mobile = isMobile(); + const init_render = React.useRef(true); + const { ui } = useStore(); + const { url_hashed_values } = ui; + + let tab_value = active_tab; + const GetHashedValue = (tab: number) => { + tab_value = url_hashed_values?.split('#')[1]; + if (tab_value === 'dashboard') return DASHBOARD; + if (tab_value === 'bot_builder') return BOT_BUILDER; + if (tab_value === 'chart') return CHART; + if (tab_value === 'tutorial') return TUTORIAL; + if (isNaN(tab_value) || isNaN(tab)) return active_tab; + if (tab_value > 4 || tab > 4) return active_tab; + return tab_value; + }; + const active_hash_tab = GetHashedValue(active_tab); + + React.useEffect(() => { + if (init_render.current) { + setActiveTab(Number(active_hash_tab)); + if (is_mobile) handleTabChange(Number(active_hash_tab)); + init_render.current = false; + } else { + let active_tab_name = 'dashboard'; + if (active_tab === 0) active_tab_name = 'dashboard'; + if (active_tab === 1) active_tab_name = 'bot_builder'; + if (active_tab === 2) active_tab_name = 'chart'; + if (active_tab === 3) active_tab_name = 'tutorial'; + window.location.hash = active_tab_name; + } + }, [active_tab]); const setTourStatus = (status: { [key: string]: string }) => { if (status) { @@ -210,7 +242,8 @@ const Dashboard = ({ 'dashboard__container--active': has_tour_started && active_tab === DASHBOARD && is_mobile, })} > - + {(active_tab === DASHBOARD || active_tab === BOT_BUILDER) && } + {has_tour_started && active_tab === DASHBOARD && (is_mobile ? ( diff --git a/packages/core/src/Stores/ui-store.js b/packages/core/src/Stores/ui-store.js index fbb0e5385e22..34ab6547fb2f 100644 --- a/packages/core/src/Stores/ui-store.js +++ b/packages/core/src/Stores/ui-store.js @@ -6,6 +6,7 @@ import BaseStore from './base-store'; const store_name = 'ui_store'; export default class UIStore extends BaseStore { + url_hashed_values = ''; is_account_settings_visible = false; is_positions_drawer_on = false; is_reports_visible = false; @@ -317,6 +318,7 @@ export default class UIStore extends BaseStore { is_mobile: computed, is_tablet: computed, is_warning_scam_message_modal_visible: computed, + url_hashed_values: observable, notifyAppInstall: action.bound, onChangeUiStore: action.bound, openAccountNeededModal: action.bound, @@ -341,6 +343,7 @@ export default class UIStore extends BaseStore { setCurrentFocus: action.bound, setDarkMode: action.bound, setHasOnlyForwardingContracts: action.bound, + setHashedValue: action.bound, setIsAcuityModalOpen: action.bound, setIsClosingCreateRealAccountModal: action.bound, setIsNativepickerVisible: action.bound, @@ -439,7 +442,12 @@ export default class UIStore extends BaseStore { this.is_new_account = localStorage.getItem('isNewAccount') || false; } + setHashedValue(url_hashed_values) { + this.url_hashed_values = url_hashed_values; + } + init(notification_messages) { + this.setHashedValue(window.location.hash); this.notification_messages_ui = notification_messages; }