From 5604abf024c43b8c5298a7ea505d9ac95fec6c95 Mon Sep 17 00:00:00 2001
From: Alex Prudhomme <78121423+alexprudhomme@users.noreply.github.com>
Date: Tue, 12 Nov 2024 10:03:21 -0500
Subject: [PATCH] docs(headless): fix cart implementation when adding same item
 twice

https://coveord.atlassian.net/browse/KIT-3735
---
 .../headless-ssr-commerce/actions/external-cart-api.ts   | 9 ++++++++-
 .../headless-ssr-commerce/components/instant-product.tsx | 4 ++--
 .../headless-ssr-commerce/components/product-list.tsx    | 7 ++-----
 packages/samples/headless-ssr-commerce/utils/cart.ts     | 8 +++++++-
 4 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/samples/headless-ssr-commerce/actions/external-cart-api.ts b/packages/samples/headless-ssr-commerce/actions/external-cart-api.ts
index a65d31bba9..78ab8884dd 100644
--- a/packages/samples/headless-ssr-commerce/actions/external-cart-api.ts
+++ b/packages/samples/headless-ssr-commerce/actions/external-cart-api.ts
@@ -30,7 +30,14 @@ export async function getCart(): Promise<CartItem[]> {
 
 export async function addItemToCart(newItem: CartItem): Promise<CartItem[]> {
   const cart = getCartFromCookies();
-  cart.push(newItem);
+  const existingItem = cart.find(
+    (item) => item.productId === newItem.productId
+  );
+  if (existingItem) {
+    existingItem.quantity += 1;
+  } else {
+    cart.push(newItem);
+  }
   setCartInCookies(cart);
   return cart;
 }
diff --git a/packages/samples/headless-ssr-commerce/components/instant-product.tsx b/packages/samples/headless-ssr-commerce/components/instant-product.tsx
index 458d817105..73d84a7987 100644
--- a/packages/samples/headless-ssr-commerce/components/instant-product.tsx
+++ b/packages/samples/headless-ssr-commerce/components/instant-product.tsx
@@ -7,7 +7,7 @@ export default function InstantProducts() {
   const router = useRouter();
 
   const {state, methods} = useInstantProducts();
-  const {methods: cartMethods} = useCart();
+  const {state: cartState, methods: cartMethods} = useCart();
 
   const clickProduct = (product: Product) => {
     methods?.interactiveProduct({options: {product}}).select();
@@ -24,7 +24,7 @@ export default function InstantProducts() {
           <button onClick={() => clickProduct(product)}>
             {product.ec_name} ({product.ec_product_id})
           </button>
-          <button onClick={() => addToCart(cartMethods!, product)}>
+          <button onClick={() => addToCart(cartMethods!, cartState, product)}>
             Add to cart
           </button>
         </li>
diff --git a/packages/samples/headless-ssr-commerce/components/product-list.tsx b/packages/samples/headless-ssr-commerce/components/product-list.tsx
index 95b04f491a..16859c3a8c 100644
--- a/packages/samples/headless-ssr-commerce/components/product-list.tsx
+++ b/packages/samples/headless-ssr-commerce/components/product-list.tsx
@@ -8,7 +8,7 @@ import {useRouter} from 'next/navigation';
 
 export default function ProductList() {
   const {state, methods} = useProductList();
-  const {methods: cartMethods} = useCart();
+  const {state: cartState, methods: cartMethods} = useCart();
 
   const router = useRouter();
 
@@ -32,10 +32,7 @@ export default function ProductList() {
               height={50}
             />
           </button>
-          <button onClick={() => addToCart(cartMethods!, product)}>
-            Add to cart
-          </button>
-          <button onClick={() => addToCart(cartMethods!, product)}>
+          <button onClick={() => addToCart(cartMethods!, cartState, product)}>
             Add to cart
           </button>
         </li>
diff --git a/packages/samples/headless-ssr-commerce/utils/cart.ts b/packages/samples/headless-ssr-commerce/utils/cart.ts
index 19fc9b245f..b443888e8c 100644
--- a/packages/samples/headless-ssr-commerce/utils/cart.ts
+++ b/packages/samples/headless-ssr-commerce/utils/cart.ts
@@ -3,6 +3,7 @@ import {
   Cart as HeadlessCart,
   CartItem as HeadlessCartItem,
   Product as HeadlessProduct,
+  CartState as HeadlessCartState,
 } from '@coveo/headless-react/ssr-commerce';
 
 type HeadlessSSRCart = Omit<HeadlessCart, 'state' | 'subscribe'>;
@@ -24,13 +25,18 @@ export async function adjustQuantity(
 
 export async function addToCart(
   headlessCart: HeadlessSSRCart,
+  headlessCartState: HeadlessCartState,
   product: HeadlessProduct
 ) {
+  const existingItem = headlessCartState.items.find(
+    (item) => item.productId === product.ec_product_id
+  );
+  const quantity = existingItem ? existingItem.quantity + 1 : 1;
   const item = {
     name: product.ec_name!,
     price: product.ec_price!,
     productId: product.ec_product_id!,
-    quantity: 1,
+    quantity: quantity,
   };
 
   headlessCart.updateItemQuantity(item);