[BOT] Farabi/bot-1244/fix--dbot-ui-bugs

packages/bot-web-ui/src/constants/quick-strategies/martingale.ts

@@ -128,7 +128,7 @@ export const MARTINGALE: TDescriptionItem[] = [
         dark_src: getImageLocation('martingale_formula_dark_1.svg'),
         alt: localize('Martingale formula 1'),
         className: 'formula',
-        styles: { height: '7.5rem' },
+        styles: { height: '6.5rem' },
     },
     {
         type: 'text',
@@ -156,7 +156,7 @@ export const MARTINGALE: TDescriptionItem[] = [
         dark_src: getImageLocation('martingale_formula_dark_2.svg'),
         alt: localize('Martingale formula 2'),
         className: 'formula',
-        styles: { height: '7.5rem' },
+        styles: { height: '6.5rem' },
     },
     {
         type: 'text',

packages/bot-web-ui/src/pages/bot-builder/quick-strategy/quick-strategy.scss

@@ -643,7 +643,7 @@
 
             &.formula {
                 width: unset;
-                margin: 1rem 0.5rem;
+                margin: 1.5rem 0.5rem;
             }
         }
     }

packages/bot-web-ui/src/pages/tutorials/constants.ts

@@ -2,22 +2,26 @@ import { getImageLocation } from '../../public-path';
 import { localize } from '@deriv/translations';
 import { TFaqContent, TGuideContent, TQuickStrategyContent, TUserGuideContent } from './tutorials.types';
 
+export const USER_GUIDE = 'user guide';
+export const VIDEOS = 'videos on deriv bot';
+export const QUICK_STRATEGY_GUIDES = 'quick strategy guides';
+
 export const user_guide_content: TUserGuideContent[] = [
     {
         id: 1,
         type: 'Tour',
         subtype: 'OnBoard',
         content: localize('Get started on Deriv Bot'),
         src: getImageLocation('dbot-onboard-tour.png'),
-        search_id: 'ugc-0',
+        search_id: `${USER_GUIDE}-0`,
     },
     {
         id: 2,
         type: 'Tour',
         subtype: 'BotBuilder',
         content: localize('Let’s build a bot!'),
         src: getImageLocation('bot-builder-tour.png'),
-        search_id: 'ugc-1',
+        search_id: `${USER_GUIDE}-1`,
     },
 ];
 
@@ -28,7 +32,7 @@ export const guide_content: TGuideContent[] = [
         content: localize('Deriv Bot - your automated trading partner'),
         url: 'https://www.youtube.com/embed/QdI5zCkO4Gk',
         src: getImageLocation('video_dbot.webp'),
-        search_id: 'gc-0',
+        search_id: `${VIDEOS}-0`,
     },
 ];
 
@@ -434,7 +438,7 @@ export const quick_strategy_content: TQuickStrategyContent[] = [
             localize('Exploring the Martingale strategy in Deriv Bot'),
             localize('An example of Martingale strategy'),
         ],
-        search_id: 'qs-0',
+        search_id: `${QUICK_STRATEGY_GUIDES}-0`,
     },
     {
         qs_name: 'D_ALEMBERT',
@@ -443,7 +447,7 @@ export const quick_strategy_content: TQuickStrategyContent[] = [
             localize('Exploring the D’Alembert strategy in Deriv Bot'),
             localize('An example of D’Alembert strategy'),
         ],
-        search_id: 'qs-1',
+        search_id: `${QUICK_STRATEGY_GUIDES}-1`,
     },
     {
         qs_name: 'OSCARS_GRIND',
@@ -452,7 +456,7 @@ export const quick_strategy_content: TQuickStrategyContent[] = [
             localize('Exploring the Oscar’s Grind strategy in Deriv Bot'),
             localize('An example of Oscar’s Grind strategy'),
         ],
-        search_id: 'qs-2',
+        search_id: `${QUICK_STRATEGY_GUIDES}-2`,
     },
     {
         qs_name: 'REVERSE_MARTINGALE',
@@ -461,7 +465,7 @@ export const quick_strategy_content: TQuickStrategyContent[] = [
             localize('Exploring the Reverse Martingale strategy in Deriv Bot'),
             localize('An example of Reverse Martingale strategy'),
         ],
-        search_id: 'qs-3',
+        search_id: `${QUICK_STRATEGY_GUIDES}-3`,
     },
     {
         qs_name: 'REVERSE_D_ALEMBERT',
@@ -470,12 +474,12 @@ export const quick_strategy_content: TQuickStrategyContent[] = [
             localize('Exploring the Reverse D’Alembert strategy in Deriv Bot'),
             localize('An example of Reverse D’Alembert strategy'),
         ],
-        search_id: 'qs-4',
+        search_id: `${QUICK_STRATEGY_GUIDES}-4`,
     },
     {
         qs_name: 'STRATEGY_1_3_2_6',
         type: localize('About 1-3-2-6'),
         content: [localize('Exploring the 1-3-2-6 strategy in Deriv Bot'), localize('An example of 1-3-2-6 strategy')],
-        search_id: 'qs-5',
+        search_id: `${QUICK_STRATEGY_GUIDES}-5`,
     },
 ];

