Add JS logic to promo banner, revise header padding when banner is pr…

…esent across different screen sizes
mozilla · Jun 25, 2021 · 9738c1a · 9738c1a
1 parent cecd05b
commit 9738c1a
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 8 deletions.
diff --git a/privaterelay/templates/includes/vpn-promo-banner.html b/privaterelay/templates/includes/vpn-promo-banner.html
@@ -3,7 +3,7 @@
 {% load ftl %}
 {% ftlconf bundle='privaterelay.ftl_bundles.main' %}
 
-<div id="vpnPromoBanner" class="vpn-promo-banner ">
+<div id="vpnPromoBanner" class="vpn-promo-banner closed">
 	<div class="vpn-promo-banner-wrapper">
 		<img alt="Mozilla VPN" class="vpn-promo-logo" src="{% static 'images/logos/mozilla-vpn.svg' %}"/>
 		<div class="vpn-promo-copy">

diff --git a/static/js/app.js b/static/js/app.js
@@ -393,6 +393,14 @@ function showBannersIfNecessary() {
 document.addEventListener("DOMContentLoaded", () => {
   watchForInstalledAddon();
   addEventListeners();
+  vpnBannerLogic();
+
+  // TODO: Set up language gate once l10n is active.
+  // const preferredLanguages = navigator.languages;
+  // // Only display if primary preferred language is English
+  // if (preferredLanguages[0].includes("en")) {
+  //   vpnBannerLogic();
+  // }
 
   const win = window;
   const header = document.querySelector("header");
@@ -484,3 +492,47 @@ const copyAliasBtn = new ClipboardJS(".relay-address");
 copyAliasBtn.on("success", (e) => {
   copyToClipboardAndShowMessage(e.trigger);
 });
+
+function vpnBannerLogic() {
+
+  // Check if element exists at all
+  const vpnPromoBanner = document.getElementById("vpnPromoBanner");
+
+  if (!vpnPromoBanner) {
+    return;
+  }
+
+  // Check for dismissal cookie
+  const vpnBannerDismissedCookie = document.cookie.split("; ").some((item) => item.trim().startsWith("vpnBannerDismissed="));
+
+  if (vpnBannerDismissedCookie) {
+    return;
+  }
+
+  // Init: Show banner, set close button listener
+  const vpnPromoCloseButton = document.getElementById("vpnPromoCloseButton");
+
+  const vpnPromoFunctions = {
+    hide: function() {
+      vpnPromoFunctions.setCookie();
+      vpnPromoBanner.classList.add("closed");
+      document.body.classList.remove("vpn-banner-visible");
+      sendGaPing("VPN Promo Banner", "Dismiss Banner", "Dismiss Banner");
+    },
+    init: function() {
+      vpnPromoCloseButton.addEventListener("click", vpnPromoFunctions.hide);
+      vpnPromoFunctions.show();
+    },
+    setCookie: function() {
+      const date = new Date();
+      date.setTime(date.getTime() + 30*24*60*60*1000);
+      document.cookie = "vpnBannerDismissed=true; expires=" + date.toUTCString();
+    },
+    show: function() {
+      vpnPromoBanner.classList.remove("closed");
+      document.body.classList.add("vpn-banner-visible");
+    },
+  };
+
+  vpnPromoFunctions.init();
+}
diff --git a/static/scss/partials/vpn-promo.scss b/static/scss/partials/vpn-promo.scss
@@ -3,14 +3,18 @@ body {
   --vpn-purple: #c5c8fb;
 }
 
-.vpn-banner-visible .clear-header {
-  padding-top: 28rem;
+.vpn-banner-visible main {
+  padding-top: 17rem;
 }
 
-.vpn-banner-visible .micro-survey-banner {
+.vpn-promo-banner + .micro-survey-banner {
   display: none;
 }
 
+// .vpn-banner-visible .micro-survey-banner {
+//   display: none;
+// }
+
 .vpn-promo-banner {
   background-color: var(--background);
   font-family: "Metropolis", sans-serif;
@@ -150,8 +154,11 @@ body {
     margin-bottom: 0.25rem;
   }
 
-  .vpn-banner-visible .clear-header {
-    padding-top: 18rem;
+  .vpn-banner-visible main {
+    &.dashboard-container {
+      padding-top: 9rem;
+    }
+    padding-top: 10rem;
   }
 
   .vpn-promo-copy small {
@@ -165,9 +172,11 @@ body {
     max-width: none;
     padding: 0 1rem;
   }
-  .vpn-banner-visible .clear-header {
-    padding-top: 16rem;
+
+  .vpn-banner-visible main {
+    padding-top: 5rem;
   }
+
   .vpn-promo-copy small {
     max-width: none;
   }
@@ -182,3 +191,15 @@ body {
     flex-shrink: 0;
   }
 }
+
+@media screen and (min-width: 850px) {
+  .vpn-banner-visible main.dashboard-container {
+    padding-top: 7rem;
+  }
+}
+
+@media screen and (min-width: 950px) {
+  .vpn-banner-visible main.dashboard-container {
+    padding-top: 6rem;
+  }
+}