Merge branch 'main' into poc/react-nextjs-new-design

README.md

@@ -12,7 +12,9 @@ A Next.js 13 and App Router-ready ecommerce template featuring:
 - Styling with Tailwind CSS
 - Automatic light/dark mode based on system settings
 
-> Note: Looking for Next.js Commerce v1? View the [code](https://github.com/vercel/commerce/tree/v1), [demo](https://commerce-v1.vercel.store), and [release notes](https://github.com/vercel/commerce/releases/tag/v1)
+<h3 id="v1-note"></h3>
+
+> Note: Looking for Next.js Commerce v1? View the [code](https://github.com/vercel/commerce/tree/v1), [demo](https://commerce-v1.vercel.store), and [release notes](https://github.com/vercel/commerce/releases/tag/v1).
 
 ## Prerequisites
 

components/cart/actions.ts

@@ -53,7 +53,7 @@ export const addItem = async (variantId: string | undefined): Promise<Error | un
       quantity = itemInCart.quantity + 1;
     }
 
-    await apiClient.invoke('addLineItem post /checkout/cart/line-item', {
+    const response = await apiClient.invoke('addLineItem post /checkout/cart/line-item', {
       items: [
         {
           id: variantId,
@@ -63,6 +63,11 @@ export const addItem = async (variantId: string | undefined): Promise<Error | un
         }
       ]
     });
+
+    const errorMessage = alertErrorMessages(response);
+    if (errorMessage !== '') {
+      return { message: errorMessage } as Error;
+    }
   } catch (error) {
     if (error instanceof ApiClientError) {
       console.error(error);
@@ -73,6 +78,20 @@ export const addItem = async (variantId: string | undefined): Promise<Error | un
   }
 };
 
+function alertErrorMessages(response: ExtendedCart): string {
+  let errorMessages: string = '';
+  if (response.errors) {
+    Object.values(response.errors).forEach(function (value) {
+      // @ts-ignore
+      if (value.messageKey && value.message && value.messageKey === 'product-out-of-stock') {
+        errorMessages += value.message;
+      }
+    });
+  }
+
+  return errorMessages;
+}
+
 export const removeItem = async (lineId: string): Promise<Error | undefined> => {
   const cartId = cookies().get('sw-context-token')?.value;
 

components/cart/add-to-cart.tsx

@@ -6,7 +6,7 @@ import { addItem } from 'components/cart/actions';
 import LoadingDots from 'components/loading-dots';
 import { ProductVariant, Product } from 'lib/shopware/types';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { useEffect, useState, useTransition } from 'react';
+import { useTransition } from 'react';
 
 export function AddToCart({
   product,
@@ -17,34 +17,36 @@ export function AddToCart({
   availableForSale: boolean;
   product: Product;
 }) {
-  const [selectedVariantId, setSelectedVariantId] = useState(product.id);
   const router = useRouter();
   const searchParams = useSearchParams();
   const [isPending, startTransition] = useTransition();
-
+  const defaultVariantId = variants.length === 1 ? variants[0]?.id : product.id;
-  useEffect(() => {
   const variant = variants.find((variant: ProductVariant) =>
     variant.selectedOptions.every(
       (option) => option.value === searchParams.get(option.name.toLowerCase())
     )
   );
-
+  const selectedVariantId = variant?.id || defaultVariantId;
-    if (variant) {
+  const title = !availableForSale
-      setSelectedVariantId(variant.id);
+    ? 'Out of stock'
-    }
+    : !selectedVariantId
-  }, [searchParams, variants, setSelectedVariantId, selectedVariantId]);
+    ? 'Please select options'
+    : undefined;
 
   return (
     <button
       aria-label="Add item to cart"
-      disabled={isPending}
+      disabled={isPending || !availableForSale || !selectedVariantId}
+      title={title}
       onClick={() => {
-        if (!availableForSale) return;
+        // Safeguard in case someone messes with `disabled` in devtools.
+        if (!availableForSale || !selectedVariantId) return;
+
         startTransition(async () => {
           const error = await addItem(selectedVariantId);
 
           if (error) {
-            console.error(error);
+            alert(error.message);
             return;
           }
 
@@ -54,7 +56,7 @@ export function AddToCart({
       className={clsx(
         'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90',
         {
-          'cursor-not-allowed opacity-60': !availableForSale,
+          'cursor-not-allowed opacity-60 hover:opacity-60': !availableForSale || !selectedVariantId,
           'cursor-not-allowed': isPending
         }
       )}

components/layout/footer.tsx

@@ -53,7 +53,7 @@ export default async function Footer() {
         </div>
       </div>
       <div className="border-t border-neutral-200 py-6 text-sm dark:border-neutral-700">
-        <div className="mx-auto flex w-full max-w-7xl flex-col items-center gap-1 md:flex-row md:gap-0">
+        <div className="mx-auto flex w-full max-w-7xl flex-col items-center gap-1 px-4 md:flex-row md:gap-0 md:px-4 xl:px-0">
           <p>
             &copy; {copyrightDate} {copyrightName}
             {copyrightName.length && !copyrightName.endsWith('.') ? '.' : ''} All rights reserved.

components/layout/search/filter/item.tsx

@@ -5,22 +5,17 @@ import { SortFilterItem } from 'lib/constants';
 import { createUrl } from 'lib/utils';
 import Link from 'next/link';
 import { usePathname, useSearchParams } from 'next/navigation';
-import { useEffect, useState } from 'react';
 import type { ListItem, PathFilterItem } from '.';
 
 function PathFilterItem({ item }: { item: PathFilterItem }) {
   const pathname = usePathname();
   const searchParams = useSearchParams();
-  const [active, setActive] = useState(pathname === item.path);
+  const active = pathname === item.path;
   const newParams = new URLSearchParams(searchParams.toString());
   const DynamicTag = active ? 'p' : Link;
 
   newParams.delete('q');
 
-  useEffect(() => {
-    setActive(pathname === item.path);
-  }, [pathname, item.path]);
-
   return (
     <li className="mt-2 flex text-black dark:text-white" key={item.title}>
       <DynamicTag
@@ -41,7 +36,7 @@ function PathFilterItem({ item }: { item: PathFilterItem }) {
 function SortFilterItem({ item }: { item: SortFilterItem }) {
   const pathname = usePathname();
   const searchParams = useSearchParams();
-  const [active, setActive] = useState(searchParams.get('sort') === item.slug);
+  const active = searchParams.get('sort') === item.slug;
   const q = searchParams.get('q');
   const page = searchParams.get('page');
   const href =
@@ -57,10 +52,6 @@ function SortFilterItem({ item }: { item: SortFilterItem }) {
       : pathname;
   const DynamicTag = active ? 'p' : Link;
 
-  useEffect(() => {
-    setActive(searchParams.get('sort') === item.slug);
-  }, [searchParams, item.slug]);
-
   return (
     <li className="mt-2 flex text-sm text-black dark:text-white" key={item.title}>
       <DynamicTag

components/product/variant-selector.tsx

@@ -4,17 +4,12 @@ import clsx from 'clsx';
 import { ProductOption, ProductVariant } from 'lib/shopware/types';
 import { createUrl } from 'lib/utils';
 import Link from 'next/link';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { usePathname, useSearchParams } from 'next/navigation';
 
-type ParamsMap = {
+type Combination = {
-  [key: string]: string; // ie. { color: 'Red', size: 'Large', ... }
-};
-
-type OptimizedVariant = {
   id: string;
   availableForSale: boolean;
-  params: URLSearchParams;
+  [key: string]: string | boolean; // ie. { color: 'Red', size: 'Large', ... }
-  [key: string]: string | boolean | URLSearchParams; // ie. { color: 'Red', size: 'Large', ... }
 };
 
 export function VariantSelector({
@@ -25,8 +20,7 @@ export function VariantSelector({
   variants: ProductVariant[];
 }) {
   const pathname = usePathname();
-  const currentParams = useSearchParams();
+  const searchParams = useSearchParams();
-  const router = useRouter();
   const hasNoOptionsOrJustOneOption =
     !options.length || (options.length === 1 && options[0]?.values.length === 1);
 
@@ -34,78 +28,55 @@ export function VariantSelector({
     return null;
   }
 
-  // Discard any unexpected options or values from url and create params map.
+  const combinations: Combination[] = variants.map((variant) => ({
-  const paramsMap: ParamsMap = Object.fromEntries(
-    Array.from(currentParams.entries()).filter(([key, value]) =>
-      options.find((option) => option.name.toLowerCase() === key && option.values.includes(value))
-    )
-  );
-
-  // Optimize variants for easier lookups.
-  const optimizedVariants: OptimizedVariant[] = variants.map((variant) => {
-    const optimized: OptimizedVariant = {
     id: variant.id,
     availableForSale: variant.availableForSale,
-      params: new URLSearchParams()
+    // Adds key / value pairs for each variant (ie. "color": "Black" and "size": 'M").
-    };
+    ...variant.selectedOptions.reduce(
-
+      (accumulator, option) => ({ ...accumulator, [option.name.toLowerCase()]: option.value }),
-    variant.selectedOptions.forEach((selectedOption) => {
+      {}
-      const name = selectedOption.name.toLowerCase();
+    )
-      const value = selectedOption.value;
+  }));
-
-      optimized[name] = value;
-      optimized.params.set(name, value);
-    });
-
-    return optimized;
-  });
-
-  // Find the first variant that is:
-  //
-  // 1. Available for sale
-  // 2. Matches all options specified in the url (note that this
-  //    could be a partial match if some options are missing from the url).
-  //
-  // If no match (full or partial) is found, use the first variant that is
-  // available for sale.
-  const selectedVariant: OptimizedVariant | undefined =
-    optimizedVariants.find(
-      (variant) =>
-        variant.availableForSale &&
-        Object.entries(paramsMap).every(([key, value]) => variant[key] === value)
-    ) || optimizedVariants.find((variant) => variant.availableForSale);
-
-  const selectedVariantParams = new URLSearchParams(selectedVariant?.params);
-  const currentUrl = createUrl(pathname, currentParams);
-  const selectedVariantUrl = createUrl(pathname, selectedVariantParams);
-
-  if (currentUrl !== selectedVariantUrl) {
-    router.replace(selectedVariantUrl);
-  }
 
   return options.map((option) => (
     <dl className="mb-8" key={option.id}>
       <dt className="mb-4 text-sm uppercase tracking-wide">{option.name}</dt>
       <dd className="flex flex-wrap gap-3">
         {option.values.map((value) => {
-          // Base option params on selected variant params.
+          const optionNameLowerCase = option.name.toLowerCase();
-          const optionParams = new URLSearchParams(selectedVariantParams);
-          // Update the params using the current option to reflect how the url would change.
-          optionParams.set(option.name.toLowerCase(), value);
 
-          const optionUrl = createUrl(pathname, optionParams);
+          // Base option params on current params so we can preserve any other param state in the url.
+          const optionSearchParams = new URLSearchParams(searchParams.toString());
 
-          // The option is active if it in the url params.
+          // Update the option params using the current option to reflect how the url *would* change,
-          const isActive = selectedVariantParams.get(option.name.toLowerCase()) === value;
+          // if the option was clicked.
+          optionSearchParams.set(optionNameLowerCase, value);
+          const optionUrl = createUrl(pathname, optionSearchParams);
 
-          // The option is available for sale if it fully matches the variant in the option's url params.
+          // In order to determine if an option is available for sale, we need to:
-          // It's super important to note that this is the options params, *not* the selected variant's params.
+          //
-          // This is the "magic" that will cross check possible future variant combinations and preemptively
+          // 1. Filter out all other param state
-          // disable combinations that are not possible.
+          // 2. Filter out invalid options
-          const isAvailableForSale = optimizedVariants.find((a) =>
+          // 3. Check if the option combination is available for sale
-            Array.from(optionParams.entries()).every(([key, value]) => a[key] === value)
+          //
-          )?.availableForSale;
+          // This is the "magic" that will cross check possible variant combinations and preemptively
+          // disable combinations that are not available. For example, if the color gray is only available in size medium,
+          // then all other sizes should be disabled.
+          const filtered = Array.from(optionSearchParams.entries()).filter(([key, value]) =>
+            options.find(
+              (option) => option.name.toLowerCase() === key && option.values.includes(value)
+            )
+          );
+          const isAvailableForSale = combinations.find((combination) =>
+            filtered.every(
+              ([key, value]) => combination[key] === value && combination.availableForSale
+            )
+          );
 
+          // The option is active if it's in the url params.
+          const isActive = searchParams.get(optionNameLowerCase) === value;
+
+          // You can't disable a link, so we need to render something that isn't clickable.
           const DynamicTag = isAvailableForSale ? Link : 'p';
           const dynamicProps = {
             ...(isAvailableForSale && { scroll: false })

lib/shopware/api-extended.ts

@@ -10,6 +10,7 @@ type operationsWithoutOriginal = Omit<
   | 'readProductCrossSellings'
   | 'readProductListing'
   | 'searchPage'
+  | 'addLineItem'
   | 'readCart'
   | 'deleteLineItem'
 >;
@@ -21,6 +22,7 @@ export type extendedPaths =
   | 'readProductCrossSellings post /product/{productId}/cross-selling'
   | 'readProductListing post /product-listing/{categoryId}'
   | 'searchPage post /search'
+  | 'addLineItem post /checkout/cart/line-item'
   | 'readCart get /checkout/cart?name'
   | 'deleteLineItem delete /checkout/cart/line-item?id[]={ids}'
   | operationPaths;
@@ -32,6 +34,7 @@ export type extendedOperations = operationsWithoutOriginal & {
   readProductCrossSellings: extendedReadProductCrossSellings;
   readProductListing: extendedReadProductListing;
   searchPage: extendedSearchPage;
+  addLineItem: extendedAddLineItem;
   readCart: extendedReadCart;
   deleteLineItem: extendedDeleteLineItem;
 };
@@ -340,6 +343,26 @@ type extendedReadProductListing = {
   };
 };
 
+type extendedCartItems = components['schemas']['ArrayStruct'] & {
+  items?: Partial<ExtendedLineItem>[];
+};
+
+type extendedAddLineItem = {
+  requestBody?: {
+    content: {
+      'application/json': extendedCartItems;
+    };
+  };
+  responses: {
+    /** The updated cart. */
+    200: {
+      content: {
+        'application/json': ExtendedCart;
+      };
+    };
+  };
+};
+
 type extendedReadCart = {
   parameters: {
     query?: {