From 283e03dd423a1d579e98d045264075cb010823af Mon Sep 17 00:00:00 2001
From: Tal-Ben-Avi <talb@webiya.co.il>
Date: Mon, 19 Feb 2024 13:42:41 +0200
Subject: [PATCH] adding useLocalStorage

---
 package.json                                  |  1 +
 .../ProvisionsPopup/ProvisionsPopup.tsx       | 22 +++++++++----------
 yarn.lock                                     | 12 ++++++++++
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 0eff786912..1660e7b6c2 100644
--- a/package.json
+++ b/package.json
@@ -96,6 +96,7 @@
     "unified": "^10.1.2",
     "unist-util-index": "^3.0.2",
     "use-scramble": "^2.2.12",
+    "usehooks-ts": "^2.14.0",
     "video.js": "^8.3.0",
     "vite": "^4.3.9",
     "vite-tsconfig-paths": "^4.2.0",
diff --git a/workspaces/website/src/components/ProvisionsPopup/ProvisionsPopup.tsx b/workspaces/website/src/components/ProvisionsPopup/ProvisionsPopup.tsx
index 9ac910d867..dfd847754b 100644
--- a/workspaces/website/src/components/ProvisionsPopup/ProvisionsPopup.tsx
+++ b/workspaces/website/src/components/ProvisionsPopup/ProvisionsPopup.tsx
@@ -1,35 +1,33 @@
 import { Box, Image, Icon, Fade, IconButton } from "@chakra-ui/react";
 import Background from "./popup-background.png";
 import Logo from "./popup-text.svg";
-import { useEffect, useState } from "react";
 import CloseIcon from "./CloseIcon/CloseIcon";
 import ArrowRight from "./ArrowRight/ArrowRight";
 import { Button } from "@ui/Button";
+import { useLocalStorage } from "usehooks-ts";
 
 const ProvisionsPopup = () => {
-  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [isProvisionsPopupOpen, setIsProvisionsPopupOpen] = useLocalStorage(
+    "isProvisionsPopupOpen",
+    true
+  );
 
-  const toggleModal = () => setIsOpen((prevState) => !prevState);
+  const toggleModal = () => setIsProvisionsPopupOpen((prevState) => !prevState);
 
   const gtmEvent = (event: string) => window?.dataLayer.push({ event });
   const gtmEventClickReadMore = () => gtmEvent("Provisions popup click");
   const gtmEventClickClose = () => gtmEvent("Provisions popup close");
 
-  useEffect(() => {
-    const popupState = window.localStorage.getItem("ProvisionsPopup state");
-    if (!popupState || popupState === "false") setIsOpen(true);
-  }, []);
-
   const onClose = (event: React.MouseEvent) => {
     event.stopPropagation();
     gtmEventClickClose();
     toggleModal();
-    window.localStorage.setItem("ProvisionsPopup state", "true");
+    setIsProvisionsPopupOpen(false);
   };
 
   return (
     <Fade
-      in={isOpen}
+      in={isProvisionsPopupOpen}
       style={{ zIndex: "9999" }}
       transition={{ enter: { duration: 0.5 } }}
     >
@@ -39,7 +37,7 @@ const ProvisionsPopup = () => {
         bottom="0"
         right="0"
         left="0"
-        display={isOpen ? "unset" : "none"}
+        display={isProvisionsPopupOpen ? "unset" : "none"}
         backgroundColor="rgba(0,0,0,0.7)"
         onClick={onClose}
       >
@@ -52,7 +50,7 @@ const ProvisionsPopup = () => {
           h={[358]}
           borderRadius="8px"
           bgGradient="linear(to-l, #0C0C4F, #3F8CFF)"
-          display={!isOpen ? "none" : "block"}
+          display={!isProvisionsPopupOpen ? "none" : "block"}
         >
           <Box
             mt="2px"
diff --git a/yarn.lock b/yarn.lock
index a0c8443a7c..aa134bfe2f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4836,6 +4836,7 @@ __metadata:
     unified: ^10.1.2
     unist-util-index: ^3.0.2
     use-scramble: ^2.2.12
+    usehooks-ts: ^2.14.0
     video.js: ^8.3.0
     vite: ^4.3.9
     vite-tsconfig-paths: ^4.2.0
@@ -19284,6 +19285,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"usehooks-ts@npm:^2.14.0":
+  version: 2.14.0
+  resolution: "usehooks-ts@npm:2.14.0"
+  dependencies:
+    lodash.debounce: ^4.0.8
+  peerDependencies:
+    react: ^16.8.0  || ^17 || ^18
+  checksum: 12cfb95de2624aa9005f35ac4b924b3f64c95e1f09fa0b20cb16cf1c47f811d454a30fe492e1f40b6b93a32c3772c6c16d26a381f6a28f26c06b6724ca0d0960
+  languageName: node
+  linkType: hard
+
 "utf8-byte-length@npm:^1.0.1":
   version: 1.0.4
   resolution: "utf8-byte-length@npm:1.0.4"