Merge pull request #904 from mozilla/850-add-vpn-promo-banner

Add VPN Promo Banner

privaterelay/locales/en-US/app.ftl

@@ -11,6 +11,7 @@
 -brand-name-relay = Relay
 -brand-name-firefox-browser = Firefox Browser
 -brand-name-mozilla = Mozilla
+-brand-name-mozilla-vpn = Mozilla VPN
 -brand-name-mozilla-privacy-pack = Mozilla Privacy Pack
 -brand-name-firefox-lockwise = Firefox Lockwise
 -brand-name-firefox-monitor = Firefox Monitor
@@ -256,3 +257,11 @@ survey-option-somewhat-disappointed = Somewhat disappointed
 survey-option-very-disappointed = Very disappointed
 survey-option-very-likely = Very likely
 survey-option-not-likely = Not likely
+
+## VPN Promo Banner
+vpn-promo-headline = Now’s the time to boost your safety online.
+vpn-promo-copy = { -brand-name-mozilla }’s Virtual Private Network helps shield your internet connection from hackers and spies. 
+vpn-promo-cta = Get { -brand-name-mozilla-vpn }
+vpn-promo-price-headline = Introductory offer ends soon: $4.99/month for { -brand-name-mozilla-vpn }
+vpn-promo-price-copy = Now's the time to protect your device against hackers and prying eyes.
+vpn-promo-price-disclaimer = Offer only available in the United States, United Kingdom, Canada, New Zealand, Malaysia, and Singapore

privaterelay/templates/includes/header.html

@@ -7,6 +7,8 @@
 
 <header class="flx flx-col spc-btwn">
 
+  {% include "includes/vpn-promo-banner.html" %}
+
   {% if settings.RECRUITMENT_BANNER_LINK and LANGUAGE_CODE|slice:"0:2" == "en" %}
     <div class="recruitment-banner">
       <a id="recruitment-banner" class="text-link" href="{{ settings.RECRUITMENT_BANNER_LINK }}" target="_blank" rel="noopener noreferrer" data-ga="send-ga-funnel-pings" data-event-category="Recruitment" data-event-label="{{ settings.RECRUITMENT_BANNER_TEXT }}">{{ settings.RECRUITMENT_BANNER_TEXT }}</a>

privaterelay/templates/includes/vpn-promo-banner.html

@@ -0,0 +1,17 @@
+{% load static %}
+{% load relay_tags %}
+{% load ftl %}
+{% ftlconf bundle='privaterelay.ftl_bundles.main' %}
+
+<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">
+			<strong>{% ftlmsg 'vpn-promo-price-headline' %}</strong>
+			<span>{% ftlmsg 'vpn-promo-price-copy' %}</span>
+			<small>{% ftlmsg 'vpn-promo-price-disclaimer' %}</small>
+		</div>
+		<a class="vpn-promo-cta" href="https://www.mozilla.org/products/vpn/?utm_source=relay&utm_medium=banner&utm_campaign=intro-pricing">{% ftlmsg 'vpn-promo-cta' %}</a>
+		<button id="vpnPromoCloseButton" type="button" name="button" data-event-category="vpn-promo-close"><img src="{% static 'images/x-close-black.svg' %}"/></button>
+	</div>
+</div>

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,52 @@ 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 vpnPromoCtaButton = document.querySelector(".vpn-promo-cta");
+
+  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);
+      vpnPromoCtaButton.addEventListener("click", ()=>{
+        sendGaPing("VPN Promo Banner", "CTA Click", "CTA Click");
+      });
+      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");
+      sendGaPing("VPN Promo Banner", "Show Banner", "Show Banner");
+    },
+  };
+
+  vpnPromoFunctions.init();
+}

static/scss/app.scss

@@ -17,4 +17,5 @@
 
 @import "partials/fx-bento";
 @import "partials/glocal-menu";
+@import "partials/vpn-promo";
 

static/scss/partials/vpn-promo.scss

