+
+ );
+};
+
+export const botNotification = (message: string, primary_action?: TAction, custom_style?: TNotificationStyle) => {
+ return toast(
+ ({ closeToast }) => (
+ {message}
+ {primary_action && (
+
+ )}
+
+
+ {has_won_contract ? (
+
+
+ ) : (
+
+
+ )}
+
+
+ );
+};
+
+export default ContractResultOverlay;
diff --git a/src/components/contract-result-overlay/index.ts b/src/components/contract-result-overlay/index.ts
new file mode 100644
index 00000000..6e87568a
--- /dev/null
+++ b/src/components/contract-result-overlay/index.ts
@@ -0,0 +1,5 @@
+import ContractResultOverlay from './contract-result-overlay';
+
+import './contract-result-overlay.scss';
+
+export default ContractResultOverlay;
diff --git a/src/components/download/download.scss b/src/components/download/download.scss
new file mode 100644
index 00000000..2de88775
--- /dev/null
+++ b/src/components/download/download.scss
@@ -0,0 +1,8 @@
+.download {
+ &__container {
+ display: flex;
+ padding: 12px;
+ padding-left: 16px;
+ border: solid 1px var(--general-section-1);
+ }
+}
diff --git a/src/components/download/download.tsx b/src/components/download/download.tsx
new file mode 100644
index 00000000..1785b3ae
--- /dev/null
+++ b/src/components/download/download.tsx
@@ -0,0 +1,113 @@
+import { observer } from 'mobx-react-lite';
+
+import { Button } from '@deriv-com/ui';
+
+import { useStore } from '@/hooks/useStore';
+import { downloadFile, getSuccessJournalMessage, TTransaction } from '@/utils/download';
+import { Icon, localize } from '@/utils/tmp/dummy';
+
+import Popover from '../shared_ui/popover';
+
+type TDownloadProps = {
+ tab: string;
+};
+
+const Download = observer(({ tab }: TDownloadProps) => {
+ const { run_panel, transactions, journal } = useStore();
+ const { is_clear_stat_disabled, is_running } = run_panel;
+ const { filtered_messages } = journal;
+ const { transactions: transaction_list } = transactions;
+ let disabled = false;
+ let clickFunction, popover_message;
+
+ const downloadTransaction = () => {
+ const items = [
+ [
+ localize('Market'),
+ localize('Reference ID (buy)'),
+ localize('Reference ID (sell)'),
+ localize('Barrier'),
+ localize('Start Time'),
+ localize('Entry Spot'),
+ localize('Entry Spot Time'),
+ localize('Exit Spot'),
+ localize('Exit Spot Time'),
+ localize('Buy Price'),
+ localize('Profit/Loss'),
+ ],
+ ];
+ transaction_list.forEach(({ data }: { data: TTransaction }) => {
+ if (typeof data === 'string') return;
+ items.push([
+ data.display_name,
+ data.transaction_ids.buy,
+ data.transaction_ids.sell,
+ data.barrier,
+ data.date_start,
+ data.entry_tick,
+ data.entry_tick_time,
+ data.exit_tick,
+ data.exit_tick_time,
+ data.buy_price,
+ data.profit,
+ ]);
+ });
+
+ const content = items.map(e => e.join(',')).join('\n');
+ downloadFile(localize('Transactions'), content);
+ };
+
+ const downloadJournal = () => {
+ const items = [[localize('Date'), localize('Time'), localize('Message')]];
+
+ filtered_messages.map(item => {
+ let array_message;
+ if (item.message_type !== 'success') {
+ array_message = JSON.stringify(item.message);
+ } else {
+ array_message = getSuccessJournalMessage(item.message.toString(), item.extra);
+ }
+ const arr = [item.date, item.time, array_message?.replace('/', '/')];
+ items.push(arr);
+ });
+ const content = items.map(e => e.join(',')).join('\n');
+ downloadFile(localize('Journal'), content);
+ };
+
+ if (tab === 'transactions') {
+ clickFunction = downloadTransaction;
+ disabled = !transaction_list.length || is_running;
+ popover_message = localize('Download your transaction history.');
+ if (!transaction_list.length) popover_message = localize('No transaction or activity yet.');
+ } else if (tab === 'journal') {
+ clickFunction = downloadJournal;
+ popover_message = localize('Download your journal.');
+ disabled = is_clear_stat_disabled;
+ if (disabled) popover_message = localize('No transaction or activity yet.');
+ }
+ if (is_running) popover_message = localize('Download is unavailable while your bot is running.');
+
+ return (
+
+ {show && (
+
+ {children}
+
+ )}
+
+ );
+};
+
+export default DraggableResizeWrapper;
diff --git a/src/components/draggable/draggable-utils.ts b/src/components/draggable/draggable-utils.ts
new file mode 100644
index 00000000..0da69f38
--- /dev/null
+++ b/src/components/draggable/draggable-utils.ts
@@ -0,0 +1,134 @@
+export enum DRAGGABLE_CONSTANTS {
+ MOVE = 'move',
+ TOP = 'top',
+ RIGHT = 'right',
+ BOTTOM = 'bottom',
+ LEFT = 'left',
+ TOP_RIGHT = 'top-right',
+ BOTTOM_RIGHT = 'bottom-right',
+ BOTTOM_LEFT = 'bottom-left',
+ TOP_LEFT = 'top-left',
+ BODY_REF = 'body',
+}
+export const SAFETY_MARGIN = 5;
+export const EXTRA_BOTTOM_RIGHT_SAFETY_MARGIN = 2;
+
+export type TCalculateWidth = {
+ prevWidth: number;
+ leftOffset: number;
+ boundaryRect: DOMRect | undefined;
+ initialSelfRight: number;
+ resize_direction: string;
+ newWidth: number;
+ minWidth: number;
+ clientX: number;
+ self: DOMRect | undefined;
+};
+
+export type TCalculateHeight = {
+ prevHeight: number;
+ topOffset: number;
+ boundaryRect: DOMRect | undefined;
+ initialSelfBottom: number;
+ resize_direction: string;
+ newHeight: number;
+ minHeight: number;
+ clientY: number;
+ self: DOMRect | undefined;
+};
+
+export type TCalculateZindex = {
+ setZIndex: (zIndex: number) => void;
+};
+
+export type TDraggableProps = {
+ children: React.ReactNode;
+ boundary?: string;
+ initialValues?: {
+ width: number;
+ height: number;
+ xAxis: number;
+ yAxis: number;
+ };
+ minWidth?: number;
+ minHeight?: number;
+ enableResizing?: boolean;
+ enableDragging?: boolean;
+ header?: string;
+ onClose?: () => void;
+};
+
+export const calculateZindex = ({ setZIndex }: TCalculateZindex) => {
+ const draggableModals = document.getElementsByClassName('draggable');
+ if (!draggableModals.length) return;
+ const maxZIndex = Array.from(draggableModals).reduce(
+ (maxZ, modal) => Math.max(maxZ, parseInt(window.getComputedStyle(modal).zIndex) || 0),
+ 0
+ );
+ const newZIndex = maxZIndex + 3;
+ setZIndex(newZIndex);
+};
+
+export const calculateWidth = ({
+ prevWidth,
+ leftOffset,
+ boundaryRect,
+ initialSelfRight,
+ resize_direction,
+ newWidth,
+ minWidth,
+ clientX,
+ self,
+}: TCalculateWidth) => {
+ const leftBoundary = boundaryRect?.left ?? 0;
+ const boundaryWidth = boundaryRect?.width ?? 0;
+ const leftLimit = leftBoundary + leftOffset + SAFETY_MARGIN;
+ const selfLeft = self?.left ?? 0;
+
+ const rightLimit = leftBoundary + boundaryWidth - (SAFETY_MARGIN + EXTRA_BOTTOM_RIGHT_SAFETY_MARGIN);
+ const calculatedPreviousWidth = rightLimit - leftLimit - (rightLimit - initialSelfRight);
+
+ if (resize_direction.includes(DRAGGABLE_CONSTANTS.LEFT)) {
+ if (newWidth >= minWidth && clientX > leftLimit) return newWidth;
+ if (clientX < leftLimit + SAFETY_MARGIN * 2) return calculatedPreviousWidth - SAFETY_MARGIN * 2;
+ return prevWidth;
+ }
+ if (resize_direction.includes(DRAGGABLE_CONSTANTS.RIGHT)) {
+ if (newWidth >= minWidth && clientX < rightLimit) return newWidth;
+ if (clientX > rightLimit) return rightLimit - selfLeft;
+ return prevWidth;
+ }
+ return prevWidth;
+};
+
+export const calculateHeight = ({
+ prevHeight,
+ topOffset,
+ boundaryRect,
+ initialSelfBottom,
+ resize_direction,
+ newHeight,
+ minHeight,
+ clientY,
+ self,
+}: TCalculateHeight) => {
+ const topBoundary = boundaryRect?.top ?? 0;
+ const boundaryHeight = boundaryRect?.height ?? 0;
+ const topLimit = topBoundary + topOffset + SAFETY_MARGIN;
+ const selfTop = self?.top ?? 0;
+
+ const bottomLimit = topBoundary + boundaryHeight - (SAFETY_MARGIN + EXTRA_BOTTOM_RIGHT_SAFETY_MARGIN);
+ const calculatedPreviousHeight = bottomLimit - topLimit - (bottomLimit - initialSelfBottom);
+
+ if (resize_direction.includes(DRAGGABLE_CONSTANTS.TOP)) {
+ if (newHeight >= minHeight && clientY > topLimit) return newHeight;
+ if (clientY < topLimit + SAFETY_MARGIN * 2) return calculatedPreviousHeight - SAFETY_MARGIN * 2;
+ return prevHeight;
+ }
+ if (resize_direction.includes(DRAGGABLE_CONSTANTS.BOTTOM)) {
+ if (newHeight >= minHeight && clientY < bottomLimit) return newHeight;
+ if (clientY > bottomLimit) return bottomLimit - selfTop;
+ return prevHeight;
+ }
+ return prevHeight;
+};
diff --git a/src/components/draggable/draggable.scss b/src/components/draggable/draggable.scss
new file mode 100644
index 00000000..058abfda
--- /dev/null
+++ b/src/components/draggable/draggable.scss
@@ -0,0 +1,107 @@
+.draggable {
+ user-select: none;
+ transition: opacity 0.25s cubic-bezier(0.25, 0.1, 0.1, 0.25);
+ color: var(--text-general);
+ background: var(--general-main-2);
+ border: 1px solid rgb(0 0 0 / 12%);
+ border-radius: 8px;
+ box-shadow: 0px 0px 8px 4px var(--shadow-menu);
+ padding: 4px;
+
+ .draggable-content {
+ background: var(--general-main-1);
+ &__header {
+ cursor: move;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 16px;
+ width: 100%;
+ &__title {
+ font-size: 16px;
+ font-weight: 700;
+ }
+ &__close {
+ cursor: pointer;
+ }
+ &-title {
+ width: 100%;
+ }
+ }
+ &__body {
+ padding: 2px;
+ display: contents;
+ }
+ }
+
+ .resizable-handle {
+ &__top {
+ position: absolute;
+ width: 100%;
+ height: 10px;
+ top: -5px;
+ left: 0;
+ cursor: row-resize;
+ }
+ &__right {
+ position: absolute;
+ width: 10px;
+ height: 100%;
+ top: 0;
+ right: -5px;
+ cursor: col-resize;
+ }
+ &__bottom {
+ position: absolute;
+ width: 100%;
+ height: 10px;
+ bottom: -5px;
+ left: 0;
+ cursor: row-resize;
+ }
+ &__left {
+ position: absolute;
+ width: 10px;
+ height: 100%;
+ top: 0;
+ left: -5px;
+ cursor: col-resize;
+ }
+ &__top-left {
+ position: absolute;
+ width: 10px;
+ height: 10px;
+ top: -5px;
+ left: -5px;
+ cursor: nwse-resize;
+ }
+ &__top-right {
+ position: absolute;
+ width: 10px;
+ height: 10px;
+ top: -5px;
+ right: -5px;
+ cursor: nesw-resize;
+ }
+ &__bottom-right {
+ position: absolute;
+ width: 10px;
+ height: 10px;
+ bottom: -5px;
+ right: -5px;
+ cursor: nwse-resize;
+ }
+ &__bottom-left {
+ position: absolute;
+ width: 10px;
+ height: 10px;
+ bottom: -5px;
+ left: -5px;
+ cursor: nesw-resize;
+ }
+ }
+}
+
+.draggable.dragging {
+ cursor: no-drop;
+}
diff --git a/src/components/draggable/draggable.tsx b/src/components/draggable/draggable.tsx
new file mode 100644
index 00000000..59888dd9
--- /dev/null
+++ b/src/components/draggable/draggable.tsx
@@ -0,0 +1,314 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+import { Icon } from '@/utils/tmp/dummy';
+
+import {
+ calculateHeight,
+ calculateWidth,
+ calculateZindex,
+ DRAGGABLE_CONSTANTS,
+ EXTRA_BOTTOM_RIGHT_SAFETY_MARGIN,
+ SAFETY_MARGIN,
+ TDraggableProps,
+} from './draggable-utils';
+
+import './draggable.scss';
+
+const Draggable: React.FC calculateZindex({ setZIndex })}
+ onKeyDown={() => calculateZindex({ setZIndex })}
+ data-testid='dt_react_draggable'
+ tabIndex={0}
+ >
+
+
handleMouseDown(e, DRAGGABLE_CONSTANTS.MOVE)}
+ onKeyDown={(e: React.KeyboardEvent) =>
+ e.key === 'Enter' && handleMouseDown(null, DRAGGABLE_CONSTANTS.MOVE)
+ }
+ tabIndex={0}
+ >
+
+
+ {children}
+
+ {enableResizing && (
+ <>
+ {header}
+
+
+ ) =>
+ e.key === 'Enter' && handleMouseDown(null, DRAGGABLE_CONSTANTS.MOVE)
+ }
+ onMouseDown={e => handleMouseDown(e, DRAGGABLE_CONSTANTS.TOP)}
+ tabIndex={0}
+ />
+
) =>
+ e.key === 'Enter' && handleMouseDown(null, DRAGGABLE_CONSTANTS.MOVE)
+ }
+ onMouseDown={e => handleMouseDown(e, DRAGGABLE_CONSTANTS.RIGHT)}
+ tabIndex={0}
+ />
+
) =>
+ e.key === 'Enter' && handleMouseDown(null, DRAGGABLE_CONSTANTS.MOVE)
+ }
+ onMouseDown={e => handleMouseDown(e, DRAGGABLE_CONSTANTS.BOTTOM)}
+ tabIndex={0}
+ />
+
) =>
+ e.key === 'Enter' && handleMouseDown(null, DRAGGABLE_CONSTANTS.MOVE)
+ }
+ onMouseDown={e => handleMouseDown(e, DRAGGABLE_CONSTANTS.LEFT)}
+ tabIndex={0}
+ />
+
) =>
+ e.key === 'Enter' && handleMouseDown(null, DRAGGABLE_CONSTANTS.MOVE)
+ }
+ onMouseDown={e => handleMouseDown(e, DRAGGABLE_CONSTANTS.TOP_RIGHT)}
+ tabIndex={0}
+ />
+
) =>
+ e.key === 'Enter' && handleMouseDown(null, DRAGGABLE_CONSTANTS.MOVE)
+ }
+ onMouseDown={e => handleMouseDown(e, DRAGGABLE_CONSTANTS.BOTTOM_RIGHT)}
+ tabIndex={0}
+ />
+
) =>
+ e.key === 'Enter' && handleMouseDown(null, DRAGGABLE_CONSTANTS.MOVE)
+ }
+ onMouseDown={e => handleMouseDown(e, DRAGGABLE_CONSTANTS.BOTTOM_LEFT)}
+ tabIndex={0}
+ />
+
+ );
+};
+
+export default Draggable;
diff --git a/src/components/draggable/index.ts b/src/components/draggable/index.ts
new file mode 100644
index 00000000..35d43c95
--- /dev/null
+++ b/src/components/draggable/index.ts
@@ -0,0 +1,5 @@
+import Draggable from './draggable';
+
+import './draggable.scss';
+
+export default Draggable;
diff --git a/src/components/flyout/flyout-block-group.tsx b/src/components/flyout/flyout-block-group.tsx
new file mode 100644
index 00000000..4396e703
--- /dev/null
+++ b/src/components/flyout/flyout-block-group.tsx
@@ -0,0 +1,76 @@
+import classNames from 'classnames';
+
+import { Button, Text } from '@deriv-com/ui';
+
+import { Localize } from '@/utils/tmp/dummy';
+
+import FlyoutBlock from './flyout-block';
+
+type TFlyoutBlockGroup = {
+ onInfoClick: () => void;
+ block_node: Element;
+ is_active: boolean;
+ should_hide_display_name: boolean;
+};
+
+const FlyoutBlockGroup = ({ onInfoClick, block_node, is_active, should_hide_display_name }: TFlyoutBlockGroup) => {
+ const block_type = (block_node.getAttribute('type') || '') as string;
+ const block_meta = window.Blockly.Blocks[block_type].meta();
+ const is_variables_get = block_type === 'variables_get';
+ const is_variables_set = block_type === 'variables_set';
+ const { display_name, description } = block_meta;
+
+ const AddButton = () => (
+ ) =>
+ e.key === 'Enter' && handleMouseDown(null, DRAGGABLE_CONSTANTS.MOVE)
+ }
+ onMouseDown={e => handleMouseDown(e, DRAGGABLE_CONSTANTS.TOP_LEFT)}
+ tabIndex={0}
+ />
+
+ )}
+
+
+
+ );
+
+ return (
+ <>
+ {is_variables_set && }
+
+ {!should_hide_display_name && (
+ <>
+
+
+ );
+};
+
+export default FlyoutBlockGroup;
diff --git a/src/components/flyout/flyout-block.tsx b/src/components/flyout/flyout-block.tsx
new file mode 100644
index 00000000..b88b8238
--- /dev/null
+++ b/src/components/flyout/flyout-block.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import classNames from 'classnames';
+import { observer } from 'mobx-react-lite';
+
+import { useStore } from '@/hooks/useStore';
+
+type FlyoutBlockProps = {
+ block_node: Element;
+ should_hide_display_name?: boolean;
+};
+
+const FlyoutBlock = observer(({ block_node, should_hide_display_name }: FlyoutBlockProps) => {
+ const { flyout } = useStore();
+ const { initBlockWorkspace } = flyout;
+
+ let el_block_workspace = React.useRef();
+
+ React.useEffect(() => {
+ initBlockWorkspace(el_block_workspace, block_node);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ return (
+
+
+ {display_name}
+
+ {!is_variables_get &&
+
+ {description}
+ {onInfoClick && (
+
+
+
+ )}
+
+
+ (el_block_workspace = el)}
+ className={classNames({
+ 'flyout__block-workspace--center': should_hide_display_name,
+ 'flyout__block-workspace--top': !should_hide_display_name,
+ })}
+ data-testid='flyout-block-workspace'
+ />
+ );
+});
+
+export default FlyoutBlock;
diff --git a/src/components/flyout/flyout.scss b/src/components/flyout/flyout.scss
new file mode 100644
index 00000000..73031f74
--- /dev/null
+++ b/src/components/flyout/flyout.scss
@@ -0,0 +1,229 @@
+@keyframes fade-in {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+.flyout {
+ $flyout: &;
+ $default-margin: 15px;
+ $button-padding: 5px 20px;
+
+ position: absolute;
+ inset-inline-start: 250px;
+ top: 0;
+ background-color: var(--general-main-2);
+ height: calc(100vh - 232px);
+ max-height: calc(100vh - 232px);
+ z-index: 11;
+ border-radius: $BORDER_RADIUS;
+ font-size: 2em;
+ margin-inline-start: $default-margin;
+ margin-top: 20px;
+ box-shadow: 0 2px 8px 0 var(--shadow-box);
+ min-width: 400px;
+ visibility: hidden;
+
+ &__item:hover {
+ .flyout__button-add--hide {
+ display: flex !important;
+ animation: fade-in 0.3s;
+ }
+ }
+ &__content {
+ overflow: auto;
+ height: calc(100% - 64px);
+
+ .dc-themed-scrollbars {
+ padding: 5px 25px;
+ }
+ &-disclaimer {
+ display: flex;
+ justify-content: space-around;
+ background: $color-yellow;
+ font-size: var(--text-size-xs);
+ margin-top: 1.6em;
+ line-height: 1.3em;
+ padding: 0.8rem;
+ border-radius: 4px;
+
+ &-text {
+ color: $color-black-1;
+ width: 324px;
+ }
+ &-icon {
+ padding-top: 0.8rem;
+ }
+ }
+ }
+ &__block-workspace {
+ &--top {
+ margin-bottom: $default-margin;
+ }
+
+ &--center {
+ margin-top: 0.6em;
+ .injectionDiv {
+ height: 100%;
+ }
+ }
+ &__header {
+ display: flex;
+ }
+ }
+ &__button {
+ &-new {
+ width: 20%;
+ height: 4rem !important;
+ font-size: var(--text-size-xs);
+ font-weight: bold;
+ border-top-left-radius: 0rem !important;
+ border-bottom-left-radius: 0rem !important;
+ }
+ &-add {
+ color: var(--general-main-1);
+
+ &--hide {
+ display: none !important;
+ }
+ }
+ &-back {
+ padding: 0 15px;
+ align-self: center;
+ background-color: transparent;
+ color: $COLOR_BLACK;
+
+ svg {
+ vertical-align: middle;
+ }
+ &:focus {
+ outline: none;
+ }
+ }
+ &-next,
+ &-previous {
+ margin-inline-start: 1em;
+ color: $COLOR_LIGHT_BLACK_1;
+ background-color: var(--general-section-1);
+ display: flex;
+ }
+ }
+ &__item {
+ line-height: 1.3em;
+ font-size: var(--text-size-xs);
+
+ &:not(:last-of-type) {
+ margin-bottom: 30px;
+ }
+ &-header {
+ display: flex;
+ margin-top: $default-margin;
+ margin-bottom: 10px;
+ }
+ &-buttons {
+ margin-inline-start: auto;
+ align-self: center;
+ }
+ &-info {
+ cursor: pointer;
+ font-weight: bold;
+ display: block;
+ color: $COLOR_RED;
+ }
+ &-description {
+ font-size: var(--text-size-xs);
+ margin-bottom: 1em;
+ line-height: 1.3em;
+ color: var(--text-general);
+ }
+ }
+ &__image {
+ width: 100%;
+ height: auto;
+ border-radius: 0.5em;
+ }
+ &__video {
+ width: 100%;
+ height: 20vh;
+ border-radius: 0.5em;
+ }
+ &__help {
+ padding: 0;
+ height: 100%;
+ visibility: visible;
+
+ &-header {
+ padding: 15px;
+ display: flex;
+ background-color: var(--general-section-1);
+ }
+ &-content {
+ padding: 1.5em;
+ font-size: 0.8em;
+ overflow-y: auto;
+ height: calc(100vh - 295px);
+
+ #{$flyout}__item {
+ margin-bottom: 0.8em;
+ }
+ }
+ &-title {
+ align-self: center;
+ }
+ &-footer {
+ display: flex;
+ justify-content: flex-end;
+ padding: 0.5em 0.8em;
+ border-top: solid 0.1em var(--general-section-1);
+ }
+ }
+ &__search {
+ padding: 0;
+ visibility: visible;
+
+ &-header {
+ padding: 20px;
+ background-color: var(--general-disabled);
+ display: flex;
+ justify-content: space-between;
+
+ &-text {
+ align-self: center;
+ }
+ }
+ &-empty {
+ padding: 25px 0;
+ }
+ #{$flyout}__help-content {
+ height: calc(100% - 60px);
+ }
+ }
+ &__normal {
+ visibility: visible;
+
+ &-content {
+ height: 100%;
+ }
+ }
+ &__input {
+ width: 80% !important;
+ height: 4rem;
+ border-top-right-radius: 0rem !important;
+ border-bottom-right-radius: 0rem !important;
+ border: solid 1px $color-grey-5 !important;
+ display: inline-block !important;
+ margin-top: 3.3rem;
+ }
+ &__hr {
+ height: 2px;
+ width: 100%;
+ border-top: 1px solid var(--general-section-1);
+ position: absolute;
+ left: 0;
+ right: 0;
+ margin: 0;
+ }
+}
diff --git a/src/components/flyout/flyout.tsx b/src/components/flyout/flyout.tsx
new file mode 100644
index 00000000..d5afa4d5
--- /dev/null
+++ b/src/components/flyout/flyout.tsx
@@ -0,0 +1,248 @@
+import React from 'react';
+import classNames from 'classnames';
+import { observer } from 'mobx-react-lite';
+
+import { Input, Text } from '@deriv-com/ui';
+
+import { useStore } from '@/hooks/useStore';
+import { help_content_config } from '@/utils/help-content/help-content.config';
+import { Icon, localize } from '@/utils/tmp/dummy';
+
+import { getPlatformSettings } from '../shared';
+import ThemedScrollbars from '../shared_ui/themed-scrollbars';
+
+import FlyoutBlockGroup from './flyout-block-group';
+import HelpBase from './help-contents';
+
+type TSearchResult = {
+ search_term: string;
+ total_result: number;
+};
+
+const SearchResult = ({ search_term, total_result }: TSearchResult) => (
+
+
+ );
+});
+
+export default HelpBase;
diff --git a/src/components/flyout/help-contents/flyout-img.tsx b/src/components/flyout/help-contents/flyout-img.tsx
new file mode 100644
index 00000000..533453b6
--- /dev/null
+++ b/src/components/flyout/help-contents/flyout-img.tsx
@@ -0,0 +1,17 @@
+type TFlyoutImageProps = {
+ width: string;
+ url: string;
+};
+
+const FlyoutImage = (props: TFlyoutImageProps) => {
+ const { width, url } = props;
+ const style = { width };
+
+ return (
+
+ {text}
+
+ );
+};
+
+export default FlyoutText;
diff --git a/src/components/flyout/help-contents/flyout-video.tsx b/src/components/flyout/help-contents/flyout-video.tsx
new file mode 100644
index 00000000..203ea81b
--- /dev/null
+++ b/src/components/flyout/help-contents/flyout-video.tsx
@@ -0,0 +1,15 @@
+const FlyoutVideo = (props: { url: string }) => (
+ (null);
+ const validateClickOutside = (event: React.ChangeEvent) =>
+ is_filter_dialog_visible && !toggle_ref.current?.contains(event.target);
+
+ useOnClickOutside(wrapper_ref, toggleFilterDialog, validateClickOutside);
+
+ return (
+
+
+ );
+};
+
+export default JournalItem;
diff --git a/src/components/journal/journal-components/journal-loader.tsx b/src/components/journal/journal-components/journal-loader.tsx
new file mode 100644
index 00000000..0d3e6a1b
--- /dev/null
+++ b/src/components/journal/journal-components/journal-loader.tsx
@@ -0,0 +1,18 @@
+import ContentLoader from 'react-content-loader';
+import classnames from 'classnames';
+
+const JournalLoader = ({ is_mobile }: { is_mobile: boolean }) => (
+
+
+);
+
+export default JournalLoader;
diff --git a/src/components/journal/journal-components/journal-tools.tsx b/src/components/journal/journal-components/journal-tools.tsx
new file mode 100644
index 00000000..76b81f6e
--- /dev/null
+++ b/src/components/journal/journal-components/journal-tools.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { CSSTransition } from 'react-transition-group';
+
+import { Text } from '@deriv-com/ui';
+
+import Download from '@/components/download';
+import { Icon, Localize } from '@/utils/tmp/dummy';
+
+import { TJournalToolsProps } from '../journal.types';
+
+import FilterDialog from './filter-dialog';
+
+const JournalTools = ({
+ checked_filters,
+ filters,
+ filterMessage,
+ is_filter_dialog_visible,
+ toggleFilterDialog,
+}: TJournalToolsProps) => {
+ const toggle_ref = React.useRef(null);
+
+ return (
+ <>
+
+
+
+ );
+};
+
+export default JournalTools;
diff --git a/src/components/journal/journal.scss b/src/components/journal/journal.scss
new file mode 100644
index 00000000..0bac0519
--- /dev/null
+++ b/src/components/journal/journal.scss
@@ -0,0 +1,149 @@
+/**
+ * @define journal
+ */
+.journal {
+ &-empty {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ &__header {
+ padding: 0.8rem;
+ }
+ &__icon {
+ align-self: center;
+ }
+ &__message {
+ margin: 0 auto;
+ & .dc-text {
+ line-height: var(--text-lh-xxl);
+ }
+ }
+ &__list {
+ list-style-type: disc;
+ margin-left: 20px;
+ line-height: var(--text-lh-xl);
+
+ li::marker {
+ color: var(--text-less-prominent);
+ }
+ }
+ }
+ &__item {
+ padding: 16px;
+
+ &-list {
+ height: calc(100% - 7.2rem);
+ }
+ &-content {
+ > * {
+ width: 100%;
+ }
+ }
+ }
+ &__data-list {
+ .ReactVirtualized__Grid__innerScrollContainer {
+ > div:nth-child(even) {
+ background: var(--general-section-2);
+ }
+ }
+ }
+ &-tools {
+ &__container {
+ display: flex;
+ justify-content: space-between;
+ padding: 12px;
+ padding-left: 16px;
+ border: solid 1px var(--general-section-1);
+
+ &-filter {
+ @include flex-center(flex-end);
+ cursor: pointer;
+ flex: 1;
+
+ &--label {
+ margin-inline-end: 0.8rem;
+ }
+ }
+ }
+ }
+ &__text {
+ font-size: var(--text-size-xxs);
+ line-height: 1.5;
+ display: inline;
+ color: var(--text-general);
+
+ &-time,
+ &-date {
+ display: inline;
+ }
+ &-datetime {
+ color: var(--text-less-prominent);
+ font-size: var(--text-size--xxxs);
+ margin-top: 6px;
+ }
+ &--error {
+ color: var(--status-danger);
+ }
+ &--warn {
+ color: var(--status-warning);
+ }
+ &--info {
+ color: var(--status-info);
+ }
+ &--success {
+ color: var(--status-success);
+ }
+ &--bold {
+ font-weight: bold;
+ }
+ }
+ &__loader {
+ width: 350px;
+ height: 9.2rem;
+
+ &--mobile {
+ @extend .journal__loader;
+ width: 100vw;
+ }
+ }
+}
+
+.filter-dialog {
+ position: fixed;
+ display: grid;
+ grid-gap: 1.6rem;
+ background: var(--general-main-2);
+ border-radius: $BORDER_RADIUS;
+ box-shadow: 0 4px 16px 0 var(--shadow-menu);
+ transition:
+ transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
+ opacity 0.25s linear;
+ padding: 1.6rem 0.8rem;
+ padding-inline-end: 3.6rem;
+ inset-inline-end: 16px;
+ z-index: 99;
+
+ &--enter-done {
+ opacity: 1;
+ transform: translate3d(0, 0, 0);
+ }
+ &--enter,
+ &--exit {
+ opacity: 0;
+ transform: translate3d(0, -20px, 0);
+ }
+ &__input {
+ .input-wrapper__input {
+ border: 1px solid var(--border-normal);
+ }
+ }
+ &__button {
+ margin-top: 0.8rem;
+
+ .dc-btn {
+ width: 100%;
+ }
+ }
+}
diff --git a/src/components/journal/journal.tsx b/src/components/journal/journal.tsx
new file mode 100644
index 00000000..b432ef83
--- /dev/null
+++ b/src/components/journal/journal.tsx
@@ -0,0 +1,105 @@
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+
+import { Text } from '@deriv-com/ui';
+
+import { contract_stages } from '@/constants/contract-stage';
+import { useStore } from '@/hooks/useStore';
+import { DataList, Icon, localize } from '@/utils/tmp/dummy';
+
+import { TCheckedFilters, TFilterMessageValues, TJournalDataListArgs } from './journal.types';
+import { JournalItem, JournalLoader, JournalTools } from './journal-components';
+
+const Journal = observer(() => {
+ const { ui } = useStore();
+ const { journal, run_panel } = useStore();
+ const {
+ checked_filters,
+ filterMessage,
+ filters,
+ filtered_messages,
+ is_filter_dialog_visible,
+ toggleFilterDialog,
+ unfiltered_messages,
+ } = journal;
+ const { is_stop_button_visible, contract_stage } = run_panel;
+
+ const filtered_messages_length = Array.isArray(filtered_messages) && filtered_messages.length;
+ const unfiltered_messages_length = Array.isArray(unfiltered_messages) && unfiltered_messages.length;
+ const { is_mobile } = ui;
+
+ return (
+ | TFilterMessageValues;
+
+type TKeyFilters = 'error' & 'notify' & 'success';
+type TValuesFilters = 'Errors' & 'Notifications' & 'System';
+
+type TFilters = Array<{ id: TKeyFilters; label: TValuesFilters }>;
+export type TCheckedFilters = Record<'error' | 'notify' | 'success', string[]>;
+
+export type TFilterDialogProps = {
+ toggle_ref: React.RefObject;
+ checked_filters: TCheckedFilters;
+ filters: TFilters;
+ filterMessage: () => TFilterMessageProps;
+ is_filter_dialog_visible: boolean;
+ toggleFilterDialog: () => void;
+};
+
+export type TJournalToolsProps = {
+ checked_filters: TCheckedFilters;
+ filters: TFilters;
+ filterMessage: () => TFilterMessageProps;
+ is_filter_dialog_visible: boolean;
+ toggleFilterDialog: () => void;
+};
+
+export type TFiltersProps = {
+ wrapper_ref: React.RefObject;
+ checked_filters: TCheckedFilters;
+ filters: TFilters;
+ filterMessage: (checked: boolean, item_id: number) => TFilterMessageProps;
+ className: string;
+ classNameLabel?: string;
+};
+
+export type TJournalProps = {
+ contract_stage: number;
+ filtered_messages: TFilterMessageProps | [];
+ is_drawer_open: boolean;
+ is_stop_button_visible: boolean;
+ unfiltered_messages: TFilterMessageProps;
+ checked_filters: TCheckedFilters;
+ filterMessage: () => TFilterMessageProps;
+ filters: TFilters;
+ is_filter_dialog_visible: boolean;
+ toggleFilterDialog: () => void;
+};
+
+export type TJournalItemProps = {
+ row: TFilterMessageValues;
+ is_new_row: boolean;
+ measure: () => void;
+};
+
+export type TJournalItemExtra = TExtraFilterMessage & TExtraJournal & { sold_for: string; current_currency?: string };
+
+export type TFormatMessageProps = {
+ logType: string;
+ className: string;
+ extra: TJournalItemExtra;
+};
+
+export type TJournalDataListArgs = {
+ is_new_row: boolean;
+ is_scrolling: boolean;
+ measure: () => void;
+ passthrough?: any;
+ row: TFilterMessageValues;
+};
diff --git a/src/components/layout/main-body/index.tsx b/src/components/layout/main-body/index.tsx
index 1ecfceae..95aad800 100644
--- a/src/components/layout/main-body/index.tsx
+++ b/src/components/layout/main-body/index.tsx
@@ -5,7 +5,7 @@ type TMainBodyProps = {
};
const MainBody: React.FC = ({ children }) => {
- return {
+ setPreviewOnPopup(false);
+ toggleLoadModal();
+ }}
+ height_offset='80px'
+ page_overlay
+ >
+
+
+
+ );
+ }
+
+ const is_file_loaded = !!loaded_local_file && tab_name === tabs_title.TAB_LOCAL;
+ const has_recent_strategies = recent_strategies.length > 0 && tab_name === tabs_title.TAB_RECENT;
+
+ return (
+
+
+
+
+
+ {has_recent_strategies && (
+
+
+ )}
+ {is_file_loaded && (
+
+
+ )}
+
+ );
+});
+
+export default LoadModal;
diff --git a/src/components/load-modal/local-footer.tsx b/src/components/load-modal/local-footer.tsx
new file mode 100644
index 00000000..63413351
--- /dev/null
+++ b/src/components/load-modal/local-footer.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+
+import { Button } from '@deriv-com/ui';
+
+import { NOTIFICATION_TYPE } from '@/components/bot-notification/bot-notification-utils';
+import { useStore } from '@/hooks/useStore';
+import { localize } from '@/utils/tmp/dummy';
+
+const LocalFooter = observer(() => {
+ const { ui } = useStore();
+ const { load_modal, dashboard } = useStore();
+ const { is_open_button_loading, loadFileFromLocal, setLoadedLocalFile, toggleLoadModal } = load_modal;
+ const { setOpenSettings, setPreviewOnPopup } = dashboard;
+
+ const { is_mobile } = ui;
+ const Wrapper = is_mobile ? Button.Group : React.Fragment;
+
+ return (
+
+ {is_mobile && (
+
+ );
+});
+
+export default LocalFooter;
diff --git a/src/components/load-modal/local.tsx b/src/components/load-modal/local.tsx
new file mode 100644
index 00000000..74e7203b
--- /dev/null
+++ b/src/components/load-modal/local.tsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import classNames from 'classnames';
+import { observer } from 'mobx-react-lite';
+
+import { Button } from '@deriv-com/ui';
+
+import { useStore } from '@/hooks/useStore';
+import { Icon, Localize, localize } from '@/utils/tmp/dummy';
+
+import LocalFooter from './local-footer';
+import WorkspaceControl from './workspace-control';
+
+const LocalComponent = observer(() => {
+ const { ui } = useStore();
+ const { dashboard, load_modal } = useStore();
+ const { active_tab, active_tour } = dashboard;
+ const { handleFileChange, loaded_local_file, setLoadedLocalFile } = load_modal;
+
+ const file_input_ref = React.useRef(null);
+ const [is_file_supported, setIsFileSupported] = React.useState(true);
+ const { is_mobile } = ui;
+
+ if (loaded_local_file && is_file_supported) {
+ return (
+
+
+ {localize('Results for "{{ search_term }}"', {
+ search_term,
+ interpolation: { escapeValue: false },
+ })}
+
+
+ {`${total_result} ${total_result > 1 ? localize('results') : localize('result')}`}
+
+
+);
+
+type TFlyoutContent = {
+ flyout_content: Element[];
+ active_helper: string;
+ setHelpContent: (node: Element) => void;
+ initFlyoutHelp: (node: Element, block_type: string) => void;
+ is_empty: boolean;
+ is_search_flyout: boolean;
+ selected_category: Element;
+ first_get_variable_block_index: number;
+};
+
+const FlyoutContent = (props: TFlyoutContent) => {
+ const flyout_ref = React.useRef();
+ const {
+ flyout_content,
+ active_helper,
+ setHelpContent,
+ initFlyoutHelp,
+ is_empty,
+ is_search_flyout,
+ selected_category,
+ first_get_variable_block_index,
+ } = props;
+
+ return (
+
+
+ {selected_category?.getAttribute('id') === 'indicators' && (
+ setHelpContent(node)
+ : () => initFlyoutHelp(node, block_type))
+ }
+ is_active={active_helper === block_type}
+ />
+ );
+ }
+ case window.Blockly.Xml.NODE_LABEL: {
+ return (
+
+
+ );
+};
+
+const Flyout = observer(() => {
+ const { flyout, flyout_help } = useStore();
+ const { gtm } = useStore();
+ const { active_helper, initFlyoutHelp, setHelpContent } = flyout_help;
+ const {
+ flyout_content,
+ flyout_width,
+ is_help_content,
+ is_search_flyout,
+ is_visible,
+ onMount,
+ onUnmount,
+ search_term,
+ selected_category,
+ first_get_variable_block_index,
+ } = flyout;
+
+ const { pushDataLayer } = gtm;
+
+ React.useEffect(() => {
+ onMount();
+ return () => onUnmount();
+ }, [onMount, onUnmount]);
+
+ if (is_visible && is_search_flyout) {
+ pushDataLayer({ event: 'dbot_search_results', value: true });
+ }
+
+ const total_result = Object.keys(flyout_content).length;
+ const is_empty = total_result === 0;
+
+ return (
+ is_visible && (
+
+
+
+ )}
+ {is_empty ? (
+
+
+ {localize('No results found')}
+
+
+ ) : (
+ flyout_content.map((node, index) => {
+ const tag_name = node.tagName.toUpperCase();
+ switch (tag_name) {
+ case window.Blockly.Xml.NODE_BLOCK: {
+ const block_type = (node.getAttribute('type') || '') as string;
+
+ return (
+
+ {node.getAttribute('text')}
+
+ );
+ }
+ case window.Blockly.Xml.NODE_INPUT: {
+ return (
+
+ );
+ }
+ case window.Blockly.Xml.NODE_BUTTON: {
+ const callback_key = node.getAttribute('callbackKey');
+ const callback_id = node.getAttribute('id') as string;
+
+ return (
+
+ );
+ }
+ default:
+ return null;
+ }
+ })
+ )}
+
+ {is_search_flyout && !is_help_content && (
+
+ )
+ );
+});
+
+export default Flyout;
diff --git a/src/components/flyout/help-contents/flyout-help-base.tsx b/src/components/flyout/help-contents/flyout-help-base.tsx
new file mode 100644
index 00000000..077774fd
--- /dev/null
+++ b/src/components/flyout/help-contents/flyout-help-base.tsx
@@ -0,0 +1,127 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+
+import { Button, Text } from '@deriv-com/ui';
+
+import { useStore } from '@/hooks/useStore';
+import { help_content_config, help_content_types } from '@/utils/help-content/help-content.config';
+import { Icon, localize } from '@/utils/tmp/dummy';
+
+import FlyoutBlock from '../flyout-block';
+
+import FlyoutImage from './flyout-img';
+import FlyoutText from './flyout-text';
+import FlyoutVideo from './flyout-video';
+
+const HelpBase = observer(() => {
+ const { flyout, flyout_help } = useStore();
+ const {
+ block_node,
+ block_type,
+ examples,
+ help_string,
+ onBackClick,
+ onSequenceClick,
+ should_next_disable,
+ should_previous_disable,
+ title,
+ } = flyout_help;
+ const { is_search_flyout } = flyout;
+
+ const block_help_component = help_string && help_content_config(__webpack_public_path__)[block_type];
+ let text_count = 0;
+
+ return (
+
+
+
+ {title}
+
+
+
+
+
+ {block_help_component &&
+ block_help_component.map((component, index) => {
+ const { type, width, url, example_id } = component;
+ const { text } = help_string;
+ const example_node = examples.find(example => example.id === example_id);
+ switch (type) {
+ case help_content_types.TEXT:
+ if (text_count < text.length) {
+ return
+ {!is_search_flyout && !(should_previous_disable && should_next_disable) && (
+
+
+ )}
+
+ 
+
+ );
+};
+
+export default FlyoutImage;
diff --git a/src/components/flyout/help-contents/flyout-text.tsx b/src/components/flyout/help-contents/flyout-text.tsx
new file mode 100644
index 00000000..0fec12ce
--- /dev/null
+++ b/src/components/flyout/help-contents/flyout-text.tsx
@@ -0,0 +1,13 @@
+import { Text } from '@deriv-com/ui';
+
+const FlyoutText = (props: { text: string }) => {
+ const { text } = props;
+
+ return (
+
+
+
+);
+
+export default FlyoutVideo;
diff --git a/src/components/flyout/help-contents/index.ts b/src/components/flyout/help-contents/index.ts
new file mode 100644
index 00000000..e15fe2de
--- /dev/null
+++ b/src/components/flyout/help-contents/index.ts
@@ -0,0 +1,3 @@
+import HelpBase from './flyout-help-base';
+
+export default HelpBase;
diff --git a/src/components/flyout/index.ts b/src/components/flyout/index.ts
new file mode 100644
index 00000000..b048a67b
--- /dev/null
+++ b/src/components/flyout/index.ts
@@ -0,0 +1,5 @@
+import Flyout from './flyout';
+
+import './flyout.scss';
+
+export default Flyout;
diff --git a/src/components/journal/index.ts b/src/components/journal/index.ts
new file mode 100644
index 00000000..90bc7b52
--- /dev/null
+++ b/src/components/journal/index.ts
@@ -0,0 +1,5 @@
+import Journal from './journal';
+
+import './journal.scss';
+
+export default Journal;
diff --git a/src/components/journal/journal-components/date-item.tsx b/src/components/journal/journal-components/date-item.tsx
new file mode 100644
index 00000000..6a1e7c2b
--- /dev/null
+++ b/src/components/journal/journal-components/date-item.tsx
@@ -0,0 +1,9 @@
+import { TDateItemProps } from '../journal.types';
+
+const DateItem = ({ date, time }: TDateItemProps) => (
+ <>
+ {date} | {time}
+
+);
+
+export default DateItem;
diff --git a/src/components/journal/journal-components/filter-dialog.tsx b/src/components/journal/journal-components/filter-dialog.tsx
new file mode 100644
index 00000000..281071fe
--- /dev/null
+++ b/src/components/journal/journal-components/filter-dialog.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { useOnClickOutside } from '@/hooks/useOnClickOutside';
+
+import { TFilterDialogProps } from '../journal.types';
+
+import Filters from './filters';
+
+const FilterDialog = ({
+ toggle_ref,
+ checked_filters,
+ filters,
+ filterMessage,
+ is_filter_dialog_visible,
+ toggleFilterDialog,
+}: TFilterDialogProps) => {
+ const wrapper_ref = React.useRef
+ {filters.map(item => {
+ const hasFilter = Array.isArray(checked_filters) && checked_filters.includes(item.id);
+ return (
+ filterMessage(!hasFilter, item.id)}
+ />
+ );
+ })}
+
+);
+
+export default Filters;
diff --git a/src/components/journal/journal-components/format-message.tsx b/src/components/journal/journal-components/format-message.tsx
new file mode 100644
index 00000000..e4ca9608
--- /dev/null
+++ b/src/components/journal/journal-components/format-message.tsx
@@ -0,0 +1,100 @@
+import classnames from 'classnames';
+
+import { Text } from '@deriv-com/ui';
+
+import { formatMoney, getCurrencyDisplayCode } from '@/components/shared';
+import { LogTypes } from '@/external/bot-skeleton';
+import { Localize, localize } from '@/utils/tmp/dummy';
+
+import { TFormatMessageProps } from '../journal.types';
+
+const FormatMessage = ({ logType, className, extra }: TFormatMessageProps) => {
+ const getLogMessage = () => {
+ switch (logType) {
+ case LogTypes.LOAD_BLOCK: {
+ return localize('Blocks are loaded successfully');
+ }
+ case LogTypes.NOT_OFFERED: {
+ return localize('Resale of this contract is not offered.');
+ }
+ case LogTypes.PURCHASE: {
+ const { longcode, transaction_id } = extra;
+ return (
+ {getLogMessage()}
;
+};
+
+export default FormatMessage;
diff --git a/src/components/journal/journal-components/index.ts b/src/components/journal/journal-components/index.ts
new file mode 100644
index 00000000..ad72c129
--- /dev/null
+++ b/src/components/journal/journal-components/index.ts
@@ -0,0 +1,7 @@
+export { default as DateItem } from './date-item';
+export { default as FilterDialog } from './filter-dialog';
+export { default as Filters } from './filters';
+export { default as FormatMessage } from './format-message';
+export { default as JournalItem } from './journal-item';
+export { default as JournalLoader } from './journal-loader';
+export { default as JournalTools } from './journal-tools';
diff --git a/src/components/journal/journal-components/journal-item.tsx b/src/components/journal/journal-components/journal-item.tsx
new file mode 100644
index 00000000..86a9c70d
--- /dev/null
+++ b/src/components/journal/journal-components/journal-item.tsx
@@ -0,0 +1,55 @@
+import { CSSTransition } from 'react-transition-group';
+import classnames from 'classnames';
+
+import { MessageTypes } from '@/external/bot-skeleton';
+import { isDbotRTL } from '@/external/bot-skeleton/utils/workspace';
+import { useNewRowTransition } from '@/hooks/useNewRowTransition';
+
+import { TJournalItemExtra, TJournalItemProps } from '../journal.types';
+
+import DateItem from './date-item';
+import FormatMessage from './format-message';
+
+const getJournalItemContent = (
+ message: string | ((value: () => void) => string),
+ type: string,
+ className: string,
+ extra: TJournalItemExtra,
+ measure: () => void
+) => {
+ switch (type) {
+ case MessageTypes.SUCCESS: {
+ return {message(measure)}
;
+ }
+ return {message}
;
+ }
+ case MessageTypes.ERROR: {
+ return {message as string}
;
+ }
+ default:
+ return null;
+ }
+};
+
+const JournalItem = ({ row, is_new_row, measure }: TJournalItemProps) => {
+ const { in_prop } = useNewRowTransition(is_new_row);
+ const { date, time, message, message_type, className, extra } = row;
+ const date_el = DateItem({ date, time });
+
+ return (
+
+
+
+ {getJournalItemContent(message, message_type, className, extra as TJournalItemExtra, measure)}
+
+ {date_el}
+
+
+
+
+
+
+
+
+ );
+});
+
+export default Journal;
diff --git a/src/components/journal/journal.types.ts b/src/components/journal/journal.types.ts
new file mode 100644
index 00000000..383a9f93
--- /dev/null
+++ b/src/components/journal/journal.types.ts
@@ -0,0 +1,91 @@
+import React from 'react';
+
+type TExtraFilterMessage = {
+ currency: string;
+ profit: number;
+};
+type TExtraJournal = {
+ longcode: string;
+ transaction_id: number;
+};
+
+export type TDateItemProps = Record<'date' | 'time', string>;
+
+export type TFilterMessageValues = {
+ className: string;
+ date: string;
+ extra: TExtraFilterMessage | TExtraJournal;
+ message: string | ((value: () => void) => string);
+ message_type: string;
+ time: string;
+ unique_id: string;
+};
+
+type TFilterMessageProps = Array
+ {filtered_messages_length ? (
+
+ {children}
;
+ return {children}
;
};
export default MainBody;
diff --git a/src/components/layout/main-body/main-body.scss b/src/components/layout/main-body/main-body.scss
index 5a60180c..1999848e 100644
--- a/src/components/layout/main-body/main-body.scss
+++ b/src/components/layout/main-body/main-body.scss
@@ -1,4 +1,3 @@
.main-body {
flex-grow: 1;
- padding: 20px;
}
diff --git a/src/components/load-modal/index.ts b/src/components/load-modal/index.ts
new file mode 100644
index 00000000..6d97c835
--- /dev/null
+++ b/src/components/load-modal/index.ts
@@ -0,0 +1,5 @@
+import LoadModal from './load-modal';
+
+import './load-modal.scss';
+
+export default LoadModal;
diff --git a/src/components/load-modal/load-modal.scss b/src/components/load-modal/load-modal.scss
new file mode 100644
index 00000000..cbcafb81
--- /dev/null
+++ b/src/components/load-modal/load-modal.scss
@@ -0,0 +1,166 @@
+#modal_root {
+ .load-strategy {
+ &__recent {
+ display: flex;
+ gap: 1.6rem;
+
+ &__files {
+ width: 35%;
+ overflow: auto;
+ height: 100%;
+ margin: 0.2rem 0;
+ }
+
+ &__empty {
+ @include flex-center;
+ align-items: center;
+ flex-direction: column;
+
+ &-icon {
+ margin-bottom: 1.6rem;
+ }
+
+ &-title {
+ margin-bottom: 0.8rem;
+ font-size: var(--text-size-s);
+ font-weight: bold;
+ line-height: 2.4rem;
+ }
+
+ &-description {
+ margin-bottom: 1.6rem;
+ font-size: var(--text-size-xs);
+ line-height: 2rem;
+ }
+
+ &-expand {
+ margin-bottom: 0.8rem;
+ color: var(--brand-red-coral);
+ font-size: var(--text-size-xs);
+ font-weight: bold;
+ cursor: pointer;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+
+ &-explanation {
+ font-size: var(--text-size-xxs);
+ text-align: left;
+ opacity: 0;
+
+ &-list {
+ margin-top: 0.8rem;
+ }
+
+ &--show {
+ opacity: 1;
+ width: fit-content;
+ }
+ }
+ }
+
+ &-item {
+ grid-template-columns: 1fr 0.6fr;
+ position: relative;
+ display: grid;
+ grid-template-areas: ('text location');
+ padding: 1rem 0.8rem;
+ align-items: center;
+ text-align: center;
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ &:not(:last-child) {
+ border-bottom: solid 1px var(--border-divider);
+ }
+
+ &--selected {
+ background-color: var(--general-section-2);
+ }
+
+ &-text {
+ height: unset;
+ flex-direction: column;
+ text-align: start;
+ padding-right: 0.8rem;
+ }
+
+ &-title {
+ font-size: var(--text-size-xs);
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ &-time {
+ font-size: var(--text-size-xxs);
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ &-saved {
+ margin-inline-start: 1rem;
+ font-size: var(--text-size-xs);
+ line-height: 1.43;
+ word-break: break-word;
+ }
+
+ &-location {
+ @include flex-center(flex-start);
+ width: 100%;
+ word-break: break-word;
+ color: var(--text-general);
+ height: 100%;
+ }
+ }
+
+ &__preview {
+ width: 65%;
+ flex-basis: 65%;
+ display: flex;
+ flex-direction: column;
+
+ .load-strategy__preview-workspace {
+ height: calc(100% - 5.2rem);
+ min-height: unset;
+ margin: 0;
+ }
+
+ &-title {
+ margin: 1.5rem 0;
+ margin-left: 0;
+ }
+
+ &__title {
+ margin-left: 0;
+ }
+ }
+ }
+
+ &__container {
+ &--has-footer {
+ height: calc(80vh - 21rem);
+ margin-top: -1rem;
+ }
+ }
+
+ &__title {
+ margin: 1.5rem;
+ }
+ }
+
+ .load-strategy__preview-workspace {
+ min-height: unset;
+ height: unset;
+ margin: 0;
+ }
+}
diff --git a/src/components/load-modal/load-modal.tsx b/src/components/load-modal/load-modal.tsx
new file mode 100644
index 00000000..be0c7cf1
--- /dev/null
+++ b/src/components/load-modal/load-modal.tsx
@@ -0,0 +1,100 @@
+import { observer } from 'mobx-react-lite';
+
+import { Modal, Tabs } from '@deriv-com/ui';
+
+import { tabs_title } from '@/constants/load-modal';
+import { useStore } from '@/hooks/useStore';
+import { localize } from '@/utils/tmp/dummy';
+
+import GoogleDrive from '../../pages/dashboard/load-bot-preview/google-drive';
+import MobileFullPageModal from '../shared_ui/mobile-full-page-modal';
+
+import Local from './local';
+import LocalFooter from './local-footer';
+import Recent from './recent';
+import RecentFooter from './recent-footer';
+
+const LoadModal = observer(() => {
+ const { ui } = useStore();
+ const { load_modal, dashboard } = useStore();
+ const {
+ active_index,
+ is_load_modal_open,
+ loaded_local_file,
+ onEntered,
+ recent_strategies,
+ setActiveTabIndex,
+ toggleLoadModal,
+ tab_name,
+ } = load_modal;
+ const { setPreviewOnPopup } = dashboard;
+ const { is_mobile } = ui;
+ const header_text = localize('Load strategy');
+
+ if (is_mobile) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
+ {is_mobile && (
+
+
+
+
+
+
+
+ setLoadedLocalFile(null)}
+ />
+
+
+
+ )}
+
+
+ );
+});
+
+export default LocalComponent;
diff --git a/src/components/load-modal/recent-footer.tsx b/src/components/load-modal/recent-footer.tsx
new file mode 100644
index 00000000..9d5cade2
--- /dev/null
+++ b/src/components/load-modal/recent-footer.tsx
@@ -0,0 +1,30 @@
+import { observer } from 'mobx-react-lite';
+
+import { Button } from '@deriv-com/ui';
+
+import { NOTIFICATION_TYPE } from '@/components/bot-notification/bot-notification-utils';
+import { useStore } from '@/hooks/useStore';
+import { localize } from '@/utils/tmp/dummy';
+
+const RecentFooter = observer(() => {
+ const { load_modal, dashboard } = useStore();
+ const { is_open_button_loading, loadFileFromRecent, toggleLoadModal } = load_modal;
+ const { setOpenSettings } = dashboard;
+
+ return (
+
+ setIsFileSupported(handleFileChange(e, false))}
+ data-testid='dt-load-strategy-file-input'
+ />
+
+ {
+ handleFileChange(e, false);
+ }}
+ >
+ {is_mobile ? (
+
+
+ )}
+
+
+
+
+
+