Merge pull request #2209 from mozilla/2194-vpn-banner-update

Fix #2194 - Remove VPN Pricing Update Copy (EN-only)
mozilla · Jul 13, 2021 · 0a68ccd · 0a68ccd
2 parents d433bd6 + 8897a8c
commit 0a68ccd
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 26 deletions.
diff --git a/locale-utils.js b/locale-utils.js
@@ -78,6 +78,29 @@ const LocaleUtils = {
     }
     return id;
   },
+
+  fluentFormatWithFallback (supportedLocales, id, fallbackId, args=null, errors=null) {
+    if (!fallbackId) {
+      log.error("fluentFormatWithFallback: No fallbackId");
+      return false;
+    }
+
+    for (const locale of supportedLocales) {
+      const bundle = fluentBundles[locale];
+      if (bundle.hasMessage(id)) {
+        const message = bundle.getMessage(id);
+        return bundle.format(message, args);
+      }
+
+      // If first message id doesn't have translation, use fallback id
+      if (fallbackId && bundle.hasMessage(fallbackId)) {
+        const message = bundle.getMessage(fallbackId);
+        return bundle.format(message, args);
+      }
+    }
+    return id;
+  },
+
 };
 
 module.exports = {

diff --git a/locales/en/app.ftl b/locales/en/app.ftl
@@ -795,3 +795,6 @@ steps-to-resolve-headline = Steps to resolve this breach
 vpn-promo-headline = Now’s the time to boost your safety online.
 vpn-promo-copy = { -brand-Mozilla }’s Virtual Private Network helps shield your internet connection from hackers and spies. 
 vpn-promo-cta = Get { -brand-mozilla-vpn }
+
+vpn-promo-headline-new = Save 50% with a full year subscription
+vpn-promo-copy-new = Protect your online data—and choose a VPN subscription plan that works for you.
diff --git a/public/js/monitor.js b/public/js/monitor.js
@@ -413,7 +413,7 @@ function addWaitlistObservers() {
   }
 }
 
-function vpnBannerLogic(options) {
+function vpnBannerLogic() {
 
   // Check if element exists at all
   const vpnPromoBanner = document.getElementById("vpnPromoBanner");
@@ -422,23 +422,6 @@ function vpnBannerLogic(options) {
     return;
   }
 
-  if (options && options.isEnglish) {
-    const vpnPromoCopy = document.querySelector(".vpn-promo-copy");
-    vpnPromoCopy.innerHTML = "";
-    const vpnPromoCopyStrongTag = document.createElement("strong");
-    const vpnPromoCopySpanTag = document.createElement("span");
-    const vpnPromoCopySmallTag = document.createElement("small");
-    vpnPromoCopyStrongTag.textContent = "Introductory offer ends soon: $4.99/month for Mozilla VPN";
-    vpnPromoCopySpanTag.textContent = "Now's the time to protect your device against hackers and prying eyes.";
-    vpnPromoCopySmallTag.textContent = "Offer only available in the United States, United Kingdom, Canada, New Zealand, Malaysia, and Singapore";
-    vpnPromoCopy.appendChild(vpnPromoCopyStrongTag);
-    vpnPromoCopy.appendChild(vpnPromoCopySpanTag);
-    vpnPromoCopy.appendChild(vpnPromoCopySmallTag);
-
-    const vpnPromoButton = document.querySelector(".vpn-promo-cta");
-    vpnPromoButton.href = "https://www.mozilla.org/products/vpn/?utm_source=monitor&utm_medium=monitor&utm_campaign=intro-pricing";
-  }
-
   // Check for dismissal cookie
   const vpnBannerDismissedCookie = document.cookie.split("; ").some((item) => item.trim().startsWith("vpnBannerDismissed="));
 
@@ -547,15 +530,11 @@ function vpnBannerLogic(options) {
     return;
   }
 
-  // Only show banner if users first language is some English-locale variant
-  if (["de", "fr"].some(lang=>preferredLanguages[0].includes(lang))) {
+  // Only show banner if users first language is English, Germand or French variant
+  if (["en", "de", "fr"].some(lang=>preferredLanguages[0].includes(lang))) {
     vpnBannerLogic();
   }
 
-  if (["en"].some(lang=>preferredLanguages[0].includes(lang))) {
-    vpnBannerLogic({isEnglish: true});
-  }
-
   if (document.getElementById("fxaCheckbox")) {
     document.getElementById("fxaCheckbox").style.display = "block";
   }

diff --git a/template-helpers/hbs-helpers.js b/template-helpers/hbs-helpers.js
@@ -134,6 +134,10 @@ function getString (id, args) {
   return LocaleUtils.fluentFormat(supportedLocales, id, args.hash);
 }
 
+function getStringWithFallback (id, fallbackId, args) {
+  const supportedLocales = getSupportedLocales(args);
+  return LocaleUtils.fluentFormatWithFallback(supportedLocales, id, fallbackId, args.hash);
+}
 
 function getStrings(stringArr, locales) {
   stringArr.forEach(string => {
@@ -281,6 +285,7 @@ module.exports = {
   microsurveyBanner,
   englishInAcceptLanguages,
   getString,
+  getStringWithFallback,
   getStrings,
   fluentFxa,
   getStringID,

diff --git a/views/partials/vpn-promo.hbs b/views/partials/vpn-promo.hbs
@@ -2,8 +2,8 @@
 	<div class="vpn-promo-banner-wrapper">
 		<img alt="Mozilla VPN" class="vpn-promo-logo" src="/img/svg/logos/mozilla-vpn.svg"/>
 		<div class="vpn-promo-copy">
-			<strong>{{ getString "vpn-promo-headline" }}</strong>
-			<span>{{ getString "vpn-promo-copy" }}</span>
+			<strong>{{ getStringWithFallback "vpn-promo-headline-new" "vpn-promo-headline" }}</strong>
+			<span>{{ getStringWithFallback "vpn-promo-copy-new" "vpn-promo-copy" }}</span>
 		</div>
 		<a class="vpn-promo-cta" href="https://www.mozilla.org/products/vpn/?utm_source=monitor&utm_medium=monitor&utm_campaign=mozillavpn-monitor-top-banner">{{ getString "vpn-promo-cta" }}</a>
 		<button id="vpnPromoCloseButton" type="button" name="button" data-event-category="vpn-promo-close"><img src="/img/svg/x-close-black.svg"/></button>