Add process page

frontend/src/app/process/page.tsx

@@ -0,0 +1,38 @@
+import { PROCESS_CRUMBS } from "src/constants/breadcrumbs";
+
+import BetaAlert from "src/components/AppBetaAlert";
+
+import Breadcrumbs from "src/components/Breadcrumbs";
+import PageSEO from "src/components/PageSEO";
+import { Metadata } from "next";
+import ProcessContent from "src/pages/content/ProcessIntro";
+import ProcessInvolved from "src/pages/content/ProcessInvolved";
+import ProcessMilestones from "src/pages/content/ProcessMilestones";
+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("Process.page_title"),
+  };
+
+  return meta;
+}
+
+export default function Process() {
+  const t  = useTranslations("Process");
+
+  return (
+    <>
+      <PageSEO
+        title={t("page_title")}
+        description={t("meta_description")}
+      />
+      <BetaAlert />
+      <Breadcrumbs breadcrumbList={PROCESS_CRUMBS} />
+      <ProcessContent />
+
+    </>
+  );
+}

frontend/src/pages/content/ProcessIntro.tsx

@@ -1,17 +1,14 @@
-import { Trans, useTranslation } from "next-i18next";
 import { Grid } from "@trussworks/react-uswds";
+import { useTranslations, useMessages } from "next-intl";
 
 import ContentLayout from "src/components/ContentLayout";
 
-type IntroBoxes = {
-  title: string;
-  content: string;
-};
-
 const ProcessIntro = () => {
-  const { t } = useTranslation("common", { keyPrefix: "Process" });
+  const t = useTranslations("Process");
 
-  const boxes: IntroBoxes[] = t("intro.boxes", { returnObjects: true });
+  const messages = useMessages();
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+  const keys = Object.keys(messages.Process.intro.boxes);
 
   return (
     <ContentLayout
@@ -28,28 +25,26 @@ const ProcessIntro = () => {
       </Grid>
 
       <Grid row gap="lg" className="margin-top-2">
-        {!Array.isArray(boxes)
-          ? ""
-          : boxes.map((box) => {
-              return (
-                <Grid
-                  className="margin-bottom-6"
-                  key={box.title + "-key"}
-                  tabletLg={{ col: 4 }}
-                >
-                  <div className="border radius-md border-base-lighter padding-x-205">
-                    <h3 className="tablet-lg:font-serif-lg">{box.title}</h3>
-                    <p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
-                      <Trans
-                        t={t}
-                        i18nKey={box.content}
-                        components={{ italics: <em /> }}
-                      />
-                    </p>
-                  </div>
-                </Grid>
-              );
-            })}
+        {keys.map((key) => {
+          const title = t(`intro.boxes.${key}.title`);
+          const content = t.rich(`intro.boxes.${key}.content`, {
+            italics: (chunks) => <em>{chunks}</em>
+          })
+          return (
+            <Grid
+              className="margin-bottom-6"
+              key={title + "-key"}
+              tabletLg={{ col: 4 }}
+            >
+              <div className="border radius-md border-base-lighter padding-x-205">
+                <h3 className="tablet-lg:font-serif-lg">{title}</h3>
+                <p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
+                  {content}
+                </p>
+              </div>
+            </Grid>
+          );
+          })}
       </Grid>
     </ContentLayout>
   );