From ff1ee1e9483d7f1867b2e2f1ce1c0e5db2e49d1a Mon Sep 17 00:00:00 2001
From: shafin-deriv <shafin@regentmarkets.com>
Date: Fri, 29 Sep 2023 12:56:16 +0800
Subject: [PATCH] chore: show snackbar if strategy changed while running bot

---
 packages/bot-web-ui/src/app/app.scss          |  1 +
 .../components/bot-snackbar/bot-snackbar.scss | 36 +++++++++++++
 .../components/bot-snackbar/bot-snackbar.tsx  | 50 +++++++++++++++++++
 .../src/components/bot-snackbar/index.tsx     |  4 ++
 .../dashboard/bot-builder/bot-builder.tsx     | 43 +++++++++++++++-
 5 files changed, 132 insertions(+), 2 deletions(-)
 create mode 100644 packages/bot-web-ui/src/components/bot-snackbar/bot-snackbar.scss
 create mode 100644 packages/bot-web-ui/src/components/bot-snackbar/bot-snackbar.tsx
 create mode 100644 packages/bot-web-ui/src/components/bot-snackbar/index.tsx

diff --git a/packages/bot-web-ui/src/app/app.scss b/packages/bot-web-ui/src/app/app.scss
index 74c48607c549..9bc3e6996dbe 100644
--- a/packages/bot-web-ui/src/app/app.scss
+++ b/packages/bot-web-ui/src/app/app.scss
@@ -15,4 +15,5 @@
     --zindex-drawer: 5;
     --zindex-modal: 6;
     --zindex-draggable-modal: 7;
+    --zindex-snackbar: 8;
 }
diff --git a/packages/bot-web-ui/src/components/bot-snackbar/bot-snackbar.scss b/packages/bot-web-ui/src/components/bot-snackbar/bot-snackbar.scss
new file mode 100644
index 000000000000..73e1a2cde9da
--- /dev/null
+++ b/packages/bot-web-ui/src/components/bot-snackbar/bot-snackbar.scss
@@ -0,0 +1,36 @@
+.bot-snackbar {
+    position: fixed;
+    z-index: var(--zindex-snackbar);
+    right: 38rem;
+    top: 12rem;
+
+    .dc-toast {
+        width: 100%;
+        &__message {
+            background: var(--text-prominent);
+            color: var(--general-main-1);
+            padding: 1rem 1.6rem;
+        }
+        &__message-content {
+            display: flex;
+
+            @include mobile {
+                align-items: center;
+            }
+        }
+    }
+
+    @include mobile {
+        top: unset;
+        left: 0;
+        right: 0;
+        bottom: 10.5rem;
+    }
+
+    .notification-close {
+        cursor: pointer;
+        filter: invert(1);
+        margin-left: 1rem;
+        margin-top: 0.1rem;
+    }
+}
diff --git a/packages/bot-web-ui/src/components/bot-snackbar/bot-snackbar.tsx b/packages/bot-web-ui/src/components/bot-snackbar/bot-snackbar.tsx
new file mode 100644
index 000000000000..8fa2bb0ecc0a
--- /dev/null
+++ b/packages/bot-web-ui/src/components/bot-snackbar/bot-snackbar.tsx
@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { Icon, Toast } from '@deriv/components';
+import { Localize } from '@deriv/translations';
+
+type TBotSnackbar = {
+    className?: string;
+    is_open?: boolean;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    handleClose: () => void;
+    type?: 'error' | 'info' | 'notification';
+    timeout?: number;
+    msg_localize_components?: JSX.Element[];
+    message: string;
+};
+
+const BotSnackbar = ({
+    message = '',
+    msg_localize_components = [],
+    timeout = 6000,
+    is_open = false,
+    onClick,
+    handleClose,
+    type,
+    className,
+}: TBotSnackbar) => {
+    const [notification_timer, setNotificationTimer] = useState(timeout);
+
+    return (
+        <div
+            onMouseOver={() => {
+                setNotificationTimer(20000);
+            }}
+            onMouseLeave={() => {
+                setNotificationTimer(timeout);
+            }}
+            className={className ?? 'bot-snackbar'}
+        >
+            <Toast is_open={is_open} type={type} timeout={notification_timer} onClick={onClick} onClose={handleClose}>
+                <div>{message && <Localize i18n_default_text={message} components={msg_localize_components} />}</div>
+                <Icon
+                    icon='IcCross'
+                    className={'bot-snackbar-notification-close'}
+                    data_testid={'bot-snackbar-notification-close'}
+                    onClick={handleClose}
+                />
+            </Toast>
+        </div>
+    );
+};
+export default BotSnackbar;
diff --git a/packages/bot-web-ui/src/components/bot-snackbar/index.tsx b/packages/bot-web-ui/src/components/bot-snackbar/index.tsx
new file mode 100644
index 000000000000..28deeddded1e
--- /dev/null
+++ b/packages/bot-web-ui/src/components/bot-snackbar/index.tsx
@@ -0,0 +1,4 @@
+import BotSnackbar from './bot-snackbar';
+import './bot-snackbar.scss';
+
+export default BotSnackbar;
diff --git a/packages/bot-web-ui/src/components/dashboard/bot-builder/bot-builder.tsx b/packages/bot-web-ui/src/components/dashboard/bot-builder/bot-builder.tsx
index a7bfbcde7dcd..8da25eac07db 100644
--- a/packages/bot-web-ui/src/components/dashboard/bot-builder/bot-builder.tsx
+++ b/packages/bot-web-ui/src/components/dashboard/bot-builder/bot-builder.tsx
@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useRef, useState } from 'react';
 import classNames from 'classnames';
 import { observer } from '@deriv/stores';
 import { useDBotStore } from '../../../stores/useDBotStore';
