Translate search button on NotFound page

Author: jordanarldt

.changeset/sour-ducks-hug.md

@@ -0,0 +1,11 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Add translations for 'Search' button on 404 page
+
+## Migration
+
+1. Add `"search"` translation key in the `"NotFound"` translations
+2. In `core/vibes/soul/sections/not-found/index.tsx`, add a `ctaLabel` property and ensure it is used in place of the "Search" text
+3. In `core/app/[locale]/not-found.tsx`, pass the `ctaLabel` prop as the new translation key `ctaLabel={t('search')}`

core/app/[locale]/not-found.tsx

@@ -13,6 +13,7 @@ export default async function NotFound() {
 
       <NotFoundSection
         className="flex-1 place-content-center"
+        ctaLabel={t('search')}
         subtitle={t('subtitle')}
         title={t('title')}
       />

core/messages/en.json

@@ -423,7 +423,8 @@
   "NotFound": {
     "title": "We couldn't find that page!",
     "subtitle": "Try searching for something else or go back to the home page.",
-    "featuredProducts": "Featured products"
+    "featuredProducts": "Featured products",
+    "search": "Search"
   },
   "Components": {
     "Header": {

core/vibes/soul/sections/not-found/index.tsx

@@ -7,6 +7,7 @@ import { useSearch } from '~/context/search-context';
 export interface NotFoundProps {
   title?: string;
   subtitle?: string;
+  ctaLabel?: string;
   className?: string;
 }
 
@@ -27,6 +28,7 @@ export interface NotFoundProps {
 export function NotFound({
   title = 'Not found',
   subtitle = "Take a look around if you're lost.",
+  ctaLabel = 'Search',
   className = '',
 }: NotFoundProps) {
   const { setIsSearchOpen } = useSearch();
@@ -44,7 +46,7 @@ export function NotFound({
         <p className="mb-4 text-lg text-[var(--not-found-subtitle,hsl(var(--contrast-500)))]">
           {subtitle}
         </p>
-        <Button onClick={handleOpenSearch}>Search</Button>
+        <Button onClick={handleOpenSearch}>{ctaLabel}</Button>
       </header>
     </SectionLayout>
   );