WIP 383

Author: Zelig880

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 [isDismissed, setIsDismissed] = useState(true) // Change to false to show banner later to prevent flashing on page load for users who have already dismissed it
+  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 ""
+  }
+}