From c82da55435f64f863f7d66376c59d5673780cb06 Mon Sep 17 00:00:00 2001
From: jordanarldt <jordan.arldt@bigcommerce.com>
Date: Fri, 27 Dec 2024 14:37:41 -0600
Subject: [PATCH] feat: add FeaturedProductsCarousel to 404 page

---
 core/app/[locale]/not-found.tsx | 30 ++++++++++++++----------------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/core/app/[locale]/not-found.tsx b/core/app/[locale]/not-found.tsx
index 3f3e6b6eae..121a9657db 100644
--- a/core/app/[locale]/not-found.tsx
+++ b/core/app/[locale]/not-found.tsx
@@ -1,6 +1,8 @@
 import { removeEdgesAndNodes } from '@bigcommerce/catalyst-client';
-import { getTranslations } from 'next-intl/server';
+import { getFormatter, getTranslations } from 'next-intl/server';
 
+import { CarouselProduct } from '@/vibes/soul/primitives/products-carousel';
+import { FeaturedProductsCarousel } from '@/vibes/soul/sections/featured-products-carousel';
 import { NotFound as NotFoundSection } from '@/vibes/soul/sections/not-found';
 import { client } from '~/client';
 import { graphql } from '~/client/graphql';
@@ -8,14 +10,13 @@ import { revalidate } from '~/client/revalidate-target';
 import { Footer } from '~/components/footer/footer';
 import { Header } from '~/components/header';
 import { ProductCardFragment } from '~/components/product-card/fragment';
-import { ProductCardCarousel } from '~/components/product-card-carousel';
-import { SearchForm } from '~/components/search-form';
+import { productCardTransformer } from '~/data-transformers/product-card-transformer';
 
 const NotFoundQuery = graphql(
   `
     query NotFoundQuery {
       site {
-        featuredProducts(first: 4) {
+        featuredProducts(first: 10) {
           edges {
             node {
               ...ProductCardFragment
@@ -28,9 +29,8 @@ const NotFoundQuery = graphql(
   [ProductCardFragment],
 );
 
-export default async function NotFound() {
-  const t = await getTranslations('NotFound');
-
+async function getFeaturedProducts(): Promise<CarouselProduct[]> {
+  const format = await getFormatter();
   const { data } = await client.fetch({
     document: NotFoundQuery,
     fetchOptions: { next: { revalidate } },
@@ -38,21 +38,19 @@ export default async function NotFound() {
 
   const featuredProducts = removeEdgesAndNodes(data.site.featuredProducts);
 
+  return productCardTransformer(featuredProducts, format);
+}
+
+export default async function NotFound() {
+  const t = await getTranslations('NotFound');
+
   return (
     <>
       <Header />
 
       <NotFoundSection subtitle={t('message')} title={t('heading')} />
 
-      <main className="mx-auto mb-10 max-w-[835px] space-y-8 px-4 sm:px-10 lg:px-0">
-        <SearchForm />
-        <ProductCardCarousel
-          products={featuredProducts}
-          showCart={false}
-          showCompare={false}
-          title={t('Carousel.featuredProducts')}
-        />
-      </main>
+      <FeaturedProductsCarousel products={getFeaturedProducts()} />
 
       <Footer />
     </>