feat(survey): homepage survey 2024

.github/workflows/prod-build.yml

@@ -238,10 +238,10 @@ jobs:
           REACT_APP_MDN_PLUS_10Y_PLAN: price_1KeG02JNcmPzuWtRlrSiLTI6
 
           # Surveys.
-          REACT_APP_SURVEY_START_WEB_APP_AUGUST_2024: 1722816000000 # new Date("2024-08-05Z").getTime()
-          REACT_APP_SURVEY_END_WEB_APP_AUGUST_2024: 1723593600000 # new Date("2024-08-14Z").getTime()
-          REACT_APP_SURVEY_RATE_FROM_WEB_APP_AUGUST_2024: 0.0
-          REACT_APP_SURVEY_RATE_TILL_WEB_APP_AUGUST_2024: 0.05 # 5%
+          REACT_APP_SURVEY_START_HOMEPAGE_FEEDBACK_2024: 1731369600000 # new Date("2024-11-12Z").getTime()
+          REACT_APP_SURVEY_END_HOMEPAGE_FEEDBACK_2024: 1732665600000 # new Date("2024-11-27Z").getTime()
+          REACT_APP_SURVEY_RATE_FROM_HOMEPAGE_FEEDBACK_2024: 0.0
+          REACT_APP_SURVEY_RATE_TILL_HOMEPAGE_FEEDBACK_2024: 1 # 100%
 
           # Telemetry.
           REACT_APP_GLEAN_CHANNEL: prod

client/src/document/on-github.tsx

