fix: onboarding and bot builder tour

deriv-com · Jul 24, 2024 · 7e8741a · 7e8741a
1 parent 85ea075
commit 7e8741a
Show file tree

Hide file tree

Showing 25 changed files with 35 additions and 33 deletions.
diff --git a/index.html b/index.html
@@ -41,7 +41,7 @@
         </style>
     </head>
 
-    <body class="body">
+    <body class="body theme--light">
         <div id="modal_root" class="modal-root"></div>
         <div id="root"></div>
     </body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -49,7 +49,7 @@
         "react-content-loader": "^7.0.0",
         "react-div-100vh": "^0.3.8",
         "react-dom": "^18.2.0",
-        "react-joyride": "^2.5.3",
+        "react-joyride": "^2.8.2",
         "react-loadable": "^5.5.0",
         "react-router-dom": "^6.25.1",
         "react-tiny-popover": "^8.0.4",

diff --git a/public/assets/icons/IcCloseCircle.svg b/public/assets/icons/IcCloseCircle.svg
diff --git a/public/assets/videos/bot-builder-tour-step-4.mp4 b/public/assets/videos/bot-builder-tour-step-4.mp4
diff --git a/public/assets/videos/bot-builder-tour-step-5.mp4 b/public/assets/videos/bot-builder-tour-step-5.mp4
diff --git a/public/assets/videos/dbot-mobile-onboarding-step-1.mp4 b/public/assets/videos/dbot-mobile-onboarding-step-1.mp4
diff --git a/public/assets/videos/dbot-mobile-onboarding-step-2.mp4 b/public/assets/videos/dbot-mobile-onboarding-step-2.mp4
diff --git a/public/assets/videos/dbot-mobile-onboarding-step-3.mp4 b/public/assets/videos/dbot-mobile-onboarding-step-3.mp4
diff --git a/public/assets/videos/dbot-mobile-onboarding-step-5.mp4 b/public/assets/videos/dbot-mobile-onboarding-step-5.mp4
diff --git a/public/assets/videos/dbot-mobile-onboarding-step-6.mp4 b/public/assets/videos/dbot-mobile-onboarding-step-6.mp4
diff --git a/public/assets/videos/dbot-onboarding-tour-step-1.mp4 b/public/assets/videos/dbot-onboarding-tour-step-1.mp4
diff --git a/public/assets/videos/dbot-onboarding-tour-step-2.mp4 b/public/assets/videos/dbot-onboarding-tour-step-2.mp4
diff --git a/public/assets/videos/dbot-onboarding-tour-step-3.mp4 b/public/assets/videos/dbot-onboarding-tour-step-3.mp4
diff --git a/public/assets/videos/dbot-onboarding-tour-step-5.mp4 b/public/assets/videos/dbot-onboarding-tour-step-5.mp4
diff --git a/public/assets/videos/dbot-onboarding-tour-step-6.mp4 b/public/assets/videos/dbot-onboarding-tour-step-6.mp4
diff --git a/rsbuild.config.ts b/rsbuild.config.ts
@@ -14,6 +14,7 @@ export default defineConfig({
                     @import "${path.resolve(__dirname, 'src/components/shared/styles/fonts.scss')}";
                     @import "${path.resolve(__dirname, 'src/components/shared/styles/inline-icons.scss')}";
                     @import "${path.resolve(__dirname, 'src/components/shared/styles/devices.scss')}";
+                    @import "${path.resolve(__dirname, 'src/components/shared/styles/themes.scss')}";
                 `,
             },
         }),

diff --git a/src/pages/bot-builder/toolbox/search-box/search-icon.tsx b/src/pages/bot-builder/toolbox/search-box/search-icon.tsx
@@ -10,7 +10,7 @@ type TSearchIcon = {
 const SearchIcon = observer(({ search, is_search_loading, onClick }: TSearchIcon) => {
     if (!search) return <Icon icon='IcSearch' />;
     if (is_search_loading) return <div className='loader' data-testid='loader' />;
-    return <Icon icon='IcCloseCircle' onClick={onClick} color='secondary' />;
+    return <Icon icon='IcDbotClose' onClick={onClick} color='secondary' />;
 });
 
 export default SearchIcon;
diff --git a/src/pages/tutorials/dbot-tours/bot-builder-tour/bot-builder-tour-mobile.tsx b/src/pages/tutorials/dbot-tours/bot-builder-tour/bot-builder-tour-mobile.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 import ProgressBarTracker from '@/components/shared_ui/progress-bar-tracker';
+import Text from '@/components/shared_ui/text';
 import { useStore } from '@/hooks/useStore';
 import { getSetting } from '@/utils/settings';
 import { localize } from '@/utils/tmp/dummy';
-import { Text } from '@deriv-com/ui';
 import TourButton from '../common/tour-button';
 import TourStartDialog from '../common/tour-start-dialog';
 import { BOT_BUILDER_MOBILE } from '../tour-content';
@@ -60,7 +60,7 @@ const BotBuilderTourMobile = observer(() => {
                         </Text>
                     </div>
                     <div className='dbot-slider__content'>
-                        <Text as='span' LineHeight='sm' size='xs'>
+                        <Text as='span' lineHeight='s' size='xs'>
                             {content_data?.content}
                         </Text>
                     </div>

diff --git a/src/pages/tutorials/dbot-tours/common/tour-button.tsx b/src/pages/tutorials/dbot-tours/common/tour-button.tsx
@@ -1,4 +1,4 @@
-import { Text } from '@deriv-com/ui';
+import Text from '@/components/shared_ui/text';
 
 type TTourButton = {
     type?: string;
@@ -10,7 +10,7 @@ const TourButton = ({ label, type = 'default', ...props }: TTourButton) => {
     if (!label) return null;
     return (
         <button className={type} {...props}>
-            <Text color='prominent' align='center' weight='bold' as='span' LineHeight='sm' size='xs'>
+            <Text color='prominent' align='center' weight='bold' as='span' lineHeight='s' size='xs'>
                 {label}
             </Text>
         </button>

diff --git a/src/pages/tutorials/dbot-tours/common/tour-end-dialog.tsx b/src/pages/tutorials/dbot-tours/common/tour-end-dialog.tsx
@@ -1,7 +1,8 @@
 import { observer } from 'mobx-react-lite';
+import Dialog from '@/components/shared_ui/dialog';
+import Text from '@/components/shared_ui/text';
 import { useStore } from '@/hooks/useStore';
 import { Localize, localize } from '@/utils/tmp/dummy';
-import { Dialog, Text } from '@deriv-com/ui';
 
 const TourEndDialog = observer(() => {
     const { ui } = useStore();

diff --git a/src/pages/tutorials/dbot-tours/common/tour-start-dialog.tsx b/src/pages/tutorials/dbot-tours/common/tour-start-dialog.tsx
@@ -1,8 +1,9 @@
 import { observer } from 'mobx-react-lite';
+import Dialog from '@/components/shared_ui/dialog';
+import Text from '@/components/shared_ui/text';
 import { DBOT_TABS } from '@/constants/bot-contents';
 import { useStore } from '@/hooks/useStore';
 import { Localize, localize } from '@/utils/tmp/dummy';
-import { Dialog, Text } from '@deriv-com/ui';
 import {
     getBotBuilderTourHeader,
     getTourDialogAction,

diff --git a/src/pages/tutorials/dbot-tours/common/tour-steps.tsx b/src/pages/tutorials/dbot-tours/common/tour-steps.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
+import Text from '@/components/shared_ui/text';
 import { getUUID } from '@/external/bot-skeleton/services/tradeEngine/utils/helpers';
-import { Text } from '@deriv-com/ui';
 
 type TTourSteps = {
     content: string[] | React.ReactElement[];
@@ -19,14 +19,14 @@ const TourSteps = observer(
                 <div className='onboard'>
                     {show_actions && (
                         <div className='onboard__header'>
-                            <Text color='less-prominent' LineHeight='lg'>
+                            <Text color='less-prominent' lineHeight='l'>
                                 {step_index}/6
                             </Text>
                         </div>
                     )}
                     <div className='onboard__steps'>
                         <div className='onboard__label'>
-                            <Text as='p' LineHeight='lg' weight='bold'>
+                            <Text as='p' lineHeight='l' weight='bold'>
                                 {label}
                             </Text>
                         </div>
@@ -52,7 +52,7 @@ const TourSteps = observer(
                                         content_data
                                     ) : (
                                         <div className='onboard__content__block' key={`onboard--${getUUID()}`}>
-                                            <Text align='left' as='p' size='xs' LineHeight='lg'>
+                                            <Text align='left' as='p' size='xs' lineHeight='l'>
                                                 {content_data}
                                             </Text>
                                         </div>

diff --git a/src/pages/tutorials/dbot-tours/onboarding-tour/onboarding-tour-mobile.tsx b/src/pages/tutorials/dbot-tours/onboarding-tour/onboarding-tour-mobile.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import ProgressBarTracker from '@/components/shared_ui/progress-bar-tracker';
+import Text from '@/components/shared_ui/text';
 import { useStore } from '@/hooks/useStore';
 import { getSetting } from '@/utils/settings';
 import { Icon, localize } from '@/utils/tmp/dummy';
-import { Text } from '@deriv-com/ui';
 import TourButton from '../common/tour-button';
 import { DBOT_ONBOARDING_MOBILE, TMobileTourConfig } from '../tour-content';
 
@@ -63,7 +63,7 @@ const OnboardingTourMobile = observer(() => {
                     <Text
                         color='less-prominent'
                         weight='less-prominent'
-                        LineHeight='sm'
+                        lineHeight='s'
                         size='xxs'
                         data-testid='dbot-onboard-slider__navbar'
                     >{`${tour_step_key - 1}/7`}</Text>
@@ -84,7 +84,7 @@ const OnboardingTourMobile = observer(() => {
                     align='center'
                     className='dbot-slider__title'
                     as='span'
-                    LineHeight='sm'
+                    lineHeight='s'
                     size='xs'
                 >
                     {localize(header)}
@@ -120,7 +120,7 @@ const OnboardingTourMobile = observer(() => {
                                 color='prominent'
                                 className='dbot-slider__content'
                                 as='div'
-                                LineHeight='sm'
+                                lineHeight='s'
                                 size='xxs'
                             >
                                 {data}

diff --git a/src/pages/tutorials/dbot-tours/tour-content.tsx b/src/pages/tutorials/dbot-tours/tour-content.tsx
@@ -1,8 +1,8 @@
-import { getImageLocation, getUrlBase } from '../../../public-path';
+import { getImageLocation } from '../../../public-path';
 import React from 'react';
+import Text from '@/components/shared_ui/text';
 import { isDbotRTL } from '@/external/bot-skeleton/utils/workspace';
 import { Icon, Localize, localize } from '@/utils/tmp/dummy';
-import { Text } from '@deriv-com/ui';
 import TourSteps from './common/tour-steps';
 
 type TJoyrideConfig = Record<
@@ -34,7 +34,7 @@ export const DBOT_ONBOARDING = [
                         'We also provide a guide on the Tutorial tab to show you how you can build and execute a simple strategy.'
                     ),
                 ]}
-                media={getUrlBase('/public/videos/dbot-onboarding-tour-step-1.mp4')}
+                media={'/assets/videos/dbot-onboarding-tour-step-1.mp4'}
                 step_index={1}
             />
         ),
@@ -47,7 +47,7 @@ export const DBOT_ONBOARDING = [
             <TourSteps
                 label={localize('Monitor the market')}
                 content={[localize('View the market price of your favourite assets.')]}
-                media={'/public/videos/dbot-onboarding-tour-step-2.mp4'}
+                media={'/assets/videos/dbot-onboarding-tour-step-2.mp4'}
                 step_index={2}
             />
         ),
@@ -60,7 +60,7 @@ export const DBOT_ONBOARDING = [
             <TourSteps
                 label={localize('Learn more with our tutorials')}
                 content={[localize('Explore the video guides and FAQs to build your bot in the tutorials tab.')]}
-                media={'/public/videos/dbot-onboarding-tour-step-3.mp4'}
+                media={'/assets/videos/dbot-onboarding-tour-step-3.mp4'}
                 step_index={3}
             />
         ),
@@ -86,7 +86,7 @@ export const DBOT_ONBOARDING = [
             <TourSteps
                 label={localize('Check your bot’s performance')}
                 content={[localize('See how your bot is doing in real-time.')]}
-                media={'/public/videos/dbot-onboarding-tour-step-5.mp4'}
+                media={'/assets/videos/dbot-onboarding-tour-step-5.mp4'}
                 step_index={5}
             />
         ),
@@ -106,7 +106,7 @@ export const DBOT_ONBOARDING = [
                         components={[<strong key={0} />]}
                     />,
                 ]}
-                media={'/public/videos/dbot-onboarding-tour-step-6.mp4'}
+                media={'/assets/videos/dbot-onboarding-tour-step-6.mp4'}
                 step_index={6}
             />
         ),
@@ -293,7 +293,7 @@ const Step4 = ({ show_label = false }) => (
         </div>
         <div>
             <video autoPlay loop controls playsInline preload='auto' disablePictureInPicture controlsList='nodownload'>
-                <source src={'/public/videos/bot-builder-tour-step-4.mp4'} type='video/mp4' />
+                <source src={'/assets/videos/bot-builder-tour-step-4.mp4'} type='video/mp4' />
             </video>
         </div>
     </div>
@@ -343,7 +343,7 @@ const Step5 = ({ show_label = false }) => (
         </div>
         <div>
             <video autoPlay loop controls playsInline preload='auto' disablePictureInPicture controlsList='nodownload'>
-                <source src={'/public/videos/bot-builder-tour-step-5.mp4'} type='video/mp4' />
+                <source src={'/assets/videos/bot-builder-tour-step-5.mp4'} type='video/mp4' />
             </video>
         </div>
     </div>
@@ -472,15 +472,15 @@ export const DBOT_ONBOARDING_MOBILE: TMobileTourConfig[] = [
                 i18n_default_text='Import your bot or tap Quick Strategies to choose from the ready-to-use bot templates.'
             />,
         ],
-        media: '/public/videos/dbot-mobile-onboarding-step-1.mp4',
+        media: '/assets/videos/dbot-mobile-onboarding-step-1.mp4',
         tour_step_key: 2,
     },
     {
         header: localize('Monitor the market'),
         content: [
             <Localize key='monitor-the-market' i18n_default_text='View the market price of your favourite assets.' />,
         ],
-        media: '/public/videos/dbot-mobile-onboarding-step-2.mp4',
+        media: '/assets/videos/dbot-mobile-onboarding-step-2.mp4',
         tour_step_key: 3,
     },
     {
@@ -491,7 +491,7 @@ export const DBOT_ONBOARDING_MOBILE: TMobileTourConfig[] = [
                 i18n_default_text='Explore the video guides and FAQs to build your bot in the tutorials tab.'
             />,
         ],
-        media: '/public/videos/dbot-mobile-onboarding-step-3.mp4',
+        media: '/assets/videos/dbot-mobile-onboarding-step-3.mp4',
         tour_step_key: 4,
     },
     {
@@ -507,15 +507,15 @@ export const DBOT_ONBOARDING_MOBILE: TMobileTourConfig[] = [
     },
     {
         header: localize('Check your bot’s performance'),
-        media: '/public/videos/dbot-mobile-onboarding-step-5.mp4',
+        media: '/assets/videos/dbot-mobile-onboarding-step-5.mp4',
         content: [
             <Localize key='check-your-bots-performance' i18n_default_text='See how your bot is doing in real-time.' />,
         ],
         tour_step_key: 6,
     },
     {
         header: localize('Run your bot'),
-        media: '/public/videos/dbot-mobile-onboarding-step-6.mp4',
+        media: '/assets/videos/dbot-mobile-onboarding-step-6.mp4',
         content: [
             <Localize
                 key='run-your-bot'