feat(newsletter): add public sign-up page

build/spas.ts

@@ -158,6 +158,10 @@ export async function buildSPAs(options: {
           prefix: "advertising",
           pageTitle: "Advertise with us",
         },
+        {
+          prefix: "newsletter",
+          pageTitle: "Stay Informed with MDN",
+        },
       ];
       const locale = VALID_LOCALES.get(pathLocale) || pathLocale;
       for (const { prefix, pageTitle, noIndexing } of SPAs) {

client/src/app.tsx

@@ -27,6 +27,7 @@ import { Advertising } from "./advertising";
 import { HydrationData } from "../../libs/types/hydration";
 import { TopPlacement } from "./ui/organisms/placement";
 import { Blog } from "./blog";
+import { Newsletter } from "./newsletter";
 
 const AllFlaws = React.lazy(() => import("./flaws"));
 const Translations = React.lazy(() => import("./translations"));
@@ -293,6 +294,14 @@ export function App(appProps: HydrationData) {
                 </StandardLayout>
               }
             />
+            <Route
+              path="/newsletter"
+              element={
+                <StandardLayout>
+                  <Newsletter />
+                </StandardLayout>
+              }
+            />
             <Route
               path="*"
               element={

client/src/newsletter/index.scss

@@ -0,0 +1,10 @@
+.main-newsletter {
+  max-width: 35rem;
+  margin: 0 auto;
+  padding: 2rem;
+
+  input[type="email"],
+  button {
+    width: 100%;
+  }
+}

client/src/newsletter/index.tsx

@@ -0,0 +1,105 @@
+import React, { useState } from "react";
+
+import { useIsServer } from "../hooks";
+import { Button } from "../ui/atoms/button";
+import { MainContentContainer } from "../ui/atoms/page-content";
+
+import "./index.scss";
+
+export function Newsletter() {
+  return (
+    <MainContentContainer className="main-newsletter">
+      <SignUpForm />
+    </MainContentContainer>
+  );
+}
+
+function SignUpForm() {
+  const isServer = useIsServer();
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const [email, setEmail] = useState("");
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    setPending(true);
+    try {
+      const response = await fetch("/api/v1/newsletter", {
+        body: JSON.stringify({ email }),
+        method: "POST",
+        headers: {
+          "content-type": "application/json",
+        },
+      });
+      if (!response.ok) {
+        throw Error();
+      }
+    } catch {
+      setError(true);
+      setPending(false);
+      return;
+    }
+    setSubmitted(true);
+  };
+
+  return submitted ? (
+    <>
+      <h1>Thanks!</h1>
+      <p>
+        If you haven't previously confirmed a subscription to a Mozilla-related
+        newsletter, you may have to do so. Please check your inbox or your spam
+        filter for an email from us.
+      </p>
+    </>
+  ) : (
+    <>
+      <h1>Stay Informed with MDN</h1>
+      <p>
+        Get the MDN newsletter and never miss an update on the latest web
+        development trends, tips, and best practices.
+      </p>
+      <form className="mdn-form mdn-form-big" onSubmit={submit}>
+        <div className="mdn-form-item">
+          <label htmlFor="newsletter_email">Your email address:</label>
+
+          <input
+            type="email"
+            name="email"
+            required={true}
+            placeholder="yourname@example.com"
+            id="newsletter_email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            disabled={pending}
+          />
+        </div>
+
+        <div className="mdn-form-item">
+          <label htmlFor="newsletter_privacy">
+            <input
+              type="checkbox"
+              id="newsletter_privacy"
+              name="privacy"
+              required={true}
+              disabled={pending}
+            />{" "}
+            I’m okay with Mozilla handling my info as explained in this{" "}
+            <a
+              href="https://www.mozilla.org/en-US/privacy/websites/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Privacy Notice
+            </a>
+          </label>
+        </div>
+
+        <div className="mdn-form-item">
+          <Button buttonType="submit" isDisabled={pending || isServer}>
+            {error ? "Something went wrong, try again" : "Sign Up Now"}
+          </Button>
+        </div>
+      </form>
+    </>
+  );
+}

client/src/ui/atoms/form/index.scss

@@ -25,6 +25,7 @@
   }
 
   [type="text"],
+  [type="email"],
   textarea,
   select {
     background: var(--background-primary);
@@ -95,3 +96,29 @@
     }
   }
 }
+
+.modal-body,
+.mdn-form.mdn-form-big {
+  .mdn-form-item {
+    padding-top: 1.5rem;
+
+    &:first-child {
+      padding-top: 0;
+    }
+
+    label,
+    textarea,
+    [type="text"],
+    [type="email"] {
+      font-size: 1rem;
+      font-weight: normal;
+    }
+  }
+
+  .button-wrap {
+    font-size: 1rem;
+    height: auto;
+    line-height: 1.5;
+    padding: 0.5rem 2rem;
+  }
+}

client/src/ui/atoms/modal/index.scss

@@ -79,12 +79,6 @@ body.ReactModal__Body--open {
   }
 
   .mdn-form-item {
-    padding-top: 1.5rem;
-
-    &:first-child {
-      padding-top: 0;
-    }
-
     @media screen and (max-width: $screen-lg) {
       &:last-child {
         padding-bottom: 1.5rem;
@@ -97,25 +91,11 @@ body.ReactModal__Body--open {
       gap: 1.5rem;
       justify-content: flex-start;
     }
-
-    label,
-    textarea,
-    [type="text"] {
-      font-size: 1rem;
-      font-weight: normal;
-    }
   }
 
   button {
     flex: 1;
   }
-
-  .button-wrap {
-    font-size: 1rem;
-    height: auto;
-    line-height: 1.5;
-    padding: 0.5rem 2rem;
-  }
 }
 
 @media screen and (min-width: $screen-lg) {