+
-
+
-
+
-
+
diff --git a/src/pages/tutorials/common/search-input/index.tsx b/src/pages/tutorials/common/search-input/index.tsx
index 66ac8d81..63f67f83 100644
--- a/src/pages/tutorials/common/search-input/index.tsx
+++ b/src/pages/tutorials/common/search-input/index.tsx
@@ -4,7 +4,6 @@ import { observer } from 'mobx-react-lite';
import { DEBOUNCE_INTERVAL_TIME } from '@/constants/bot-contents';
import { useStore } from '@/hooks/useStore';
import { localize } from '@/utils/tmp/dummy';
-import { Analytics } from '@deriv-com/analytics';
type TSearchInput = {
faq_value: string;
@@ -23,12 +22,6 @@ const SearchInput = observer(({ faq_value, setFaqSearchContent, prev_active_tuto
value => {
filterTuotrialTab(value);
setActiveTabTutorial(3);
- Analytics.trackEvent('ce_bot_form', {
- action: 'search',
- form_name: 'ce_bot_form',
- subpage_name: 'tutorials',
- search_term: value,
- });
if (value === '') {
setActiveTabTutorial(prev_active_tutorials);
}
diff --git a/src/pages/tutorials/constants.ts b/src/pages/tutorials/constants.ts
index 10c53099..abbe5140 100644
--- a/src/pages/tutorials/constants.ts
+++ b/src/pages/tutorials/constants.ts
@@ -29,11 +29,27 @@ export const guide_content: TGuideContent[] = [
{
id: 1,
type: 'DBotVideo',
- content: localize('Deriv Bot - your automated trading partner'),
- url: 'https://www.youtube.com/embed/QdI5zCkO4Gk',
- src: getImageLocation('video_dbot.webp'),
+ content: localize('An introduction to Deriv Bot'),
+ url: 'https://www.youtube.com/embed/lthEgaIY1uw',
+ src: getImageLocation('intro_to_deriv_bot.png'),
search_id: `${VIDEOS}-0`,
},
+ {
+ id: 2,
+ type: 'DBotVideo',
+ content: localize('How to build a basic trading bot with Deriv Bot'),
+ url: 'https://www.youtube.com/embed/mnpi2g7YakU',
+ src: getImageLocation('build_a_bot.png'),
+ search_id: `${VIDEOS}-1`,
+ },
+ {
+ id: 3,
+ type: 'DBotVideo',
+ content: localize('How to use Martingale strategy on Deriv Bot'),
+ url: 'https://www.youtube.com/embed/FSslvF7P00I',
+ src: getImageLocation('how_to_use_martingale.jpg'),
+ search_id: `${VIDEOS}-2`,
+ },
];
export const faq_content: TFaqContent[] = [
diff --git a/src/pages/tutorials/dbot-tours/common/accordion.tsx b/src/pages/tutorials/dbot-tours/common/accordion.tsx
index 1d04837a..28fa5948 100644
--- a/src/pages/tutorials/dbot-tours/common/accordion.tsx
+++ b/src/pages/tutorials/dbot-tours/common/accordion.tsx
@@ -1,8 +1,8 @@
import React, { useState } from 'react';
import classNames from 'classnames';
+import Text from '@/components/shared_ui/text';
import { useStore } from '@/hooks/useStore';
import { Icon, localize } from '@/utils/tmp/dummy';
-import { Text } from '@deriv-com/ui';
type TContentData = {
header: string;
diff --git a/src/pages/tutorials/faq-content/index.tsx b/src/pages/tutorials/faq-content/index.tsx
index a60f68ad..bee62e64 100644
--- a/src/pages/tutorials/faq-content/index.tsx
+++ b/src/pages/tutorials/faq-content/index.tsx
@@ -1,8 +1,9 @@
import React, { KeyboardEvent } from 'react';
+import Accordion from '@/components/shared_ui/accordion';
+import Text from '@/components/shared_ui/text';
import { DBOT_TABS } from '@/constants/bot-contents';
import { useStore } from '@/hooks/useStore';
import { Localize } from '@/utils/tmp/dummy';
-import { Accordion, Text } from '@deriv-com/ui';
import { TDescription } from '../tutorials.types';
type TFAQContent = {
@@ -22,8 +23,8 @@ const FAQ = ({ type, content = '', src, imageclass, is_mobile }: TDescription) =
return (
{
const FAQContent = ({ faq_list, handleTabChange }: TFAQContent) => {
const { ui } = useStore();
- const { is_mobile } = ui;
+ const { is_desktop } = ui;
const { dashboard } = useStore();
const { faq_title, setFaqTitle } = dashboard;
@@ -102,13 +103,13 @@ const FAQContent = ({ faq_list, handleTabChange }: TFAQContent) => {
className='faq__title'
weight='bold'
key={title}
- size={is_mobile ? 'xs' : 'sm'}
+ size={is_desktop ? 's' : 'xs'}
>
{title}
),
content: description?.map((item, index) => (
-
+
)),
}));
};
@@ -124,7 +125,7 @@ const FAQContent = ({ faq_list, handleTabChange }: TFAQContent) => {
lineHeight='xl'
className='faq__wrapper__header'
weight='bold'
- size={is_mobile ? 'xs' : 'sm'}
+ size={is_desktop ? 's' : 'xs'}
>
diff --git a/src/pages/tutorials/guide-content/guide-content.tsx b/src/pages/tutorials/guide-content/guide-content.tsx
index acc992a0..598a6213 100644
--- a/src/pages/tutorials/guide-content/guide-content.tsx
+++ b/src/pages/tutorials/guide-content/guide-content.tsx
@@ -1,10 +1,11 @@
import React from 'react';
import classNames from 'classnames';
+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 { removeKeyValue } from '@/utils/settings';
import { Icon, Localize, localize } from '@/utils/tmp/dummy';
-import { Dialog, Text } from '@deriv-com/ui';
type TGuideList = {
content?: string;
@@ -24,7 +25,7 @@ type TGuideContent = {
const GuideContent = ({ guide_tab_content, video_tab_content, is_dialog_open }: TGuideContent) => {
const { ui } = useStore();
- const { is_mobile } = ui;
+ const { is_desktop } = ui;
const { dashboard } = useStore();
const {
dialog_options,
@@ -40,13 +41,13 @@ const GuideContent = ({ guide_tab_content, video_tab_content, is_dialog_open }:
if (type === 'OnBoard') {
removeKeyValue('onboard_tour_token');
setActiveTab(DBOT_TABS.DASHBOARD);
- if (is_mobile) setActiveTour('onboarding');
+ if (!is_desktop) setActiveTour('onboarding');
setTourDialogVisibility(true);
} else {
setActiveTab(DBOT_TABS.BOT_BUILDER);
- if (is_mobile) setActiveTour('bot_builder');
+ if (!is_desktop) setActiveTour('bot_builder');
setTourDialogVisibility(true);
- if (is_mobile) setShowMobileTourDialog(true);
+ if (!is_desktop) setShowMobileTourDialog(true);
}
};
@@ -67,8 +68,8 @@ const GuideContent = ({ guide_tab_content, video_tab_content, is_dialog_open }:
align='left'
weight='bold'
color='prominent'
- LineHeight='sm'
- size={is_mobile ? 'xs' : 's'}
+ lineHeight='s'
+ size={is_desktop ? 's' : 'xs'}
>
@@ -94,8 +95,8 @@ const GuideContent = ({ guide_tab_content, video_tab_content, is_dialog_open }:
{content}
@@ -113,8 +114,8 @@ const GuideContent = ({ guide_tab_content, video_tab_content, is_dialog_open }:
align='left'
weight='bold'
color='prominent'
- LineHeight='sm'
- size={is_mobile ? 'xs' : 's'}
+ lineHeight='s'
+ size={is_desktop ? 's' : 'xs'}
>
@@ -137,7 +138,7 @@ const GuideContent = ({ guide_tab_content, video_tab_content, is_dialog_open }:
className='tutorials-wrap__placeholder__button-group--play'
width='4rem'
height='4rem'
- icon={'IcPlayOutline'}
+ icon={'IcPlay'}
onClick={() =>
showVideoDialog({
type: 'url',
@@ -151,8 +152,8 @@ const GuideContent = ({ guide_tab_content, video_tab_content, is_dialog_open }:
{content}
diff --git a/src/pages/tutorials/quick-strategy-content/quick-strategy-guides-details.tsx b/src/pages/tutorials/quick-strategy-content/quick-strategy-guides-details.tsx
index fa16432e..d68d31d8 100644
--- a/src/pages/tutorials/quick-strategy-content/quick-strategy-guides-details.tsx
+++ b/src/pages/tutorials/quick-strategy-content/quick-strategy-guides-details.tsx
@@ -1,9 +1,9 @@
import { KeyboardEvent } from 'react';
import { observer } from 'mobx-react-lite';
+import Text from '@/components/shared_ui/text';
import { isDbotRTL } from '@/external/bot-skeleton/utils/workspace';
import { useStore } from '@/hooks/useStore';
import { Icon, Localize } from '@/utils/tmp/dummy';
-import { Text } from '@deriv-com/ui';
import { STRATEGIES } from '../../bot-builder/quick-strategy/config';
import StrategyTabContent from '../../bot-builder/quick-strategy/form-wrappers/strategy-tab-content';
@@ -22,8 +22,15 @@ type TQuickStrategyGuides = {
const QuickStrategyGuidesDetail = observer(
({ quick_strategy_tab_content, tutorial_selected_strategy, setTutorialSelectedStrategy }: TQuickStrategyGuides) => {
const { ui } = useStore();
- const { is_mobile } = ui;
- const text_size = is_mobile ? 'xs' : 'sm';
+ const { is_desktop } = ui;
+ const text_size = is_desktop ? 's' : 'xs';
+
+ const scrollToTop = () => {
+ const qs_guide = document.querySelector('.tutorials-mobile__qs-guide');
+ if (qs_guide) {
+ qs_guide.scrollTop = 0;
+ }
+ };
return (
<>
@@ -33,7 +40,10 @@ const QuickStrategyGuidesDetail = observer(
setTutorialSelectedStrategy(qs_name)}
+ onClick={() => {
+ setTutorialSelectedStrategy(qs_name);
+ scrollToTop();
+ }}
tabIndex={index}
data-testid={'dt_quick_strategy_guides_details'}
onKeyDown={(e: KeyboardEvent) => {
@@ -48,7 +58,7 @@ const QuickStrategyGuidesDetail = observer(
align='center'
weight='bold'
color='prominent'
- LineHeight='sm'
+ lineHeight='s'
size={text_size}
>
{type}
@@ -61,7 +71,7 @@ const QuickStrategyGuidesDetail = observer(
@@ -85,7 +95,7 @@ const QuickStrategyGuidesDetail = observer(
{
@@ -94,11 +104,11 @@ const QuickStrategyGuidesDetail = observer(
>
'} />
-
+
-
+
diff --git a/src/pages/tutorials/quick-strategy-content/quick-strategy-guides.tsx b/src/pages/tutorials/quick-strategy-content/quick-strategy-guides.tsx
index 52b176c1..6b8676ec 100644
--- a/src/pages/tutorials/quick-strategy-content/quick-strategy-guides.tsx
+++ b/src/pages/tutorials/quick-strategy-content/quick-strategy-guides.tsx
@@ -1,13 +1,13 @@
import React from 'react';
+import Text from '@/components/shared_ui/text';
import { useStore } from '@/hooks/useStore';
import { localize } from '@/utils/tmp/dummy';
-import { Text } from '@deriv-com/ui';
import QuickStrategyGuidesDetail from './quick-strategy-guides-details';
import './index.scss';
const QuickStrategyGuides = () => {
const { ui } = useStore();
- const { is_mobile } = ui;
+ const { is_desktop } = ui;
const { dashboard } = useStore();
const { quick_strategy_tab_content } = dashboard;
const [tutorial_selected_strategy, setTutorialSelectedStrategy] = React.useState('');
@@ -19,8 +19,8 @@ const QuickStrategyGuides = () => {
className='tutorials-quick-strategy__title'
weight='bold'
color='prominent'
- LineHeight='sm'
- size={is_mobile ? 'xs' : 's'}
+ lineHeight='s'
+ size={is_desktop ? 's' : 'xs'}
as='div'
>
{localize('Quick strategy guides')}
diff --git a/src/pages/tutorials/tutorials-tab-desktop.tsx b/src/pages/tutorials/tutorials-tab-desktop.tsx
index 1c2f989e..9fff461a 100644
--- a/src/pages/tutorials/tutorials-tab-desktop.tsx
+++ b/src/pages/tutorials/tutorials-tab-desktop.tsx
@@ -1,9 +1,9 @@
import React from 'react';
import classNames from 'classnames';
import { observer } from 'mobx-react-lite';
+import Tabs from '@/components/shared_ui/tabs';
import { useStore } from '@/hooks/useStore';
import { Icon } from '@/utils/tmp/dummy';
-import { Tabs } from '@deriv-com/ui';
import SearchInput from './common/search-input';
import { TTutorialsTabItem } from './tutorials';
@@ -33,7 +33,7 @@ const TutorialsTabDesktop = observer(({ tutorial_tabs, prev_active_tutorials }:
}, [active_tab_tutorials]);
return (
-
+
(null);
React.useEffect(() => {
if (search) setShowSearchBar(true);
@@ -30,6 +31,12 @@ const TutorialsTabMobile = observer(({ tutorial_tabs, prev_active_tutorials }: T
const onFocusSearch = () => setActiveTabTutorial(3);
+ const scrollToTop = () => {
+ if (scroll_ref.current) {
+ scroll_ref.current.scrollTop = 0;
+ }
+ };
+
const onChangeHandle = React.useCallback(
({ target }: React.ChangeEvent) =>
setActiveTabTutorial(tutorial_tabs.findIndex(i => i.label === target.value)),
@@ -109,9 +116,17 @@ const TutorialsTabMobile = observer(({ tutorial_tabs, prev_active_tutorials }: T
value={selectedTab.label}
label=''
should_show_empty_option={false}
- onChange={onChangeHandle}
+ onChange={e => {
+ onChangeHandle(e);
+ scrollToTop();
+ }}
+ />
+
-
{selectedTab.content}
diff --git a/src/pages/tutorials/tutorials.scss b/src/pages/tutorials/tutorials.scss
index 9f30391d..fafcc76d 100644
--- a/src/pages/tutorials/tutorials.scss
+++ b/src/pages/tutorials/tutorials.scss
@@ -1,10 +1,11 @@
.tutorials-wrap {
- .no-search {
+ %no-search {
display: flex;
justify-content: center;
width: 100%;
word-break: break-all;
}
+
.dc-dialog {
&__dialog {
width: 80vw;
@@ -15,6 +16,7 @@
border-radius: 0;
position: relative;
z-index: 1;
+
@include mobile {
width: 94%;
height: auto;
@@ -26,7 +28,7 @@
&--end {
position: absolute;
top: 0;
- inset-inline-end: 1rem;
+ padding: 0.8rem;
z-index: 90;
}
}
@@ -41,47 +43,59 @@
display: none;
}
}
+
&--placeholder {
width: 28rem;
}
+
&--tour {
cursor: pointer;
}
+
&__group {
margin-bottom: 5.2rem;
+
&__guides {
display: flex;
margin-top: 2.4rem;
+
@include mobile {
display: unset;
}
}
+
&__title {
@include mobile {
margin-bottom: 1.4rem;
}
}
+
&__nosearch {
- @extend .no-search;
+ @extend %no-search;
}
+
&__cards {
display: flex;
text-align: center;
flex-direction: column;
margin-inline-end: 2.4rem;
+
@include mobile {
flex-direction: row;
width: auto;
+
span {
text-align: start;
width: 100%;
}
}
}
+
@include mobile {
flex-direction: column;
margin-bottom: 2.2rem;
}
+
&:last-child {
margin-bottom: 0;
}
@@ -89,32 +103,35 @@
&__placeholder {
@include flex-center;
+
background: var(--checkbox-disabled-grey);
margin-bottom: 0.8rem;
- margin-inline-end: 2.4rem;
height: 16rem;
width: 28rem;
background-size: 100% 100%;
+
&__description {
width: 28rem;
+
@include mobile {
text-align: start;
width: calc(100% - 14.8rem);
}
}
+
@include mobile {
height: 8.7rem;
width: 14.8rem;
- margin: 0;
- margin-inline-end: 0.8rem;
+ margin: 0 0.8rem 0.8rem 0;
}
+
&__tours {
height: 13.5rem;
background-size: contain;
- margin-bottom: 0.8rem;
- margin-inline-end: 0.8rem;
+ margin: 0 0.8rem 0.8rem 0;
width: 21.5rem;
cursor: pointer;
+
@include mobile {
height: 8.7rem;
width: 14.8rem;
@@ -123,19 +140,21 @@
&__button-group {
@include flex-center;
- width: 20rem;
- height: 7rem;
+
+ padding: 1.6rem 3.2rem;
border-radius: 1rem;
cursor: pointer;
- background-color: rgba(0, 0, 0, 0.5);
+ background-color: rgb(0 0 0 / 50%);
+
&--play {
filter: invert(1);
}
+
@include mobile {
- height: 6rem;
- width: 8rem;
+ padding: 0.8rem 1.6rem;
}
}
+
&--disabled {
pointer-events: none;
}
@@ -148,8 +167,9 @@
padding-bottom: 18px;
&__nosearch {
- @extend .no-search;
+ @extend %no-search;
}
+
&__content {
width: 85%;
@@ -157,26 +177,33 @@
width: 100%;
}
}
+
.dc-accordion {
&__item {
border: unset;
border-bottom: 0.1rem solid var(--general-section-1);
+
&:last-child {
margin-bottom: 2rem;
}
+
&-header {
@include flex-center(space-between);
}
+
&-content {
.loss-control {
width: 80%;
+
@include mobile {
width: 100%;
}
}
+
img {
width: 45%;
}
+
@include mobile {
width: 100%;
@@ -187,6 +214,7 @@
}
}
}
+
&__header {
margin: 0 0 1rem 0.5rem;
}
@@ -195,6 +223,7 @@
.tour-dialog {
transition: unset;
+
.dc-dialog__dialog {
transform: unset;
opacity: unset;
@@ -204,6 +233,7 @@
width: 90vw;
padding: 1.6rem;
}
+
@include tablet {
width: 90vw;
padding: 1.6rem;
@@ -245,12 +275,14 @@
.tutorials-wrapper {
width: 100%;
background: var(--general-main-1);
+
.dc-tabs {
&__wrapper {
padding: 1.6rem 0.8rem;
&__group {
@include flex-center;
+
width: 22.5rem;
position: relative;
padding: 1.6rem 0.8rem;
@@ -262,6 +294,7 @@
inset-inline-start: 1.8rem;
z-index: 1;
}
+
.close-icon {
cursor: pointer;
position: absolute;
@@ -290,10 +323,9 @@
@include mobile {
width: 100%;
- margin-inline-start: 17px;
+ margin-inline: 17px 0;
height: 4rem;
padding-inline-start: 13px;
- margin-inline-end: 0;
}
}
}
@@ -304,6 +336,7 @@
height: unset;
}
}
+
&__content {
margin: -6.5rem 2.4rem;
width: 100%;
@@ -313,14 +346,18 @@
.tutorials-wrap {
margin-bottom: 3rem;
}
+
&--no-result {
@include flex-center(flex-start);
+
flex-direction: column;
height: 100vh;
margin: unset;
+
svg {
margin-bottom: 2.4rem;
}
+
&__title,
&__content {
margin-bottom: 0.8rem;
@@ -332,10 +369,12 @@
&--top {
display: flex;
+
@include mobile {
height: calc(100vh - 22rem);
}
}
+
&__list {
width: 22.5rem;
display: flex;
@@ -355,6 +394,7 @@
&:first-child {
margin-top: -7.2rem;
}
+
.tutorials-guide:nth-child(1),
.tutorials-faq:nth-child(2),
.tutorials-qs-guide:nth-child(3) {
@@ -369,10 +409,12 @@
&__item {
width: 100% !important;
+
&--top {
&:first-child {
margin-top: 7.5rem;
}
+
&:nth-last-child(2) {
display: none;
}
@@ -397,30 +439,36 @@
.tutorials-mobile {
padding: 1.6rem;
- overflow-x: hidden;
- overflow-y: auto;
+ overflow: hidden auto;
+
&__select {
height: 4rem;
margin-bottom: 1.5rem;
+
@include flex-center;
+
@include mobile {
.dc-select-native {
position: relative;
margin-inline-end: 17px;
transition: all 0.3s;
}
+
&--show-search {
.dc-select-native {
width: 0;
margin: 0;
visibility: hidden;
}
+
.dc-tabs__wrapper__group__search-input {
width: 100%;
}
+
.arrow-left-bold {
display: block;
}
+
.close-icon {
display: block;
cursor: pointer;
@@ -428,6 +476,7 @@
inset-inline-end: 2.5rem;
z-index: 1;
}
+
.dc-select-native__display,
.dc-select-native__picker,
.search-icon {
@@ -440,10 +489,12 @@
width: 0;
display: none;
}
+
.arrow-left-bold,
.close-icon {
display: none;
}
+
.search-icon {
display: block;
}
@@ -458,6 +509,7 @@
@include mobile {
height: calc(var(--vh) - 280px);
overflow: auto;
+
.tutorials-wrap {
margin-bottom: 2rem;
}
diff --git a/src/pages/tutorials/tutorials.tsx b/src/pages/tutorials/tutorials.tsx
index 05d9037d..3ebdd1cc 100644
--- a/src/pages/tutorials/tutorials.tsx
+++ b/src/pages/tutorials/tutorials.tsx
@@ -20,7 +20,7 @@ export type TTutorialsTabItem = {
const TutorialsTab = observer(({ handleTabChange }: TTutorialsTab) => {
const { ui } = useStore();
- const { is_mobile } = ui;
+ const { is_desktop } = ui;
const { dashboard } = useStore();
const [prev_active_tutorials, setPrevActiveTutorialsTab] = React.useState
(0);
@@ -82,10 +82,10 @@ const TutorialsTab = observer(({ handleTabChange }: TTutorialsTab) => {
},
];
- return is_mobile ? (
-
- ) : (
+ return is_desktop ? (
+ ) : (
+
);
});
diff --git a/src/public-path.ts b/src/public-path.ts
index 49f190e5..93d30252 100644
--- a/src/public-path.ts
+++ b/src/public-path.ts
@@ -13,6 +13,6 @@ export function setBotPublicPath(path: string) {
window.__webpack_public_path__ = path; // eslint-disable-line no-global-assign
}
-export const getImageLocation = (image_name: string) => getUrlBase(`/public/images/common/${image_name}`);
+export const getImageLocation = (image_name: string) => `assets/images/${image_name}`;
setBotPublicPath(getUrlBase('/'));