[Issue 711] Process and Research Routes (#774)

* process, research, and 404 pages

frontend/public/locales/en/common.json

@@ -29,6 +29,25 @@
     "wtgi_list": "<ul><li>Follow <repo>the code repository</repo></li><li>Read the <goals>project goals</goals></li><li>View the <roadmap>roadmap</roadmap></li><li>Learn about <contribute>how you can contribute</contribute></li></ul>",
     "wtgi_paragraph_2": "<strong>Questions?</strong> Contact us at <email>{{email}}</email>."
   },
+  "Research": {
+    "page_title": "Research | Simpler Grants.gov",
+    "meta_description": "A one‑stop shop for all federal discretionary funding to make it easy for you to discover, understand, and apply for opportunities.",
+    "alert_title": "Simpler Grants.gov is a work in progress.",
+    "alert": "To search for funding opportunities and apply, go to <LinkToGrants>www.grants.gov</LinkToGrants>."
+  },
+  "Process": {
+    "page_title": "Process | Simpler Grants.gov",
+    "meta_description": "A one‑stop shop for all federal discretionary funding to make it easy for you to discover, understand, and apply for opportunities.",
+    "alert_title": "Simpler Grants.gov is a work in progress.",
+    "alert": "To search for funding opportunities and apply, go to <LinkToGrants>www.grants.gov</LinkToGrants>."
+  },
+  "ErrorPages": {
+    "page_not_found": {
+      "title": "Ooops! Page Not Found",
+      "message_content_1": "The page you have requested cannot be displayed because it does not exist, has been moved, or the server has been instrcuted not to let you view it. There is nothing to see here.",
+      "visit_homepage_button": "Return Home"
+    }
+  },
   "Header": {
     "nav_link_home": "Home",
     "nav_link_health": "Health",

frontend/src/pages/404.tsx

@@ -0,0 +1,28 @@
+import type { GetStaticProps, NextPage } from "next";
+
+import { useTranslation } from "next-i18next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import Link from "next/link";
+import { GridContainer } from "@trussworks/react-uswds";
+
+const PageNotFound: NextPage = () => {
+  const { t } = useTranslation("common", { keyPrefix: "ErrorPages" });
+
+  return (
+    <GridContainer className="padding-y-1 tablet:padding-y-3 desktop-lg:padding-y-6 border-bottom-2px border-base-lightest">
+      <h1 className="nj-h1">{t("page_not_found.title")}</h1>
+      <p className="margin-bottom-2">{t("page_not_found.message_content_1")}</p>
+      <Link className="usa-button" href="/" key="returnToHome">
+        {t("page_not_found.visit_homepage_button")}
+      </Link>
+    </GridContainer>
+  );
+};
+
+// 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 PageNotFound;

frontend/src/pages/process.tsx

@@ -0,0 +1,42 @@
+import type { GetStaticProps, NextPage } from "next";
+import { ExternalRoutes } from "src/constants/routes";
+
+import { Trans, useTranslation } from "next-i18next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+
+import PageSEO from "src/components/PageSEO";
+import FullWidthAlert from "../components/FullWidthAlert";
+
+const Process: NextPage = () => {
+  const { t } = useTranslation("common", { keyPrefix: "Process" });
+
+  return (
+    <>
+      <PageSEO title={t("page_title")} description={t("meta_description")} />
+      <FullWidthAlert type="info" heading={t("alert_title")}>
+        <Trans
+          t={t}
+          i18nKey="alert"
+          components={{
+            LinkToGrants: (
+              <a
+                target="_blank"
+                rel="noopener noreferrer"
+                href={ExternalRoutes.GRANTS_HOME}
+              />
+            ),
+          }}
+        />
+      </FullWidthAlert>
+      Process Placeholder
+    </>
+  );
+};
+
+// 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;

frontend/src/pages/research.tsx

@@ -0,0 +1,42 @@
+import type { GetStaticProps, NextPage } from "next";
+import { ExternalRoutes } from "src/constants/routes";
+
+import { Trans, useTranslation } from "next-i18next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+
+import PageSEO from "src/components/PageSEO";
+import FullWidthAlert from "../components/FullWidthAlert";
+
+const Research: NextPage = () => {
+  const { t } = useTranslation("common", { keyPrefix: "Research" });
+
+  return (
+    <>
+      <PageSEO title={t("page_title")} description={t("meta_description")} />
+      <FullWidthAlert type="info" heading={t("alert_title")}>
+        <Trans
+          t={t}
+          i18nKey="alert"
+          components={{
+            LinkToGrants: (
+              <a
+                target="_blank"
+                rel="noopener noreferrer"
+                href={ExternalRoutes.GRANTS_HOME}
+              />
+            ),
+          }}
+        />
+      </FullWidthAlert>
+      Research Placeholder
+    </>
+  );
+};
+
+// 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 Research;

frontend/stories/pages/404.stories.tsx

@@ -0,0 +1,10 @@
+import { Meta } from "@storybook/react";
+import PageNotFound from "src/pages/404";
+
+const meta: Meta<typeof PageNotFound> = {
+  title: "Pages/404",
+  component: PageNotFound,
+};
+export default meta;
+
+export const Preview = {};

frontend/stories/pages/process.stories.tsx

@@ -0,0 +1,10 @@
+import { Meta } from "@storybook/react";
+import Process from "src/pages/process";
+
+const meta: Meta<typeof Process> = {
+  title: "Pages/Process",
+  component: Process,
+};
+export default meta;
+
+export const Preview = {};

frontend/stories/pages/research.stories.tsx

@@ -0,0 +1,10 @@
+import { Meta } from "@storybook/react";
+import Research from "src/pages/research";
+
+const meta: Meta<typeof Research> = {
+  title: "Pages/Research",
+  component: Research,
+};
+export default meta;
+
+export const Preview = {};

frontend/tests/pages/404.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { axe } from "jest-axe";
+import PageNotFound from "src/pages/404";
+
+describe("PageNotFound", () => {
+  it("does not render alert with grants.gov link", () => {
+    render(<PageNotFound />);
+
+    const alert = screen.queryByTestId("alert");
+
+    expect(alert).not.toBeInTheDocument();
+  });
+
+  it("links back to the home page", () => {
+    render(<PageNotFound />);
+    const link = screen.getByRole("link", { name: /Return Home/i });
+
+    expect(link).toBeInTheDocument();
+  });
+
+  it("passes accessibility scan", async () => {
+    const { container } = render(<PageNotFound />);
+    const results = await waitFor(() => axe(container));
+
+    expect(results).toHaveNoViolations();
+  });
+});

frontend/tests/pages/process.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { axe } from "jest-axe";
+import Process from "src/pages/process";
+
+describe("Index", () => {
+  it("renders alert with grants.gov link", () => {
+    render(<Process />);
+
+    const alert = screen.getByTestId("alert");
+    const link = screen.getByRole("link", { name: /grants\.gov/i });
+
+    expect(alert).toBeInTheDocument();
+    expect(link).toHaveAttribute("href", "https://www.grants.gov");
+  });
+
+  it("passes accessibility scan", async () => {
+    const { container } = render(<Process />);
+    const results = await waitFor(() => axe(container));
+
+    expect(results).toHaveNoViolations();
+  });
+});

frontend/tests/pages/research.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { axe } from "jest-axe";
+import Research from "src/pages/research";
+
+describe("Index", () => {
+  it("renders alert with grants.gov link", () => {
+    render(<Research />);
+
+    const alert = screen.getByTestId("alert");
+    const link = screen.getByRole("link", { name: /grants\.gov/i });
+
+    expect(alert).toBeInTheDocument();
+    expect(link).toHaveAttribute("href", "https://www.grants.gov");
+  });
+
+  it("passes accessibility scan", async () => {
+    const { container } = render(<Research />);
+    const results = await waitFor(() => axe(container));
+
+    expect(results).toHaveNoViolations();
+  });
+});