fix(core): show correct status and messaging for add to cart button (b…

…igcommerce#937) * fix(core): disable add to cart button when products are out of stock * fix: same issue but in compare page * fix: same issue but in faceted search * fix: add out of stock messaging * refactor: component names and paths * refactor: components name and paths * fix: delete unused fragment * fix: lint issue * fix: add test * refactor: change name of button compoent * refactor: add shared AddToCartButton component * refactor: component names * fix: use children instead of showCartIcon prop * fix: update snapshot
malewis5 · May 31, 2024 · 3606639 · 3606639
1 parent 2bfd980
commit 3606639
Show file tree

Hide file tree

Showing 28 changed files with 231 additions and 221 deletions.
diff --git a/.changeset/great-tips-buy.md b/.changeset/great-tips-buy.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Show correct status and messaging for the Add to Cart button.
diff --git a/core/app/[locale]/(default)/(faceted)/brand/[slug]/page.tsx b/core/app/[locale]/(default)/(faceted)/brand/[slug]/page.tsx
@@ -60,7 +60,11 @@ export default async function Brand({ params: { slug, locale }, searchParams }:
     <div>
       <NextIntlClientProvider
         locale={locale}
-        messages={{ FacetedGroup: messages.FacetedGroup ?? {}, Product: messages.Product ?? {} }}
+        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>

diff --git a/core/app/[locale]/(default)/(faceted)/category/[slug]/page.tsx b/core/app/[locale]/(default)/(faceted)/category/[slug]/page.tsx
@@ -65,7 +65,11 @@ export default async function Category({ params: { locale, slug }, searchParams
       <Breadcrumbs category={category} />
       <NextIntlClientProvider
         locale={locale}
-        messages={{ FacetedGroup: messages.FacetedGroup ?? {}, Product: messages.Product ?? {} }}
+        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>

diff --git a/core/app/[locale]/(default)/(faceted)/search/page.tsx b/core/app/[locale]/(default)/(faceted)/search/page.tsx
@@ -63,7 +63,11 @@ export default async function Search({ params: { locale }, searchParams }: Props
     <div>
       <NextIntlClientProvider
         locale={locale}
-        messages={{ FacetedGroup: messages.FacetedGroup ?? {}, Product: messages.Product ?? {} }}
+        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-3 text-base">

diff --git a/core/app/[locale]/(default)/compare/_components/add-to-cart.tsx b/core/app/[locale]/(default)/compare/_components/add-to-cart.tsx
diff --git a/core/app/[locale]/(default)/compare/_components/add-to-cart/fragment.ts b/core/app/[locale]/(default)/compare/_components/add-to-cart/fragment.ts
@@ -0,0 +1,12 @@
+import { graphql } from '~/client/graphql';
+import { AddToCartButtonFragment } from '~/components/add-to-cart-button/fragment';
+
+export const AddToCartFragment = graphql(
+  `
+    fragment AddToCartFragment on Product {
+      entityId
+      ...AddToCartButtonFragment
+    }
+  `,
+  [AddToCartButtonFragment],
+);
diff --git a/.../compare/_components/add-to-cart-form.tsx → ...compare/_components/add-to-cart/index.tsx b/.../compare/_components/add-to-cart-form.tsx → ...compare/_components/add-to-cart/index.tsx
@@ -1,25 +1,26 @@
 'use client';
 
+import { FragmentOf } from 'gql.tada';
 import { AlertCircle, Check } from 'lucide-react';
 import { useTranslations } from 'next-intl';
+import { useFormStatus } from 'react-dom';
 import { toast } from 'react-hot-toast';
 
+import { AddToCartButton } from '~/components/add-to-cart-button';
 import { Link } from '~/components/link';
 
-import { addToCart } from '../_actions/add-to-cart';
+import { addToCart } from '../../_actions/add-to-cart';
 
-import { AddToCart } from './add-to-cart';
+import { AddToCartFragment } from './fragment';
 
-export const AddToCartForm = ({
-  entityId,
-  availability,
-  productName,
-}: {
-  entityId: number;
-  availability: 'Unavailable' | 'Available' | 'Preorder';
-  productName: string;
-}) => {
-  const t = useTranslations('Compare');
+const Submit = ({ data: product }: { data: FragmentOf<typeof AddToCartFragment> }) => {
+  const { pending } = useFormStatus();
+
+  return <AddToCartButton data={product} loading={pending} />;
+};
+
+export const AddToCart = ({ data: product }: { data: FragmentOf<typeof AddToCartFragment> }) => {
+  const t = useTranslations('AddToCart');
 
   return (
     <form
@@ -28,7 +29,9 @@ export const AddToCartForm = ({
         const quantity = Number(formData.get('quantity'));
 
         if (result.error) {
-          toast.error(result.error, { icon: <AlertCircle className="text-error-secondary" /> });
+          toast.error(t('errorAddingProductToCart'), {
+            icon: <AlertCircle className="text-error-secondary" />,
+          });
 
           return;
         }
@@ -57,9 +60,9 @@ export const AddToCartForm = ({
         );
       }}
     >
-      <input name="product_id" type="hidden" value={entityId} />
+      <input name="product_id" type="hidden" value={product.entityId} />
       <input name="quantity" type="hidden" value={1} />
-      <AddToCart disabled={availability === 'Unavailable'} productName={productName} />
+      <Submit data={product} />
     </form>
   );
 };
diff --git a/core/app/[locale]/(default)/compare/page.tsx b/core/app/[locale]/(default)/compare/page.tsx
@@ -16,7 +16,8 @@ import { Rating } from '~/components/ui/rating';
 import { LocaleType } from '~/i18n';
 import { cn } from '~/lib/utils';
 
-import { AddToCartForm } from './_components/add-to-cart-form';
+import { AddToCart } from './_components/add-to-cart';
+import { AddToCartFragment } from './_components/add-to-cart/fragment';
 
 const MAX_COMPARE_LIMIT = 10;
 
@@ -75,17 +76,15 @@ const ComparePageQuery = graphql(
                   availableToSell
                 }
               }
-              availabilityV2 {
-                status
-              }
+              ...AddToCartFragment
               ...PricingFragment
             }
           }
         }
       }
     }
   `,
-  [PricingFragment],
+  [AddToCartFragment, PricingFragment],
 );
 
 export default async function Compare({
@@ -219,13 +218,9 @@ export default async function Compare({
                   <td className="border-b px-4 pb-12" key={product.entityId}>
                     <NextIntlClientProvider
                       locale={locale}
-                      messages={{ Compare: messages.Compare ?? {} }}
+                      messages={{ AddToCart: messages.AddToCart ?? {} }}
                     >
-                      <AddToCartForm
-                        availability={product.availabilityV2.status}
-                        entityId={product.entityId}
-                        productName={product.name}
-                      />
+                      <AddToCart data={product} />
                     </NextIntlClientProvider>
                   </td>
                 );
@@ -310,13 +305,9 @@ export default async function Compare({
                   <td className="border-b px-4 pb-24 pt-12" key={product.entityId}>
                     <NextIntlClientProvider
                       locale={locale}
-                      messages={{ Compare: messages.Compare ?? {} }}
+                      messages={{ AddToCart: messages.AddToCart ?? {} }}
                     >
-                      <AddToCartForm
-                        availability={product.availabilityV2.status}
-                        entityId={product.entityId}
-                        productName={product.name}
-                      />
+                      <AddToCart data={product} />
                     </NextIntlClientProvider>
                   </td>
                 );

diff --git a/core/app/[locale]/(default)/layout.tsx b/core/app/[locale]/(default)/layout.tsx
@@ -49,7 +49,10 @@ export default async function DefaultLayout({ children, params: { locale } }: Pr
       </main>
 
       <Suspense fallback={null}>
-        <NextIntlClientProvider locale={locale} messages={{ Product: messages.Product ?? {} }}>
+        <NextIntlClientProvider
+          locale={locale}
+          messages={{ Product: messages.Product ?? {}, AddToCart: messages.AddToCart ?? {} }}
+        >
           <ProductSheet />
         </NextIntlClientProvider>
       </Suspense>

diff --git a/core/app/[locale]/(default)/product/[slug]/_components/details.tsx b/core/app/[locale]/(default)/product/[slug]/_components/details.tsx
@@ -155,7 +155,7 @@ export const Details = ({ product }: Props) => {
         </div>
       )}
 
-      <ProductForm product={product} />
+      <ProductForm data={product} />
 
       <div className="my-12">
         <h2 className="mb-4 text-xl font-bold md:text-2xl">{t('additionalDetails')}</h2>

diff --git a/core/app/[locale]/(default)/product/[slug]/page.tsx b/core/app/[locale]/(default)/product/[slug]/page.tsx
@@ -79,7 +79,10 @@ export default async function Product({ params, searchParams }: ProductPageProps
       {category && <Breadcrumbs category={category} />}
 
       <div className="mb-12 mt-4 lg:grid lg:grid-cols-2 lg:gap-8">
-        <NextIntlClientProvider locale={locale} messages={{ Product: messages.Product ?? {} }}>
+        <NextIntlClientProvider
+          locale={locale}
+          messages={{ Product: messages.Product ?? {}, AddToCart: messages.AddToCart ?? {} }}
+        >
           <Gallery noImageText={t('noGalleryText')} product={product} />
           <Details product={product} />
           <div className="lg:col-span-2">

diff --git a/core/client/fragments/product-details.ts b/core/client/fragments/product-details.ts
diff --git a/core/client/queries/get-product-search-results.ts b/core/client/queries/get-product-search-results.ts
@@ -2,10 +2,10 @@ import { removeEdgesAndNodes } from '@bigcommerce/catalyst-client';
 import { cache } from 'react';
 
 import { getSessionCustomerId } from '~/auth';
+import { ProductCardFragment } from '~/components/product-card';
 
 import { client } from '..';
 import { PAGE_DETAILS_FRAGMENT } from '../fragments/page-details';
-import { PRODUCT_DETAILS_FRAGMENT } from '../fragments/product-details';
 import { graphql, VariablesOf } from '../graphql';
 import { revalidate } from '../revalidate-target';
 
@@ -31,7 +31,7 @@ const GET_PRODUCT_SEARCH_RESULTS_QUERY = graphql(
               }
               edges {
                 node {
-                  ...ProductDetails
+                  ...ProductCardFragment
                 }
               }
             }
@@ -150,7 +150,7 @@ const GET_PRODUCT_SEARCH_RESULTS_QUERY = graphql(
       }
     }
   `,
-  [PAGE_DETAILS_FRAGMENT, PRODUCT_DETAILS_FRAGMENT],
+  [PAGE_DETAILS_FRAGMENT, ProductCardFragment],
 );
 
 type Variables = VariablesOf<typeof GET_PRODUCT_SEARCH_RESULTS_QUERY>;

