From 21d76441086a749dc779dfa385ed4e376859d4bf Mon Sep 17 00:00:00 2001
From: Simone Cuomo <simone@thisdot.co>
Date: Thu, 19 Dec 2024 13:22:02 +0000
Subject: [PATCH 1/2] WIP 383

---
 .../notifications/components/HeaderBanner.tsx | 51 +++++++++++++++++--
 1 file changed, 47 insertions(+), 4 deletions(-)

diff --git a/src/features/notifications/components/HeaderBanner.tsx b/src/features/notifications/components/HeaderBanner.tsx
index 3c048c67a34..6ae8b97d5fd 100644
--- a/src/features/notifications/components/HeaderBanner.tsx
+++ b/src/features/notifications/components/HeaderBanner.tsx
@@ -32,14 +32,19 @@ const bannerTypes: Record<BannerType, { primaryColour: string; textColour: strin
 }
 
 export const HeaderBanner: React.FC<{ bannerContent?: BannerContent }> = ({ bannerContent }) => {
+  const [cookieValue, setCookieValue] = useState([])
   const [isDismissed, setIsDismissed] = useState(true) // Change to false to show banner later to prevent flasing on page load for users who have already dismissed it
+
+  if (!bannerContent) return null
   useEffect(() => {
-    const isDismissedLocalStorage = localStorage.getItem("headerBannerDismissed")
-    if (!isDismissedLocalStorage || isDismissedLocalStorage !== bannerContent?.description) {
+    const dismissedBannersCookie = getCookie("headerBannerDismissed")
+    const parsedCookieValue = JSON.parse(dismissedBannersCookie || "[]")
+    setCookieValue(parsedCookieValue)
+    if (!parsedCookieValue.includes(bannerContent.description)) {
       setIsDismissed(false)
     }
   }, [isDismissed])
-  if (!bannerContent || isDismissed) return null
+  if (isDismissed) return null
   return (
     <div
       className={clsx(headerbanner.container, headerbannerCustom.container)}
@@ -60,7 +65,8 @@ export const HeaderBanner: React.FC<{ bannerContent?: BannerContent }> = ({ bann
       <button
         className={headerbannerCustom.dismiss}
         onClick={() => {
-          localStorage.setItem("headerBannerDismissed", bannerContent.description)
+          const newCookieValue = [...cookieValue, bannerContent.description]
+          setCookie("headerBannerDismissed", JSON.stringify(newCookieValue), 365)
           setIsDismissed(true)
         }}
       >
@@ -69,3 +75,40 @@ export const HeaderBanner: React.FC<{ bannerContent?: BannerContent }> = ({ bann
     </div>
   ) as React.ReactElement // Explicitly assigning to ReactElement cause TS is confused otherwise
 }
+
+function getCookie(cname) {
+  const name = cname + "="
+  const decodedCookie = decodeURIComponent(document.cookie)
+  const ca = decodedCookie.split(";")
+  for (let i = 0; i < ca.length; i++) {
+    let c = ca[i]
+    while (c.charAt(0) === " ") {
+      c = c.substring(1)
+    }
+    if (c.indexOf(name) === 0) {
+      return c.substring(name.length, c.length)
+    }
+  }
+  return undefined
+}
+function setCookie(cname, cvalue, exdays = 365) {
+  const baseDomain = getBaseDomain(window.location.href)
+  const d = new Date()
+  d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000)
+  const expires = "expires=" + d.toUTCString()
+  document.cookie = `${cname}=${cvalue};${expires};path=/;domain=${baseDomain}`
+}
+
+function getBaseDomain(url) {
+  try {
+    const hostname = new URL(url).hostname
+    const parts = hostname.split(".").reverse()
+    if (parts.length >= 2) {
+      return `${parts[1]}.${parts[0]}`
+    }
+    return hostname
+  } catch (error) {
+    console.error("Invalid URL:", error)
+    return ""
+  }
+}

From 0466debf1725b09c05913c6d1ed34f63aec232df Mon Sep 17 00:00:00 2001
From: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com>
Date: Thu, 19 Dec 2024 19:37:06 +0100
Subject: [PATCH 2/2] fix type

---
 .../notifications/components/HeaderBanner.tsx | 38 +++++++++++--------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/features/notifications/components/HeaderBanner.tsx b/src/features/notifications/components/HeaderBanner.tsx
index 6ae8b97d5fd..cc32a3c9f7a 100644
--- a/src/features/notifications/components/HeaderBanner.tsx
+++ b/src/features/notifications/components/HeaderBanner.tsx
@@ -33,18 +33,31 @@ const bannerTypes: Record<BannerType, { primaryColour: string; textColour: strin
 
 export const HeaderBanner: React.FC<{ bannerContent?: BannerContent }> = ({ bannerContent }) => {
   const [cookieValue, setCookieValue] = useState([])
-  const [isDismissed, setIsDismissed] = useState(true) // Change to false to show banner later to prevent flasing on page load for users who have already dismissed it
+  const [isBannerShown, setBannerShown] = useState(false) // Change to false to show banner later to prevent flasing on page load for users who have already dismissed it
+
+  if (!bannerContent) {
+    return null
+  }
 
-  if (!bannerContent) return null
   useEffect(() => {
     const dismissedBannersCookie = getCookie("headerBannerDismissed")
     const parsedCookieValue = JSON.parse(dismissedBannersCookie || "[]")
     setCookieValue(parsedCookieValue)
     if (!parsedCookieValue.includes(bannerContent.description)) {
-      setIsDismissed(false)
+      setBannerShown(true)
     }
-  }, [isDismissed])
-  if (isDismissed) return null
+  }, [isBannerShown])
+
+  if (!isBannerShown) {
+    return null
+  }
+
+  const handleCloseBanner = () => {
+    const newCookieValue = [...cookieValue, bannerContent.description]
+    setCookie("headerBannerDismissed", JSON.stringify(newCookieValue), 365)
+    setBannerShown(false)
+  }
+
   return (
     <div
       className={clsx(headerbanner.container, headerbannerCustom.container)}
@@ -62,21 +75,14 @@ export const HeaderBanner: React.FC<{ bannerContent?: BannerContent }> = ({ bann
           </a>
         )}
       </p>
-      <button
-        className={headerbannerCustom.dismiss}
-        onClick={() => {
-          const newCookieValue = [...cookieValue, bannerContent.description]
-          setCookie("headerBannerDismissed", JSON.stringify(newCookieValue), 365)
-          setIsDismissed(true)
-        }}
-      >
+      <button className={headerbannerCustom.dismiss} onClick={handleCloseBanner}>
         <CloseIcon />
       </button>
     </div>
   ) as React.ReactElement // Explicitly assigning to ReactElement cause TS is confused otherwise
 }
 
-function getCookie(cname) {
+function getCookie(cname: string) {
   const name = cname + "="
   const decodedCookie = decodeURIComponent(document.cookie)
   const ca = decodedCookie.split(";")
@@ -91,7 +97,7 @@ function getCookie(cname) {
   }
   return undefined
 }
-function setCookie(cname, cvalue, exdays = 365) {
+function setCookie(cname: string, cvalue: string, exdays = 365) {
   const baseDomain = getBaseDomain(window.location.href)
   const d = new Date()
   d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000)
@@ -99,7 +105,7 @@ function setCookie(cname, cvalue, exdays = 365) {
   document.cookie = `${cname}=${cvalue};${expires};path=/;domain=${baseDomain}`
 }
 
-function getBaseDomain(url) {
+function getBaseDomain(url: string) {
   try {
     const hostname = new URL(url).hostname
     const parts = hostname.split(".").reverse()