[Issue #95]: change newsletter to subscribe terminology

frontend/README.md

@@ -35,7 +35,7 @@ The application can be ran natively or in a Docker container.
 
 #### Native
 
-There are several secret environment variables necessary to submit the form related to the newsletter. Duplicate the `/frontend/env.development` file and name the copy `/frontend/.env.local`, which will not be checked into github. Fill in the three variables related to Sendy. Ask another engineer on the team for those values if you don't have them.
+There are several secret environment variables necessary to submit the form related to the email subscription. Duplicate the `/frontend/env.development` file and name the copy `/frontend/.env.local`, which will not be checked into github. Fill in the three variables related to Sendy. Ask another engineer on the team for those values if you don't have them.
 
 From the `frontend/` directory:
 

frontend/src/app/[locale]/research/ResearchImpact.tsx

@@ -1,9 +1,8 @@
-import { ExternalRoutes } from "src/constants/routes";
 import { useMessages, useTranslations } from "next-intl";
 
-import { Grid } from "@trussworks/react-uswds";
-
 import ContentLayout from "src/components/ContentLayout";
+import { ExternalRoutes } from "src/constants/routes";
+import { Grid } from "@trussworks/react-uswds";
 import { USWDSIcon } from "src/components/USWDSIcon";
 
 const ResearchImpact = () => {
@@ -63,7 +62,7 @@ const ResearchImpact = () => {
               </a>
             ),
             strong: (chunks) => <strong>{chunks}</strong>,
-            newsletter: (chunks) => <a href={"/newsletter"}>{chunks}</a>,
+            subscribe: (chunks) => <a href={"/subscribe"}>{chunks}</a>,
             arrowUpRightFromSquare: () => (
               <USWDSIcon
                 className="usa-icon text-middle"

frontend/src/app/[locale]/research/ResearchMethodology.tsx

@@ -1,9 +1,9 @@
-import { useTranslations } from "next-intl";
-import Link from "next/link";
 import { Button, Grid } from "@trussworks/react-uswds";
-import { USWDSIcon } from "src/components/USWDSIcon";
 
 import ContentLayout from "src/components/ContentLayout";
+import Link from "next/link";
+import { USWDSIcon } from "src/components/USWDSIcon";
+import { useTranslations } from "next-intl";
 
 const ResearchMethodology = () => {
   const t = useTranslations("Research");
@@ -41,7 +41,7 @@ const ResearchMethodology = () => {
         <p className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
           {t("methodology.title_3")}
         </p>
-        <Link href="/newsletter" passHref>
+        <Link href="/subscribe" passHref>
           <Button className="margin-bottom-4" type="button" outline>
             <span className="margin-right-4">{t("methodology.cta")}</span>
             <USWDSIcon

frontend/src/app/[locale]/newsletter/NewsletterForm.tsx → frontend/src/app/[locale]/subscribe/SubscribeForm.tsx

@@ -1,9 +1,5 @@
 "use client";
-import { NEWSLETTER_CONFIRMATION } from "src/constants/breadcrumbs";
-import { ExternalRoutes } from "src/constants/routes";
 
-import { useRouter } from "next/navigation";
-import { useState } from "react";
 import {
   Alert,
   Button,
@@ -14,10 +10,14 @@ import {
 } from "@trussworks/react-uswds";
 
 import { Data } from "src/pages/api/subscribe";
+import { ExternalRoutes } from "src/constants/routes";
+import { SUBSCRIBE_CONFIRMATION } from "src/constants/breadcrumbs";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
 import { useTranslations } from "next-intl";
 
-export default function NewsletterForm() {
-  const t = useTranslations("Newsletter");
+export default function SubscribeForm() {
+  const t = useTranslations("Subscribe");
 
   const router = useRouter();
   const email = ExternalRoutes.EMAIL_SIMPLERGRANTSGOV;
@@ -75,7 +75,7 @@ export default function NewsletterForm() {
 
     if (res.ok) {
       const { message } = (await res.json()) as Data;
-      router.push(`${NEWSLETTER_CONFIRMATION.path}?sendy=${message as string}`);
+      router.push(`${SUBSCRIBE_CONFIRMATION.path}?sendy=${message as string}`);
       return setSendyError("");
     } else {
       const { error } = (await res.json()) as Data;

frontend/src/app/[locale]/newsletter/confirmation/page.tsx → frontend/src/app/[locale]/subscribe/confirmation/page.tsx

@@ -1,33 +1,32 @@
-import { NEWSLETTER_CONFIRMATION_CRUMBS } from "src/constants/breadcrumbs";
-
-import Link from "next/link";
 import { Grid, GridContainer } from "@trussworks/react-uswds";
 
-import Breadcrumbs from "src/components/Breadcrumbs";
-import PageSEO from "src/components/PageSEO";
 import BetaAlert from "src/components/BetaAlert";
-import { useTranslations } from "next-intl";
+import Breadcrumbs from "src/components/Breadcrumbs";
+import Link from "next/link";
 import { Metadata } from "next";
+import PageSEO from "src/components/PageSEO";
+import { SUBSCRIBE_CONFIRMATION_CRUMBS } from "../../../../constants/breadcrumbs";
 import { getTranslations } from "next-intl/server";
+import { useTranslations } from "next-intl";
 
 export async function generateMetadata() {
   const t = await getTranslations({ locale: "en" });
   const meta: Metadata = {
-    title: t("Newsletter.page_title"),
+    title: t("Subscribe.page_title"),
     description: t("Index.meta_description"),
   };
 
   return meta;
 }
 
-export default function NewsletterConfirmation() {
-  const t = useTranslations("Newsletter_confirmation");
+export default function SubscribeConfirmation() {
+  const t = useTranslations("Subscribe_confirmation");
 
   return (
     <>
       <PageSEO title={t("page_title")} description={t("intro")} />
       <BetaAlert />
-      <Breadcrumbs breadcrumbList={NEWSLETTER_CONFIRMATION_CRUMBS} />
+      <Breadcrumbs breadcrumbList={SUBSCRIBE_CONFIRMATION_CRUMBS} />
 
       <GridContainer className="padding-bottom-5 tablet:padding-top-0 desktop-lg:padding-top-0 border-bottom-2px border-base-lightest">
         <h1 className="margin-0 tablet-lg:font-sans-xl desktop-lg:font-sans-2xl">

frontend/src/app/[locale]/newsletter/page.tsx → frontend/src/app/[locale]/subscribe/page.tsx

@@ -1,46 +1,43 @@
-import { NEWSLETTER_CRUMBS } from "src/constants/breadcrumbs";
-
 import { Grid, GridContainer } from "@trussworks/react-uswds";
-import pick from "lodash/pick";
-import Breadcrumbs from "src/components/Breadcrumbs";
-import PageSEO from "src/components/PageSEO";
-import BetaAlert from "src/components/BetaAlert";
-import NewsletterForm from "src/app/[locale]/newsletter/NewsletterForm";
-import { Metadata } from "next";
-import { getTranslations } from "next-intl/server";
 import {
-  useTranslations,
-  useMessages,
   NextIntlClientProvider,
+  useMessages,
+  useTranslations,
 } from "next-intl";
 
+import BetaAlert from "src/components/BetaAlert";
+import Breadcrumbs from "src/components/Breadcrumbs";
+import { Metadata } from "next";
+import PageSEO from "src/components/PageSEO";
+import { SUBSCRIBE_CRUMBS } from "../../../constants/breadcrumbs";
+import SubscribeForm from "./SubscribeForm";
+import { getTranslations } from "next-intl/server";
+import pick from "lodash/pick";
+
 export async function generateMetadata() {
   const t = await getTranslations({ locale: "en" });
   const meta: Metadata = {
-    title: t("Newsletter.page_title"),
+    title: t("Subscribe.page_title"),
     description: t("Index.meta_description"),
   };
 
   return meta;
 }
 
-export default function Newsletter() {
-  const t = useTranslations("Newsletter");
+export default function Subscribe() {
+  const t = useTranslations("Subscribe");
   const messages = useMessages();
 
   return (
     <>
       <PageSEO title={t("page_title")} description={t("intro")} />
       <BetaAlert />
-      <Breadcrumbs breadcrumbList={NEWSLETTER_CRUMBS} />
+      <Breadcrumbs breadcrumbList={SUBSCRIBE_CRUMBS} />
 
       <GridContainer className="padding-bottom-5 tablet:padding-top-0 desktop-lg:padding-top-0 border-bottom-2px border-base-lightest">
         <h1 className="margin-0 tablet-lg:font-sans-xl desktop-lg:font-sans-2xl">
           {t("title")}
         </h1>
-        <p className="usa-intro font-sans-md tablet:font-sans-lg desktop-lg:font-sans-xl margin-bottom-0">
-          {t("intro")}
-        </p>
         <Grid row gap className="flex-align-start">
           <Grid tabletLg={{ col: 6 }}>
             <p className="usa-intro">{t("paragraph_1")}</p>
@@ -56,9 +53,9 @@ export default function Newsletter() {
           <Grid tabletLg={{ col: 6 }}>
             <NextIntlClientProvider
               locale="en"
-              messages={pick(messages, "Newsletter")}
+              messages={pick(messages, "Subscribe")}
             >
-              <NewsletterForm />
+              <SubscribeForm />
             </NextIntlClientProvider>
           </Grid>
         </Grid>

frontend/src/app/[locale]/newsletter/unsubscribe/page.tsx → frontend/src/app/[locale]/unsubscribe/page.tsx

@@ -1,33 +1,32 @@
-import { NEWSLETTER_UNSUBSCRIBE_CRUMBS } from "src/constants/breadcrumbs";
-
-import Link from "next/link";
 import { Grid, GridContainer } from "@trussworks/react-uswds";
 
-import Breadcrumbs from "src/components/Breadcrumbs";
-import PageSEO from "src/components/PageSEO";
 import BetaAlert from "src/components/BetaAlert";
-import { useTranslations } from "next-intl";
+import Breadcrumbs from "src/components/Breadcrumbs";
+import Link from "next/link";
 import { Metadata } from "next";
+import PageSEO from "src/components/PageSEO";
+import { UNSUBSCRIBE_CRUMBS } from "../../../constants/breadcrumbs";
 import { getTranslations } from "next-intl/server";
+import { useTranslations } from "next-intl";
 
 export async function generateMetadata() {
   const t = await getTranslations({ locale: "en" });
   const meta: Metadata = {
-    title: t("Newsletter.page_title"),
+    title: t("Subscribe.page_title"),
     description: t("Index.meta_description"),
   };
 
   return meta;
 }
 
-export default function NewsletterUnsubscribe() {
-  const t = useTranslations("Newsletter_unsubscribe");
+export default function Unsubscribe() {
+  const t = useTranslations("Unsubscribe");
 
   return (
     <>
       <PageSEO title={t("page_title")} description={t("intro")} />
       <BetaAlert />
-      <Breadcrumbs breadcrumbList={NEWSLETTER_UNSUBSCRIBE_CRUMBS} />
+      <Breadcrumbs breadcrumbList={UNSUBSCRIBE_CRUMBS} />
 
       <GridContainer className="padding-bottom-5 tablet:padding-top-0 desktop-lg:padding-top-0 border-bottom-2px border-base-lightest">
         <h1 className="margin-0 tablet-lg:font-sans-xl desktop-lg:font-sans-2xl">
@@ -39,7 +38,7 @@ export default function NewsletterUnsubscribe() {
         <Grid row gap className="flex-align-start">
           <Grid tabletLg={{ col: 6 }}>
             <p className="usa-intro">{t("paragraph_1")}</p>
-            <Link className="usa-button margin-bottom-4" href="/newsletter">
+            <Link className="usa-button margin-bottom-4" href="/subscribe">
               {t("button_resub")}
             </Link>
           </Grid>

frontend/src/components/Footer.tsx

@@ -1,10 +1,3 @@
-import { ExternalRoutes } from "src/constants/routes";
-import { useTranslations } from "next-intl";
-import { USWDSIcon } from "src/components/USWDSIcon";
-import GrantsLogo from "public/img/grants-gov-logo.png";
-
-import Image from "next/image";
-
 import {
   Address,
   Grid,
@@ -13,6 +6,12 @@ import {
   Footer as USWDSFooter,
 } from "@trussworks/react-uswds";
 
+import { ExternalRoutes } from "src/constants/routes";
+import GrantsLogo from "public/img/grants-gov-logo.png";
+import Image from "next/image";
+import { USWDSIcon } from "src/components/USWDSIcon";
+import { useTranslations } from "next-intl";
+
 // Recreate @trussworks/react-uswds SocialLink component to accept any Icon
 // https://github.com/trussworks/react-uswds/blob/cf5b4555e25f0e52fc8af66afe29253922bed2a5/src/components/Footer/SocialLinks/SocialLinks.tsx#L33
 type SocialLinkProps = {
@@ -52,8 +51,8 @@ const Footer = () => {
       icon: "local_library",
     },
     {
-      href: ExternalRoutes.GRANTS_NEWSLETTER,
-      name: t("link_newsletter"),
+      href: ExternalRoutes.GRANTS_SUBSCRIBE,
+      name: t("link_subscribe"),
       icon: "mail",
     },
     {

frontend/src/components/Header.tsx

@@ -38,7 +38,7 @@ const Header = ({ logoPath, locale }: Props) => {
       { i18nKey: t("nav_link_home"), href: "/" },
       { i18nKey: t("nav_link_process"), href: "/process" },
       { i18nKey: t("nav_link_research"), href: "/research" },
-      { i18nKey: t("nav_link_newsletter"), href: "/newsletter" },
+      { i18nKey: t("nav_link_subscribe"), href: "/subscribe" },
     ];
     const searchNavLink = {
       i18nKey: t("nav_link_search"),

frontend/src/components/content/IndexGoalContent.tsx

@@ -1,9 +1,9 @@
-import { useTranslations } from "next-intl";
+import { Button, Grid } from "@trussworks/react-uswds";
 
+import ContentLayout from "src/components/ContentLayout";
 import Link from "next/link";
-import { Button, Grid } from "@trussworks/react-uswds";
 import { USWDSIcon } from "../USWDSIcon";
-import ContentLayout from "src/components/ContentLayout";
+import { useTranslations } from "next-intl";
 
 const IndexGoalContent = () => {
   const t = useTranslations("Index");
@@ -16,7 +16,7 @@ const IndexGoalContent = () => {
     >
       <Grid tabletLg={{ col: 6 }}>
         <p className="usa-intro padding-bottom-2">{t("goal.paragraph_1")}</p>
-        <Link href="/newsletter" passHref>
+        <Link href="/subscribe" passHref>
           <Button className="margin-bottom-4" type="button" size="big">
             <span className="margin-right-5">{t("goal.cta")}</span>
             <USWDSIcon

frontend/src/constants/breadcrumbs.ts

@@ -3,28 +3,28 @@ 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 SUBSCRIBE: Breadcrumb = { title: "Subscribe", path: "/subscribe/" };
 const SEARCH: Breadcrumb = { title: "Search", path: "/search/" };
-export const NEWSLETTER_CONFIRMATION: Breadcrumb = {
+export const SUBSCRIBE_CONFIRMATION: Breadcrumb = {
   title: "Confirmation",
-  path: "/newsletter/confirmation/",
+  path: "/subscribe/confirmation/",
 };
-const NEWSLETTER_UNSUBSCRIBE: Breadcrumb = {
+const UNSUBSCRIBE: Breadcrumb = {
   title: "Unsubscribe",
-  path: "/newsletter/unsubscribe/",
+  path: "/unsubscribe/",
 };
 
 export const RESEARCH_CRUMBS: BreadcrumbList = [HOME, RESEARCH];
 export const PROCESS_CRUMBS: BreadcrumbList = [HOME, PROCESS];
-export const NEWSLETTER_CRUMBS: BreadcrumbList = [HOME, NEWSLETTER];
-export const NEWSLETTER_CONFIRMATION_CRUMBS: BreadcrumbList = [
+export const SUBSCRIBE_CRUMBS: BreadcrumbList = [HOME, SUBSCRIBE];
+export const SUBSCRIBE_CONFIRMATION_CRUMBS: BreadcrumbList = [
   HOME,
-  NEWSLETTER,
-  NEWSLETTER_CONFIRMATION,
+  SUBSCRIBE,
+  SUBSCRIBE_CONFIRMATION,
 ];
-export const NEWSLETTER_UNSUBSCRIBE_CRUMBS: BreadcrumbList = [
+export const UNSUBSCRIBE_CRUMBS: BreadcrumbList = [
   HOME,
-  NEWSLETTER,
-  NEWSLETTER_UNSUBSCRIBE,
+  SUBSCRIBE,
+  UNSUBSCRIBE,
 ];
 export const SEARCH_CRUMBS: BreadcrumbList = [HOME, SEARCH];

frontend/src/constants/routes.ts

@@ -13,7 +13,7 @@ export const ExternalRoutes = {
   GITHUB_ADR:
     "https://github.com/HHS/simpler-grants-gov/tree/main/documentation/decisions",
   GRANTS_HOME: "https://www.grants.gov",
-  GRANTS_NEWSLETTER:
+  GRANTS_SUBSCRIBE:
     "https://www.grants.gov/web/grants/connect/newsletter-archive.html",
   GRANTS_RSS: "https://grants.gov/connect/rss-feeds",
   GRANTS_TWITTER: "https://twitter.com/grantsdotgov",