+import BotSnackbar from '../../bot-snackbar';
 import LoadModal from '../../load-modal';
 import SaveModal from '../dashboard-component/load-bot-preview/save-modal';
 import BotBuilderTourHandler from '../dbot-tours/bot-builder-tour';
@@ -9,8 +10,11 @@ import QuickStrategy from '../quick-strategy';
 import WorkspaceWrapper from './workspace-wrapper';
 
 const BotBuilder = observer(() => {
-    const { dashboard, app } = useDBotStore();
+    const { dashboard, app, run_panel } = useDBotStore();
     const { active_tab, active_tour, is_preview_on_popup } = dashboard;
+    const { is_running } = run_panel;
+    const is_blockly_listener_registered = useRef(false);
+    const [show_snackbar, setShowSnackbar] = useState(false);
 
     const { onMount, onUnmount } = app;
     const el_ref = React.useRef<HTMLInputElement | null>(null);
@@ -20,8 +24,43 @@ const BotBuilder = observer(() => {
         return () => onUnmount();
     }, []);
 
+    const handleBlockChangeOnBotRun = (e: Event) => {
+        if (e.type !== 'ui') {
+            setShowSnackbar(true);
+            removeBlockChangeListener();
+        }
+    };
+
+    const removeBlockChangeListener = () => {
+        is_blockly_listener_registered.current = false;
+        window.Blockly?.derivWorkspace?.removeChangeListener(handleBlockChangeOnBotRun);
+    };
+
+    React.useEffect(() => {
+        const workspace = window.Blockly?.derivWorkspace;
+        if (workspace && is_running && !is_blockly_listener_registered.current) {
+            is_blockly_listener_registered.current = true;
+            workspace.addChangeListener(handleBlockChangeOnBotRun);
+        } else {
+            setShowSnackbar(false);
+            removeBlockChangeListener();
+        }
+
+        return () => {
+            if (workspace && is_blockly_listener_registered.current) {
+                removeBlockChangeListener();
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [is_running]);
+
     return (
         <>
+            <BotSnackbar
+                is_open={show_snackbar}
+                message='Changes you make will not affect your running bot.'
+                handleClose={() => setShowSnackbar(false)}
+            />
             <div
                 className={classNames('bot-builder', {
                     'bot-builder--active': active_tab === 1 && !is_preview_on_popup,