diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json index 9fc2a05e1..2ca5deea5 100644 --- a/frontend/public/locales/en/common.json +++ b/frontend/public/locales/en/common.json @@ -206,6 +206,7 @@ } }, "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.", @@ -213,6 +214,7 @@ "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 index f14853792..01beeff41 100644 --- 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 index c25e4c629..49147c967 100644 --- 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/frontend/src/pages/newsletter-confirmation.tsx b/frontend/src/pages/newsletter/confirmation.tsx similarity index 97% rename from frontend/src/pages/newsletter-confirmation.tsx rename to frontend/src/pages/newsletter/confirmation.tsx index 19e8bab3c..5716a04d4 100644 --- a/frontend/src/pages/newsletter-confirmation.tsx +++ b/frontend/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 b/frontend/src/pages/newsletter/index.tsx similarity index 59% rename from frontend/src/pages/newsletter.tsx rename to frontend/src/pages/newsletter/index.tsx index 8be8ef115..0c3b8e986 100644 --- a/frontend/src/pages/newsletter.tsx +++ b/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) => { + const fieldName = e.target.name; + const fieldValue = e.target.value; + + setFormData((prevState) => ({ + ...prevState, + [fieldName]: fieldValue, + })); + }; + return ( <> @@ -52,16 +72,56 @@ const Newsletter: NextPage = () => { method="POST" acceptCharset="utf-8" > - - - - + + + + + +
- +
- -