[Issue #1760] Add translation fix

frontend/src/app/not-found.tsx

@@ -4,10 +4,17 @@ import Link from "next/link";
 
 // TODO: next-intl upgrade
 
+const beta_strings = {
+  alert_title:
+    "Attention! Go to <LinkToGrants>www.grants.gov</LinkToGrants> to search and apply for grants.",
+  alert:
+    "Simpler.Grants.gov is a work in progress. Thank you for your patience as we build this new website.",
+};
+
 export default function NotFound() {
   return (
     <>
-      <BetaAlert />
+      <BetaAlert beta_strings={beta_strings} />
       <GridContainer className="padding-y-1 tablet:padding-y-3 desktop-lg:padding-y-15">
         <h1 className="nj-h1">{"page_not_found.title"}</h1>
         <p className="margin-bottom-2">{"page_not_found.message_content_1"}</p>

frontend/src/app/search/page.tsx

@@ -2,9 +2,10 @@ import {
   ServerSideRouteParams,
   ServerSideSearchParams,
 } from "../../types/searchRequestURLTypes";
+import { Metadata } from "next";
 
+import BetaAlert from "../../components/BetaAlert";
 import { FeatureFlagsManager } from "../../services/FeatureFlagManager";
-import PageSEO from "src/components/PageSEO";
 import React from "react";
 import SearchCallToAction from "../../components/search/SearchCallToAction";
 import { SearchForm } from "./SearchForm";
@@ -25,6 +26,16 @@ interface ServerPageProps {
   searchParams: ServerSideSearchParams;
 }
 
+export function generateMetadata() {
+  // TODO: use the following for i18n const t = await getTranslations({ locale: params.locale });
+  const meta: Metadata = {
+    title: "Search Funding Opportunities | Simpler.Grants.gov",
+    description: "Try out our experimental search page.",
+  };
+
+  return meta;
+}
+
 export default async function Search({ searchParams }: ServerPageProps) {
   const ffManager = new FeatureFlagsManager(cookies());
   if (!ffManager.isFeatureEnabled("showSearchV0")) {
@@ -36,13 +47,16 @@ export default async function Search({ searchParams }: ServerPageProps) {
     convertedSearchParams,
   );
 
+  const beta_strings = {
+    alert_title:
+      "Attention! Go to <LinkToGrants>www.grants.gov</LinkToGrants> to search and apply for grants.",
+    alert:
+      "Simpler.Grants.gov is a work in progress. Thank you for your patience as we build this new website.",
+  };
+
   return (
     <>
-      {/* TODO: i18n */}
-      <PageSEO
-        title="Search Funding Opportunities"
-        description="Try out our experimental search page."
-      />
+      <BetaAlert beta_strings={beta_strings} />
       <SearchCallToAction />
       <SearchForm
         initialSearchResults={initialSearchResults}

frontend/src/components/AppLayout.tsx

@@ -9,16 +9,52 @@ type Props = {
 };
 
 const Layout = ({ children }: Props) => {
+  const header_strings = {
+    nav_link_home: "Home",
+    nav_link_process: "Process",
+    nav_link_research: "Research",
+    nav_link_newsletter: "Newsletter",
+    nav_menu_toggle: "Menu",
+    title: "Simpler.Grants.gov",
+  };
+  const footer_strings = {
+    agency_name: "Grants.gov",
+    agency_contact_center: "Grants.gov Program Management Office",
+    telephone: "1-877-696-6775",
+    return_to_top: "Return to top",
+    link_twitter: "Twitter",
+    link_youtube: "YouTube",
+    link_github: "Github",
+    link_rss: "RSS",
+    link_newsletter: "Newsletter",
+    link_blog: "Blog",
+    logo_alt: "Grants.gov logo",
+  };
+  const identifier_strings = {
+    identity:
+      "An official website of the <hhsLink>U.S. Department of Health and Human Services</hhsLink>",
+    gov_content:
+      "Looking for U.S. government information and services? Visit <usaLink>USA.gov</usaLink>",
+    link_about: "About HHS",
+    link_accessibility: "Accessibility support",
+    link_foia: "FOIA requests",
+    link_fear: "EEO/No Fear Act",
+    link_ig: "Office of the Inspector General",
+    link_performance: "Performance reports",
+    link_privacy: "Privacy Policy",
+    logo_alt: "HHS logo",
+  };
+  const skip_to_main = "Skip to main content";
   return (
     // Stick the footer to the bottom of the page
     <div className="display-flex flex-column minh-viewport">
       <a className="usa-skipnav" href="#main-content">
-        {"skip_to_main"}
+        {skip_to_main}
       </a>
-      <Header />
+      <Header header_strings={header_strings} />
       <main id="main-content">{children}</main>
-      <Footer />
-      <GrantsIdentifier />
+      <Footer footer_strings={footer_strings} />
+      <GrantsIdentifier identifier_strings={identifier_strings} />
     </div>
   );
 };

frontend/src/components/BetaAlert.tsx

@@ -1,39 +1,51 @@
 "use client";
 
-import { Trans, useTranslation } from "next-i18next";
+import Link from "next/link";
 
 import { ExternalRoutes } from "src/constants/routes";
 import FullWidthAlert from "./FullWidthAlert";
 
-const BetaAlert = () => {
-  const { t } = useTranslation("common", {
-    keyPrefix: "Beta_alert",
-  });
+// TODO: Remove for i18n update.
+type BetaStrings = {
+  alert_title: string;
+  alert: string;
+};
+
+type Props = {
+  beta_strings: BetaStrings;
+};
+
+const BetaAlert = ({ beta_strings }: Props) => {
+  // TODO: Remove for i18n update.
+  const title_start = beta_strings.alert_title.substring(
+    0,
+    beta_strings.alert_title.indexOf("<LinkToGrants>"),
+  );
+  const title_end = beta_strings.alert_title.substring(
+    beta_strings.alert_title.indexOf("</LinkToGrants>") +
+      "</LinkToGrants>".length,
+  );
+  const link = (
+    <>
+      {title_start}
+      <Link
+        target="_blank"
+        rel="noopener noreferrer"
+        href={ExternalRoutes.GRANTS_HOME}
+      >
+        www.grants.gov
+      </Link>
+      {title_end}
+    </>
+  );
 
   return (
     <div
       data-testid="beta-alert"
       className="desktop:position-sticky top-0 z-200"
     >
-      <FullWidthAlert
-        type="info"
-        heading={
-          <Trans
-            t={t}
-            i18nKey="alert_title"
-            components={{
-              LinkToGrants: (
-                <a
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  href={ExternalRoutes.GRANTS_HOME}
-                />
-              ),
-            }}
-          />
-        }
-      >
-        {t("alert")}
+      <FullWidthAlert type="info" heading={link}>
+        {beta_strings.alert}
       </FullWidthAlert>
     </div>
   );

frontend/src/components/Footer.tsx

@@ -3,7 +3,6 @@
 import { ExternalRoutes } from "src/constants/routes";
 import { assetPath } from "src/utils/assetPath";
 
-import { useTranslation } from "next-i18next";
 import { ComponentType } from "react";
 import {
   Address,
@@ -29,49 +28,58 @@ const SocialLink = ({ href, name, Tag }: SocialLinkProps) => (
   </a>
 );
 
-const Footer = () => {
-  const { t } = useTranslation("common", {
-    keyPrefix: "Footer",
-  });
+type FooterStrings = {
+  agency_name: string;
+  agency_contact_center: string;
+  telephone: string;
+  return_to_top: string;
+  link_twitter: string;
+  link_youtube: string;
+  link_blog: string;
+  link_newsletter: string;
+  link_rss: string;
+  link_github: string;
+  logo_alt: string;
+};
+
+type Props = {
+  footer_strings: FooterStrings;
+};
 
+const Footer = ({ footer_strings }: Props) => {
   const links = [
     {
       href: ExternalRoutes.GRANTS_TWITTER,
-      name: t("link_twitter"),
+      name: footer_strings.link_twitter,
       Tag: Icon.Twitter,
     },
     {
       href: ExternalRoutes.GRANTS_YOUTUBE,
-      name: t("link_youtube"),
+      name: footer_strings.link_youtube,
       Tag: Icon.Youtube,
     },
     {
       href: ExternalRoutes.GRANTS_BLOG,
-      name: t("link_blog"),
+      name: footer_strings.link_blog,
       Tag: Icon.LocalLibrary,
     },
     {
       href: ExternalRoutes.GRANTS_NEWSLETTER,
-      name: t("link_newsletter"),
+      name: footer_strings.link_newsletter,
       Tag: Icon.Mail,
     },
     {
       href: ExternalRoutes.GRANTS_RSS,
-      name: t("link_rss"),
+      name: footer_strings.link_rss,
       Tag: Icon.RssFeed,
     },
     {
       href: ExternalRoutes.GITHUB_REPO,
-      name: t("link_github"),
+      name: footer_strings.link_github,
       Tag: Icon.Github,
     },
   ].map(({ href, name, Tag }) => (
-    <SocialLink
-      href={href}
-      key={name.toLocaleLowerCase()}
-      name={name}
-      Tag={Tag}
-    />
+    <SocialLink href={href} key={name} name={name} Tag={Tag} />
   ));
 
   return (
@@ -80,7 +88,7 @@ const Footer = () => {
       size="medium"
       returnToTop={
         <GridContainer className="usa-footer__return-to-top margin-top-5">
-          <a href="#">{t("return_to_top")}</a>
+          <a href="#">{footer_strings.return_to_top}</a>
         </GridContainer>
       }
       primary={null}
@@ -89,7 +97,7 @@ const Footer = () => {
           <Grid tablet={{ col: 4 }} desktop={{ col: 6 }}>
             <img
               className="maxh-15 margin-bottom-2 tablet:margin-bottom-0"
-              alt={t("logo_alt")}
+              alt={footer_strings.logo_alt}
               src={assetPath("/img/grants-gov-logo.png")}
             />
           </Grid>
@@ -100,13 +108,13 @@ const Footer = () => {
           >
             <SocialLinks links={links} />
             <h2 className="usa-footer__contact-heading">
-              {t("agency_contact_center")}
+              {footer_strings.agency_contact_center}
             </h2>
             <Address
               size="medium"
               items={[
-                <a key="telephone" href={`tel:${t("telephone")}`}>
-                  {t("telephone")}
+                <a key="telephone" href={`tel:${footer_strings.telephone}`}>
+                  {footer_strings.telephone}
                 </a>,
                 <a key="email" href={`mailto:${ExternalRoutes.EMAIL_SUPPORT}`}>
                   {ExternalRoutes.EMAIL_SUPPORT}

frontend/src/components/GrantsIdentifier.tsx

@@ -18,14 +18,29 @@ import {
 
 import logo from "../../public/img/logo-white-lg.webp";
 
-const GrantsIdentifier = () => {
+type IdentifierStrings = {
+  link_about: string;
+  link_accessibility: string;
+  link_foia: string;
+  link_fear: string;
+  link_ig: string;
+  link_performance: string;
+  link_privacy: string;
+  logo_alt: string;
+};
+
+type Props = {
+  identifier_strings: IdentifierStrings;
+};
+
+const GrantsIdentifier = ({ identifier_strings }: Props) => {
   const { t } = useTranslation("common", {
     keyPrefix: "Identifier",
   });
 
   const logoImage = (
     <Image
-      alt={t("logo_alt")}
+      alt={identifier_strings.logo_alt}
       src={logo}
       className="usa-identifier__logo-img"
     />
@@ -34,31 +49,31 @@ const GrantsIdentifier = () => {
   const IdentifierLinkList = [
     {
       href: ExternalRoutes.ABOUT_HHS,
-      text: t("link_about"),
+      text: identifier_strings.link_about,
     },
     {
       href: ExternalRoutes.ACCESSIBILITY_COMPLIANCE,
-      text: t("link_accessibility"),
+      text: identifier_strings.link_accessibility,
     },
     {
       href: ExternalRoutes.FOIA,
-      text: t("link_foia"),
+      text: identifier_strings.link_foia,
     },
     {
       href: ExternalRoutes.NO_FEAR,
-      text: t("link_fear"),
+      text: identifier_strings.link_fear,
     },
     {
       href: ExternalRoutes.INSPECTOR_GENERAL,
-      text: t("link_ig"),
+      text: identifier_strings.link_ig,
     },
     {
       href: ExternalRoutes.PERFORMANCE_REPORTS,
-      text: t("link_performance"),
+      text: identifier_strings.link_performance,
     },
     {
       href: ExternalRoutes.PRIVACY_POLICY,
-      text: t("link_privacy"),
+      text: identifier_strings.link_privacy,
     },
   ].map(({ text, href }) => (
     <IdentifierLinkItem key={text}>