Merge pull request #27 from shopwareLabs/fix/update-sync-main

Update sync with vercel origin

Author: BrocksiNet

.env.example

@@ -1,7 +1,7 @@
 COMPANY_NAME="shopware AG"
 TWITTER_CREATOR="@shopware"
 TWITTER_SITE="https://www.shopware.com/en/solutions/shopware-composable-frontends/"
-SITE_NAME="Next.js Shopware Starter with Composable Frontends"
+SITE_NAME="Next.js Commerce with Shopware Composable Frontends"
 SHOPWARE_STORE_DOMAIN="https://demo-frontends.shopware.store"
 SHOPWARE_API_TYPE="store-api"
 SHOPWARE_ACCESS_TOKEN="SWSCBHFSNTVMAWNZDNFKSHLAYW"

.github/workflows/e2e-tests.yml

@@ -16,7 +16,8 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 22
-
+      - name: Install corepack
+        run: npm add -g corepack
       - run: corepack enable
       - run: pnpm --version
       - uses: actions/setup-node@v3

README.md

@@ -18,9 +18,6 @@ Next.js Shopware Starter requires a running [Shopware 6 Instance (Installation G
 
 To get started, use this README and the example environment variable comments.
 
-- [React Bricks](https://github.com/ReactBricks/nextjs-commerce-rb) ([Demo](https://nextjs-commerce.reactbricks.com/))
-  - Edit pages, product details, and footer content visually using [React Bricks](https://www.reactbricks.com) visual headless CMS.
-
 ## Running locally
 
 You will need to use the environment variables [defined in `.env.example`](https://github.com/shopwareLabs/nextjs-shopware-starter/blob/main/.env.example) to run Next.js Shopware Starter. It's recommended you use [Vercel Environment Variables](https://vercel.com/docs/concepts/projects/environment-variables) for this, but a `.env` file is all that is necessary.

api-types/storeApiSchema.json

@@ -11816,7 +11816,7 @@
           "label": { "type": "string" },
           "modified": { "type": "boolean" },
           "modifiedByApp": { "type": "boolean" },
-          "payload": { "$ref": "#/components/schemas/ProductJsonApi" },
+          "payload": { "$ref": "#/components/schemas/Product" },
           "price": {
             "type": "object",
             "properties": {

api-types/storeApiTypes.d.ts

@@ -2358,7 +2358,7 @@ export type Schemas = {
     label?: string;
     modified?: boolean;
     modifiedByApp?: boolean;
-    payload?: components['schemas']['ProductJsonApi'];
+    payload?: components['schemas']['Product'];
     price?: {
       /** @enum {string} */
       apiAlias: 'calculated_price';

components/cart/actions.ts

@@ -146,11 +146,11 @@ export async function removeItem(prevState: unknown, lineId?: string) {
   const cartId = (await cookies()).get('sw-context-token')?.value;
 
   if (!cartId) {
-    return 'Missing cart ID';
+    return 'Cart ID is missing';
   }
 
   if (!lineId) {
-    return 'Missing line ID';
+    return 'Line ID is missing';
   }
 
   try {

components/cart/add-to-cart.tsx

@@ -3,26 +3,25 @@
 import { PlusIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import { addItem } from 'components/cart/actions';
-import LoadingDots from 'components/loading-dots';
+import { useProduct } from 'components/product/product-context';
 import { Product, ProductVariant } from 'lib/shopware/types';
-import { useSearchParams } from 'next/navigation';
 import { useActionState } from 'react';
-import { useFormStatus } from 'react-dom';
+import { useCart } from './cart-context';
+
 function SubmitButton({
   availableForSale,
   selectedVariantId
 }: {
   availableForSale: boolean;
   selectedVariantId: string | undefined;
 }) {
-  const { pending } = useFormStatus();
   const buttonClasses =
     'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white';
   const disabledClasses = 'cursor-not-allowed opacity-60 hover:opacity-60';
 
   if (!availableForSale) {
     return (
-      <button aria-disabled className={clsx(buttonClasses, disabledClasses)}>
+      <button disabled className={clsx(buttonClasses, disabledClasses)}>
         Out Of Stock
       </button>
     );
@@ -32,7 +31,7 @@ function SubmitButton({
     return (
       <button
         aria-label="Please select an option"
-        aria-disabled
+        disabled
         className={clsx(buttonClasses, disabledClasses)}
       >
         <div className="absolute left-0 ml-4">
@@ -45,52 +44,44 @@ function SubmitButton({
 
   return (
     <button
-      onClick={(e: React.FormEvent<HTMLButtonElement>) => {
-        if (pending) e.preventDefault();
-      }}
       aria-label="Add to cart"
-      aria-disabled={pending}
       className={clsx(buttonClasses, {
-        'hover:opacity-90': true,
-        [disabledClasses]: pending
+        'hover:opacity-90': true
       })}
     >
       <div className="absolute left-0 ml-4">
-        {pending ? <LoadingDots className="mb-3 bg-white" /> : <PlusIcon className="h-5" />}
+        <PlusIcon className="h-5" />
       </div>
       Add To Cart
     </button>
   );
 }
 
-export function AddToCart({
-  product,
-  variants,
-  availableForSale
-}: {
-  product: Product;
-  variants: ProductVariant[];
-  availableForSale: boolean;
-}) {
+export function AddToCart({ product }: { product: Product }) {
+  const { variants, availableForSale } = product;
+  const { addCartItem } = useCart();
+  const { state } = useProduct();
   const [message, formAction] = useActionState(addItem, null);
-  const searchParams = useSearchParams();
-  const defaultVariantId = variants.length === 1 ? variants[0]?.id : product.id;
-  const variant = variants.find((variant) =>
-    variant.selectedOptions.every(
-      (option) => option.value === searchParams.get(option.name.toLowerCase())
-    )
+
+  const variant = variants.find((variant: ProductVariant) =>
+    variant.selectedOptions.every((option) => option.value === state[option.name.toLowerCase()])
   );
+  const defaultVariantId = variants.length === 1 ? variants[0]?.id : product.id;
   const selectedVariantId = variant?.id || defaultVariantId;
   const actionWithVariant = formAction.bind(null, selectedVariantId);
+  const finalVariant = variants.find((variant) => variant.id === selectedVariantId)! || product;
 
   return (
-    <form action={actionWithVariant}>
+    <form
+      action={async () => {
+        addCartItem(finalVariant, product);
+        await actionWithVariant();
+      }}
+    >
       <SubmitButton availableForSale={availableForSale} selectedVariantId={selectedVariantId} />
-      <div className="flex items-center px-4 py-3 text-sm font-bold text-black">
-        <p aria-live="polite" className="h-6" role="status">
-          {message}
-        </p>
-      </div>
+      <p aria-live="polite" className="sr-only" role="status">
+        {message}
+      </p>
     </form>
   );
 }

components/cart/cart-context.tsx

@@ -50,16 +50,27 @@ function createOrUpdateCartItem(
   variant: ProductVariant,
   product: Product
 ): CartItem {
+  const productPrice = variant.price?.amount
+    ? variant.price.amount
+    : product.priceRange.minVariantPrice.amount === product.priceRange.maxVariantPrice.amount
+      ? product.priceRange.minVariantPrice.amount
+      : '0';
   const quantity = existingItem ? existingItem.quantity + 1 : 1;
-  const totalAmount = calculateItemCost(quantity, variant.price.amount);
+  const totalAmount = calculateItemCost(quantity, productPrice);
+  const currencyCode = variant.price?.currencyCode
+    ? variant.price?.currencyCode
+    : product.priceRange.minVariantPrice.currencyCode ===
+        product.priceRange.maxVariantPrice.currencyCode
+      ? product.priceRange.minVariantPrice.currencyCode
+      : 'EUR';
 
   return {
     id: existingItem?.id,
     quantity,
     cost: {
       totalAmount: {
         amount: totalAmount,
-        currencyCode: variant.price.currencyCode
+        currencyCode: currencyCode
       }
     },
     merchandise: {

components/cart/edit-item-quantity-button.tsx

@@ -39,9 +39,7 @@ function SubmitButton({ type }: { type: 'plus' | 'minus' }) {
 
 type EditItemQuantityButtonProps = {
   item: CartItem;
-
   type: 'plus' | 'minus';
-
   optimisticUpdate: (merchandiseId: string, updateType: UpdateType) => void;
 };
 

components/cart/index.tsx

@@ -95,11 +95,13 @@ export default function CartModal() {
                       ?.map((item, i) => {
                         const merchandiseSearchParams = {} as MerchandiseSearchParams;
 
-                        item.merchandise.selectedOptions.forEach(({ name, value }) => {
-                          if (value !== DEFAULT_OPTION) {
-                            merchandiseSearchParams[name.toLowerCase()] = value;
-                          }
-                        });
+                        if (item.merchandise.selectedOptions) {
+                          item.merchandise.selectedOptions.forEach(({ name, value }) => {
+                            if (value !== DEFAULT_OPTION) {
+                              merchandiseSearchParams[name?.toLowerCase()] = value;
+                            }
+                          });
+                        }
 
                         const merchandiseUrl = createUrl(
                           `/product/${item.merchandise.product.path}`,
@@ -137,7 +139,19 @@ export default function CartModal() {
                                     <span className="leading-tight">
                                       {item.merchandise.product.title}
                                     </span>
-                                    {item.merchandise.title !== DEFAULT_OPTION ? (
+                                    {item.merchandise.selectedOptions?.length
+                                      ? item.merchandise.selectedOptions.map((option) => (
+                                          <p
+                                            key={option.name}
+                                            className="text-xs text-neutral-500 dark:text-neutral-400"
+                                          >
+                                            {option.name}: {option.value}
+                                          </p>
+                                        ))
+                                      : null}
+
+                                    {item.merchandise.title !==
+                                    item.merchandise.product.seo.title ? (
                                       <p className="text-sm text-neutral-500 dark:text-neutral-400">
                                         {item.merchandise.title}
                                       </p>
@@ -155,7 +169,7 @@ export default function CartModal() {
                                   <EditItemQuantityButton
                                     item={item}
                                     type="minus"
-                                    optimisticUpdate={updateCartItem}
+                                    optimisticUpdate={(item.id, updateCartItem)}
                                   />
                                   <p className="w-6 text-center">
                                     <span className="w-full text-sm">{item.quantity}</span>

components/cart/modal.tsx

@@ -1,5 +1,4 @@
-import Cart from 'components/cart';
-import OpenCart from 'components/cart/open-cart';
+import CartModal from 'components/cart/modal';
 import LogoSquare from 'components/logo-square';
 import { getMenu } from 'lib/shopware';
 import { Menu } from 'lib/shopware/types';
@@ -45,9 +44,7 @@ export default async function Navbar() {
           </Suspense>
         </div>
         <div className="flex justify-end md:w-1/6">
-          <Suspense fallback={<OpenCart />}>
-            <Cart />
-          </Suspense>
+          <CartModal />
         </div>
       </div>
     </nav>

components/layout/navbar/index.tsx

@@ -22,11 +22,7 @@ export function ProductDescription({ product }: { product: Product }) {
       </Suspense>
 
       <Suspense fallback={null}>
-        <AddToCart
-          product={product}
-          variants={product.variants}
-          availableForSale={product.availableForSale}
-        />
+        <AddToCart product={product} />
       </Suspense>
 
       {product.descriptionHtml ? (