From d53fbc1287d6af0e5bd4ca0e3a2404f38cb6bd99 Mon Sep 17 00:00:00 2001
From: lena-larionova <54370747+lena-larionova@users.noreply.github.com>
Date: Wed, 17 Apr 2024 07:53:25 -0700
Subject: [PATCH] chore: Enable banner for Kong Gateway user survey (#7237)

* banner for kong gateway user survey

* set unique banner cookie name

* limit banner to certain products and rephrase

* fix include syntax

* Toggle promo-banner css classes only if it is present

* move X icon closer to text

---------

Co-authored-by: Fabian Rodriguez <fabian.rodriguez@konghq.com>
---
 app/_assets/entrypoints/application.js  |  2 +-
 app/_assets/javascripts/promo-banner.js | 22 +++++-----
 app/_assets/stylesheets/header.less     | 56 ++++++++++++-------------
 app/_includes/nav-v2.html               | 12 ++++--
 app/_layouts/default.html               |  2 +-
 5 files changed, 50 insertions(+), 44 deletions(-)

diff --git a/app/_assets/entrypoints/application.js b/app/_assets/entrypoints/application.js
index df7135582e5f..a04aaf8e5364 100644
--- a/app/_assets/entrypoints/application.js
+++ b/app/_assets/entrypoints/application.js
@@ -17,4 +17,4 @@ import "~/javascripts/sidebar.js"
 
 // uncomment the path to promo-banner.js when adding a new promo banner
 // also uncomment the promo banner sections in app/_assets/stylesheets/header.less and /app/_includes/nav-v2.html -->
-// import "~/javascripts/promo-banner.js"
+import "~/javascripts/promo-banner.js"
diff --git a/app/_assets/javascripts/promo-banner.js b/app/_assets/javascripts/promo-banner.js
index 699ac805dc9a..9275d79e139f 100644
--- a/app/_assets/javascripts/promo-banner.js
+++ b/app/_assets/javascripts/promo-banner.js
@@ -1,13 +1,15 @@
 jQuery(document).ready(function () {
-  var closed = localStorage.getItem("closebanner-summit-2023");
-  if (closed !== "closebanner") {
-    $(".navbar-v2").removeClass("closed");
-    $("body").addClass("banner");
-    $("#mosaic-provider-react-aria-0-1").addClass("banner-offset");
-  } else {
-    $(".navbar-v2").addClass("closed");
-    $("body").removeClass("banner");
-    $("#mosaic-provider-react-aria-0-1").removeClass("banner-offset");
+  if ($("#promo-banner").length > 0) {
+    var closed = localStorage.getItem("closebanner-gateway-survey-2024");
+    if (closed !== "closebanner") {
+      $(".navbar-v2").removeClass("closed");
+      $("body").addClass("banner");
+      $("#mosaic-provider-react-aria-0-1").addClass("banner-offset");
+    } else {
+      $(".navbar-v2").addClass("closed");
+      $("body").removeClass("banner");
+      $("#mosaic-provider-react-aria-0-1").removeClass("banner-offset");
+    }
   }
 });
 var scrolling = false;
@@ -26,6 +28,6 @@ setInterval(function () {
 }, 10);
 $(".closebanner").on("click", function () {
   $(".navbar-v2").addClass("closed");
-  localStorage.setItem("closebanner-summit-2023", "closebanner");
+  localStorage.setItem("closebanner-gateway-survey-2024", "closebanner");
   $("#mosaic-provider-react-aria-0-1").removeClass("banner-offset");
 });
diff --git a/app/_assets/stylesheets/header.less b/app/_assets/stylesheets/header.less
index b420e8c057a3..de8ec0013aa0 100644
--- a/app/_assets/stylesheets/header.less
+++ b/app/_assets/stylesheets/header.less
@@ -69,7 +69,7 @@ body {
           height: 14px;
           width: 14px;
           z-index: 11;
-          left: 0;
+          left: 100px;
           top: 7px;
           opacity: 1;
           cursor: pointer;
@@ -119,38 +119,38 @@ body {
       }
       // uncomment this section when adding a new promo banner
       // also uncomment the promo banner sections in /app/_includes/nav-v2.html and application.js
-      // header.navbar-v2 {
-      //   transition: transform 0.2s ease-in-out;
-      //   will-change: transform;
-      //   height: 95px;
-      // }
+      header.navbar-v2 {
+        transition: transform 0.2s ease-in-out;
+        will-change: transform;
+        height: 95px;
+      }
 
-      // header.navbar-v2.closed {
-      //   transition: 0s ease-in-out;
-      // }
+      header.navbar-v2.closed {
+        transition: 0s ease-in-out;
+      }
 
-      // header.closed,
-      // header.compress {
-      //   transform: translateY(-35px);
-      // }
+      header.closed,
+      header.compress {
+        transform: translateY(-35px);
+      }
 
-      // header:not(.closed) ~ .landing-page {
-      //   margin-top: 35px;
+      header:not(.closed) ~ .landing-page {
+        margin-top: 35px;
 
-      //   .page--header-background {
-      //     margin-top: 35px;
-      //   }
-      // }
-      // header:not(.closed) ~ div.page.v2 {
-      //   margin-top: 75px;
+        .page--header-background {
+          margin-top: 35px;
+        }
+      }
+      header:not(.closed) ~ div.page.v2 {
+        margin-top: 75px;
 
-      //   .page--header-background {
-      //     margin-top: 35px;
-      //   }
-      // }
-      // header:not(.closed) ~ .page-extension-profile, .page-hub {
-      //   margin-top: 45px;
-      // }
+        .page--header-background {
+          margin-top: 35px;
+        }
+      }
+      header:not(.closed) ~ .page-extension-profile, .page-hub {
+        margin-top: 45px;
+      }
     }
   }
 }
