From 04cd2910312631f4384642f43e14b191f24b4a0a Mon Sep 17 00:00:00 2001
From: blaiseup <balazs.mozes@consensys.net>
Date: Mon, 16 Sep 2024 19:10:52 +0200
Subject: [PATCH] feat: add support for displaying an alternate popup
 announcement based on conditions

---
 .../Contentful/ContentfulLayoutHeader.js      |  4 +++
 src/components/Header.js                      | 27 ++++++++++++++++++-
 src/fragments/ContentfulContent.js            |  4 +++
 src/fragments/previewFragment.js              |  4 +++
 4 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/components/Contentful/ContentfulLayoutHeader.js b/src/components/Contentful/ContentfulLayoutHeader.js
index 49da5c3f089..60ba622ca8e 100644
--- a/src/components/Contentful/ContentfulLayoutHeader.js
+++ b/src/components/Contentful/ContentfulLayoutHeader.js
@@ -14,6 +14,8 @@ const ContentfulLayoutHeader = props => {
       downloadButton,
       previewMode = false,
       popupAnnouncement,
+      popupAnnouncementTreatment,
+      launchDarklyFlag,
       isSticky,
       contentful_id,
       translation,
@@ -29,7 +31,9 @@ const ContentfulLayoutHeader = props => {
       downloadButton={downloadButton}
       hideDownloadBtn={hideDownloadBtn}
       popupAnnouncement={popupAnnouncement}
+      popupAnnouncementTreatment={popupAnnouncementTreatment}
       isSticky={isSticky}
+      launchDarklyFlag={launchDarklyFlag}
       previewMode={previewMode}
       contentfulId={contentful_id}
       translation={translation}
diff --git a/src/components/Header.js b/src/components/Header.js
index c1fb568c238..dc7f5a73c80 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -24,6 +24,7 @@ import HeaderDisclaimer from './HeaderDisclaimer'
 import { removeLanguageCode } from '../lib/utils/removeLanguageCode'
 import { useIsUKBlocked } from '../hooks/useIsUKBlocked'
 import { useCountry } from '../hooks/useCountry'
+import { useLaunchDarklyFlag } from '../Context/LaunchDarklyFlagContext'
 
 const StyledHeader = props => {
   const {
@@ -32,8 +33,10 @@ const StyledHeader = props => {
     menus,
     downloadButton,
     popupAnnouncement,
+    popupAnnouncementTreatment,
     hideDownloadBtn,
     isSticky,
+    launchDarklyFlag,
     previewMode = false,
     translation,
   } = props
@@ -59,10 +62,15 @@ const StyledHeader = props => {
   const [topMenuMobile, setTopMenuMobile] = useState('88px')
   const [isBrowser, setIsBrowser] = useState(false)
   const [showDisclaimer, setShowDisclaimer] = useState(false)
+  const [
+    usePopupAnnouncementTreatment,
+    setUsePopupAnnouncementTreatment,
+  ] = useState(false)
 
   const ldClient = useLDClient()
   const country = useCountry()
   const isUKBlocked = useIsUKBlocked()
+  const { getLaunchDarklyFlag } = useLaunchDarklyFlag()
 
   const shouldShowLanguageSelector = previewMode || translation
 
@@ -70,6 +78,21 @@ const StyledHeader = props => {
     setIsBrowser(true)
   }, [])
 
+  useEffect(() => {
+    const init = async () => {
+      if (launchDarklyFlag !== 'use-treatment-for-non-uk-and-us-announcement') {
+        return
+      }
+
+      const value = await getLaunchDarklyFlag(launchDarklyFlag)
+      if (value === true && !['GB', 'US'].includes(country)) {
+        setUsePopupAnnouncementTreatment(true)
+      }
+    }
+
+    init()
+  }, [getLaunchDarklyFlag, launchDarklyFlag, country])
+
   useEffect(() => {
     if (!menus && isDarkMode) {
       toggleTheme()
@@ -171,7 +194,9 @@ const StyledHeader = props => {
     <HeaderElement ref={headerRef} className={classnames({ sticky: isSticky })}>
       <Announcement>
         {contentfulModuleToComponent({
-          ...popupAnnouncement,
+          ...(usePopupAnnouncementTreatment
+            ? popupAnnouncementTreatment
+            : popupAnnouncement),
           previewMode,
         })}
       </Announcement>
diff --git a/src/fragments/ContentfulContent.js b/src/fragments/ContentfulContent.js
index 3829a27509b..63cdd7077bd 100644
--- a/src/fragments/ContentfulContent.js
+++ b/src/fragments/ContentfulContent.js
@@ -32,7 +32,11 @@ export const ContentfulLayoutHeaderFields = graphql`
     popupAnnouncement {
       ...ContentfulPopupAnnouncementFields
     }
+    popupAnnouncementTreatment {
+      ...ContentfulPopupAnnouncementFields
+    }
     isSticky
+    launchDarklyFlag
   }
 `
 
diff --git a/src/fragments/previewFragment.js b/src/fragments/previewFragment.js
index 2ea697c9640..5968d090d89 100644
--- a/src/fragments/previewFragment.js
+++ b/src/fragments/previewFragment.js
@@ -578,6 +578,9 @@ export const ContentfulLayoutHeaderFields = gql`
     popupAnnouncement(preview: true) {
       ...ContentfulPopupAnnouncementFields
     }
+    popupAnnouncementTreatment(preview: true) {
+      ...ContentfulPopupAnnouncementFields
+    }
     logo(preview: true) {
       ...ContentfulLogoFields
     }
@@ -594,6 +597,7 @@ export const ContentfulLayoutHeaderFields = gql`
       ...ContentfulCtaFields
     }
     isSticky
+    launchDarklyFlag
   }
 `