Feature dashboard tab && bot preview && joyride configuration

packages/bot-web-ui/src/components/dashboard/bot-builder/bot-builder.tsx

@@ -18,7 +18,6 @@ const BotBuilder = ({ app, active_tab, onboard_tour_run_state, setOnBoardTourRun
     const { onMount, onUnmount } = app;
 
     React.useEffect(() => {
-        if (!onboard_tour_run_state) setOnBoardTourRunState(false);
         onMount();
         return () => onUnmount();
     }, []);

packages/bot-web-ui/src/components/dashboard/dashboard.tsx

@@ -3,7 +3,7 @@ import { Tabs } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import Chart from 'Components/chart';
 import ReactJoyride from 'react-joyride';
-import { DBOT_ONBOARDING, handleJoyrideCallback, getTourStatus } from './joyride-config';
+import { DBOT_ONBOARDING, handleJoyrideCallback, getTourSettings } from './joyride-config';
 import classNames from 'classnames';
 import { connect } from 'Stores/connect';
 import RootStore from 'Stores/index';
@@ -32,15 +32,14 @@ const Dashboard = ({
     setActiveTab,
     toggleStrategyModal,
     onEntered,
+    setTourActive,
     has_tour_started,
     has_file_loaded,
     is_drawer_open,
-    onboard_tour_run_state,
     setOnBoardTourRunState,
 }: TDashboard) => {
     const [show_side_bar, setShowSideBar] = React.useState<boolean>(true);
     const [is_tour_running, setTourRun] = React.useState<boolean>(true);
-
     const handleClick = (e: React.MouseEvent) => {
         e.preventDefault();
         setTourRun(true);
@@ -51,9 +50,16 @@ const Dashboard = ({
         if (active_tab === 0 && has_file_loaded) {
             onEntered();
         }
-        const status = getTourStatus();
-        if (status === 'ready') setOnBoardTourRunState(false);
-    }, [active_tab]);
+        const tour_status = getTourSettings('status');
+
+        if (tour_status) {
+            const { action } = tour_status;
+            if (action === 'skip' || action === 'close' || action === 'reset') {
+                setOnBoardTourRunState(false);
+                setTourActive(false);
+            }
+        }
+    }, [active_tab, handleJoyrideCallback]);
     return (
         <>
             <div className='dashboard__main'>
@@ -124,7 +130,6 @@ export default connect(({ dashboard, quick_strategy, run_panel, load_modal }: Ro
     setActiveTab: dashboard.setActiveTab,
     toggleStrategyModal: quick_strategy.toggleStrategyModal,
     is_drawer_open: run_panel.is_drawer_open,
-    onboard_tour_run_state: dashboard.onboard_tour_run_state,
     onEntered: load_modal.onEntered,
     has_file_loaded: dashboard.has_file_loaded,
     has_tour_started: dashboard.has_tour_started,

packages/bot-web-ui/src/components/dashboard/joyride-config.tsx

@@ -13,19 +13,17 @@ type TStep = {
 
 export const getImageLocation = (image_name: string) => getUrlBase(`/public/images/common/${image_name}`);
 
-export const setOnBoardTourToken = () => {
-    return storeSetting('onboard_tour_token', new Date().getTime());
-};
-
-export const getOnBoardTourToken = () => {
-    return getSetting('onboard_tour_token');
-};
-
-export const setTourStatus = (param: string) => {
+export const setTourSettings = (param: number | { [key: string]: string }, type: string) => {
+    if (type === 'token') {
+        return storeSetting('onboard_tour_token', param);
+    }
     return storeSetting('onboard_tour_status', param);
 };
 
-export const getTourStatus = () => {
+export const getTourSettings = (type: string) => {
+    if (type === 'token') {
+        return getSetting('onboard_tour_token');
+    }
     return getSetting('onboard_tour_status');
 };
 
@@ -48,10 +46,18 @@ export const Step = ({ label, content }: TStep) => {
     );
 };
 
+let onboarding_tour: { [key: string]: string } = {};
+let current_target: number;
 export const handleJoyrideCallback = (data: CallBackProps) => {
     const { action, index, status, type } = data;
-    setTourStatus(status);
-    if (!getOnBoardTourToken()) setOnBoardTourToken();
+    if (current_target !== undefined && current_target !== index) {
+        onboarding_tour = {};
+        onboarding_tour.status = status;
+        onboarding_tour.action = action;
+    }
+    current_target = index;
+    setTourSettings(onboarding_tour, 'tour');
+    if (!getTourSettings('token')) setTourSettings(new Date().getTime(), 'token');
 };
 
 type TJoyrideProps = Record<'showProgress' | 'showSkipButton' | 'spotlightClicks' | 'disableBeacon', boolean>;

packages/bot-web-ui/src/components/dashboard/quick-strategy/quick-strategy.scss

@@ -6,7 +6,6 @@
 .quick-strategy {
     $quick-strategy: &;
     height: calc(100vh - 16.6rem);
-    background: var(--content-bg-color);
 
     &__notifications-container {
         &--open {

packages/bot-web-ui/src/stores/load-modal-store.ts

@@ -277,26 +277,26 @@ export default class LoadModalStore implements ILoadModalStore {
             return;
         }
 
-        //if (!this.recent_workspace || !this.recent_workspace.rendered) {
-        //TODO: this was the check check used on the older functionality
-        const ref = document.getElementById('load-strategy__blockly-container');
+        if (!this.recent_workspace || !this.recent_workspace.rendered) {
+            //TODO: this was the check check used on the older functionality
+            const ref = document.getElementById('load-strategy__blockly-container');
+
+            if (!ref) {
+                // eslint-disable-next-line no-console
+                console.warn('Could not find preview workspace element.');
+                return;
+            }
 
-        if (!ref) {
-            // eslint-disable-next-line no-console
-            console.warn('Could not find preview workspace element.');
-            return;
+            this.recent_workspace = Blockly.inject(ref, {
+                media: `${__webpack_public_path__}media/`,
+                zoom: {
+                    wheel: true,
+                    startScale: config.workspaces.previewWorkspaceStartScale,
+                },
+                readOnly: true,
+                scrollbars: true,
+            });
         }
-
-        this.recent_workspace = Blockly.inject(ref, {
-            media: `${__webpack_public_path__}media/`,
-            zoom: {
-                wheel: true,
-                startScale: config.workspaces.previewWorkspaceStartScale,
-            },
-            readOnly: true,
-            scrollbars: true,
-        });
-        //}
         load({ block_string: this.selected_strategy.xml, drop_event: {}, workspace: this.recent_workspace });
     }