From 6d6809af7f90cb1cee33d80890319a082d97c512 Mon Sep 17 00:00:00 2001
From: Egor Savkin <es@m-labs.hk>
Date: Mon, 15 Jan 2024 12:28:07 +0800
Subject: [PATCH] Show tooltip instead of badge by default

Signed-off-by: Egor Savkin <es@m-labs.hk>
---
 sass/css/_shop.scss                       | 19 +-----------
 static/css/order-hardware.css             |  8 -----
 static/js/shop/options/Notification.jsx   | 37 +++++++++++++----------
 static/js/shop/options/components/Tip.jsx |  1 +
 4 files changed, 23 insertions(+), 42 deletions(-)

diff --git a/sass/css/_shop.scss b/sass/css/_shop.scss
index fb6f4cf..d5cda41 100644
--- a/sass/css/_shop.scss
+++ b/sass/css/_shop.scss
@@ -454,29 +454,12 @@ button {
                             height: 24px;
                         }
 
-                        > .alert-warning, .alert-info, .options-notification {
+                        > .alert-warning, .alert-info {
                             background-color: inherit;
                             height: inherit;
                             width: 20px;
                             padding-bottom: 3px;
                         }
-                        .options-notification {
-                            position: relative;
-                            display: inline-block;
-
-                            .options-badge {
-                                position: absolute;
-                                top: -2.5px;
-                                right: -3.5px;
-                                padding: 0;
-                                color: white;
-                                width: 7px;
-                                height: 7px;
-                                background-image: url("/images/shop/icon-notification.svg") ;
-                                background-repeat: no-repeat;
-                                background-size: 7px;
-                            }
-                        }
                     }
 
                     .overlayRemove {
diff --git a/static/css/order-hardware.css b/static/css/order-hardware.css
index 2861279..6d7952e 100644
--- a/static/css/order-hardware.css
+++ b/static/css/order-hardware.css
@@ -73,14 +73,6 @@
   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/js/shop/options/Notification.jsx b/static/js/shop/options/Notification.jsx
index a1c7e54..5e21d25 100644
--- a/static/js/shop/options/Notification.jsx
+++ b/static/js/shop/options/Notification.jsx
@@ -1,26 +1,31 @@
 import {OverlayTrigger, Tooltip} from "react-bootstrap";
-import React, {useState} from "react";
+import React, {useEffect, useState, useRef} from "react";
+import {useClickAway} from "./useClickAway";
 
 export function Notification({id, tip, content}) {
-    const [show, setShow] = useState(true);
-    const onClickHandler = (event) => {
-        // prevent removing badge on touchables
-        if (!event.target.classList.contains("options-badge"))
-            setShow(false);
-    };
+    const [show, setShow] = useState(false);
+
+    useEffect(() => {
+        setTimeout(() => {
+            setShow(true)
+        }, 100);
+
+        setTimeout(() => {
+            setShow(false)
+        }, 5000);
+    }, []);
 
     return (
-        <div className="options-notification" onClick={onClickHandler}>
-            {content}
-            {show ? <OverlayTrigger
-                placement="auto"
-                trigger={['click', 'hover', 'focus']}
+            <OverlayTrigger
+                placement="top"
+                trigger={["click", "hover"]}
                 style={{display: 'inline'}}
+                show={show}
+                onToggle={() => setShow(false)}
                 overlay={<Tooltip id={id}>{tip}</Tooltip>}
+                rootClose
             >
-                <span className="options-badge"></span>
-            </OverlayTrigger> : null}
-
-        </div>
+                {content}
+            </OverlayTrigger>
     )
 }
\ No newline at end of file
diff --git a/static/js/shop/options/components/Tip.jsx b/static/js/shop/options/components/Tip.jsx
index d06f157..22f86b7 100644
--- a/static/js/shop/options/components/Tip.jsx
+++ b/static/js/shop/options/components/Tip.jsx
@@ -8,6 +8,7 @@ export function Tip({id, tip}) {
             trigger={['click', 'hover', 'focus']}
             style={{display: 'inline'}}
             overlay={<Tooltip id={id}>{tip}</Tooltip>}
+            rootClose
         >
             <img src={`/images/shop/icon-reminder.svg`} className="options-icon"/>
         </OverlayTrigger>