From 203b29811797b9396425bd0e8219bb0e6fb82eae Mon Sep 17 00:00:00 2001
From: Leo McArdle <lmcardle@mozilla.com>
Date: Thu, 15 Jun 2023 17:53:45 +0100
Subject: [PATCH] feat(blog): show newsletter form or link below posts (#8920)

https://mozilla-hub.atlassian.net/browse/MP-394
---
 client/src/blog/index.tsx          |   2 +
 client/src/blog/post.scss          |   5 ++
 client/src/blog/post.tsx           |  28 +++++---
 client/src/newsletter/index.scss   |   6 +-
 client/src/newsletter/index.tsx    | 106 +++++++++++++++++------------
 client/src/settings/newsletter.tsx |   2 +-
 6 files changed, 93 insertions(+), 56 deletions(-)

diff --git a/client/src/blog/index.tsx b/client/src/blog/index.tsx
index 4d2e3887a41c..9b56da5a8a07 100644
--- a/client/src/blog/index.tsx
+++ b/client/src/blog/index.tsx
@@ -11,6 +11,7 @@ import { BlogImage, BlogPostFrontmatter } from "../../../libs/types/blog.js";
 import "./index.scss";
 import "./post.scss";
 import { Button } from "../ui/atoms/button";
+import { SignUpSection as NewsletterSignUp } from "../newsletter";
 
 interface BlogIndexData {
   posts: BlogPostFrontmatter[];
@@ -101,6 +102,7 @@ function BlogIndex(props: HydrationData) {
           return <PostPreview key={fm.slug} fm={fm} />;
         })}
       </main>
+      <NewsletterSignUp />
     </>
   );
 }
diff --git a/client/src/blog/post.scss b/client/src/blog/post.scss
index 690d2f739336..518c731ad36b 100644
--- a/client/src/blog/post.scss
+++ b/client/src/blog/post.scss
@@ -2,6 +2,11 @@
 
 .blog-container.post {
   max-width: calc(48rem + 4rem);
+
+  + .section-newsletter h2 {
+    font: var(--type-heading-h3);
+    margin: 0;
+  }
 }
 
 .blog-container {
diff --git a/client/src/blog/post.tsx b/client/src/blog/post.tsx
index 0ab8a4a41a05..8b094ca8cab3 100644
--- a/client/src/blog/post.tsx
+++ b/client/src/blog/post.tsx
@@ -15,6 +15,7 @@ import {
 } from "../../../libs/types/blog";
 import { useCopyExamplesToClipboard } from "../document/hooks";
 import { DEFAULT_LOCALE } from "../../../libs/constants";
+import { SignUpSection as NewsletterSignUp } from "../newsletter";
 
 function MaybeLink({ link, children }) {
   return link ? (
@@ -175,17 +176,22 @@ export function BlogPost(props: HydrationData) {
   return (
     <>
       {doc && blogMeta && (
-        <article
-          className="blog-container post container main-page-content"
-          lang={doc?.locale}
-        >
-          <BlogImageFigure image={blogMeta?.image} width={800} height={420} />
-          {blogMeta?.sponsored && <span className="sponsored">Sponsored</span>}
-          <h1>{doc?.title}</h1>
-          <AuthorDateReadTime metadata={blogMeta} />
-          <RenderDocumentBody doc={doc} />
-          {blogMeta.links && <PreviousNext links={blogMeta.links} />}
-        </article>
+        <>
+          <article
+            className="blog-container post container main-page-content"
+            lang={doc?.locale}
+          >
+            <BlogImageFigure image={blogMeta?.image} width={800} height={420} />
+            {blogMeta?.sponsored && (
+              <span className="sponsored">Sponsored</span>
+            )}
+            <h1>{doc?.title}</h1>
+            <AuthorDateReadTime metadata={blogMeta} />
+            <RenderDocumentBody doc={doc} />
+            {blogMeta.links && <PreviousNext links={blogMeta.links} />}
+          </article>
+          <NewsletterSignUp />
+        </>
       )}
     </>
   );
diff --git a/client/src/newsletter/index.scss b/client/src/newsletter/index.scss
index f4853ce71cea..78e12cca31b9 100644
--- a/client/src/newsletter/index.scss
+++ b/client/src/newsletter/index.scss
@@ -1,4 +1,4 @@
-.main-newsletter {
+.section-newsletter {
   margin: 0 auto;
   max-width: 35rem;
   padding: 2rem;
@@ -7,4 +7,8 @@
   button {
     width: 100%;
   }
+
+  form {
+    margin-bottom: 2rem;
+  }
 }
diff --git a/client/src/newsletter/index.tsx b/client/src/newsletter/index.tsx
index 217147569b18..0b7457a6b734 100644
--- a/client/src/newsletter/index.tsx
+++ b/client/src/newsletter/index.tsx
@@ -1,21 +1,24 @@
-import React, { useState } from "react";
+import React, { createElement, useState } from "react";
 
-import { useIsServer } from "../hooks";
+import { useIsServer, useLocale } from "../hooks";
 import { Button } from "../ui/atoms/button";
 import { MainContentContainer } from "../ui/atoms/page-content";
+import { useUserData } from "../user-context";
 
 import "./index.scss";
 
 export function Newsletter() {
   return (
-    <MainContentContainer className="main-newsletter">
+    <MainContentContainer className="section-newsletter">
       <SignUpForm />
     </MainContentContainer>
   );
 }
 
-function SignUpForm() {
+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);
@@ -44,7 +47,7 @@ function SignUpForm() {
 
   return submitted ? (
     <>
-      <h1>Thanks!</h1>
+      {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
@@ -53,53 +56,70 @@ function SignUpForm() {
     </>
   ) : (
     <>
-      <h1>Stay Informed with MDN</h1>
+      {createElement(section ? "h2" : "h1", null, "Stay Informed with MDN")}
       <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>
+      {sendUsersToSettings && user?.isAuthenticated ? (
+        <p>
+          Sign 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="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"
+              type="email"
+              name="email"
               required={true}
+              placeholder="yourname@example.com"
+              id="newsletter_email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
               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>
+
+          <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>
+          <div className="mdn-form-item">
+            <Button buttonType="submit" isDisabled={pending || isServer}>
+              {error ? "Something went wrong, try again" : "Sign Up Now"}
+            </Button>
+          </div>
+        </form>
+      )}
     </>
   );
 }
+
+export function SignUpSection() {
+  return (
+    <section className="section-newsletter">
+      <SignUpForm sendUsersToSettings={true} section={true} />
+    </section>
+  );
+}
diff --git a/client/src/settings/newsletter.tsx b/client/src/settings/newsletter.tsx
index 286576b5ba72..79128e50123d 100644
--- a/client/src/settings/newsletter.tsx
+++ b/client/src/settings/newsletter.tsx
@@ -24,7 +24,7 @@ export default function Newsletter() {
 
   return (
     <section className="field-group">
-      <h2>Newsletter</h2>
+      <h2 id="newsletter">Newsletter</h2>
       <ul>
         <li>
           <h3>Receive updates from MDN Plus</h3>