Merge pull request #1869 from mozilla/1842-graduate-fxa-checkbox-tier-1

Gradaute FxA Homepage Checkbox to German/French Languages

public/css/forms.css

@@ -279,6 +279,10 @@ input[type="radio"]:focus ~ .checkmark {
   padding-top: 2px;
 }
 
+.create-fxa-checkbox {
+  display: none;
+}
+
 .create-fxa-wrapper {
   display: flex;
   align-items: center;

public/js/monitor.js

@@ -312,6 +312,18 @@ function resizeDashboardMargin() {
   }
 }
 
+function checkIfTier1(preferredLanguage) {
+  const tier1Languages = ["de", "en", "fr"];
+
+  tier1Languages.forEach( lang => {
+    if (preferredLanguage.includes(lang) ) {
+      return true;
+    }
+  });
+
+  return false;
+}
+
 ( async() => {
   document.addEventListener("touchstart", function(){}, true);
   const win = window;
@@ -434,14 +446,17 @@ function resizeDashboardMargin() {
   const dropDownMenu = document.querySelector(".mobile-nav.show-mobile");
   dropDownMenu.addEventListener("click", () => toggleDropDownMenu(dropDownMenu));
 
-  const acceptedLanguages = navigator.languages;
-  const acceptedFirstLanguageIsEnglish = acceptedLanguages[0].includes("en");
+  const preferredLanguages = navigator.languages;
+  const preferredFirstLanguageIsTier1 = checkIfTier1(preferredLanguages[0]);
 
-  if (!acceptedFirstLanguageIsEnglish && document.getElementById("fxaCheckbox")) {
-    document.getElementById("fxaCheckbox").style.display = "none";
+  if (!preferredFirstLanguageIsTier1) {
     return;
   }
 
+  if (document.getElementById("fxaCheckbox")) {
+    document.getElementById("fxaCheckbox").style.display = "block";
+  }
+
   const createFxaCheckbox = document.getElementById("createFxaCheckbox");
   const submitBtn = document.querySelector(".breachesSubmitButton");
 

views/partials/forms/scan-email-form.hbs

@@ -6,7 +6,7 @@
     <input id="scan-email" class="input-group-field email-to-hash" type="email" name="email" placeholder="{{ getString "scan-placeholder" }}" aria-label="{{ getString "scan-placeholder" }}" autocomplete="off" />
     <span id="invalid-email-message" class="error-message">{{ getString "scan-error" }}</span>
   </div>
-  <div class="input-group" id="fxaCheckbox">
+  <div class="input-group create-fxa-checkbox" id="fxaCheckbox">
       <label for="createFxaCheckbox" class="create-fxa-wrapper">
         <div class="create-fxa-checkbox-wrapper">
           <input class="create-fxa-checkbox-input" id="createFxaCheckbox" type="checkbox" />