implementation of guide tab in tutorials

packages/bot-web-ui/package.json

@@ -77,6 +77,7 @@
         "formik": "^2.1.4",
         "gh-pages": "^2.1.1",
         "immutable": "^3.8.2",
+        "lodash.debounce": "^4.0.8",
         "lz-string": "^1.4.4",
         "mobx": "^5.15.7",
         "mobx-react": "6.3.1",

packages/bot-web-ui/src/components/dashboard/dashboard-components/cards.tsx

@@ -57,8 +57,8 @@ const Cards = ({ load_modal, setActiveTab }: TCard) => {
     );
 };
 
-export default connect((store: RootStore) => ({
-    load_modal: store.load_modal,
-    active_tab: store.dashbaord.active_tab,
-    setActiveTab: store.dashbaord.setActiveTab,
+export default connect(({ load_modal, dashboard }: RootStore) => ({
+    load_modal,
+    active_tab: dashboard.active_tab,
+    setActiveTab: dashboard.setActiveTab,
 }))(Cards);

packages/bot-web-ui/src/components/dashboard/dashboard.tsx

@@ -13,6 +13,7 @@ import RootStore from 'Stores/index';
 import Sidebar from './dashboard-components/sidebar';
 import RunPanel from '../run-panel';
 import QuickStrategy from './quick-strategy';
+import Tutorial from './tutorial-tab';
 
 interface DashboardProps {
     active_tab: number;
@@ -62,7 +63,9 @@ const Dashboard = ({ active_tab, setActiveTab, toggleStrategyModal, is_drawer_op
                         </div>
                     </Tab>
                     <Tab icon='IcTutorialsTabs' label={localize('Tutorial')} id='id-tutorials'>
-                        <div>{localize('Under Developments')}</div>
+                        <div className='tutorials-wrapper'>
+                            <Tutorial />
+                        </div>
                     </Tab>
                 </Tabs>
             </div>
@@ -80,9 +83,9 @@ const Dashboard = ({ active_tab, setActiveTab, toggleStrategyModal, is_drawer_op
     );
 };
 
-export default connect(({ dashbaord, quick_strategy, run_panel }: RootStore) => ({
-    active_tab: dashbaord.active_tab,
-    setActiveTab: dashbaord.setActiveTab,
+export default connect(({ dashboard, quick_strategy, run_panel }: RootStore) => ({
+    active_tab: dashboard.active_tab,
+    setActiveTab: dashboard.setActiveTab,
     toggleStrategyModal: quick_strategy.toggleStrategyModal,
     is_drawer_open: run_panel.is_drawer_open,
 }))(Dashboard);

packages/bot-web-ui/src/components/dashboard/tutorial-tab/dialog.scss

@@ -0,0 +1,39 @@
+.tutorials-wrap {
+    .dc-dialog {
+        &__dialog {
+            width: 80vw;
+            height: 80vh;
+            max-width: unset;
+            max-height: unset;
+            padding: 0;
+            border-radius: 0;
+            position: relative;
+            z-index: 1;
+        }
+
+        &__header-wrapper {
+            &--end {
+                position: absolute;
+                top: 0;
+                right: 1rem;
+                z-index: 90;
+            }
+
+            .dc-dialog__header--close {
+                svg {
+                    filter: invert(1);
+                }
+            }
+        }
+
+        &__content {
+            max-width: unset;
+            margin-bottom: 0;
+            height: 100%;
+        }
+
+        &__footer {
+            display: none;
+        }
+    }
+}

packages/bot-web-ui/src/components/dashboard/tutorial-tab/guide-content.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { Icon, Dialog, Text } from '@deriv/components';
+import { connect } from 'Stores/connect';
+import RootStore from 'Stores/index';
+import { localize } from '@deriv/translations';
+
+type TGuideContent = {
+    dialog_options: { [key: string]: string };
+    faq_search_value: string;
+    is_dialog_open: boolean;
+    onOkButtonClick: () => void;
+    showVideoDialog: (type: string, component: HTMLElement) => void;
+};
+
+type TContentArray = {
+    id: number;
+    type: string;
+    content: string;
+    url?: string;
+};
+
+const contentArray: TContentArray[] = [
+    {
+        id: 1,
+        type: 'DBotVideo',
+        content: localize('DBot -- your automated trading partner'),
+        url: 'https://www.youtube.com/embed/Bb0HnaYNUx4',
+    },
+    {
+        id: 2,
+        type: 'DBotTour',
+        content: localize('How to build your bot from scratch using a simple strategy.'),
+    },
+];
+
+const GuideContent = ({
+    dialog_options,
+    faq_search_value,
+    is_dialog_open,
+    onOkButtonClick,
+    showVideoDialog,
+}: TGuideContent) => {
+    const [finalContentArray, setFinalContentArray] = React.useState<TContentArray[]>(contentArray);
+
+    React.useEffect(() => {
+        if (faq_search_value) {
+            const filteredArray = contentArray.filter(data => {
+                return data.content.toLowerCase().includes(faq_search_value);
+            });
+            return setFinalContentArray(filteredArray);
+        }
+        return setFinalContentArray(contentArray);
+    }, [faq_search_value]);
+
+    return (
+        <div className='tutorials-wrap'>
+            <Text align='center' weight='bold' color='prominent' line_height='s'>
+                Guides
+            </Text>
+            <div className='tutorials-wrap__group'>
+                {finalContentArray.length > 0 ? (
+                    finalContentArray.map(items => {
+                        const { id, content, type, url } = items;
+                        return (
+                            <div className='tutorials-wrap__group__cards' key={id}>
+                                <div className='tutorials-wrap__placeholder'>
+                                    <div className='tutorials-wrap__placeholder__button-group'>
+                                        <Icon
+                                            className='tutorials-wrap__placeholder__button-group--play'
+                                            width='4rem'
+                                            height='4rem'
+                                            icon={'IcPlayOutline'}
+                                            onClick={() => {
+                                                showVideoDialog(
+                                                    type,
+                                                    <React.Fragment>
+                                                        <iframe
+                                                            width='100%'
+                                                            height='100%'
+                                                            src={url}
+                                                            frameBorder='0'
+                                                            allowFullScreen
+                                                        />
+                                                    </React.Fragment>
+                                                );
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+                                <Text align='center' color='prominent' line_height='s' size='s'>
+                                    {content}
+                                </Text>
+                            </div>
+                        );
+                    })
+                ) : (
+                    <Text as='h1' weight='bold' line_height='xxs'>
+                        {localize('No results found "{{ faq_search_value }}"', {
+                            faq_search_value,
+                        })}
+                    </Text>
+                )}
+                <Dialog
+                    title={dialog_options.title}
+                    is_visible={is_dialog_open}
+                    cancel_button_text={localize('Cancel')}
+                    onCancel={onOkButtonClick}
+                    confirm_button_text={localize('OK')}
+                    onConfirm={onOkButtonClick}
+                    is_mobile_full_width
+                    className={'dc-dialog dc-dialog__wrapper-guide--fixed'}
+                    has_close_icon
+                    onClose={onOkButtonClick}
+                >
+                    {dialog_options.message}
+                </Dialog>
+            </div>
+        </div>
+    );
+};
+
+export default connect(({ dashboard, load_modal }: RootStore) => ({
+    faq_search_value: dashboard.faq_search_value,
+    is_dialog_open: dashboard.is_dialog_open,
+    onOkButtonClick: dashboard.onCloseDialog,
+    showVideoDialog: dashboard.showVideoDialog,
+    dialog_options: dashboard.dialog_options,
+    toggleLoadModal: load_modal.toggleLoadModal,
+}))(GuideContent);

packages/bot-web-ui/src/components/dashboard/tutorial-tab/index.scss

@@ -0,0 +1,37 @@
+@import './sidebar.scss';
+@import './dialog.scss';
+
+.tutorials-wrap {
+    &__group {
+        display: flex;
+        margin-top: 2.4rem;
+        &__cards {
+            display: flex;
+            text-align: center;
+            flex-direction: column;
+            width: 27rem;
+            margin-right: 2.4rem;
+        }
+    }
+
+    &__placeholder {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: var(--checkbox-disabled-grey);
+        margin-bottom: 0.8rem;
+        margin-right: 2.4rem;
+        height: 16rem;
+        width: 28rem;
+
+        &__button-group {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 20rem;
+            height: 7rem;
+            border-radius: 1rem;
+            cursor: pointer;
+        }
+    }
+}

packages/bot-web-ui/src/components/dashboard/tutorial-tab/index.ts

@@ -0,0 +1,4 @@
+import Sidebar from './sidebar';
+import './index.scss';
+
+export default Sidebar;

packages/bot-web-ui/src/components/dashboard/tutorial-tab/sidebar.scss

@@ -0,0 +1,81 @@
+.tutorials-wrapper {
+    .dc-tabs {
+        &__wrapper {
+            padding: 1.6rem 0.8rem;
+
+            &__group {
+                display: flex;
+                width: 22.5rem;
+                position: relative;
+                justify-content: center;
+                align-items: center;
+                padding: 1.6rem 0;
+                z-index: 100;
+
+                svg {
+                    position: absolute;
+                    left: 1.5rem;
+                    z-index: 1;
+                }
+
+                &--search_input {
+                    width: 21rem;
+                    height: 3.2rem;
+                    border-radius: 0.4rem;
+                    outline: none;
+                    background-color: transparent;
+                    font-size: 1.4rem;
+                    padding-left: 3rem;
+                    border: solid 0.1rem var(--checkbox-disabled-grey);
+
+                    ::placeholder {
+                        margin-left: 3.2rem;
+                    }
+                }
+            }
+
+            .dc-tabs {
+                &__content {
+                    margin: -6.5rem 0 0 2.4rem;
+                }
+
+                &--top {
+                    display: flex;
+                    height: calc(100vh - 16rem);
+                }
+
+                &__list {
+                    width: 22.5rem;
+                    display: flex;
+                    flex-direction: column;
+                    height: calc(100vh - 16rem);
+                    padding: 0 0.8rem;
+
+                    &--border-bottom {
+                        padding: 0 0.8rem;
+
+                        &:first-child {
+                            margin-top: -7.2rem;
+                        }
+                    }
+                }
+
+                &__item {
+                    width: 100% !important;
+
+                    &--top {
+                        &:first-child {
+                            margin-top: 7.5rem;
+                        }
+                    }
+                }
+
+                &__active {
+                    background-color: var(--checkbox-disabled-grey);
+                    border-radius: 0.4rem 0.4rem 0 0;
+                    transition: all 0.6s;
+                }
+            }
+        }
+    }
+}