[Issues 820 857 858] Newsletter Dec Updates (#876)

HHS · Dec 13, 2023 · 32f6656 · 32f6656
1 parent 56af1e5
commit 32f6656
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 17 deletions.
diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
@@ -206,13 +206,15 @@
     }
   },
   "Newsletter": {
+    "page_title": "Newsletter | Simpler Grants.gov",
     "title": "Newsletter signup",
     "intro": "Subscribe to get Simpler.Grants.gov project updates in your inbox!",
     "paragraph_1": "If you sign up for the Simpler.Grants.gov newsletter, we’ll keep you informed of our progress and you’ll know about every opportunity to get involved.",
     "list": "<ul><li>Hear about upcoming milestones</li><li>Be the first to know when we launch new code</li><li>Test out new features and functionalities</li><li>Participate in usability tests and other user research efforts</li><li>Learn about ways to provide feedback </li></ul>",
     "disclaimer": "The Simpler.Grants.gov newsletter is powered by the Sendy data service. Personal information is not stored within Simpler.Grants.gov. "
   },
   "Newsletter_confirmation": {
+    "page_title": "Newsletter Confirmation | Simpler Grants.gov",
     "title": "You’re subscribed",
     "intro": "You are signed up to receive project updates from Simpler.Grants.gov.",
     "paragraph_1": "Thank you for subscribing. We’ll keep you informed of our progress and you’ll know about every opportunity to get involved.",
@@ -221,6 +223,7 @@
     "disclaimer": "The Simpler.Grants.gov newsletter is powered by the Sendy data service. Personal information is not stored within Simpler.Grants.gov. "
   },
   "Newsletter_unsubscribe": {
+    "page_title": "Newsletter Unsubscribe | Simpler Grants.gov",
     "title": "You have unsubscribed",
     "intro": "You will no longer receive project updates from Simpler.Grants.gov. ",
     "paragraph_1": "Did you unsubscribe by accident? Sign up again.",
@@ -240,6 +243,7 @@
     "nav_link_home": "Home",
     "nav_link_process": "Process",
     "nav_link_research": "Research",
+    "nav_link_newsletter": "Newsletter",
     "nav_menu_toggle": "Menu",
     "title": "Simpler Grants.gov"
   },

diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
@@ -19,6 +19,7 @@ const primaryLinks: PrimaryLinks = [
   { i18nKey: "nav_link_home", href: "/" },
   { i18nKey: "nav_link_process", href: "/process" },
   { i18nKey: "nav_link_research", href: "/research" },
+  { i18nKey: "nav_link_newsletter", href: "/newsletter" },
 ];
 
 type Props = {

diff --git a/frontend/src/constants/breadcrumbs.ts b/frontend/src/constants/breadcrumbs.ts
@@ -1,16 +1,16 @@
 import { Breadcrumb, BreadcrumbList } from "src/components/Breadcrumbs";
 
 const HOME: Breadcrumb = { title: "Home", path: "/" };
-const RESEARCH: Breadcrumb = { title: "Research", path: "research/" };
-const PROCESS: Breadcrumb = { title: "Process", path: "process/" };
-const NEWSLETTER: Breadcrumb = { title: "Newsletter", path: "newsletter/" };
+const RESEARCH: Breadcrumb = { title: "Research", path: "/research/" };
+const PROCESS: Breadcrumb = { title: "Process", path: "/process/" };
+const NEWSLETTER: Breadcrumb = { title: "Newsletter", path: "/newsletter/" };
 const NEWSLETTER_CONFIRMATION: Breadcrumb = {
   title: "Confirmation",
-  path: "newsletter-confirmation/",
+  path: "/newsletter/confirmation/",
 };
 const NEWSLETTER_UNSUBSCRIBE: Breadcrumb = {
   title: "Unsubscribe",
-  path: "newsletter-unsubscribe/",
+  path: "/newsletter/unsubscribe/",
 };
 
 export const RESEARCH_CRUMBS: BreadcrumbList = [HOME, RESEARCH];

diff --git a/...end/src/pages/newsletter-confirmation.tsx → ...end/src/pages/newsletter/confirmation.tsx b/...end/src/pages/newsletter-confirmation.tsx → ...end/src/pages/newsletter/confirmation.tsx
@@ -8,7 +8,7 @@ import { Grid, GridContainer } from "@trussworks/react-uswds";
 
 import Breadcrumbs from "src/components/Breadcrumbs";
 import PageSEO from "src/components/PageSEO";
-import BetaAlert from "../components/BetaAlert";
+import BetaAlert from "../../components/BetaAlert";
 
 const NewsletterConfirmation: NextPage = () => {
   const { t } = useTranslation("common", {

diff --git a/frontend/src/pages/newsletter.tsx → frontend/src/pages/newsletter/index.tsx b/frontend/src/pages/newsletter.tsx → frontend/src/pages/newsletter/index.tsx
@@ -3,6 +3,7 @@ import { NEWSLETTER_CRUMBS } from "src/constants/breadcrumbs";
 
 import { Trans, useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { useState } from "react";
 import {
   Button,
   Grid,
@@ -13,11 +14,30 @@ import {
 
 import Breadcrumbs from "src/components/Breadcrumbs";
 import PageSEO from "src/components/PageSEO";
-import BetaAlert from "../components/BetaAlert";
+import BetaAlert from "../../components/BetaAlert";
 
 const Newsletter: NextPage = () => {
   const { t } = useTranslation("common", { keyPrefix: "Newsletter" });
 
+  const [formData, setFormData] = useState({
+    name: "",
+    LastName: "",
+    email: "",
+    list: "A2zerhEC59Ea6mzTgzdTgw",
+    subform: "yes",
+    hp: "",
+  });
+
+  const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const fieldName = e.target.name;
+    const fieldValue = e.target.value;
+
+    setFormData((prevState) => ({
+      ...prevState,
+      [fieldName]: fieldValue,
+    }));
+  };
+
   return (
     <>
       <PageSEO title={t("page_title")} description={t("meta_description")} />
@@ -52,16 +72,56 @@ const Newsletter: NextPage = () => {
               method="POST"
               acceptCharset="utf-8"
             >
-              <Label htmlFor="name">First Name</Label>
-              <TextInput type="text" name="name" id="name" required />
-              <Label htmlFor="LastName">Last Name</Label>
-              <TextInput type="text" name="LastName" id="LastName" />
+              <Label htmlFor="name">
+                First Name{" "}
+                <span title="required" className="usa-hint usa-hint--required ">
+                  (required)
+                </span>
+              </Label>
+              <TextInput
+                aria-required
+                type="text"
+                name="name"
+                id="name"
+                value={formData.name}
+                required
+                onChange={handleInput}
+              />
+              <Label htmlFor="LastName" hint=" (optional)">
+                Last Name
+              </Label>
+              <TextInput
+                type="text"
+                name="LastName"
+                id="LastName"
+                value={formData.LastName}
+                onChange={handleInput}
+              />
+              <Label htmlFor="email">
+                Email{" "}
+                <span title="required" className="usa-hint usa-hint--required ">
+                  (required)
+                </span>
+              </Label>
+              <TextInput
+                aria-required
+                type="email"
+                name="email"
+                id="email"
+                required
+                value={formData.email}
+                onChange={handleInput}
+              />
               <div className="display-none">
                 <Label htmlFor="hp">HP</Label>
-                <TextInput type="text" name="hp" id="hp" />
+                <TextInput
+                  type="text"
+                  name="hp"
+                  id="hp"
+                  value={formData.hp}
+                  onChange={handleInput}
+                />
               </div>
-              <Label htmlFor="email">Email</Label>
-              <TextInput type="email" name="email" id="email" required />
               <input type="hidden" name="list" value="A2zerhEC59Ea6mzTgzdTgw" />
               <input type="hidden" name="subform" value="yes" />
               <Button

diff --git a/...tend/src/pages/newsletter-unsubscribe.tsx → ...tend/src/pages/newsletter/unsubscribe.tsx b/...tend/src/pages/newsletter-unsubscribe.tsx → ...tend/src/pages/newsletter/unsubscribe.tsx
@@ -8,7 +8,7 @@ import { Grid, GridContainer } from "@trussworks/react-uswds";
 
 import Breadcrumbs from "src/components/Breadcrumbs";
 import PageSEO from "src/components/PageSEO";
-import BetaAlert from "../components/BetaAlert";
+import BetaAlert from "../../components/BetaAlert";
 
 const NewsletterUnsubscribe: NextPage = () => {
   const { t } = useTranslation("common", {

diff --git a/...ts/pages/newsletter-confirmation.test.tsx → ...ts/pages/newsletter/confirmation.test.tsx b/...ts/pages/newsletter-confirmation.test.tsx → ...ts/pages/newsletter/confirmation.test.tsx
@@ -1,6 +1,6 @@
 import { render, waitFor } from "@testing-library/react";
 import { axe } from "jest-axe";
-import NewsletterConfirmation from "src/pages/newsletter-confirmation";
+import NewsletterConfirmation from "src/pages/newsletter/confirmation";
 
 describe("Newsletter", () => {
   it("passes accessibility scan", async () => {

diff --git a/frontend/tests/pages/newsletter.test.tsx → ...end/tests/pages/newsletter/index.test.tsx b/frontend/tests/pages/newsletter.test.tsx → ...end/tests/pages/newsletter/index.test.tsx
diff --git a/...sts/pages/newsletter-unsubscribe.test.tsx → ...sts/pages/newsletter/unsubscribe.test.tsx b/...sts/pages/newsletter-unsubscribe.test.tsx → ...sts/pages/newsletter/unsubscribe.test.tsx
@@ -1,6 +1,6 @@
 import { render, waitFor } from "@testing-library/react";
 import { axe } from "jest-axe";
-import NewsletterUnsubscribe from "src/pages/newsletter-unsubscribe";
+import NewsletterUnsubscribe from "src/pages/newsletter/unsubscribe";
 
 describe("Newsletter", () => {
   it("passes accessibility scan", async () => {