refactor(core): localization

.changeset/forty-waves-add.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Normalizes translations across all pages, updates the next-intl configuration, and simplifies translation handling in the project.

core/app/[locale]/(default)/(faceted)/brand/[slug]/page.tsx

@@ -1,7 +1,6 @@
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
-import { NextIntlClientProvider } from 'next-intl';
-import { getMessages, getTranslations, unstable_setRequestLocale } from 'next-intl/server';
+import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 
 import { ProductCard } from '~/components/product-card';
 import { Pagination } from '~/components/ui/pagination';
@@ -43,8 +42,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 export default async function Brand({ params: { slug, locale }, searchParams }: Props) {
   unstable_setRequestLocale(locale);
 
-  const t = await getTranslations({ locale, namespace: 'Brand' });
-  const messages = await getMessages({ locale });
+  const t = await getTranslations('Brand');
 
   const brandId = Number(slug);
 
@@ -63,70 +61,61 @@ export default async function Brand({ params: { slug, locale }, searchParams }:
 
   return (
     <div className="group">
-      <NextIntlClientProvider
-        locale={locale}
-        messages={{
-          FacetedGroup: messages.FacetedGroup ?? {},
-          Product: messages.Product ?? {},
-          AddToCart: messages.AddToCart ?? {},
-        }}
-      >
-        <div className="md:mb-8 lg:flex lg:flex-row lg:items-center lg:justify-between">
-          <h1 className="mb-4 text-4xl font-black lg:mb-0 lg:text-5xl">{brand.name}</h1>
-
-          <div className="flex flex-col items-center gap-3 whitespace-nowrap md:flex-row">
-            <MobileSideNav>
-              <FacetedSearch
-                facets={search.facets.items}
-                headingId="mobile-filter-heading"
-                pageType="brand"
-              />
-            </MobileSideNav>
-            <div className="flex w-full flex-col items-start gap-4 md:flex-row md:items-center md:justify-end md:gap-6">
-              <SortBy />
-              <div className="order-3 py-4 text-base font-semibold md:order-2 md:py-0">
-                {t('sortBy', { items: productsCollection.collectionInfo?.totalItems ?? 0 })}
-              </div>
+      <div className="md:mb-8 lg:flex lg:flex-row lg:items-center lg:justify-between">
+        <h1 className="mb-4 text-4xl font-black lg:mb-0 lg:text-5xl">{brand.name}</h1>
+
+        <div className="flex flex-col items-center gap-3 whitespace-nowrap md:flex-row">
+          <MobileSideNav>
+            <FacetedSearch
+              facets={search.facets.items}
+              headingId="mobile-filter-heading"
+              pageType="brand"
+            />
+          </MobileSideNav>
+          <div className="flex w-full flex-col items-start gap-4 md:flex-row md:items-center md:justify-end md:gap-6">
+            <SortBy />
+            <div className="order-3 py-4 text-base font-semibold md:order-2 md:py-0">
+              {t('sortBy', { items: productsCollection.collectionInfo?.totalItems ?? 0 })}
             </div>
           </div>
         </div>
+      </div>
+
+      <div className="grid grid-cols-4 gap-8">
+        <FacetedSearch
+          className="mb-8 hidden lg:block"
+          facets={search.facets.items}
+          headingId="desktop-filter-heading"
+          pageType="brand"
+        />
+
+        <section
+          aria-labelledby="product-heading"
+          className="col-span-4 group-has-[[data-pending]]:animate-pulse lg:col-span-3"
+        >
+          <h2 className="sr-only" id="product-heading">
+            {t('products')}
+          </h2>
+
+          <div className="grid grid-cols-2 gap-6 sm:grid-cols-3 sm:gap-8">
+            {products.map((product, index) => (
+              <ProductCard
+                imagePriority={index <= 3}
+                imageSize="wide"
+                key={product.entityId}
+                product={product}
+              />
+            ))}
+          </div>
 
-        <div className="grid grid-cols-4 gap-8">
-          <FacetedSearch
-            className="mb-8 hidden lg:block"
-            facets={search.facets.items}
-            headingId="desktop-filter-heading"
-            pageType="brand"
+          <Pagination
+            endCursor={endCursor ?? undefined}
+            hasNextPage={hasNextPage}
+            hasPreviousPage={hasPreviousPage}
+            startCursor={startCursor ?? undefined}
           />
-
-          <section
-            aria-labelledby="product-heading"
-            className="col-span-4 group-has-[[data-pending]]:animate-pulse lg:col-span-3"
-          >
-            <h2 className="sr-only" id="product-heading">
-              {t('products')}
-            </h2>
-
-            <div className="grid grid-cols-2 gap-6 sm:grid-cols-3 sm:gap-8">
-              {products.map((product, index) => (
-                <ProductCard
-                  imagePriority={index <= 3}
-                  imageSize="wide"
-                  key={product.entityId}
-                  product={product}
-                />
-              ))}
-            </div>
-
-            <Pagination
-              endCursor={endCursor ?? undefined}
-              hasNextPage={hasNextPage}
-              hasPreviousPage={hasPreviousPage}
-              startCursor={startCursor ?? undefined}
-            />
-          </section>
-        </div>
-      </NextIntlClientProvider>
+        </section>
+      </div>
     </div>
   );
 }

core/app/[locale]/(default)/(faceted)/category/[slug]/_components/sub-categories.tsx

@@ -1,4 +1,4 @@
-import { getTranslations } from 'next-intl/server';
+import { useTranslations } from 'next-intl';
 
 import { FragmentOf, graphql } from '~/client/graphql';
 import { Link } from '~/components/link';
@@ -30,8 +30,8 @@ interface Props {
   categoryTree: CategoryTree;
 }
 
-export async function SubCategories({ categoryTree }: Props) {
-  const t = await getTranslations('FacetedGroup.MobileSideNav');
+export function SubCategories({ categoryTree }: Props) {
+  const t = useTranslations('FacetedGroup.MobileSideNav');
 
   if (!categoryTree[0]?.children?.length) {
     return null;

core/app/[locale]/(default)/(faceted)/category/[slug]/page.tsx

@@ -1,7 +1,6 @@
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
-import { NextIntlClientProvider } from 'next-intl';
-import { getMessages, getTranslations, unstable_setRequestLocale } from 'next-intl/server';
+import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 
 import { Breadcrumbs } from '~/components/breadcrumbs';
 import { ProductCard } from '~/components/product-card';
@@ -50,8 +49,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 export default async function Category({ params: { locale, slug }, searchParams }: Props) {
   unstable_setRequestLocale(locale);
 
-  const t = await getTranslations({ locale, namespace: 'Category' });
-  const messages = await getMessages({ locale });
+  const t = await getTranslations('Category');
 
   const categoryId = Number(slug);
 
@@ -71,74 +69,65 @@ export default async function Category({ params: { locale, slug }, searchParams
   return (
     <div className="group">
       <Breadcrumbs category={category} />
-      <NextIntlClientProvider
-        locale={locale}
-        messages={{
-          FacetedGroup: messages.FacetedGroup ?? {},
-          Product: messages.Product ?? {},
-          AddToCart: messages.AddToCart ?? {},
-        }}
-      >
-        <div className="md:mb-8 lg:flex lg:flex-row lg:items-center lg:justify-between">
-          <h1 className="mb-4 text-4xl font-black lg:mb-0 lg:text-5xl">{category.name}</h1>
-
-          <div className="flex flex-col items-center gap-3 whitespace-nowrap md:flex-row">
-            <MobileSideNav>
-              <FacetedSearch
-                facets={search.facets.items}
-                headingId="mobile-filter-heading"
-                pageType="category"
-              >
-                <SubCategories categoryTree={categoryTree} />
-              </FacetedSearch>
-            </MobileSideNav>
-            <div className="flex w-full flex-col items-start gap-4 md:flex-row md:items-center md:justify-end md:gap-6">
-              <SortBy />
-              <div className="order-3 py-4 text-base font-semibold md:order-2 md:py-0">
-                {t('sortBy', { items: productsCollection.collectionInfo?.totalItems ?? 0 })}
-              </div>
+      <div className="md:mb-8 lg:flex lg:flex-row lg:items-center lg:justify-between">
+        <h1 className="mb-4 text-4xl font-black lg:mb-0 lg:text-5xl">{category.name}</h1>
+
+        <div className="flex flex-col items-center gap-3 whitespace-nowrap md:flex-row">
+          <MobileSideNav>
+            <FacetedSearch
+              facets={search.facets.items}
+              headingId="mobile-filter-heading"
+              pageType="category"
+            >
+              <SubCategories categoryTree={categoryTree} />
+            </FacetedSearch>
+          </MobileSideNav>
+          <div className="flex w-full flex-col items-start gap-4 md:flex-row md:items-center md:justify-end md:gap-6">
+            <SortBy />
+            <div className="order-3 py-4 text-base font-semibold md:order-2 md:py-0">
+              {t('sortBy', { items: productsCollection.collectionInfo?.totalItems ?? 0 })}
             </div>
           </div>
         </div>
+      </div>
+
+      <div className="grid grid-cols-4 gap-8">
+        <FacetedSearch
+          className="mb-8 hidden lg:block"
+          facets={search.facets.items}
+          headingId="desktop-filter-heading"
+          pageType="category"
+        >
+          <SubCategories categoryTree={categoryTree} />
+        </FacetedSearch>
+
+        <section
+          aria-labelledby="product-heading"
+          className="col-span-4 group-has-[[data-pending]]:animate-pulse lg:col-span-3"
+        >
+          <h2 className="sr-only" id="product-heading">
+            {t('products')}
+          </h2>
+
+          <div className="grid grid-cols-2 gap-6 sm:grid-cols-3 sm:gap-8">
+            {products.map((product, index) => (
+              <ProductCard
+                imagePriority={index <= 3}
+                imageSize="wide"
+                key={product.entityId}
+                product={product}
+              />
+            ))}
+          </div>
 
-        <div className="grid grid-cols-4 gap-8">
-          <FacetedSearch
-            className="mb-8 hidden lg:block"
-            facets={search.facets.items}
-            headingId="desktop-filter-heading"
-            pageType="category"
-          >
-            <SubCategories categoryTree={categoryTree} />
-          </FacetedSearch>
-
-          <section
-            aria-labelledby="product-heading"
-            className="col-span-4 group-has-[[data-pending]]:animate-pulse lg:col-span-3"
-          >
-            <h2 className="sr-only" id="product-heading">
-              {t('products')}
-            </h2>
-
-            <div className="grid grid-cols-2 gap-6 sm:grid-cols-3 sm:gap-8">
-              {products.map((product, index) => (
-                <ProductCard
-                  imagePriority={index <= 3}
-                  imageSize="wide"
-                  key={product.entityId}
-                  product={product}
-                />
-              ))}
-            </div>
-
-            <Pagination
-              endCursor={endCursor ?? undefined}
-              hasNextPage={hasNextPage}
-              hasPreviousPage={hasPreviousPage}
-              startCursor={startCursor ?? undefined}
-            />
-          </section>
-        </div>
-      </NextIntlClientProvider>
+          <Pagination
+            endCursor={endCursor ?? undefined}
+            hasNextPage={hasNextPage}
+            hasPreviousPage={hasPreviousPage}
+            startCursor={startCursor ?? undefined}
+          />
+        </section>
+      </div>
       <CategoryViewed category={category} categoryId={categoryId} products={products} />
     </div>
   );