From 94baa78add2a8f9f06b482044b170b17ff83dc3f Mon Sep 17 00:00:00 2001
From: Aaron Couch <acinternets@gmail.com>
Date: Wed, 15 May 2024 09:13:31 -0400
Subject: [PATCH] Add process page

---
 frontend/src/app/process/page.tsx           | 38 ++++++++++++++
 frontend/src/pages/content/ProcessIntro.tsx | 55 ++++++++++-----------
 frontend/src/pages/process.tsx              | 45 -----------------
 3 files changed, 63 insertions(+), 75 deletions(-)
 create mode 100644 frontend/src/app/process/page.tsx
 delete mode 100644 frontend/src/pages/process.tsx

diff --git a/frontend/src/app/process/page.tsx b/frontend/src/app/process/page.tsx
new file mode 100644
index 0000000000..716a46341b
--- /dev/null
+++ b/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 />
+
+    </>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/content/ProcessIntro.tsx b/frontend/src/pages/content/ProcessIntro.tsx
index af14025e82..83491611c2 100644
--- a/frontend/src/pages/content/ProcessIntro.tsx
+++ b/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>
   );
diff --git a/frontend/src/pages/process.tsx b/frontend/src/pages/process.tsx
deleted file mode 100644
index 6ebe98a6ee..0000000000
--- a/frontend/src/pages/process.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import type { GetStaticProps, NextPage } from "next";
-import { PROCESS_CRUMBS } from "src/constants/breadcrumbs";
-
-import { useTranslation } from "next-i18next";
-import { serverSideTranslations } from "next-i18next/serverSideTranslations";
-
-import Breadcrumbs from "src/components/Breadcrumbs";
-import PageSEO from "src/components/PageSEO";
-import BetaAlert from "../components/BetaAlert";
-import ProcessContent from "./content/ProcessIntro";
-import ProcessInvolved from "./content/ProcessInvolved";
-import ProcessMilestones from "./content/ProcessMilestones";
-
-const Process: NextPage = () => {
-  const { t } = useTranslation("common");
-  // TODO: Remove during move to app router and next-intl upgrade
-  const beta_strings = {
-    alert_title: t("Beta_alert.alert_title"),
-    alert: t("Beta_alert.alert"),
-  };
-
-  return (
-    <>
-      <PageSEO
-        title={t("Process.page_title")}
-        description={t("Process.meta_description")}
-      />
-      <BetaAlert beta_strings={beta_strings} />
-      <Breadcrumbs breadcrumbList={PROCESS_CRUMBS} />
-      <ProcessContent />
-      <div className="padding-top-4 bg-gray-5">
-        <ProcessMilestones />
-      </div>
-      <ProcessInvolved />
-    </>
-  );
-};
-
-// Change this to GetServerSideProps if you're using server-side rendering
-export const getStaticProps: GetStaticProps = async ({ locale }) => {
-  const translations = await serverSideTranslations(locale ?? "en");
-  return { props: { ...translations } };
-};
-
-export default Process;