diff --git a/app/_includes/nav-v2.html b/app/_includes/nav-v2.html
index f8df089aa40c..1ce744884c58 100644
--- a/app/_includes/nav-v2.html
+++ b/app/_includes/nav-v2.html
@@ -2,12 +2,16 @@
   <a class="skip-main" href="#main">Skip to content</a>
   <!-- uncomment the promo-banner div when adding a new promo banner-->
   <!--also uncomment the promo banner sections in app/assets/stylesheets/header.less and application.js-->
-  <!-- <div id="promo-banner">
+  {% if include.edition == 'gateway' or
+        include.edition == 'kubernetes-ingress-controller' or 
+        include.edition == 'gateway-operator' or 
+        include.edition == 'deck' %}
+  <div id="promo-banner">
     <div class="container">
-      <div class="closebanner"></div> <strong>2023 API Summit Hackathon: Experiment with AI for APIs (August 28 - September 27) <a
-          href="https://konghq.com/conferences/kong-summit/hackathon?utm_medium=website&utm_source=docs-konghq-com&utm_campaign=docs-banner">Learn More &rarr;</a></strong>
+      <div class="closebanner"></div> <strong>Kong Gateway users, share your feedback and enter for a chance to win a $100 gift card!<a href="https://forms.gle/W57twHijT7kLXKu66">Take Survey &rarr;</a> </strong>
     </div>
-  </div> -->
+  </div>
+  {% endif %}
   <div class="navbar-content">
     <a href="https://konghq.com" class="navbar-brand col col-xl-auto" target="_blank" rel="noopener noreferrer" data-skip-external-links-hook=true>
       <img src="/assets/images/logos/konglogo-dark-theme.svg" alt="Kong Logo" id="kong-logo">
diff --git a/app/_layouts/default.html b/app/_layouts/default.html
index 2b655f4c3814..a6419f05643b 100644
--- a/app/_layouts/default.html
+++ b/app/_layouts/default.html
@@ -34,7 +34,7 @@
     height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
 
-    {% include_cached nav-v2.html layout=page.layout %}
+    {% include_cached nav-v2.html layout=page.layout edition=page.edition %}
 
     {{ content }}