From 5bcd33bd85d6ecdc212c7e97754959c1e14edb34 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Mon, 19 Feb 2024 12:48:32 +0200 Subject: [PATCH 1/5] adding localStorage to remember user clicks --- .../src/components/ProvisionsPopup/ProvisionsPopup.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/workspaces/website/src/components/ProvisionsPopup/ProvisionsPopup.tsx b/workspaces/website/src/components/ProvisionsPopup/ProvisionsPopup.tsx index 4376417cbc..d36788fc0f 100644 --- a/workspaces/website/src/components/ProvisionsPopup/ProvisionsPopup.tsx +++ b/workspaces/website/src/components/ProvisionsPopup/ProvisionsPopup.tsx @@ -1,7 +1,7 @@ import { Box, Image, Icon, Fade, IconButton } from "@chakra-ui/react"; import Background from "./popup-background.png"; import Logo from "./popup-text.svg"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import CloseIcon from "./CloseIcon/CloseIcon"; import ArrowRight from "./ArrowRight/ArrowRight"; import { Button } from "@ui/Button"; @@ -15,10 +15,16 @@ const ProvisionsPopup = () => { const gtmEventClickReadMore = () => gtmEvent("Provisions popup click"); const gtmEventClickClose = () => gtmEvent("Provisions popup close"); + useEffect(() => { + const popupState = window.localStorage.getItem("ProvisionsPopup state"); + if (popupState === "true") setIsOpen(false); + }, []); + const onClose = (event: React.MouseEvent) => { event.stopPropagation(); gtmEventClickClose(); toggleModal(); + window.localStorage.setItem("ProvisionsPopup state", "true"); }; return ( @@ -33,6 +39,7 @@ const ProvisionsPopup = () => { bottom="0" right="0" left="0" + display={isOpen ? "" : "none"} backgroundColor="rgba(0,0,0,0.7)" onClick={onClose} > From aae35fcf601535c09975ca9e10cceeea25072d03 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Mon, 19 Feb 2024 13:03:19 +0200 Subject: [PATCH 2/5] change the default from true to false --- .../src/components/ProvisionsPopup/ProvisionsPopup.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/workspaces/website/src/components/ProvisionsPopup/ProvisionsPopup.tsx b/workspaces/website/src/components/ProvisionsPopup/ProvisionsPopup.tsx index d36788fc0f..c7fdafc1f6 100644 --- a/workspaces/website/src/components/ProvisionsPopup/ProvisionsPopup.tsx +++ b/workspaces/website/src/components/ProvisionsPopup/ProvisionsPopup.tsx @@ -7,7 +7,7 @@ import ArrowRight from "./ArrowRight/ArrowRight"; import { Button } from "@ui/Button"; const ProvisionsPopup = () => { - const [isOpen, setIsOpen] = useState(true); + const [isOpen, setIsOpen] = useState(false); const toggleModal = () => setIsOpen((prevState) => !prevState); @@ -17,7 +17,7 @@ const ProvisionsPopup = () => { useEffect(() => { const popupState = window.localStorage.getItem("ProvisionsPopup state"); - if (popupState === "true") setIsOpen(false); + if (popupState === "false") setIsOpen(true); }, []); const onClose = (event: React.MouseEvent) => { From f609c1126ad74d7b412c23441ae543f5022a220c Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Mon, 19 Feb 2024 13:05:26 +0200 Subject: [PATCH 3/5] fix display from "" to "block" --- .../src/components/ProvisionsPopup/ProvisionsPopup.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/workspaces/website/src/components/ProvisionsPopup/ProvisionsPopup.tsx b/workspaces/website/src/components/ProvisionsPopup/ProvisionsPopup.tsx index c7fdafc1f6..2fdb0c0769 100644 --- a/workspaces/website/src/components/ProvisionsPopup/ProvisionsPopup.tsx +++ b/workspaces/website/src/components/ProvisionsPopup/ProvisionsPopup.tsx @@ -17,7 +17,7 @@ const ProvisionsPopup = () => { useEffect(() => { const popupState = window.localStorage.getItem("ProvisionsPopup state"); - if (popupState === "false") setIsOpen(true); + if (!popupState || popupState === "false") setIsOpen(true); }, []); const onClose = (event: React.MouseEvent) => { @@ -39,7 +39,7 @@ const ProvisionsPopup = () => { bottom="0" right="0" left="0" - display={isOpen ? "" : "none"} + display={isOpen ? "block" : "none"} backgroundColor="rgba(0,0,0,0.7)" onClick={onClose} > From ad93c64e1e761e2956daefe3eac5dcfbdbc11800 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Mon, 19 Feb 2024 13:06:02 +0200 Subject: [PATCH 4/5] chnage to unset --- .../website/src/components/ProvisionsPopup/ProvisionsPopup.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/workspaces/website/src/components/ProvisionsPopup/ProvisionsPopup.tsx b/workspaces/website/src/components/ProvisionsPopup/ProvisionsPopup.tsx index 2fdb0c0769..9ac910d867 100644 --- a/workspaces/website/src/components/ProvisionsPopup/ProvisionsPopup.tsx +++ b/workspaces/website/src/components/ProvisionsPopup/ProvisionsPopup.tsx @@ -39,7 +39,7 @@ const ProvisionsPopup = () => { bottom="0" right="0" left="0" - display={isOpen ? "block" : "none"} + display={isOpen ? "unset" : "none"} backgroundColor="rgba(0,0,0,0.7)" onClick={onClose} > From 283e03dd423a1d579e98d045264075cb010823af Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Mon, 19 Feb 2024 13:42:41 +0200 Subject: [PATCH 5/5] 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(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 ( @@ -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"} >