Merge pull request #2828 from mozilla/surveyFinal

Final survey. #2827

Author: bakulf

src/_locales

@@ -26,10 +26,18 @@
   src: url("/fonts/Inter-Medium.woff2") format("woff2");
 }
 
+@font-face {
+  font-family: "Inter-SemiBold";
+  font-style: normal;
+  font-weight: 700;
+  src: url("/fonts/Inter-SemiBold.woff2") format("woff2");
+}
+
 [data-theme="light"],
 :root {
   --fontInter: "Inter", sans-serif;
   --fontInterMedium: "Inter-Medium", sans-serif;
+  --fontInterSemiBold: "Inter-SemiBold", sans-serif;
   --fontMetropolis: "Metropolis", sans-serif;
   --fontMetropolisLight: "Metropolis-Light", sans-serif;
   --iconArrowLeft: url("/img/arrow-icon-left.svg");
@@ -1651,8 +1659,20 @@ input[type=text] {
   background-color: var(--button-bg-hover-color-primary);
 }
 
+#survey-achievement-done-button {
+  color: var(--button-bg-color-primary);
+  transition: color 0.1s ease;
+  font-size: 14px;
+  padding-inline: 3px;
+  padding-block: 1px;
+  border-radius: 1px;
+  text-align: center;
+  margin-inline: auto;
+}
+
 .onboarding-button:focus,
-.half-onboarding-button:focus {
+.half-onboarding-button:focus,
+#survey-achievement-done-button:focus {
   box-shadow:
     0 0 0 2px var(--button-bg-color-secondary),
     0 0 0 4px var(--button-bg-focus-color-primary);
@@ -2409,3 +2429,52 @@ tr:hover > td > .reset-button {
 .searchbar input {
   inline-size: 100%;
 }
+
+/* Survey Popup */
+
+.survey-blurb,
+#survey-panel h3.onboarding-title {
+  text-align: center;
+  margin-inline: auto;
+}
+
+#survey-panel h3.onboarding-title {
+  max-inline-size: 100%;
+  font-family: var(--fontInterSemiBold);
+  line-height: 24px;
+  margin-block-end: 12px;
+}
+
+#survey-panel {
+  padding-block: 40px;
+  padding-inline: 0;
+}
+
+.survey-blurb {
+  margin-block-end: 16px;
+  margin-inline: 24px;
+}
+
+#survey-img {
+  block-size: 180px;
+  margin-block-end: 16px;
+}
+
+#survey-button {
+  padding-block: 4px;
+  padding-inline: 16px;
+  margin-block: 0 8px;
+  min-block-size: 32px;
+}
+
+.share-ctas.survey-back {
+  margin-inline: auto;
+}
+
+#survey-achievement-done-button:hover {
+  color: var(--button-bg-hover-color-primary);
+}
+
+#survey-achievement-done-button:active {
+  color: var(--button-bg-active-color-primary);
+}

src/css/popup.css

@@ -257,6 +257,8 @@ const messageHandler = {
       browser.browserAction.setBadgeBackgroundColor({color: "rgba(0,217,0,255)"});
       browser.browserAction.setBadgeText({text: "NEW"});
     }
+
+    this.maybePrepareSurveyAchievementOnUpdate(countOfContainerTabsOpened);
   },
 
   async onFocusChangedCallback(windowId) {
@@ -273,7 +275,34 @@ const messageHandler = {
     }).catch((e) => {
       throw e;
     });
