refactor--dbot-tours

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

@@ -5,17 +5,15 @@ import { observer } from '@deriv/stores';
 import { useDBotStore } from '../../../stores/useDBotStore';
 import LoadModal from '../../load-modal';
 import SaveModal from '../dashboard-component/load-bot-preview/save-modal';
-import { BOT_BUILDER_TOUR } from '../joyride-config';
+import DesktopTours from '../dbot-tours/desktop-tours/desktop-tours';
+import MobileTours from '../dbot-tours/mobile-tours/mobile-tours';
 import QuickStrategy from '../quick-strategy';
-import ReactJoyrideWrapper from '../react-joyride-wrapper';
-import TourSlider from '../tour-slider';
 import WorkspaceWrapper from './workspace-wrapper';
 
 const BotBuilder = observer(() => {
     const { dashboard, app } = useDBotStore();
     const { active_tab, has_started_onboarding_tour, has_started_bot_builder_tour, is_preview_on_popup } = dashboard;
 
-    const [is_tour_running] = React.useState<boolean>(true);
     const { onMount, onUnmount } = app;
     const el_ref = React.useRef<HTMLInputElement | null>(null);
 
@@ -49,22 +47,10 @@ const BotBuilder = observer(() => {
             {has_started_bot_builder_tour && active_tab === 1 && !has_started_onboarding_tour && (
                 <>
                     <MobileWrapper>
-                        <TourSlider />
+                        <MobileTours />
                     </MobileWrapper>
                     <DesktopWrapper>
-                        <ReactJoyrideWrapper
-                            steps={BOT_BUILDER_TOUR}
-                            run={is_tour_running}
-                            showProgress
-                            styles={{
-                                options: {
-                                    arrowColor: 'transparent',
-                                    backgroundColor: 'var(--general-main-2)',
-                                    primaryColor: 'var(--brand-red-coral)',
-                                    textColor: 'var(--text-general)',
-                                },
-                            }}
-                        />
+                        <DesktopTours />
                     </DesktopWrapper>
                 </>
             )}

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

@@ -454,13 +454,12 @@
         }
     }
 
-    &__image {
+    &__image,
+    &__media {
         background: var(--general-section-1);
         text-align: center;
         padding: 0.8rem;
         width: 100%;
-        margin-bottom: 0.8rem;
-        height: 50%;
     }
 
     img {
@@ -544,10 +543,6 @@
                 }
             }
 
-            &__content {
-                color: $color-white;
-            }
-
             &__status {
                 height: 5rem;
                 display: flex;
@@ -620,7 +615,6 @@
         opacity: 0;
         color: var(--text-prominent);
         padding: 1rem 0;
-        font-size: 1.2rem;
 
         &--open {
             opacity: 1;

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

@@ -11,19 +11,13 @@ import { DBOT_TABS, TAB_IDS } from 'Constants/bot-contents';
 import { useDBotStore } from 'Stores/useDBotStore';
 import RunPanel from '../run-panel';
 import RunStrategy from './dashboard-component/run-strategy';
+import TourEndDialog from './dbot-tours/common/tour-end-dialog';
+import TourStartDialog from './dbot-tours/common/tour-start-dialog';
+import DesktopTours from './dbot-tours/desktop-tours';
+import MobileTours from './dbot-tours/mobile-tours';
+import { getTourSettings, setTourSettings, setTourType, tour_status_ended, tour_type } from './dbot-tours/utils';
 import DashboardComponent from './dashboard-component';
-import {
-    DBOT_ONBOARDING,
-    getTourSettings,
-    setTourSettings,
-    setTourType,
-    tour_status_ended,
-    tour_type,
-} from './joyride-config';
-import ReactJoyrideWrapper from './react-joyride-wrapper';
 import StrategyNotification from './strategy-notification';
-import TourSlider from './tour-slider';
-import TourTriggrerDialog from './tour-trigger-dialog';
 import Tutorial from './tutorial-tab';
 
 const Dashboard = observer(() => {
@@ -39,6 +33,7 @@ const Dashboard = observer(() => {
         setHasTourEnded,
         has_started_bot_builder_tour,
         is_tour_dialog_visible,
+        has_tour_ended,
         setActiveTab,
         setBotBuilderTokenCheck,
         setOnBoardingTokenCheck,
@@ -229,15 +224,13 @@ const Dashboard = observer(() => {
                         'dashboard__container--active': has_tour_started && active_tab === DASHBOARD && is_mobile,
                     })}
                 >
-                    {(active_tab === DASHBOARD || active_tab === BOT_BUILDER) && <TourTriggrerDialog />}
+                    {!has_tour_ended && (active_tab === DASHBOARD || active_tab === BOT_BUILDER) ? (
+                        <TourStartDialog />
+                    ) : (
+                        <TourEndDialog />
+                    )}
 
-                    {has_tour_started &&
-                        active_tab === DASHBOARD &&
-                        (is_mobile ? (
-                            <TourSlider />
-                        ) : (
-                            <ReactJoyrideWrapper steps={DBOT_ONBOARDING} spotlightClicks hideCloseButton />
-                        ))}
+                    {has_tour_started && active_tab === DASHBOARD && (is_mobile ? <MobileTours /> : <DesktopTours />)}
                     <Tabs
                         active_index={active_tab}
                         className='dashboard__tabs'

packages/bot-web-ui/src/components/dashboard/dbot-tours/common/tour-end-dialog.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Dialog, Text } from '@deriv/components';
+import { isMobile } from '@deriv/shared';
+import { observer } from '@deriv/stores';
+import { Localize, localize } from '@deriv/translations';
+import { useDBotStore } from '../../../../stores/useDBotStore';
+import { setTourSettings, tour_status_ended, tour_type } from '../utils';
+
+const TourEndDialog = observer(() => {
+    const { dashboard } = useDBotStore();
+    const { active_tab, has_tour_ended, is_tour_dialog_visible, setTourDialogVisibility, toggleOnConfirm } = dashboard;
+
+    const is_mobile = isMobile();
+
+    const toggleTour = (value: boolean, type: string) => {
+        if (tour_type.key === 'bot_builder') {
+            if (type === 'onConfirm') {
+                toggleOnConfirm(active_tab, value);
+            } else {
+                setTourSettings(new Date().getTime(), `${tour_type.key}_token`);
+            }
+        }
+        setTourDialogVisibility(false);
+    };
+
+    const getTourContent = () => {
+        return (
+            <>
+                <div className='dc-dialog__content__description__text' data-testid='tour-success-message'>
+                    <Localize
+                        key={0}
+                        i18n_default_text={'You have successfully created your bot using a simple strategy.'}
+                    />
+                </div>
+                <div className='dc-dialog__content__description__text'>
+                    <Localize
+                        key={0}
+                        i18n_default_text={'Now, <0>run the bot</0> to test out the strategy.'}
+                        components={[<strong key={0} />]}
+                    />
+                </div>
+                <div className='dc-dialog__content__description__text'>
+                    <Localize
+                        key={0}
+                        i18n_default_text={
+                            'Note: If you wish to learn more about the Bot Builder, you can proceed to the <0>Tutorials</0> tab.'
+                        }
+                        components={[<strong key={0} />]}
+                    />
+                </div>
+            </>
+        );
+    };
+
+    const onHandleConfirm = React.useCallback(() => {
+        toggleTour(tour_status_ended.key === 'finished', 'onConfirm');
+        tour_status_ended.key = '';
+        return tour_status_ended.key;
+    }, [has_tour_ended, active_tab]);
+
+    return (
+        <div>
+            <Dialog
+                is_visible={is_tour_dialog_visible}
+                cancel_button_text={localize('Skip')}
+                onCancel={() => toggleTour(false, 'onCancel')}
+                confirm_button_text={localize('OK')}
+                onConfirm={onHandleConfirm}
+                is_mobile_full_width
+                className={classNames('dc-dialog tour-dialog', {
+                    'tour-dialog--end': has_tour_ended,
+                })}
+                has_close_icon={false}
+            >
+                <div className='dc-dialog__content__header'>
+                    <Text weight='bold' color='prominent' size={is_mobile ? 'xs' : 's'}>
+                        {localize('Congratulations')}
+                    </Text>
+                </div>
+                <div className='dc-dialog__content__description'>
+                    <Text size={is_mobile ? 'xxs' : 'xs'} color='prominent'>
+                        {getTourContent()}
+                    </Text>
+                </div>
+            </Dialog>
+        </div>
+    );
+});
+
+export default TourEndDialog;

packages/bot-web-ui/src/components/dashboard/dbot-tours/common/tour-start-dialog.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Dialog, Text } from '@deriv/components';
+import { isMobile } from '@deriv/shared';
+import { observer } from '@deriv/stores';
+import { Localize, localize } from '@deriv/translations';
+import { DBOT_TABS } from 'Constants/bot-contents';
+import { useDBotStore } from '../../../../stores/useDBotStore';
+import { bot_builder_tour_header, onboarding_tour_header, tourDialogAction, tourDialogInfo } from '../config';
+import { setTourSettings, tour_type } from '../utils';
+
+const TourStartDialog = observer(() => {
+    const { dashboard } = useDBotStore();
+    const {
+        active_tab,
+        has_tour_ended,
+        is_tour_dialog_visible,
+        setTourDialogVisibility,
+        toggleOnConfirm,
+        setBotBuilderTourState,
+        setOnBoardTourRunState,
+        setTourActive,
+    } = dashboard;
+
+    const is_mobile = isMobile();
+    const current_tour_type_key = tour_type?.key;
+    const toggleTour = (value: boolean, type: string) => {
+        if (type === 'onConfirm') toggleOnConfirm(active_tab, value);
+        setTourSettings(new Date().getTime(), `${current_tour_type_key}_token`);
+        setTourDialogVisibility(false);
+    };
+
+    const onboard_tour = active_tab === DBOT_TABS.DASHBOARD;
+
+    const getTourContent = () => {
+        return (
+            <>
+                {onboard_tour ? (
+                    <Localize
+                        key={0}
+                        i18n_default_text='Hi! Hit <0>Start</0> for a quick tour.'
+                        components={[<strong key={0} />]}
+                    />
+                ) : (
+                    <>
+                        <div className='dc-dialog__content__description__text'>{tourDialogInfo}</div>
+                        <div className='dc-dialog__content__description__text'>{tourDialogAction}</div>
+                        <div className='dc-dialog__content__description__text'>
+                            <Localize
+                                key={0}
+                                i18n_default_text={'Note: You can also find this tutorial in the <0>Tutorials</0> tab.'}
+                                components={[<strong key={0} />]}
+                            />
+                        </div>
+                    </>
+                )}
+            </>
+        );
+    };
+
+    const onHandleConfirm = () => {
+        setTourActive(true);
+        if (onboard_tour) setOnBoardTourRunState(true);
+        else setBotBuilderTourState(true);
+        setTourDialogVisibility(false);
+    };
+    const header_text_size = is_mobile ? 'xs' : 's';
+    const content_text_size = is_mobile ? 'xxs' : 'xs';
+
+    const tour_headers = active_tab === 0 ? onboarding_tour_header : bot_builder_tour_header;
+
+    return (
+        <div>
+            <Dialog
+                is_visible={is_tour_dialog_visible}
+                cancel_button_text={localize('Skip')}
+                onCancel={() => toggleTour(false, 'onCancel')}
+                confirm_button_text={localize('Start')}
+                onConfirm={onHandleConfirm}
+                is_mobile_full_width
+                className={classNames('dc-dialog tour-dialog', {
+                    'tour-dialog--end': has_tour_ended,
+                })}
+                has_close_icon={false}
+            >
+                <div className='dc-dialog__content__header'>
+                    <Text weight='bold' color='prominent' size={header_text_size}>
+                        {tour_headers}
+                    </Text>
+                </div>
+                <div className='dc-dialog__content__description'>
+                    <Text size={content_text_size} color='prominent'>
+                        {getTourContent()}
+                    </Text>
+                </div>
+            </Dialog>
+        </div>
+    );
+});
+
+export default TourStartDialog;

packages/bot-web-ui/src/components/dashboard/dbot-tours/config/__tests__/config.spec.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { mockStore, StoreProvider } from '@deriv/stores';
+import { render, screen } from '@testing-library/react';
+import { mock_ws } from 'Utils/mock';
+import RootStore from 'Stores/root-store';
+import { DBotStoreProvider, mockDBotStore } from 'Stores/useDBotStore';
+import BotBuilderTour from '../../mobile-tours/bot-builder-tour';
+import OnboardingTour from '../../mobile-tours/onboarding-tour';
+import { BOT_BUILDER_MOBILE, DBOT_ONBOARDING_MOBILE } from '../index';
+
+jest.mock('@deriv/bot-skeleton/src/scratch/blockly', () => jest.fn());
+jest.mock('@deriv/bot-skeleton/src/scratch/dbot', () => jest.fn());
+jest.mock('@deriv/bot-skeleton/src/scratch/hooks/block_svg', () => jest.fn());
+jest.mock('@deriv/deriv-charts', () => ({
+    setSmartChartsPublicPath: jest.fn(),
+}));
+describe('Tour Config Data', () => {
+    let wrapper: ({ children }: { children: JSX.Element }) => JSX.Element, mock_DBot_store: RootStore | undefined;
+
+    beforeEach(() => {
+        const mock_store = mockStore({});
+        mock_DBot_store = mockDBotStore(mock_store, mock_ws);
+
+        wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock_store}>
+                <DBotStoreProvider ws={mock_ws} mock={mock_DBot_store}>
+                    {children}
+                </DBotStoreProvider>
+            </StoreProvider>
+        );
+    });
+    it('DBOT_ONBOARDING_MOBILE is called', () => {
+        render(<OnboardingTour />, {
+            wrapper,
+        });
+        const first_step = DBOT_ONBOARDING_MOBILE[0];
+        expect(screen.getByText(first_step.header)).toBeInTheDocument();
+    });
+
+    it('BOT_BUILDER_MOBILE is called', () => {
+        render(<BotBuilderTour />, {
+            wrapper,
+        });
+        const first_step = BOT_BUILDER_MOBILE[0];
+        expect(screen.getByText(first_step.header)).toBeInTheDocument();
+    });
+});