[Issue #2042] Fix search page string translation (navapbc#169)

Fixes #2042

Updated most search strings on Search page to use correct next-intl
translation components
Added strings to Messages file

Updated the unit tests as well because they were not inheriting context
due to improper import path from non-global context source

<img width="1583" alt="Screenshot 2024-08-07 at 1 36 18 PM"
src="https://github.com/user-attachments/assets/1b613d26-cbd0-4d0e-b831-0380c6f72af6">

frontend/src/app/[locale]/search/page.tsx

@@ -49,7 +49,7 @@ interface searchParamsTypes {
 
 function Search({ searchParams }: { searchParams: searchParamsTypes }) {
   unstable_setRequestLocale("en");
-  const t = useTranslations("Process");
+  const t = useTranslations("Search");
   const convertedSearchParams = convertSearchParamsToProperTypes(searchParams);
   const {
     agency,
@@ -71,7 +71,7 @@ function Search({ searchParams }: { searchParams: searchParamsTypes }) {
 
   return (
     <>
-      <PageSEO title={t("page_title")} description={t("meta_description")} />
+      <PageSEO title={t("title")} description={t("meta_description")} />
       <BetaAlert />
       <Breadcrumbs breadcrumbList={SEARCH_CRUMBS} />
       <SearchCallToAction />
@@ -85,25 +85,25 @@ function Search({ searchParams }: { searchParams: searchParamsTypes }) {
               <SearchOpportunityStatus query={status} />
               <SearchFilterAccordion
                 filterOptions={fundingOptions}
-                title="Funding instrument"
+                title={t("accordion.titles.funding")}
                 queryParamKey="fundingInstrument"
                 query={fundingInstrument}
               />
               <SearchFilterAccordion
                 filterOptions={eligibilityOptions}
-                title="Eligibility"
+                title={t("accordion.titles.eligibility")}
                 queryParamKey="eligibility"
                 query={eligibility}
               />
               <SearchFilterAccordion
                 filterOptions={agencyOptions}
-                title="Agency"
+                title={t("accordion.titles.agency")}
                 queryParamKey="agency"
                 query={agency}
               />
               <SearchFilterAccordion
                 filterOptions={categoryOptions}
-                title="Category"
+                title={t("accordion.titles.category")}
                 queryParamKey="category"
                 query={category}
               />

frontend/src/components/search/SearchBar.tsx

@@ -3,6 +3,7 @@ import { Icon } from "@trussworks/react-uswds";
 import { QueryContext } from "src/app/[locale]/search/QueryProvider";
 import { useContext } from "react";
 import { useSearchParamUpdater } from "src/hooks/useSearchParamUpdater";
+import { useTranslations } from "next-intl";
 
 interface SearchBarProps {
   query: string | null | undefined;
@@ -16,16 +17,20 @@ export default function SearchBar({ query }: SearchBarProps) {
     updateQueryParams("", "query", queryTerm, false);
   };
 
+  const t = useTranslations("Search");
+
   return (
     <div className="margin-top-5 margin-bottom-2">
       <label
         htmlFor="query"
         className="font-sans-lg display-block margin-bottom-2"
       >
-        <span className="text-bold">Search terms </span>
-        <small className="display-inline-block">
-          Enter keywords, opportunity numbers, or assistance listing numbers
-        </small>
+        {t.rich("bar.label", {
+          strong: (chunks) => <span className="text-bold">{chunks}</span>,
+          small: (chunks) => (
+            <small className="display-inline-block">{chunks}</small>
+          ),
+        })}
       </label>
       <div className="usa-search usa-search--big" role="search">
         <input
@@ -40,7 +45,7 @@ export default function SearchBar({ query }: SearchBarProps) {
           }}
         />
         <button className="usa-button" type="submit" onClick={handleSubmit}>
-          <span className="usa-search__submit-text">Search </span>
+          <span className="usa-search__submit-text">{t("bar.button")} </span>
           <Icon.Search
             className="usa-search__submit-icon"
             size={4}

frontend/src/components/search/SearchCallToAction.tsx

@@ -1,18 +1,21 @@
 import { GridContainer } from "@trussworks/react-uswds";
 import React from "react";
+import { useTranslations } from "next-intl";
 
 const SearchCallToAction: React.FC = () => {
+  const t = useTranslations("Search");
+
   return (
     <>
       {/* <BetaAlert /> */}
       <GridContainer>
         <h1 className="margin-0 tablet-lg:font-sans-xl desktop-lg:font-sans-2xl">
-          Search funding opportunities
+          {t("callToAction.title")}
         </h1>
         <p className="font-serif-md tablet-lg:font-serif-lg usa-intro margin-top-2">
-          We’re incrementally improving this experimental search page. How can
-          we make it easier to discover grants that are right for you? Let us
-          know at <a href="mailto:[email protected]">[email protected]</a>.
+          {t.rich("callToAction.description", {
+            mail: (chunks) => <a href="mailto:simpler@grants.gov">{chunks}</a>,
+          })}
         </p>
       </GridContainer>
     </>

frontend/src/components/search/SearchFilterAccordion/SearchFilterToggleAll.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 interface SearchFilterToggleAllProps {
   isAllSelected: boolean;
@@ -13,6 +14,8 @@ const SearchFilterToggleAll: React.FC<SearchFilterToggleAllProps> = ({
   isAllSelected,
   isNoneSelected,
 }) => {
+  const t = useTranslations("Search");
+
   return (
     <div className="grid-row">
       <div className="grid-col-fill">
@@ -24,7 +27,7 @@ const SearchFilterToggleAll: React.FC<SearchFilterToggleAllProps> = ({
           }}
           disabled={isAllSelected}
         >
-          Select All
+          {t("filterToggleAll.select")}
         </button>
       </div>
       <div className="grid-col-fill text-right">
@@ -36,7 +39,7 @@ const SearchFilterToggleAll: React.FC<SearchFilterToggleAllProps> = ({
           }}
           disabled={isNoneSelected}
         >
-          Clear All
+          {t("filterToggleAll.clear")}
         </button>
       </div>
     </div>

frontend/src/components/search/SearchOpportunityStatus.tsx

@@ -3,6 +3,7 @@ import { Checkbox } from "@trussworks/react-uswds";
 import { QueryContext } from "src/app/[locale]/search/QueryProvider";
 import { useContext } from "react";
 import { useSearchParamUpdater } from "src/hooks/useSearchParamUpdater";
+import { useTranslations } from "next-intl";
 
 interface StatusOption {
   id: string;
@@ -14,13 +15,6 @@ interface SearchOpportunityStatusProps {
   query: Set<string>;
 }
 
-const statusOptions: StatusOption[] = [
-  { id: "status-forecasted", label: "Forecasted", value: "forecasted" },
-  { id: "status-posted", label: "Posted", value: "posted" },
-  { id: "status-closed", label: "Closed", value: "closed" },
-  { id: "status-archived", label: "Archived", value: "archived" },
-];
-
 export default function SearchOpportunityStatus({
   query,
 }: SearchOpportunityStatusProps) {
@@ -33,9 +27,36 @@ export default function SearchOpportunityStatus({
     updateQueryParams(updated, "status", queryTerm);
   };
 
+  const t = useTranslations("Search");
+
+  const statusOptions: StatusOption[] = [
+    {
+      id: "status-forecasted",
+      label: t("opportunityStatus.label.forecasted"),
+      value: "forecasted",
+    },
+    {
+      id: "status-posted",
+      label: t("opportunityStatus.label.posted"),
+      value: "posted",
+    },
+    {
+      id: "status-closed",
+      label: t("opportunityStatus.label.closed"),
+      value: "closed",
+    },
+    {
+      id: "status-archived",
+      label: t("opportunityStatus.label.archived"),
+      value: "archived",
+    },
+  ];
+
   return (
     <>
-      <h2 className="margin-bottom-1 font-sans-xs">Opportunity status</h2>
+      <h2 className="margin-bottom-1 font-sans-xs">
+        {t("opportunityStatus.title")}
+      </h2>
       <div className="grid-row flex-wrap">
         {statusOptions.map((option) => {
           return (

frontend/src/components/search/SearchResultsHeader.tsx

@@ -2,6 +2,7 @@
 import SearchSortyBy from "./SearchSortBy";
 import { QueryContext } from "src/app/[locale]/search/QueryProvider";
 import { useContext } from "react";
+import { useTranslations } from "next-intl";
 
 export default function SearchResultsHeader({
   sortby,
@@ -23,10 +24,13 @@ export default function SearchResultsHeader({
     "tablet-lg:margin-bottom-0",
   ];
   if (loading) gridRowClasses.push("opacity-50");
+
+  const t = useTranslations("Search");
+
   return (
     <div className="grid-row">
       <h2 className={gridRowClasses.join(" ")}>
-        {total && <>{total} Opportunities</>}
+        {t("resultsHeader.message", { count: total })}
       </h2>
       <div className="tablet-lg:grid-col-auto">
         <SearchSortyBy

frontend/src/components/search/SearchResultsListFetch.tsx

@@ -2,6 +2,7 @@ import SearchErrorAlert from "src/components/search/error/SearchErrorAlert";
 import SearchResultsListItem from "src/components/search/SearchResultsListItem";
 import { getSearchFetcher } from "src/services/search/searchfetcher/SearchFetcherUtil";
 import { QueryParamData } from "src/services/search/searchfetcher/SearchFetcher";
+import { getTranslations } from "next-intl/server";
 
 interface ServerPageProps {
   searchParams: QueryParamData;
@@ -13,6 +14,7 @@ export default async function SearchResultsListFetch({
   const searchFetcher = getSearchFetcher();
   const searchResults = await searchFetcher.fetchOpportunities(searchParams);
   const maxPaginationError = null;
+  const t = await getTranslations("Search");
 
   if (searchResults.status_code !== 200) {
     return <SearchErrorAlert />;
@@ -21,12 +23,11 @@ export default async function SearchResultsListFetch({
   if (searchResults.data.length === 0) {
     return (
       <div>
-        <h2>Your search did not return any results.</h2>
+        <h2>{t("resultsListFetch.title")}</h2>
         <ul>
-          <li>{"Check any terms you've entered for typos"}</li>
-          <li>Try different keywords</li>
-          <li>{"Make sure you've selected the right statuses"}</li>
-          <li>Try resetting filters or selecting fewer options</li>
+          {t.rich("resultsListFetch.body", {
+            li: (chunks) => <li>{chunks}</li>,
+          })}
         </ul>
       </div>
     );
@@ -35,13 +36,7 @@ export default async function SearchResultsListFetch({
   return (
     <ul className="usa-list--unstyled">
       {/* TODO #1485: show proper USWDS error  */}
-      {maxPaginationError && (
-        <h4>
-          {
-            "You''re trying to access opportunity results that are beyond the last page of data."
-          }
-        </h4>
-      )}
+      {maxPaginationError && <h4>{t("resultsListFetch.paginationError")}</h4>}
       {searchResults.data.map((opportunity) => (
         <li key={opportunity?.opportunity_id}>
           <SearchResultsListItem opportunity={opportunity} />

frontend/src/components/search/SearchResultsListItem.tsx

@@ -2,6 +2,7 @@
 import { AgencyNamyLookup } from "src/utils/search/generateAgencyNameLookup";
 import { formatDate } from "src/utils/dateUtil";
 import { Opportunity } from "src/types/search/searchResponseTypes";
+import { useTranslations } from "next-intl";
 
 interface SearchResultsListItemProps {
   opportunity: Opportunity;
@@ -19,6 +20,8 @@ export default function SearchResultsListItem({
       ? "https://grants.gov"
       : "https://test.grants.gov";
 
+  const t = useTranslations("Search");
+
   const metadataBorderClasses = `
     display-block
     tablet:display-inline-block
@@ -56,7 +59,7 @@ export default function SearchResultsListItem({
             <div className="grid-col tablet:order-1 overflow-hidden font-body-xs">
               {opportunity.opportunity_status === "archived" && (
                 <span className={metadataBorderClasses}>
-                  <strong>Archived:</strong>{" "}
+                  <strong>{t("resultsListItem.status.archived")}</strong>
                   {opportunity?.summary?.archive_date
                     ? formatDate(opportunity?.summary?.archive_date)
                     : "--"}
@@ -66,7 +69,7 @@ export default function SearchResultsListItem({
                 opportunity?.opportunity_status === "closed") &&
                 opportunity?.summary?.close_date && (
                   <span className={metadataBorderClasses}>
-                    <strong>Closed:</strong>{" "}
+                    <strong>{t("resultsListItem.status.closed")}</strong>
                     {opportunity?.summary?.close_date
                       ? formatDate(opportunity?.summary?.close_date)
                       : "--"}
@@ -75,7 +78,7 @@ export default function SearchResultsListItem({
               {opportunity?.opportunity_status === "posted" && (
                 <span className={metadataBorderClasses}>
                   <span className="usa-tag bg-accent-warm-dark">
-                    <strong>Closing:</strong>{" "}
+                    <strong>{t("resultsListItem.status.posted")}</strong>
                     <span className="text-no-uppercase">
                       {opportunity?.summary?.close_date
                         ? formatDate(opportunity?.summary?.close_date)
@@ -87,20 +90,20 @@ export default function SearchResultsListItem({
               {opportunity?.opportunity_status === "forecasted" && (
                 <span className={metadataBorderClasses}>
                   <span className="usa-tag">
-                    <strong>Forecasted</strong>
+                    <strong>{t("resultsListItem.status.forecasted")}</strong>
                   </span>
                 </span>
               )}
               <span className={metadataBorderClasses}>
-                <strong>Posted:</strong>{" "}
+                <strong>{t("resultsListItem.summary.posted")}</strong>
                 {opportunity?.summary?.post_date
                   ? formatDate(opportunity?.summary?.post_date)
                   : "--"}
               </span>
             </div>
             <div className="grid-col tablet:order-3 overflow-hidden font-body-xs">
               <span className={metadataBorderClasses}>
-                <strong>Agency:</strong>{" "}
+                <strong>{t("resultsListItem.summary.agency")}</strong>
                 {opportunity?.summary?.agency_name &&
                 opportunity?.summary?.agency_code &&
                 agencyNameLookup
@@ -109,7 +112,7 @@ export default function SearchResultsListItem({
                   : "--"}
               </span>
               <span className={metadataBorderClasses}>
-                <strong>Opportunity Number:</strong>{" "}
+                <strong>{t("resultsListItem.opportunity_number")}</strong>
                 {opportunity?.opportunity_number}
               </span>
             </div>
@@ -121,15 +124,15 @@ export default function SearchResultsListItem({
             <span
               className={`${metadataBorderClasses} desktop:display-block text-right desktop:margin-right-0 desktop:padding-right-0`}
             >
-              <strong>Award Ceiling:</strong>{" "}
+              <strong>{t("resultsListItem.award_ceiling")}</strong>
               <span className="desktop:display-block desktop:font-sans-lg text-ls-neg-3 text-right">
                 ${opportunity?.summary?.award_ceiling?.toLocaleString() || "--"}
               </span>
             </span>
             <span
               className={`${metadataBorderClasses} desktop:display-block text-right desktop:margin-right-0 desktop:padding-right-0`}
             >
-              <strong>Floor:</strong> $
+              <strong>{t("resultsListItem.floor")}</strong>
               {opportunity?.summary?.award_floor?.toLocaleString() || "--"}
             </span>
           </div>