{
+ onClick={e => {
+ e.stopPropagation();
viewRecentStrategy(item.type);
}}
>
@@ -155,7 +175,8 @@ const RecentWorkspace = observer(({ workspace, index }: TRecentWorkspace) => {
{
+ onClick={e => {
+ e.stopPropagation();
viewRecentStrategy(item.type);
}}
>
diff --git a/packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/save-modal.tsx b/packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/save-modal.tsx
index ea89a0d7e85a..1b4ea6df2627 100644
--- a/packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/save-modal.tsx
+++ b/packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/save-modal.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
import classNames from 'classnames';
import { Field, Form, Formik } from 'formik';
import { config, save_types } from '@deriv/bot-skeleton';
@@ -165,22 +165,31 @@ const SaveModalForm = ({
);
const SaveModal = observer(() => {
- const { save_modal, google_drive } = useDBotStore();
+ const { save_modal, google_drive, dashboard, load_modal } = useDBotStore();
const { ui } = useStore();
-
+ const { dashboard_strategies } = load_modal;
const {
button_status,
+ bot_name,
is_save_modal_open,
onConfirmSave,
onDriveConnect,
toggleSaveModal,
+ updateBotName,
validateBotName,
- bot_name,
} = save_modal;
const { is_authorised } = google_drive;
const { is_onscreen_keyboard_active, setCurrentFocus } = ui;
+ const { active_tab } = dashboard;
const is_mobile = isMobile();
+
+ useEffect(() => {
+ if (active_tab === 1) {
+ updateBotName(dashboard_strategies?.[0]?.name ?? '');
+ }
+ }, [active_tab, dashboard_strategies, updateBotName]);
+
return is_mobile ? (
{
const { dashboard, load_modal, run_panel, quick_strategy } = useDBotStore();
const {
active_tab,
- has_file_loaded,
has_tour_started,
setTourActive,
has_started_onboarding_tour,
@@ -42,12 +42,12 @@ const Dashboard = observer(() => {
setActiveTab,
setBotBuilderTokenCheck,
setOnBoardingTokenCheck,
+ onCloseTour,
} = dashboard;
- const { onEntered } = load_modal;
+ const { onEntered, dashboard_strategies } = load_modal;
const { is_dialog_open, is_drawer_open, dialog_options, onCancelButtonClick, onCloseDialog, onOkButtonClick } =
run_panel;
const { is_strategy_modal_open } = quick_strategy;
-
const { DASHBOARD, BOT_BUILDER, CHART, TUTORIAL } = DBOT_TABS;
const is_tour_complete = React.useRef(true);
let bot_tour_token: string | number = '';
@@ -59,15 +59,15 @@ const Dashboard = observer(() => {
const { ui } = useStore();
const { url_hashed_values } = ui;
- let tab_value = active_tab;
+ let tab_value: number | string = 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;
+ if (isNaN(Number(tab_value)) || isNaN(tab)) return active_tab;
+ if (Number(tab_value) > 4 || tab > 4) return active_tab;
return tab_value;
};
const active_hash_tab = GetHashedValue(active_tab);
@@ -106,7 +106,7 @@ const Dashboard = observer(() => {
React.useEffect(() => {
if (active_tab === BOT_BUILDER) {
if (is_drawer_open) {
- initTrashCan(400);
+ initTrashCan(400, -748);
} else {
initTrashCan(20);
}
@@ -114,9 +114,6 @@ const Dashboard = observer(() => {
window.dispatchEvent(new Event('resize')); // make the trash can work again after resize
}, 500);
}
- if (active_tab === DASHBOARD && has_file_loaded) {
- onEntered();
- }
if (active_tab === DASHBOARD) {
setTourType('onboard_tour');
onboard_tour_token = getTourSettings('token');
@@ -135,10 +132,31 @@ const Dashboard = observer(() => {
setTourStatus(tour_status);
}, [active_tab, is_drawer_open, has_started_onboarding_tour, tour_status_ended, is_tour_dialog_visible]);
+ useEffect(() => {
+ let timer: ReturnType;
+ if (dashboard_strategies.length > 0) {
+ // Needed to pass this to the Callback Queue as on tab changes
+ // document title getting override by 'Bot | Deriv' only
+ timer = setTimeout(() => {
+ updateWorkspaceName();
+ });
+ }
+ return () => {
+ if (timer) clearTimeout(timer);
+ };
+ }, [dashboard_strategies, active_tab]);
+
const botStorageSetting = () => {
tour_status = getTourSettings('bot_builder_status');
- if (tour_status_ended.key === 'finished' && !is_mobile) {
+ const joyride_status_finished = tour_status_ended.key === 'finished';
+ if (joyride_status_finished && !is_mobile) {
+ if (tour_type.key === 'onboard_tour') {
+ onCloseTour();
+ tour_status_ended.key = '';
+ return joyride_status_finished ?? null;
+ }
setTourDialogVisibility(true);
+
setHasTourEnded(true);
is_tour_complete.current = false;
window.removeEventListener('storage', botStorageSetting);
@@ -148,6 +166,7 @@ const Dashboard = observer(() => {
if (active_tab === 1 && !storage.bot_builder_token && !has_started_onboarding_tour) {
setTourSettings(new Date().getTime(), `${tour_type.key}_token`);
}
+ return botStorageSetting;
};
if (!bot_tour_token && !is_mobile && !has_started_onboarding_tour) {
window.addEventListener('storage', botStorageSetting);
diff --git a/packages/bot-web-ui/src/components/dashboard/hooks/useComponentVisibility.tsx b/packages/bot-web-ui/src/components/dashboard/hooks/useComponentVisibility.tsx
index 9e0589fa5c5f..cb02b40c99db 100644
--- a/packages/bot-web-ui/src/components/dashboard/hooks/useComponentVisibility.tsx
+++ b/packages/bot-web-ui/src/components/dashboard/hooks/useComponentVisibility.tsx
@@ -1,10 +1,6 @@
import React from 'react';
-type TComponentVisibility = {
- ref?: React.RefObject;
-};
-
-export const useComponentVisibility = (ref: TComponentVisibility) => {
+export const useComponentVisibility = (ref: React.RefObject) => {
const [is_dropdown_visible, setDropdownVisibility] = React.useState(false);
const handleHideDropdown = (event: KeyboardEvent) => {
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 113eabcf2779..17b4a28a08a7 100644
--- a/packages/bot-web-ui/src/components/dashboard/joyride-config.tsx
+++ b/packages/bot-web-ui/src/components/dashboard/joyride-config.tsx
@@ -2,6 +2,7 @@ import { getImageLocation } from '../../public-path';
import React from 'react';
import { CallBackProps } from 'react-joyride';
import { Icon, Text } from '@deriv/components';
+import { getUrlBase } from '@deriv/shared';
import { Localize, localize } from '@deriv/translations';
import { getSetting, storeSetting } from '../../utils/settings';
import TourGuide from './tour-guide';
@@ -11,12 +12,6 @@ type TJoyrideConfig = Record<
boolean
>;
-type TStep = {
- label?: string;
- content: Array;
- type?: 'list' | 'text';
-};
-
type TTourStatus = {
key: string;
toggle: string;
@@ -39,17 +34,6 @@ export const getTourSettings = (type: string) => {
return getSetting(`${tour_type.key}_status`);
};
-export const Step = ({ label, content }: TStep) => {
- return (
-
-
- {label}
-
- {content.map(item => item)}
-
- );
-};
-
export const tour_type: TTourType = {
key: 'onboard_tour',
};
@@ -66,6 +50,7 @@ export const tour_status_ended: TTourStatus = {
let tour: { [key: string]: string } = {};
let current_target: number | undefined;
+
export const handleJoyrideCallback = (data: CallBackProps) => {
const { action, index, status } = data;
if (status === 'finished') {
@@ -102,14 +87,13 @@ export const DBOT_ONBOARDING = [
label={localize('Build from scratch')}
content={[
localize(
- 'Create your bot easily using our drag-and-drop blocks to match your desired trading strategy, or choose from our pre-made Quick Strategies.'
+ 'Create your bot using our drag-and-drop blocks or click Quick Strategy to choose from the ready-to-use bot templates.'
),
localize(
- 'We also provide a tutorial on this tab to show you how you can build and execute a simple strategy.'
+ 'We also provide a guide on the Tutorial tab to show you how you can build and execute a simple strategy.'
),
]}
- img={getImageLocation('dbot-onboarding-tour-step-1.gif')}
- dashboard_tab_index={0}
+ media={getUrlBase('/public/videos/dbot-onboarding-tour-step-1.mp4')}
step_index={1}
/>
),
@@ -122,8 +106,7 @@ export const DBOT_ONBOARDING = [
),
@@ -134,10 +117,9 @@ export const DBOT_ONBOARDING = [
target: '#id-tutorials',
content: (
),
@@ -148,9 +130,8 @@ export const DBOT_ONBOARDING = [
target: '#tab__dashboard__table__tiles',
content: (
),
@@ -162,10 +143,9 @@ export const DBOT_ONBOARDING = [
target: '.dc-drawer__container',
content: (
),
@@ -177,16 +157,41 @@ export const DBOT_ONBOARDING = [
target: '.animation__wrapper',
content: (
]}
+ />,
+ ]}
+ media={getUrlBase('/public/videos/dbot-onboarding-tour-step-6.mp4')}
step_index={6}
/>
),
...joyride_props,
disableOverlay: false,
},
+ {
+ target: '#id-tutorials',
+ content: (
+
+
+ ,
+ ]}
+ step_index={7}
+ show_actions={false}
+ has_localize_component
+ />
+ ),
+ locale: { last: localize('Got it, thanks!') },
+ ...joyride_props,
+ hideBackButton: true,
+ disableOverlay: false,
+ },
];
const Step1 = ({ show_label = false }) => (
@@ -346,7 +351,9 @@ const Step4 = ({ show_label = false }) => (