From 3ab7a8ffd0f16c0473e6d9acf48805c064d06872 Mon Sep 17 00:00:00 2001
From: Egor Savkin <es@m-labs.hk>
Date: Wed, 23 Aug 2023 12:58:13 +0800
Subject: [PATCH] Hide popups on clicking outside of them

Signed-off-by: Egor Savkin <es@m-labs.hk>
---
 package-lock.json             | 14 ++++++++++++++
 package.json                  |  3 ++-
 static/js/shop.jsx            |  3 ++-
 static/js/shop_components.jsx |  9 ++++++---
 4 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e6e6ff7..5db3e1e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@babel/core": "^7.22.8",
         "@babel/preset-env": "^7.22.7",
         "@babel/preset-react": "^7.22.5",
+        "@uidotdev/usehooks": "^2.1.1",
         "axios": "^1.4.0",
         "babel-loader": "^9.1.3",
         "babel-preset-minify": "^0.5.2",
@@ -2012,6 +2013,19 @@
       "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==",
       "dev": true
     },
+    "node_modules/@uidotdev/usehooks": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@uidotdev/usehooks/-/usehooks-2.1.1.tgz",
+      "integrity": "sha512-sVJ1jXU62Edh22dREEa3mHcHnH2MUgokuzLw9guNS30ADCkdhYASNZxg2V8iB83iwY5H+jSeSxjqGaFvsRrNBQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=16"
+      },
+      "peerDependencies": {
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0"
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
diff --git a/package.json b/package.json
index 68fce3a..664e7ce 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,8 @@
     "uuid": "^9.0.0",
     "webpack": "^5.88.1",
     "webpack-cli": "^5.1.4",
-    "json-logic-js": "^2.0.2"
+    "json-logic-js": "^2.0.2",
+    "@uidotdev/usehooks": "^2.1.1"
   },
   "babel": {
     "presets": [
diff --git a/static/js/shop.jsx b/static/js/shop.jsx
index ae5e17e..78384b5 100644
--- a/static/js/shop.jsx
+++ b/static/js/shop.jsx
@@ -1303,7 +1303,8 @@ class OrderForm extends React.PureComponent {
               className="btn btn-outline-primary w-100 m-0 mb-2 mb-sm-0 me-sm-2"
               style={{'cursor': 'pointer', 'fontWeight': '700'}}
               value="Show JSON"
-              onClick={onClickShow} />
+              onClick={onClickShow}
+              readOnly={true} />
 
             <input className="btn btn-primary w-100 m-0 ms-sm-2" type="submit" value={`${isProcessing ? 'Processing ...' : 'Request quote'}`} />
           </div>
diff --git a/static/js/shop_components.jsx b/static/js/shop_components.jsx
index a63e691..7d6f52c 100644
--- a/static/js/shop_components.jsx
+++ b/static/js/shop_components.jsx
@@ -3,6 +3,7 @@
 import React, {Component} from "react";
 import jsonLogic from 'json-logic-js';
 import {useState} from 'react';
+import {useClickAway} from "@uidotdev/usehooks";
 
 // https://stackoverflow.com/a/70511311
 const trueTypeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
@@ -239,7 +240,7 @@ const componentsList = {
 };
 
 
-export default function ProcessOptions({options, data, target, id}) {
+export function ProcessOptions({options, data, target, id}) {
     let options_t = trueTypeOf(options);
 
     if (options_t === "array") {
@@ -269,6 +270,7 @@ export default function ProcessOptions({options, data, target, id}) {
 
 export function CustomizeButton({options, data, target, id, big}) {
     const [show, setShow] = useState(false);
+    const ref = useClickAway(() => setShow(false));
 
     let div_classes = "overlayVariant border rounded " + (big ? "overlay-bigcard" : "overlay-smallcard")
     const handleClick = (event) => {
@@ -276,7 +278,7 @@ export function CustomizeButton({options, data, target, id, big}) {
     };
 
     return (
-        <div>
+        <div ref={ref}>
             <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}>
@@ -295,6 +297,7 @@ export function CustomizeButton({options, data, target, id, big}) {
 export function CustomizeData({id, data}) {
     const [show, setShow] = useState(false);
     const [position, setPosition] = useState({x: 0, y: 0});
+    const ref = useClickAway(() => setShow(false));
 
     const handleClick = (event) => {
         setPosition({x: event.clientX, y: event.clientY});
@@ -316,7 +319,7 @@ export function CustomizeData({id, data}) {
     }
 
     return (
-        <div>
+        <div ref={ref}>
             <img className="alert-info" src={show ? "/images/shop/icon-close.svg" : "/images/shop/icon-customize.svg"}
                  style={{'marginLeft': '10px'}}
                  onClick={handleClick}/>