-
-
- {step_index}/6
-
-
- {localize('Exit tour')}
-
-
-
+ return (
+
+
+ {show_actions && (
+
+
+ {step_index}/6
+
+
+
+
+
+ )}
{label}
- {img && (
-
- {has_image_loaded ?
:
}
-
+ {media && (
+
)}
- {content.map(content_text => {
- return (
-
-
- {content_text}
-
-
- );
- })}
+ <>
+ {content.map((content_data, index) => {
+ return has_localize_component ? (
+ content_data
+ ) : (
+
+
+ {content_data}
+
+
+ );
+ })}
+ >
-
-
- );
-});
+
+ );
+ }
+);
export default TourGuide;
diff --git a/packages/bot-web-ui/src/components/dashboard/tour-slider.tsx b/packages/bot-web-ui/src/components/dashboard/tour-slider.tsx
index e0686d4b7bb4..abc7eb722880 100644
--- a/packages/bot-web-ui/src/components/dashboard/tour-slider.tsx
+++ b/packages/bot-web-ui/src/components/dashboard/tour-slider.tsx
@@ -37,7 +37,7 @@ const Accordion = ({ content_data, expanded = false, ...props }: TAccordion) =>
setOpen(!is_open)}>
- {localize(header)}
+ {header}
@@ -50,7 +50,7 @@ const Accordion = ({ content_data, expanded = false, ...props }: TAccordion) =>
})}
>
- {localize(content)}
+ {content}
@@ -64,9 +64,10 @@ const TourSlider = observer(() => {
dashboard;
const { toggleTourLoadModal } = load_modal;
const [step, setStep] = React.useState
(1);
- const [slider_content, setContent] = React.useState('');
- const [slider_header, setheader] = React.useState('');
- const [slider_image, setimg] = React.useState('');
+ const [slider_content, setContent] = React.useState([]);
+ const [slider_header, setHeader] = React.useState('');
+ const [slider_image, setImg] = React.useState('');
+ const [slider_media, setMedia] = React.useState('');
const [step_key, setStepKey] = React.useState(0);
React.useEffect(() => {
@@ -74,9 +75,10 @@ const TourSlider = observer(() => {
Object.values(!has_started_onboarding_tour ? BOT_BUILDER_MOBILE : DBOT_ONBOARDING_MOBILE).forEach(data => {
if (data.key === step) {
setContent(data?.content);
- setheader(data?.header);
- setimg(data?.img);
- setStepKey(data?.step_key);
+ setHeader(data?.header);
+ setImg(data?.img || '');
+ setMedia(data?.media || '');
+ setStepKey(data?.step_key || 0);
}
});
const el_ref = document.querySelector('.toolbar__group-btn svg:nth-child(2)');
@@ -111,6 +113,9 @@ const TourSlider = observer(() => {
const tour_button_text = has_started_onboarding_tour && step_key === 0 ? localize('Start') : bot_tour_text;
+ const onboarding_completed_text =
+ has_started_onboarding_tour && step === 8 ? localize('Got it, thanks!') : tour_button_text;
+
return (
<>
{
weight='less-prominent'
line_height='s'
size='xxs'
- >{`${step_key}/6`}
-
- {localize('Exit Tour')}
-
+ >{`${step_key}/7`}
+
+
+
)}
@@ -153,17 +152,32 @@ const TourSlider = observer(() => {
{localize(slider_header)}
)}
- {has_started_onboarding_tour && slider_image && (
-
-
-
- )}
+ {has_started_onboarding_tour &&
+ // eslint-disable-next-line no-nested-ternary
+ (slider_media ? (
+
+
+
+ ) : slider_image ? (
+
+
+
+ ) : null)}
{has_started_onboarding_tour && slider_content && (
<>
- {slider_content.map(data => {
+ {slider_content?.map((data, index) => {
return (
{
line_height='s'
size='xxs'
>
- {localize(data)}
+ {data}
);
})}
@@ -200,7 +214,7 @@ const TourSlider = observer(() => {
/>
)}
{((has_started_bot_builder_tour && step !== 1) ||
- (has_started_onboarding_tour && step !== 1 && step !== 2)) && (
+ (has_started_onboarding_tour && step !== 1 && step !== 2 && step !== 8)) && (
{
onChange('dec');
@@ -208,7 +222,7 @@ const TourSlider = observer(() => {
label={localize('Previous')}
/>
)}
-
+
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
index 07106ea8bb2b..d20903539ec2 100644
--- a/packages/bot-web-ui/src/components/dashboard/tour-trigger-dialog.tsx
+++ b/packages/bot-web-ui/src/components/dashboard/tour-trigger-dialog.tsx
@@ -37,7 +37,7 @@ const TourTriggrerDialog = observer(() => {
return (