({
+export default connect(({ dashboard, quick_strategy, run_panel, load_modal }: RootStore) => ({
active_tab: dashboard.active_tab,
is_drawer_open: run_panel.is_drawer_open,
setActiveTab: dashboard.setActiveTab,
toggleStrategyModal: quick_strategy.toggleStrategyModal,
+ onEntered: load_modal.onEntered,
+ has_file_loaded: dashboard.has_file_loaded,
+ has_tour_started: dashboard.has_tour_started,
+ setTourActive: dashboard.setTourActive,
+ setOnBoardTourRunState: dashboard.setOnBoardTourRunState,
}))(Dashboard);
diff --git a/packages/bot-web-ui/src/components/dashboard/joyride-config.tsx b/packages/bot-web-ui/src/components/dashboard/joyride-config.tsx
index 235ba6da02db..338510e1493f 100644
--- a/packages/bot-web-ui/src/components/dashboard/joyride-config.tsx
+++ b/packages/bot-web-ui/src/components/dashboard/joyride-config.tsx
@@ -1,14 +1,30 @@
import React from 'react';
import { localize } from '@deriv/translations';
+import { storeSetting, getSetting } from '../../utils/settings';
+import TourGuide from './tour-guide';
+import { CallBackProps } from 'react-joyride';
import { Text } from '@deriv/components';
-
-type TJoyrideConfig = Record<'showProgress' | 'showSkipButton' | 'spotlightClicks' | 'disableBeacon', boolean>;
+import { getImageLocation } from '../../public-path';
type TStep = {
label?: string;
content: 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 getTourSettings = (type: string) => {
+ if (type === 'token') {
+ return getSetting('onboard_tour_token');
+ }
+ return getSetting('onboard_tour_status');
+};
+
export const Step = ({ label, content }: TStep) => {
return (
@@ -28,17 +44,143 @@ export const Step = ({ label, content }: TStep) => {
);
};
-/**
- * Joyride specifc config
- * It should be in camel casing.
- */
-const joyride_config: TJoyrideConfig = {
+let onboarding_tour: { [key: string]: string } = {};
+let current_target: number;
+export const handleJoyrideCallback = (data: CallBackProps) => {
+ const { action, index, status, type } = data;
+ if (current_target && 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>;
+
+const joyride_props: TJoyrideProps = {
showProgress: true,
showSkipButton: true,
spotlightClicks: true,
disableBeacon: true,
};
+export const DBOT_ONBOARDING = [
+ {
+ target: '#tab__dashboard__table__tiles',
+ content: (
+
+ ),
+ ...joyride_props,
+ },
+ {
+ target: '#id-bot-builder',
+ content: (
+
+ ),
+ ...joyride_props,
+ },
+ {
+ target: '#id-quick-strategy',
+ content: (
+
+ ),
+ ...joyride_props,
+ },
+ {
+ target: '#id-charts',
+ content: (
+
+ ),
+ ...joyride_props,
+ },
+ {
+ target: '#id-tutorials',
+ content: (
+
+ ),
+ ...joyride_props,
+ },
+ {
+ target: '.animation__wrapper',
+ content: (
+
+ ),
+ ...joyride_props,
+ },
+ {
+ target: '[data-testid="drawer"]',
+ content: (
+
+ ),
+ ...joyride_props,
+ },
+
+ {
+ target: 'body',
+ content: (
+
+ ),
+ ...joyride_props,
+ },
+];
export const BOT_BUILDER_TOUR = [
{
target: 'body',
@@ -53,7 +195,7 @@ export const BOT_BUILDER_TOUR = [
]}
/>,
],
- ...joyride_config,
+ ...joyride_props,
},
{
target: '[data-category="trade_parameters"]',
@@ -72,7 +214,7 @@ export const BOT_BUILDER_TOUR = [
]}
/>,
],
- ...joyride_config,
+ ...joyride_props,
},
{
target: '[data-category="trade_parameters"]',
@@ -86,7 +228,7 @@ export const BOT_BUILDER_TOUR = [
]}
/>,
],
- ...joyride_config,
+ ...joyride_props,
},
{
target: '[data-category="purchase_conditions"]',
@@ -101,7 +243,7 @@ export const BOT_BUILDER_TOUR = [
]}
/>,
],
- ...joyride_config,
+ ...joyride_props,
},
{
target: '[data-category="sell_conditions"]',
@@ -116,7 +258,7 @@ export const BOT_BUILDER_TOUR = [
]}
/>,
],
- ...joyride_config,
+ ...joyride_props,
},
{
target: '.dashboard__toolbox',
@@ -136,7 +278,7 @@ export const BOT_BUILDER_TOUR = [
]}
/>,
],
- ...joyride_config,
+ ...joyride_props,
},
{
target: '.dashboard__toolbox',
@@ -161,7 +303,7 @@ export const BOT_BUILDER_TOUR = [
]}
/>,
],
- ...joyride_config,
+ ...joyride_props,
},
{
target: '[data-category="trade_results"]',
@@ -176,7 +318,7 @@ export const BOT_BUILDER_TOUR = [
]}
/>,
],
- ...joyride_config,
+ ...joyride_props,
},
{
target: 'body',
@@ -193,6 +335,6 @@ export const BOT_BUILDER_TOUR = [
]}
/>,
],
- ...joyride_config,
+ ...joyride_props,
},
];
diff --git a/packages/bot-web-ui/src/components/dashboard/tour-guide.tsx b/packages/bot-web-ui/src/components/dashboard/tour-guide.tsx
new file mode 100644
index 000000000000..1686e01f1ce1
--- /dev/null
+++ b/packages/bot-web-ui/src/components/dashboard/tour-guide.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { Text } from '@deriv/components';
+import RootStore from 'Stores/index';
+import { connect } from 'Stores/connect';
+
+type TTourGuide = {
+ label: string | boolean;
+ content: string[];
+ img?: string;
+ className: string;
+ dashboardTabIndex: number;
+ setActiveTab: (param: number) => void;
+};
+
+const TourGuide = ({ label, content, img, className, dashboardTabIndex, setActiveTab }: TTourGuide) => {
+ React.useEffect(() => {
+ const tour_guide_timer = setTimeout(() => setActiveTab(dashboardTabIndex), 50);
+ return () => {
+ clearTimeout(tour_guide_timer);
+ };
+ }, [dashboardTabIndex]);
+ return (
+
+
+
+ {label}
+
+
+
+ {img && (
+
+
+
+
+ {content}
+
+
+
+ );
+};
+export default connect(({ dashboard }: RootStore) => ({
+ setActiveTab: dashboard.setActiveTab,
+ active_tab: dashboard.active_tab,
+}))(TourGuide);
diff --git a/packages/bot-web-ui/src/components/dashboard/tour-trigger-dialog.tsx b/packages/bot-web-ui/src/components/dashboard/tour-trigger-dialog.tsx
new file mode 100644
index 000000000000..436c60623252
--- /dev/null
+++ b/packages/bot-web-ui/src/components/dashboard/tour-trigger-dialog.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { Dialog, Text } from '@deriv/components';
+import { localize, Localize } from '@deriv/translations';
+import { connect } from 'Stores/connect';
+import RootStore from 'Stores/index';
+
+type TourTriggrerDialog = {
+ setTourActive: (param: boolean) => void;
+ is_tour_dialog_visible: boolean;
+ setTourDialogVisibility: (param: boolean) => void;
+ setOnBoardTourRunState: (param: boolean) => void;
+};
+
+const TourTriggrerDialog = ({
+ is_tour_dialog_visible,
+ setTourDialogVisibility,
+ setOnBoardTourRunState,
+ setTourActive,
+}: TourTriggrerDialog) => {
+ const handleChange = () => {
+ setTourActive(true);
+ setOnBoardTourRunState(true);
+ setTourDialogVisibility(false);
+ };
+ const closTourChange = () => {
+ setTourDialogVisibility(false);
+ setOnBoardTourRunState(false);
+ setTourActive(false);
+ };
+ return (
+
+
+
+ );
+};
+
+export default connect(({ dashboard }: RootStore) => ({
+ setTourActive: dashboard.setTourActive,
+ is_tour_dialog_visible: dashboard.is_tour_dialog_visible,
+ setTourDialogVisibility: dashboard.setTourDialogVisibility,
+ setOnBoardTourRunState: dashboard.setOnBoardTourRunState,
+}))(TourTriggrerDialog);
diff --git a/packages/bot-web-ui/src/components/dashboard/tutorial-tab/dialog.scss b/packages/bot-web-ui/src/components/dashboard/tutorial-tab/dialog.scss
index 6caafe80aedf..2f9ebc156ae6 100644
--- a/packages/bot-web-ui/src/components/dashboard/tutorial-tab/dialog.scss
+++ b/packages/bot-web-ui/src/components/dashboard/tutorial-tab/dialog.scss
@@ -37,3 +37,16 @@
}
}
}
+
+.onboarding-tour-guide {
+ .dc-dialog__content {
+ &__header {
+ text-align: left;
+ margin-bottom: 2.4rem;
+ }
+
+ &__description {
+ text-align: left;
+ }
+ }
+}
diff --git a/packages/bot-web-ui/src/components/dashboard/tutorial-tab/guide-content.tsx b/packages/bot-web-ui/src/components/dashboard/tutorial-tab/guide-content.tsx
index 0a4c21f4553d..9ceefe2100b4 100644
--- a/packages/bot-web-ui/src/components/dashboard/tutorial-tab/guide-content.tsx
+++ b/packages/bot-web-ui/src/components/dashboard/tutorial-tab/guide-content.tsx
@@ -10,7 +10,7 @@ type TGuideContent = {
faq_search_value: string;
is_dialog_open: boolean;
onOkButtonClick: () => void;
- showVideoDialog: (url: string) => void;
+ showVideoDialog: (param: { [key: string]: string }) => void;
guide_list: [];
};
@@ -43,7 +43,12 @@ const GuideContent = ({
width='4rem'
height='4rem'
icon={'IcPlayOutline'}
- onClick={() => showVideoDialog(url)}
+ onClick={() =>
+ showVideoDialog({
+ type: 'url',
+ url,
+ })
+ }
/>