feat(survey): homepage survey 2024 (#12115)

* feat(homepage): add survey * lint * add to prod * Update client/src/ui/molecules/document-survey/surveys.ts Co-authored-by: Claas Augner <[email protected]> * revert * type * Apply suggestions from code review --------- Co-authored-by: Claas Augner <[email protected]>
mdn · Nov 15, 2024 · 55158d8 · 55158d8
1 parent 4fd2437
commit 55158d8
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 28 deletions.
diff --git a/.github/workflows/prod-build.yml b/.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

diff --git a/client/src/homepage/homepage-hero/index.scss b/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;

diff --git a/client/src/homepage/homepage-hero/index.tsx b/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

diff --git a/client/src/ui/molecules/document-survey/index.tsx b/client/src/ui/molecules/document-survey/index.tsx
@@ -12,7 +12,7 @@ import { SURVEY } from "../../../telemetry/constants";
 
 const FORCE_SURVEY_PREFIX = "#FORCE_SURVEY=";
 
-export function DocumentSurvey({ doc }: { doc: Doc }) {
+export function DocumentSurvey({ doc }: { doc: Pick<Doc, "mdn_url"> }) {
   const isServer = useIsServer();
   const location = useLocation();
 
@@ -21,14 +21,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 +59,7 @@ function SurveyDisplay({
   survey,
   force,
 }: {
-  doc: Doc;
+  doc: Pick<Doc, "mdn_url">;
   survey: Survey;
   force: boolean;
 }) {
@@ -157,7 +157,7 @@ function SurveyDisplay({
   });
 
   if (!force && (state.dismissed_at || originalState.submitted_at)) {
-    return <></>;
+    return null;
   }
 
   return (

diff --git a/client/src/ui/molecules/document-survey/surveys.ts b/client/src/ui/molecules/document-survey/surveys.ts
@@ -4,15 +4,15 @@ import { survey_duration, survey_rates } from "../../../env";
 export interface Survey {
   key: SurveyKey;
   bucket: SurveyBucket;
-  show: (doc: Doc) => boolean;
+  show: (doc: Pick<Doc, "mdn_url">) => 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: Pick<Doc, "mdn_url">) => string);
   teaser: string;
   question: string;
   footnote?: string;
@@ -32,6 +32,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 +51,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: Pick<Doc, "mdn_url">) => {
       if (!doc.mdn_url.startsWith("/de/docs/")) {
         // Exclude other languages.
         return false;
@@ -86,7 +76,7 @@ export const SURVEYS: Survey[] = [
         return false;
       }
     },
-    src: (doc: Doc) => {
+    src: (doc: Pick<Doc, "mdn_url">) => {
       const url = new URL(
         "https://survey.alchemer.com/s3/8073795/Feedback-zur-deutschen-Version-von-MDN"
       );
@@ -100,4 +90,14 @@ export const SURVEYS: Survey[] = [
     start: 0,
     end: Infinity,
   },
+  {
+    key: SurveyKey.HOMEPAGE_FEEDBACK_2024,
+    bucket: SurveyBucket.HOMEPAGE_FEEDBACK_2024,
+    show: (doc: Pick<Doc, "mdn_url">) => /[^/]+\/$/i.test(doc.mdn_url),
+    src: "https://survey.alchemer.com/s3/8075407/MDN-Homepage-Improvements",
+    teaser: "We are refreshing our homepage and would love",
+    question: "your input",
+    ...survey_duration(SurveyBucket.HOMEPAGE_FEEDBACK_2024),
+    ...survey_rates(SurveyKey.HOMEPAGE_FEEDBACK_2024),
+  },
 ];