Don't show DI newsletter banner on top of cookie banner (#3824)

owid · Jul 30, 2024 · 4909eca · 4909eca
1 parent bfd1b37
commit 4909eca
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/site/CookiePreferencesManager.tsx b/site/CookiePreferencesManager.tsx
@@ -26,7 +26,7 @@ export interface Preference {
 
 export const POLICY_DATE: number = 20201009
 export const DATE_FORMAT = "YYYYMMDD"
-const COOKIE_NAME = "cookie_preferences"
+export const COOKIE_PREFERENCES_COOKIE_NAME = "cookie_preferences"
 const PREFERENCES_SEPARATOR = "|"
 const DATE_SEPARATOR = "-"
 const PREFERENCE_KEY_VALUE_SEPARATOR = ":"
@@ -65,7 +65,7 @@ export const CookiePreferencesManager = ({
     // Commit state
     useEffect(() => {
         if (state.date) {
-            Cookies.set(COOKIE_NAME, serializeState(state), {
+            Cookies.set(COOKIE_PREFERENCES_COOKIE_NAME, serializeState(state), {
                 expires: 365 * 3,
             })
         }
@@ -155,7 +155,9 @@ const getInitialState = (): State => {
         // Cookie access can be restricted by iframe sandboxing, in which case the below code will throw an error
         // see https://github.com/owid/owid-grapher/pull/2452
 
-        cookieValue = parseRawCookieValue(Cookies.get(COOKIE_NAME))
+        cookieValue = parseRawCookieValue(
+            Cookies.get(COOKIE_PREFERENCES_COOKIE_NAME)
+        )
     } catch {}
 
     if (!cookieValue || arePreferencesOutdated(cookieValue.date, POLICY_DATE))

diff --git a/site/DataInsightsNewsletterBanner.tsx b/site/DataInsightsNewsletterBanner.tsx
@@ -2,17 +2,21 @@ import * as React from "react"
 import { useState, useEffect } from "react"
 import Cookies from "js-cookie"
 import cx from "classnames"
+import { COOKIE_PREFERENCES_COOKIE_NAME } from "./CookiePreferencesManager.js"
 import { NewsletterSubscriptionContext } from "./newsletter.js"
 import DataInsightsNewsletter from "./gdocs/components/DataInsightsNewsletter.js"
 
-const COOKIE_NAME = "is_data_insights_newsletter_banner_hidden"
+const DATA_INSIGHTS_NEWSLETTER_BANNER_COOKIE_NAME =
+    "is_data_insights_newsletter_banner_hidden"
 
 export default function DataInsightsNewsletterBanner() {
     const [isVisible, setIsVisible] = useState(false)
     const [isHiding, setIsHiding] = useState(false)
 
     useEffect(() => {
-        const keepHidden = Cookies.get(COOKIE_NAME)
+        const keepHidden =
+            Cookies.get(DATA_INSIGHTS_NEWSLETTER_BANNER_COOKIE_NAME) ||
+            !Cookies.get(COOKIE_PREFERENCES_COOKIE_NAME)
         if (keepHidden) return
         const timeoutId = setTimeout(() => {
             setIsVisible(true)
@@ -22,7 +26,9 @@ export default function DataInsightsNewsletterBanner() {
 
     function handleOnClose() {
         setIsHiding(true)
-        Cookies.set(COOKIE_NAME, "true", { expires: 90 })
+        Cookies.set(DATA_INSIGHTS_NEWSLETTER_BANNER_COOKIE_NAME, "true", {
+            expires: 90,
+        })
         setTimeout(() => {
             setIsVisible(false)
             setIsHiding(false)