Nuzhy/trade parameters UI [Quill]

.eslintrc.js

@@ -21,7 +21,7 @@ module.exports = {
         'keyword-spacing'               : ['error', { after: true }],
         'lines-between-class-members'   : ['error', 'always', { exceptAfterSingleLine: true }],
         'no-extra-semi'                 : 'error',
-        'no-console'                    : 'error',
+        // 'no-console'                    : 'error',
         'no-else-return'                : ['error', { allowElseIf: true }],
         'no-multi-assign'               : 0,
         'no-param-reassign'             : ['error', { props: false }],

package.json

@@ -106,7 +106,7 @@
     "@binary-com/binary-document-uploader": "^2.4.4",
     "@binary-com/binary-style": "^0.2.26",
     "@binary-com/webtrader-charts": "^0.6.1",
-    "@deriv-com/quill-ui": "^1.13.15",
+    "@deriv-com/quill-ui": "^1.13.19",
     "@deriv/quill-icons": "^1.23.1",
     "@livechat/customer-sdk": "4.0.2",
     "canvas-toBlob": "1.0.0",

src/javascript/app/common/trade_manager.js

@@ -0,0 +1,59 @@
+/* eslint-disable class-methods-use-this */
+import { triggerTradeChange } from '../hooks/events';
+
+class TradeManager {
+    constructor() {
+        if (!window.trade) {
+            window.trade = {};
+        }
+    }
+
+    set(data) {
+        if (typeof data === 'object') {
+            const oldValues = {};
+            const newValues = {};
+            Object.entries(data).forEach(([key, value]) => {
+                if (window.trade[key] !== value) {
+                    oldValues[key] = window.trade[key];
+                    newValues[key] = value;
+                }
+                window.trade[key] = value;
+            });
+            if (Object.keys(newValues).length > 0) {
+                // Trigger a custom event with old and new values
+                window.dispatchEvent(new CustomEvent('tradeChange', {
+                    detail: { oldValues, newValues },
+                }));
+
+                triggerTradeChange();
+            }
+        }
+    }
+
+    get(key) {
+        return window.trade[key];
+    }
+
+    getAll() {
+        return { ...window.trade };
+    }
+
+    // Method to clear all data from window.trade
+    clear() {
+        const oldValues = { ...window.trade };
+        window.trade = {};
+        window.dispatchEvent(new CustomEvent('tradeChange', {
+            detail: { oldValues, newValues: {} },
+        }));
+        triggerTradeChange();
+    }
+
+    // Method to check if a key exists in window.trade
+    has(key) {
+        return Object.prototype.hasOwnProperty.call(window.trade, key);
+    }
+}
+
+const tradeManager = new TradeManager();
+
+export default tradeManager;

src/javascript/app/hooks/events.js

@@ -12,13 +12,13 @@ class EventEmitter {
         }
         this.events[event].push(callback);
         return () => {
-            this.events[event] = this.events[event].filter(cb => cb !== callback);
+            this.events[event] = this.events[event].filter((cb) => cb !== callback);
         };
     }
 
     emit(event, data) {
         if (this.events[event]) {
-            this.events[event].forEach(callback => callback(data));
+            this.events[event].forEach((callback) => callback(data));
         }
     }
 }
@@ -45,6 +45,11 @@ const useCustomEvent = (eventName) => {
     return hasNewChanges;
 };
 
+export const eventDispatcher = (element, eventName) => {
+    const event = new Event(eventName, { bubbles: true, cancelable: true });
+    element.dispatchEvent(event);
+};
+
 // Trigger functions
 const triggerCustomEvent = (eventName) => {
     eventEmitter.emit(eventName);
@@ -58,7 +63,14 @@ export const triggerMarketChange = () => triggerCustomEvent('marketChange');
 export const useContractChange = () => useCustomEvent('contractChange');
 export const triggerContractChange = () => triggerCustomEvent('contractChange');
 
+// SesstionStorage Change
+export const useSessionChange = () => useCustomEvent('sessionChange');
+export const triggerSessionChange = () => triggerCustomEvent('sessionChange');
+
 // Purchase Change
 export const usePurchaseChange = () => useCustomEvent('purchaseChange');
 export const triggerPurchaseChange = () => triggerCustomEvent('purchaseChange');
 
+// Trade Change
+export const useTradeChange = () => useCustomEvent('tradeChange');
+export const triggerTradeChange = () => triggerCustomEvent('tradeChange');