@@ -4,13 +4,13 @@ export function OnGitHubLink({ doc }: { doc: Doc }) {
   return (
     <div id="on-github" className="on-github">
       <SourceOnGitHubLink doc={doc}>
-        {doc.locale !== "de"
+        {doc.locale !== "fr"
           ? "View this page on GitHub"
           : "Übersetzung auf GitHub anzeigen"}
       </SourceOnGitHubLink>{" "}
       •{" "}
       <NewIssueOnGitHubLink doc={doc}>
-        {doc.locale !== "de"
+        {doc.locale !== "fr"
           ? "Report a problem with this content"
           : "Fehler mit dieser Übersetzung melden"}
       </NewIssueOnGitHubLink>
@@ -35,7 +35,7 @@ const METADATA_TEMPLATE = `
 function fillMetadata(string, doc) {
   let { folder, github_url, last_commit_url } = doc.source;
 
-  if (doc.locale === "de") {
+  if (doc.locale === "fr") {
     github_url = github_url.replace(
       "/translated-content/",
       "/translated-content-de/"
@@ -74,7 +74,7 @@ function NewIssueOnGitHubLink({
       ? "/mdn/translated-content/issues/new"
       : "/mdn/content/issues/new";
 
-  if (locale === "de") {
+  if (locale === "fr") {
     url.pathname = "/mdn/translated-content-de/issues/new";
   }
 
@@ -110,7 +110,7 @@ function SourceOnGitHubLink({
 }) {
   let { github_url, folder } = doc.source;
 
-  if (doc.locale === "de") {
+  if (doc.locale === "fr") {
     github_url = github_url.replace(
       "/translated-content/",
       "/translated-content-de/"

client/src/homepage/homepage-hero/index.scss

@@ -24,6 +24,18 @@
     padding: 0 1rem;
     width: 100%;
 
+    .document-survey {
+      margin-top: 1rem;
+
+      &:not(:has(details[open])) {
+        max-width: 32rem;
+      }
+
+      ~ h1 {
+        display: none;
+      }
+    }
+
     h1 {
       /* Title */
       font-size: 2.2rem;

client/src/homepage/homepage-hero/index.tsx

@@ -3,13 +3,16 @@ import { Search } from "../../ui/molecules/search";
 import Mandala from "../../ui/molecules/mandala";
 import { useLocale } from "../../hooks";
 import { HOMEPAGE_HERO } from "../../telemetry/constants";
+import { DocumentSurvey } from "../../ui/molecules/document-survey";
+import { useLocation } from "react-router";
 
 export function HomepageHero() {
+  const { pathname } = useLocation();
   const locale = useLocale();
-
   return (
     <div className="homepage-hero dark">
       <section>
+        <DocumentSurvey doc={{ mdn_url: pathname }} />
         <h1>
           Resources for <u>Developers</u>,
           <br /> by Developers

client/src/ui/molecules/document-survey/index.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { Doc } from "../../../../../libs/types/document";
 import "./index.scss";
 import { Survey, SURVEYS } from "./surveys";
 import { getSurveyState, writeSurveyState } from "./utils";
@@ -12,7 +11,7 @@ import { SURVEY } from "../../../telemetry/constants";
 
 const FORCE_SURVEY_PREFIX = "#FORCE_SURVEY=";
 
-export function DocumentSurvey({ doc }: { doc: Doc }) {
+export function DocumentSurvey({ doc }: { doc: { mdn_url: string } }) {
   const isServer = useIsServer();
   const location = useLocation();
 
@@ -21,14 +20,14 @@ export function DocumentSurvey({ doc }: { doc: Doc }) {
   const survey = React.useMemo(
     () =>
       SURVEYS.find((survey) => {
-        if (isServer || (WRITER_MODE && !DEV_MODE)) {
-          return false;
-        }
-
         if (force) {
           return survey.key === location.hash.slice(FORCE_SURVEY_PREFIX.length);
         }
 
+        if (isServer || (WRITER_MODE && !DEV_MODE)) {
+          return false;
+        }
+
         if (!survey.show(doc)) {
           return false;
         }
@@ -59,7 +58,7 @@ function SurveyDisplay({
   survey,
   force,
 }: {
-  doc: Doc;
+  doc: { mdn_url: string };
   survey: Survey;
   force: boolean;
 }) {
@@ -157,7 +156,7 @@ function SurveyDisplay({
   });
 
   if (!force && (state.dismissed_at || originalState.submitted_at)) {
-    return <></>;
+    return null;
   }
 
   return (

client/src/ui/molecules/document-survey/surveys.ts

@@ -1,18 +1,17 @@
-import { Doc } from "../../../../../libs/types/document";
 import { survey_duration, survey_rates } from "../../../env";
 
 export interface Survey {
   key: SurveyKey;
   bucket: SurveyBucket;
-  show: (doc: Doc) => boolean;
+  show: (doc: { mdn_url: string }) => boolean;
   // Start in milliseconds since 1970.
   start: number;
   // End in milliseconds since 1970.
   end: number;
   // Proportion slice of users to target.
   rateFrom: number;
   rateTill: number;
-  src: string | ((doc: Doc) => string);
+  src: string | ((doc: { mdn_url: string }) => string);
   teaser: string;
   question: string;
   footnote?: string;
@@ -32,6 +31,7 @@ enum SurveyBucket {
   WEB_SECURITY_2023 = "WEB_SECURITY_2023",
   DISCOVERABILITY_AUG_2023 = "DISCOVERABILITY_AUG_2023",
   WEB_APP_AUGUST_2024 = "WEB_APP_AUGUST_2024",
+  HOMEPAGE_FEEDBACK_2024 = "HOMEPAGE_FEEDBACK_2024",
 }
 
 enum SurveyKey {
@@ -50,29 +50,18 @@ enum SurveyKey {
   WEB_SECURITY_2023 = "WEB_SECURITY_2023",
   DISCOVERABILITY_AUG_2023 = "DISCOVERABILITY_AUG_2023",
   WEB_APP_AUGUST_2024 = "WEB_APP_AUGUST_2024",
+  HOMEPAGE_FEEDBACK_2024 = "HOMEPAGE_FEEDBACK_2024",
 }
 
 // When adding a survey, make sure it has this JavaScript action (in Alchemer)
 // so the banner is hidden for users who have already submitted it:
 // window.parent && window.parent.postMessage("submit", "*");
 
 export const SURVEYS: Survey[] = [
-  {
-    key: SurveyKey.WEB_APP_AUGUST_2024,
-    bucket: SurveyBucket.WEB_APP_AUGUST_2024,
-    show: (doc: Doc) => /en-US\/docs\/Web(\/|$)/i.test(doc.mdn_url),
-    src: "https://survey.alchemer.com/s3/7942186/MDN-Web-App-Survey",
-    teaser:
-      "We're working with our partners to learn how developers are building web apps. Share your thoughts and experience in this short survey:",
-    question:
-      "In the past year, have you built an installable web application?",
-    ...survey_duration(SurveyBucket.WEB_APP_AUGUST_2024),
-    ...survey_rates(SurveyKey.WEB_APP_AUGUST_2024),
-  },
   {
     key: SurveyKey.DE_LOCALE_2024_EVAL,
     bucket: SurveyBucket.DE_LOCALE_2024_EVAL,
-    show: (doc: Doc) => {
+    show: (doc: { mdn_url: string }) => {
       if (!doc.mdn_url.startsWith("/de/docs/")) {
         // Exclude other languages.
         return false;
@@ -86,7 +75,7 @@ export const SURVEYS: Survey[] = [
         return false;
       }
     },
-    src: (doc: Doc) => {
+    src: (doc: { mdn_url: string }) => {
       const url = new URL(
         "https://survey.alchemer.com/s3/8073795/Feedback-zur-deutschen-Version-von-MDN"
       );
@@ -100,4 +89,14 @@ export const SURVEYS: Survey[] = [
     start: 0,
     end: Infinity,
   },
+  {
+    key: SurveyKey.HOMEPAGE_FEEDBACK_2024,
+    bucket: SurveyBucket.HOMEPAGE_FEEDBACK_2024,
+    show: (doc: { mdn_url: string }) => /[^/]+\/$/i.test(doc.mdn_url),
+    src: "https://survey.alchemer.com/s3/8075407/MDN-Homepage-Improvements",
+    teaser: "We are refreshing out homepage and would love",
+    question: "your input",
+    ...survey_duration(SurveyBucket.HOMEPAGE_FEEDBACK_2024),
+    ...survey_rates(SurveyKey.HOMEPAGE_FEEDBACK_2024),
+  },
 ];