-  }
+  },
+
+  async maybePrepareSurveyAchievementOnUpdate(countOpened) {
+    if (countOpened < 10) {
+      return;
+    }
+
+    // Show the survey only for English locales (en or en-*).
+    const uiLang = browser.i18n.getUILanguage();
+    const lang = (uiLang || "").toLowerCase();
+    if (lang !== "en" && !lang.startsWith("en-")) {
+      return;
+    }
+
+    // Check if already scheduled in the past; if so, do not show again.
+    const achievementsStorage = await browser.storage.local.get({ achievements: [] });
+    const achievements = achievementsStorage.achievements;
+    const existing = achievements.find(a => a.name === "surveyFinal");
+    if (existing) {
+      return;
+    }
+
+    // Ensure the achievement exists and is pending.
+    achievements.push({ name: "surveyFinal", done: false });
+    browser.storage.local.set({ achievements });
+    browser.browserAction.setBadgeBackgroundColor({color: "rgba(0,217,0,255)"});
+    browser.browserAction.setBadgeText({text: "NEW"});
+  },
 };
 
 // Lets do this last as theme manager did a check before connecting before

src/fonts/Inter-SemiBold.woff2

@@ -31,6 +31,7 @@ const P_CONTAINER_INFO = "containerInfo";
 const P_CONTAINER_EDIT = "containerEdit";
 const P_CONTAINER_DELETE = "containerDelete";
 const P_CONTAINERS_ACHIEVEMENT = "containersAchievement";
+const P_SURVEY_ACHIEVEMENT = "surveyAchievement";
 const P_CONTAINER_ASSIGNMENTS = "containerAssignments";
 const P_CLEAR_CONTAINER_STORAGE = "clearContainerStorage";
 
@@ -147,6 +148,11 @@ const Logic = {
         return;
       }
 
+      if (achievement.name === "surveyFinal") {
+        this.showPanel(P_SURVEY_ACHIEVEMENT);
+        return;
+      }
+
       // We have found an unknown achievement. Let's mark it as done.
       achievement.done = true;
       saveAchievements = true;
@@ -2383,6 +2389,30 @@ Logic.registerPanel(P_CONTAINERS_ACHIEVEMENT, {
   },
 });
 
+// P_SURVEY_ACHIEVEMENT: A simple survey view.
+// ----------------------------------------------------------------------------
+
+Logic.registerPanel(P_SURVEY_ACHIEVEMENT, {
+  panelSelector: ".survey-panel",
+
+  // This method is called when the object is registered.
+  initialize() {
+    Utils.addEnterHandler(document.querySelector("#survey-achievement-done-button"), async () => {
+      await Logic.setAchievementDone("surveyFinal");
+      Logic.showPanel(P_CONTAINERS_LIST);
+    });
+    Utils.addEnterHandler(document.querySelector("#survey-button"), async () => {
+      await Logic.setAchievementDone("surveyFinal");
+      window.close();
+    });
+  },
+
+  // This method is called when the panel is shown.
+  prepare() {
+    return Promise.resolve(null);
+  },
+});
+
 Logic.init();
 
 window.addEventListener("resize", function () {

src/img/survey.svg

@@ -106,6 +106,19 @@ <h3 class="onboarding-title" data-i18n-message-id="oneHundredTabsHeader"></h3>
     <a href="#" id="achievement-done-button" class="onboarding-button keyboard-nav" data-i18n-message-id="done"></a>
   </div>
 
+  <div class="panel survey-panel hide" id="survey-panel">
+    <img id="survey-img" alt="" src="/img/survey.svg" />
+
+    <h3 class="onboarding-title">Help Improve Containers</h3>
+    <p class="survey-blurb">Please take 5 minutes to share your experiences with the add-on! This will help us effectively prioritize improvements.</p>
+    <p class="survey-blurb">Learn more about the research here.</p>
+    <br/><p class="survey-blurb">Thank you for using Multi-Account Containers!</p>
+    <p class="share-ctas survey-back">
+      <a class="cta-link onboarding-button keyboard-nav" href="https://mozilla.qualtrics.com/jfe/form/SV_2aSQMGyfp2DFLtI" id="survey-button" target="_blank">Take Survey</a>
+    </p>
+    <a href="#" id="survey-achievement-done-button">Back</a>
+  </div>
+
   <div class="panel menu-panel container-panel hide" id="container-panel">
     <span class="popup-notification-card"></span>
     <h3 class="title">Firefox Multi-Account Containers</h3>