diff --git a/core/client/queries/get-quick-search-results.ts b/core/client/queries/get-quick-search-results.ts
@@ -2,9 +2,9 @@ import { removeEdgesAndNodes } from '@bigcommerce/catalyst-client';
 import { cache } from 'react';
 
 import { getSessionCustomerId } from '~/auth';
+import { ProductCardFragment } from '~/components/product-card';
 
 import { client } from '..';
-import { PRODUCT_DETAILS_FRAGMENT } from '../fragments/product-details';
 import { graphql } from '../graphql';
 import { revalidate } from '../revalidate-target';
 
@@ -21,7 +21,15 @@ const GET_QUICK_SEARCH_RESULTS_QUERY = graphql(
             products(first: 5) {
               edges {
                 node {
-                  ...ProductDetails
+                  categories {
+                    edges {
+                      node {
+                        name
+                        path
+                      }
+                    }
+                  }
+                  ...ProductCardFragment
                 }
               }
             }
@@ -30,7 +38,7 @@ const GET_QUICK_SEARCH_RESULTS_QUERY = graphql(
       }
     }
   `,
-  [PRODUCT_DETAILS_FRAGMENT],
+  [ProductCardFragment],
 );
 
 export const getQuickSearchResults = cache(async ({ searchTerm }: QuickSearch) => {

diff --git a/core/components/add-to-cart-button/fragment.ts b/core/components/add-to-cart-button/fragment.ts
@@ -0,0 +1,12 @@
+import { graphql } from '~/client/graphql';
+
+export const AddToCartButtonFragment = graphql(`
+  fragment AddToCartButtonFragment on Product {
+    inventory {
+      isInStock
+    }
+    availabilityV2 {
+      status
+    }
+  }
+`);