packages/bot-web-ui/src/pages/tutorials/faq-content/index.tsx

@@ -2,8 +2,7 @@ import React, { KeyboardEvent } from 'react';
 import { Accordion, Text } from '@deriv/components';
 import { useStore } from '@deriv/stores';
 import { Localize } from '@deriv/translations';
-import { useDBotStore } from 'Stores/useDBotStore';
-import { TDescription } from '../constants';
+import { TDescription } from '../tutorials.types';
 
 type TFAQContent = {
     faq_list: TFAQList[];
@@ -41,8 +40,6 @@ const scrollToElement = (wrapper_element: HTMLElement, offset: number) => {
 
 const FAQContent = ({ faq_list }: TFAQContent) => {
     const { ui } = useStore();
-    const { dashboard } = useDBotStore();
-    const { active_tab_tutorials } = dashboard;
     const { is_mobile } = ui;
 
     const faq_wrapper_element = React.useRef<HTMLDivElement>(null);
@@ -99,11 +96,15 @@ const FAQContent = ({ faq_list }: TFAQContent) => {
                 <div className='faq__wrapper' ref={faq_wrapper_element}>
                     {faq_list?.length > 0 && (
                         <>
-                            {active_tab_tutorials === 2 && (
-                                <Text as='p' line_height='xl' className='faq__wrapper__header' weight='bold'>
-                                    <Localize i18n_default_text='FAQ' />
-                                </Text>
-                            )}
+                            <Text
+                                as='p'
+                                line_height='xl'
+                                className='faq__wrapper__header'
+                                weight='bold'
+                                size={is_mobile ? 'xs' : 's'}
+                            >
+                                <Localize i18n_default_text='FAQ' />
+                            </Text>
                             <div
                                 data-testid='id-accordion-test'
                                 onClick={handleAccordionClick}

packages/bot-web-ui/src/pages/tutorials/guide-content/index.tsx

@@ -69,7 +69,7 @@ const GuideContent = ({ guide_tab_content, video_tab_content, is_dialog_open }:
                                     weight='bold'
                                     color='prominent'
                                     line_height='s'
-                                    size={is_mobile ? 'xxs' : 's'}
+                                    size={is_mobile ? 'xs' : 's'}
                                 >
                                     <Localize i18n_default_text='Step-by-step guides' />
                                 </Text>
@@ -96,7 +96,7 @@ const GuideContent = ({ guide_tab_content, video_tab_content, is_dialog_open }:
                                                 align='center'
                                                 color='prominent'
                                                 line_height='s'
-                                                size={is_mobile ? 'xxs' : 's'}
+                                                size={is_mobile ? 'xs' : 's'}
                                             >
                                                 {content}
                                             </Text>
@@ -115,7 +115,7 @@ const GuideContent = ({ guide_tab_content, video_tab_content, is_dialog_open }:
                                     weight='bold'
                                     color='prominent'
                                     line_height='s'
-                                    size={is_mobile ? 'xxs' : 's'}
+                                    size={is_mobile ? 'xs' : 's'}
                                 >
                                     <Localize i18n_default_text='Videos on Deriv Bot' />
                                 </Text>
@@ -153,7 +153,7 @@ const GuideContent = ({ guide_tab_content, video_tab_content, is_dialog_open }:
                                                     align='left'
                                                     color='prominent'
                                                     line_height='s'
-                                                    size={is_mobile ? 'xxs' : 's'}
+                                                    size={is_mobile ? 'xs' : 's'}
                                                 >
                                                     {content}
                                                 </Text>

packages/bot-web-ui/src/pages/tutorials/quick-strategy-content/__tests__/quick-strategy-guide.spec.tsx

@@ -47,13 +47,13 @@ describe('<QuickStrategyGuides />', () => {
         expect(description).toHaveStyle('--text-size: var(--text-size-s);');
     });
 
-    it('should render the component with xxs font when on mobile', () => {
+    it('should render the component with xs font when on mobile', () => {
         mock_store.ui.is_mobile = true;
         render(<QuickStrategyGuides />, {
             wrapper,
         });
 
         const title = screen.getByText('Quick strategy guides');
-        expect(title).toHaveStyle('--text-size: var(--text-size-xxs);');
+        expect(title).toHaveStyle('--text-size: var(--text-size-xs);');
     });
 });

packages/bot-web-ui/src/pages/tutorials/quick-strategy-content/index.scss

@@ -88,7 +88,7 @@
 
             &.formula {
                 width: unset;
-                margin: 1rem 0.5rem;
+                margin: 1.5rem 0.5rem;
                 img {
                     height: 100%;
                     width: auto;

packages/bot-web-ui/src/pages/tutorials/quick-strategy-content/quick-strategy-guides-details.tsx

@@ -21,7 +21,7 @@ const QuickStrategyGuidesDetail = observer(
     ({ quick_strategy_tab_content, tutorial_selected_strategy, setTutorialSelectedStrategy }: TQuickStrategyGuides) => {
         const { ui } = useStore();
         const { is_mobile } = ui;
-        const text_size = is_mobile ? 'xxs' : 's';
+        const text_size = is_mobile ? 'xs' : 's';
 
         return (
             <>

packages/bot-web-ui/src/pages/tutorials/quick-strategy-content/quick-strategy-guides.tsx

@@ -21,7 +21,7 @@ const QuickStrategyGuides = () => {
                     weight='bold'
                     color='prominent'
                     line_height='s'
-                    size={is_mobile ? 'xxs' : 's'}
+                    size={is_mobile ? 'xs' : 's'}
                     as='div'
                 >
                     {localize('Quick strategy guides')}

packages/bot-web-ui/src/pages/tutorials/tutorials.scss

@@ -356,6 +356,12 @@
                         padding: 0 0.8rem;
                         height: 100vh;
 
+                        li {
+                            white-space: unset;
+                            text-align: left;
+                            line-height: normal;
+                        }
+
                         &:first-child {
                             margin-top: -7.2rem;
                         }

packages/bot-web-ui/src/pages/tutorials/tutorials.types.ts

@@ -10,6 +10,7 @@ export type TQuickStrategyContent = {
     qs_name: string;
     type: string;
     content: string[];
+    search_id: string;
 };
 
 export type TContent = {

packages/bot-web-ui/src/stores/dashboard-store.ts

@@ -4,7 +4,14 @@ import { TStores } from '@deriv/stores/types';
 import { clearInjectionDiv } from 'Constants/load-modal';
 import * as strategy_description from '../constants/quick-strategies';
 import { TDescriptionItem } from '../pages/bot-builder/quick-strategy/types';
-import { faq_content, guide_content, quick_strategy_content, user_guide_content } from '../pages/tutorials/constants';
+import {
+    faq_content,
+    guide_content,
+    quick_strategy_content,
+    USER_GUIDE,
+    user_guide_content,
+    VIDEOS,
+} from '../pages/tutorials/constants';
 import { setTourSettings, tour_type, TTourType } from '../pages/tutorials/dbot-tours/utils';
 import {
     TFaqContent,
@@ -234,10 +241,10 @@ export default class DashboardStore implements IDashboardStore {
         const filtered_tutorial_content = foundItems.map(item => {
             const identifier = item.split('#')[0];
             const index: string = identifier.split('-')[1];
-            if (identifier.includes('ugc')) {
+            if (identifier.includes(USER_GUIDE)) {
                 filtered_user_guide.push(user_guide_content[Number(index)]);
                 return user_guide_content[Number(index)];
-            } else if (identifier.includes('gc')) {
+            } else if (identifier.includes(VIDEOS)) {
                 filter_video_guide.push(guide_content[Number(index)]);
                 return guide_content[Number(index)];
             } else if (identifier.includes('faq')) {

packages/bot-web-ui/src/stores/load-modal-store.ts

@@ -447,6 +447,7 @@ export default class LoadModalStore implements ILoadModalStore {
     toggleLoadModal = (): void => {
         this.is_load_modal_open = !this.is_load_modal_open;
         if (this.selected_strategy_id) this.previewRecentStrategy(this.selected_strategy_id);
+        this.setLoadedLocalFile(null);
     };
 
     toggleTourLoadModal = (toggle = !this.is_load_modal_open) => {