@@ -0,0 +1,205 @@
+html,
+body {
+  --vpn-purple: #c5c8fb;
+}
+
+.vpn-banner-visible main {
+  padding-top: 17rem;
+}
+
+.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;
+  font-size: 16px;
+  position: relative;
+  transition: max-height 0.3s ease-out;
+  overflow: hidden;
+  max-height: 500px;
+}
+
+@media (prefers-reduced-motion) {
+  .vpn-promo-banner {
+    transition-property: none;
+  }
+}
+
+.vpn-promo-banner.closed {
+  max-height: 0;
+}
+
+.vpn-promo-banner + .recruitment-banner {
+  display: none;
+}
+
+.vpn-promo-banner-wrapper {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 1rem 2rem;
+  text-align: center;
+}
+
+.vpn-promo-logo {
+  display: block;
+  max-width: 122px;
+  margin: 0 auto 1rem;
+}
+
+.vpn-promo-copy {
+  text-align: center;
+  font-size: 1rem;
+  max-width: 320px;
+  margin: 0 auto 1rem;
+  line-height: 1.2rem;
+  color: var(--inkDark);
+}
+
+.vpn-promo-copy strong, .vpn-promo-copy span {
+  display: block;
+  margin: 0 0 2px;
+}
+
+.vpn-promo-copy small {
+  padding-top: 2px;
+  display: block;
+  font-size: 0.65rem;
+  margin: 0 auto;
+  line-height: normal;
+  font-style: italic;
+}
+
+.vpn-promo-banner a {
+  background-color: var(--bgLight);
+  border: solid 2px var(--inkDark);
+  box-shadow: 8px 8px 0 #6a57dc;
+  color: var(--inkDark);
+  cursor: pointer;
+  display: inline-block;
+  font-size: 1.125rem;
+  font-weight: bold;
+  line-height: 1.5rem;
+  padding: 0.5rem 1rem;
+  margin-bottom: 1rem;
+  position: relative;
+  text-decoration: none;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.vpn-promo-banner a:hover,
+.vpn-promo-banner a:active,
+.vpn-promo-banner a:focus {
+  background-color: var(--inkDark);
+  color: var(--bgLight);
+}
+
+.vpn-promo-banner button {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  position: absolute;
+  top: 0.5rem;
+  right: 0;
+  border: none;
+  outline: none;
+  display: block;
+}
+
+.vpn-promo-banner button:hover img {
+  transform: scale(1.1);
+}
+
+.vpn-promo-banner button:active img {
+  transform: scale(0.9);
+}
+
+.vpn-promo-banner button img {
+  display: block;
+  width: 30px;
+  height: 30px;
+  transition: transform 0.2s ease-out;
+}
+
+@media screen and (min-width: 700px) {
+  .vpn-promo-banner-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+  }
+
+  .vpn-promo-copy {
+    flex-shrink: 2;
+  }
+
+  .vpn-promo-copy strong {
+    display: block;
+  }
+
+  .vpn-promo-banner button {
+    top: 0;
+    right: 0;
+  }
+
+  .vpn-promo-logo,
+  .vpn-promo-copy {
+    margin: 0;
+  }
+
+  .vpn-promo-banner a {
+    margin-bottom: 0.25rem;
+  }
+
+  .vpn-banner-visible main {
+    &.dashboard-container {
+      padding-top: 9rem;
+    }
+    padding-top: 10rem;
+  }
+
+  .vpn-promo-copy small {
+    max-width: 400px;
+  }
+
+}
+
+@media screen and (min-width: 800px) {
+  .vpn-promo-copy {
+    max-width: none;
+    padding: 0 1rem;
+  }
+
+  .vpn-banner-visible main {
+    padding-top: 5rem;
+  }
+
+  .vpn-promo-copy small {
+    max-width: none;
+  }
+}
+
+@media screen and (min-width: 960px) {
+  .vpn-promo-banner button {
+    top: 0.25rem;
+    right: 0.25rem;
+  }
+  .vpn-promo-banner a {
+    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;
+  }
+}