From a812c8cb4f887238e83558d71141bc8e6bf03312 Mon Sep 17 00:00:00 2001
From: Skyler Cohen <skyler@sefaria.org>
Date: Fri, 8 Sep 2023 00:07:34 -0400
Subject: [PATCH] feat(strapi-cms): Add customizable background color attribute
 to banner

---
 static/js/Misc.jsx   | 32 ++++++++++++++++++++++----------
 static/js/context.js |  1 +
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/static/js/Misc.jsx b/static/js/Misc.jsx
index dedb36af76..8a5282af16 100644
--- a/static/js/Misc.jsx
+++ b/static/js/Misc.jsx
@@ -2278,7 +2278,8 @@ const InterruptingMessage = ({
 InterruptingMessage.displayName = "InterruptingMessage";
 
 const Banner = ({ onClose }) => {
-  const [bannerShowDelayHasElapsed, setBannerShowDelayHasElapsed] = useState(false);
+  const [bannerShowDelayHasElapsed, setBannerShowDelayHasElapsed] =
+    useState(false);
   const [hasInteractedWithBanner, setHasInteractedWithBanner] = useState(false);
   const strapi = useContext(StrapiDataContext);
 
@@ -2306,7 +2307,11 @@ const Banner = ({ onClose }) => {
 
   const shouldShow = () => {
     if (!strapi.banner) return false;
-    if (Sefaria.interfaceLang === 'hebrew' && !strapi.banner.locales.includes('he')) return false;
+    if (
+      Sefaria.interfaceLang === "hebrew" &&
+      !strapi.banner.locales.includes("he")
+    )
+      return false;
     if (hasBannerBeenInteractedWith(strapi.banner.internalBannerName))
       return false;
 
@@ -2340,15 +2345,11 @@ const Banner = ({ onClose }) => {
     if (onClose) onClose();
     markBannerAsHasBeenInteractedWith(strapi.banner.internalBannerName);
     setHasInteractedWithBanner(true);
-    trackBannerInteraction(
-      strapi.banner.internalBannerName,
-      eventDescription
-    );
+    trackBannerInteraction(strapi.banner.internalBannerName, eventDescription);
   };
 
   useEffect(() => {
     if (shouldShow()) {
-
       const timeoutId = setTimeout(() => {
         // s2 is the div that contains the React root and needs to be manipulated by traditional DOM methods
         if (document.getElementById("s2").classList.contains("headerOnly")) {
@@ -2365,10 +2366,22 @@ const Banner = ({ onClose }) => {
   if (!hasInteractedWithBanner) {
     return (
       <OnInView onVisible={trackBannerImpression}>
-        <div id="bannerMessage" className={bannerShowDelayHasElapsed ? "" : "hidden"}>
+        <div
+          id="bannerMessage"
+          className={bannerShowDelayHasElapsed ? "" : "hidden"}
+          style={
+            strapi.banner.bannerBackgroundColor && {
+              backgroundColor: strapi.banner.bannerBackgroundColor,
+            }
+          }
+        >
           <div id="bannerMessageContent">
             <div id="bannerTextBox">
-              <InterfaceText markdown={replaceNewLinesWithLinebreaks(strapi.banner.bannerText)} />
+              <InterfaceText
+                markdown={replaceNewLinesWithLinebreaks(
+                  strapi.banner.bannerText
+                )}
+              />
             </div>
             <div id="bannerButtonBox">
               <a
@@ -2385,7 +2398,6 @@ const Banner = ({ onClose }) => {
               </a>
             </div>
           </div>
-          <div id="bannerMessageClose">×</div>
           <div id="bannerMessageClose" onClick={closeBanner}>
             ×
           </div>
diff --git a/static/js/context.js b/static/js/context.js
index 1784f811b3..f405e06ba5 100644
--- a/static/js/context.js
+++ b/static/js/context.js
@@ -56,6 +56,7 @@ function StrapiDataProvider({ children }) {
                 buttonText
                 buttonURL
                 showDelay
+                bannerBackgroundColor
                 createdAt
                 locale
                 localizations {