feat: add support for displaying an alternate popup announcement base…

…d on conditions

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}

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,17 +62,37 @@ 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
 
   useEffect(() => {
     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>

src/fragments/ContentfulContent.js

@@ -32,7 +32,11 @@ export const ContentfulLayoutHeaderFields = graphql`
     popupAnnouncement {
       ...ContentfulPopupAnnouncementFields
     }
+    popupAnnouncementTreatment {
+      ...ContentfulPopupAnnouncementFields
+    }
     isSticky
+    launchDarklyFlag
   }
 `
 

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
   }
 `