From 0ed9f730b2c444d15a0201398ef3d431c2484a06 Mon Sep 17 00:00:00 2001
From: Egor Savkin <es@m-labs.hk>
Date: Wed, 3 Jan 2024 17:34:26 +0800
Subject: [PATCH] Add prototype of the notification, fixes and animation needed

Signed-off-by: Egor Savkin <es@m-labs.hk>
---
 static/css/order-hardware.css            |  8 ++++++++
 static/images/shop/icon-notification.svg |  1 +
 static/js/shop/options/DialogPopup.jsx   | 11 +++++++++--
 static/js/shop/options/Notification.jsx  | 19 +++++++++++++++++++
 4 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 static/images/shop/icon-notification.svg
 create mode 100644 static/js/shop/options/Notification.jsx

diff --git a/static/css/order-hardware.css b/static/css/order-hardware.css
index f3033ae7..5a419200 100644
--- a/static/css/order-hardware.css
+++ b/static/css/order-hardware.css
@@ -61,6 +61,14 @@
   text-decoration: none;
 }
 
+.options-notification {
+  width: 5px;
+  height: 5px;
+  position: relative;
+  top: -2.5px;
+  right: -2.5px;
+}
+
 /*
   ##Device = Tablets, Ipads (portrait)
   ##Screen = B/w 768px to 1024px
diff --git a/static/images/shop/icon-notification.svg b/static/images/shop/icon-notification.svg
new file mode 100644
index 00000000..a8091ff0
--- /dev/null
+++ b/static/images/shop/icon-notification.svg
@@ -0,0 +1 @@
+<svg width="32" height="32" version="1.1" viewBox="0 0 8.4667 8.4667" xmlns="http://www.w3.org/2000/svg"><circle cx="4.2333" cy="4.2333" r="3.9077" fill="#d0423f" stroke="#d0423f" stroke-linecap="round" stroke-width=".65136"/></svg>
diff --git a/static/js/shop/options/DialogPopup.jsx b/static/js/shop/options/DialogPopup.jsx
index d5811a3d..6e96e0f8 100644
--- a/static/js/shop/options/DialogPopup.jsx
+++ b/static/js/shop/options/DialogPopup.jsx
@@ -1,6 +1,7 @@
 import React, {useState} from "react";
 import {useClickAway} from "./useClickAway";
 import {ProcessOptions} from "./Options";
+import {Notification} from "./Notification";
 
 export function DialogPopup({options, data, target, id, big, first, last, options_class}) {
     const [show, setShow] = useState(false);
@@ -17,8 +18,14 @@ export function DialogPopup({options, data, target, id, big, first, last, option
 
     return (
         <div ref={ref}>
-            <img className="alert-info" src={show ? "/images/shop/icon-close.svg" : "/images/shop/icon-customize.svg"}
-                 onClick={handleClick}/>
+            <Notification
+                id={"processed_options_notification" + id}
+                tip="ABOBA"
+                content={
+                    <img className="alert-info" src={show ? "/images/shop/icon-close.svg" : "/images/shop/icon-customize.svg"}
+                         onClick={handleClick}/>
+                }
+            />
             <div style={{'display': show ? 'flex' : 'none'}} className={div_classes}>
                 <ProcessOptions
                     options={options}
diff --git a/static/js/shop/options/Notification.jsx b/static/js/shop/options/Notification.jsx
new file mode 100644
index 00000000..f3776387
--- /dev/null
+++ b/static/js/shop/options/Notification.jsx
@@ -0,0 +1,19 @@
+import {OverlayTrigger, Tooltip} from "react-bootstrap";
+import React, {useState} from "react";
+
+export function Notification({id, tip, content}) {
+    const [show, setShow] = useState(true);
+    return (
+        <div className="" onClick={() => setShow(false)}>
+            {content}
+            <OverlayTrigger
+                placement="auto"
+                trigger={['click', 'hover', 'focus']}
+                style={{display: show ? 'inline' : "hidden"}}
+                overlay={<Tooltip id={id}>{tip}</Tooltip>}
+            >
+                <img src="/images/shop/icon-notification.svg" className="options-notification" style={{display: show ? 'inline' : "hidden"}}/>
+            </OverlayTrigger>
+        </div>
+    )
+}
\ No newline at end of file