show vpn & fpn links for all "en-*" locales

public/css/feature-tip-group.css

@@ -66,6 +66,10 @@
   margin-top: 0;
 }
 
+.feature-tip-link {
+  margin-right: 24px;
+}
+
 .feature-title {
   margin-bottom: 8px;
   font-weight: 700;
@@ -79,7 +83,6 @@
 }
 
 .cta2 {
-  margin-left: 24px;
   margin-right: 24px;
 }
 

template-helpers/breach-detail.js

@@ -59,7 +59,7 @@ function getBreachCategory(breach) {
 }
 
 
-function getSortedDataClasses(locales, breach, isUserBrowserFirefox=false, isUserLocaleEnUs=false, changePWLink=false) {
+function getSortedDataClasses(locales, breach, isUserBrowserFirefox=false, isUserLocaleEnUs=false, isUserLocalEn=false, changePWLink=false) {
   const priorityDataClasses = getAllPriorityDataClasses(isUserBrowserFirefox, isUserLocaleEnUs, changePWLink);
 
   const experimentFlags = breach.experimentFlags;
@@ -112,8 +112,9 @@ function getGenericFillerRecs(locales, numberOfRecsNeeded) {
 
 function getBreachDetail(args) {
   const experimentFlags = args.data.root.experimentFlags;
+  const acceptsLanguages = args.data.root.req.acceptsLanguages();
   const { locales, breach, changePWLink, isUserBrowserFirefox } = getVars(args);
-  const { sortedDataClasses, recommendations } = getSortedDataClassesAndRecs(locales, breach, isUserBrowserFirefox, changePWLink);
+  const { sortedDataClasses, recommendations } = getSortedDataClassesAndRecs(acceptsLanguages, locales, breach, isUserBrowserFirefox, changePWLink);
   const breachCategory = getBreachCategory(breach);
   const breachExposedPasswords = breach.DataClasses.includes("passwords");
 
@@ -227,9 +228,10 @@ function formatNotificationLink(message) {
 }
 
 
-function getSortedDataClassesAndRecs(locales, breach, isUserBrowserFirefox=false, changePWLink=false) {
-  const isUserLocaleEnUs = (locales[0] === "en");
-  const sortedDataClasses = getSortedDataClasses(locales, breach, isUserBrowserFirefox, isUserLocaleEnUs, changePWLink);
+function getSortedDataClassesAndRecs(acceptsLanguages, locales, breach, isUserBrowserFirefox=false, changePWLink=false) {
+  const isUserLocaleEn = (acceptsLanguages[0].toLowerCase().startsWith("en"));
+  const isUserLocaleEnUs = (acceptsLanguages[0].toLowerCase() === "en-us");
+  const sortedDataClasses = getSortedDataClasses(locales, breach, isUserBrowserFirefox, isUserLocaleEnUs, isUserLocaleEn, changePWLink);
 
   let recommendations = [];
 

template-helpers/recommendations.js

@@ -48,7 +48,7 @@ module.exports = {
       },
     ];
   },
-  getAllPriorityDataClasses(isUserBrowserFirefox=false, isUserLocaleEnUs=false, changePWLink=null) {
+  getAllPriorityDataClasses(isUserBrowserFirefox=false, isUserLocaleEnUs=false, isUserLocaleEn=false, changePWLink=null) {
     return  {
       "government-issued-ids" : {
         weight: 101,
@@ -162,13 +162,13 @@ module.exports = {
             recommendationCopy: {
               subhead: "rec-ip-subhead",
               cta: isUserLocaleEnUs ? "rec-ip-us-cta" : "",
-              cta2: isUserLocaleEnUs ? "rec-moz-vpn-cta" : "",
+              cta2: isUserLocaleEn ? "rec-moz-vpn-cta" : "",
               body: isUserLocaleEnUs ? "rec-moz-vpn" : "rec-ip-non-us",
             },
             ctaHref: "https://fpn.firefox.com",
             ctaShouldOpenNewTab: true,
             ctaAnalyticsId: "Try Firefox Private Network",
-            secondaryCta: isUserLocaleEnUs ? {
+            secondaryCta: isUserLocaleEn ? {
               ctaHref: "https://vpn.mozilla.org",
               ctaAnalyticsId: "Try Mozilla VPN",
             } : "",