feat(newletter): deprecate newsletter

client/src/blog/index.tsx

@@ -10,7 +10,6 @@ import { BlogImage, BlogPostMetadata } from "../../../libs/types/blog.js";
 
 import "./index.scss";
 import { Button } from "../ui/atoms/button";
-import { SignUpSection as NewsletterSignUp } from "../newsletter";
 
 interface BlogIndexData {
   posts: BlogPostMetadata[];
@@ -105,7 +104,6 @@ function BlogIndex(props: HydrationData) {
           })}
         </section>
       </main>
-      <NewsletterSignUp />
     </>
   );
 }

client/src/blog/post.tsx

@@ -16,7 +16,6 @@ import {
 } from "../../../libs/types/blog";
 import { useDecorateCodeExamples, useRunSample } from "../document/hooks";
 import { DEFAULT_LOCALE } from "../../../libs/constants";
-import { SignUpSection as NewsletterSignUp } from "../newsletter";
 import { TOC } from "../document/organisms/toc";
 import { SidePlacement } from "../ui/organisms/placement";
 import { PlayQueue } from "../playground/queue";
@@ -211,7 +210,6 @@ export function BlogPost(props: HydrationData) {
             <RenderDocumentBody doc={doc} />
             {blogMeta.links && <PreviousNext links={blogMeta.links} />}
           </article>
-          <NewsletterSignUp />
           <PlayQueue standalone={true} />
         </main>
       )}

client/src/newsletter/index.tsx

@@ -1,7 +1,6 @@
-import React, { createElement, useState } from "react";
+import React, { createElement } from "react";
 
 import { useIsServer, useLocale } from "../hooks";
-import { Button } from "../ui/atoms/button";
 import { MainContentContainer } from "../ui/atoms/page-content";
 import { useUserData } from "../user-context";
 
@@ -10,7 +9,7 @@ import "./index.scss";
 export function Newsletter() {
   return (
     <MainContentContainer className="section-newsletter">
-      <SignUpForm />
+      <SignUpForm sendUsersToSettings={true} />
     </MainContentContainer>
   );
 }
@@ -19,98 +18,26 @@ function SignUpForm({ sendUsersToSettings = false, section = false }) {
   const isServer = useIsServer();
   const user = useUserData();
   const locale = useLocale();
-  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 ? (
-    <>
-      {createElement(section ? "h2" : "h1", null, "Thanks!")}
-      <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>
-    </>
-  ) : (
+  return (
     <>
       {createElement(section ? "h2" : "h1", null, "Stay Informed with MDN")}
+      <p>We're decommissioning our MDN Plus newsletter.</p>
       <p>
-        Get the MDN newsletter and never miss an update on the latest web
-        development trends, tips, and best practices.
+        <strong>
+          We will automatically unsubscribe you and purge all related data in
+          the near future.
+        </strong>
       </p>
       {sendUsersToSettings && user?.isAuthenticated && !isServer ? (
         <p>
-          Sign up via the{" "}
+          Unsubscribe now up via the{" "}
           <a href={`/${locale}/plus/settings#newsletter`} rel="_blank">
             Settings Page.
           </a>
         </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="[email protected]"
-              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/settings/newsletter.tsx

@@ -28,14 +28,28 @@ export default function Newsletter() {
       <ul>
         <li>
           <section aria-labelledby="mdn-plus-newsletter">
-            <h3 id="mdn-plus-newsletter">MDN Plus Newsletter</h3>
+            <h3 id="mdn-plus-newsletter">
+              <s>MDN Plus Newsletter</s> (Deprecated)
+            </h3>
             <div className="setting-row">
               <span>
-                Allow us to email you product updates, news, and more.
+                We're decommissioning our MDN Plus newsletter.
+                {enabled ? (
+                  <>
+                    {" "}
+                    If you unsubscribe you cannot subscribe again. <br />
+                    <strong>
+                      We will automatically unsubscribe you and purge all
+                      related data in the near future.
+                    </strong>
+                  </>
+                ) : (
+                  <></>
+                )}
               </span>
               {loading ? (
                 <Spinner extraClasses="loading" />
-              ) : (
+              ) : enabled ? (
                 <Switch
                   name="mdn_plus_newsletter"
                   checked={Boolean(enabled)}
@@ -49,6 +63,8 @@ export default function Newsletter() {
                     setLoading(false);
                   }}
                 ></Switch>
+              ) : (
+                <></>
               )}
             </div>
           </section>