From 35ce9c5992a887174d2f2cc319a9aea6dfabc52b Mon Sep 17 00:00:00 2001
From: Michal Zachardala <misozach@gmail.com>
Date: Fri, 15 Nov 2024 14:45:28 +0100
Subject: [PATCH] issue#1127

---
 .../catalog/models/ProductThumbnail.ts        |  1 +
 storefront/pages/cart/index.tsx               | 32 +++++++++++++------
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/storefront/modules/catalog/models/ProductThumbnail.ts b/storefront/modules/catalog/models/ProductThumbnail.ts
index 3981e164ac..0aea8b8234 100644
--- a/storefront/modules/catalog/models/ProductThumbnail.ts
+++ b/storefront/modules/catalog/models/ProductThumbnail.ts
@@ -4,4 +4,5 @@ export type ProductThumbnail = {
   slug: string;
   thumbnailUrl: string;
   price: number;
+  stock: number; 
 };
diff --git a/storefront/pages/cart/index.tsx b/storefront/pages/cart/index.tsx
index 013823e8ed..96f59a4c1c 100644
--- a/storefront/pages/cart/index.tsx
+++ b/storefront/pages/cart/index.tsx
@@ -30,8 +30,11 @@ const Cart = () => {
     slug: string;
     thumbnailUrl: string;
     price: number;
+    stock: number;
   };
 
+  const LOW_STOCK_THRESHOLD = 5;
+
   const [items, setItems] = useState<Item[]>([]);
 
   const [selectedProductIds, setSelectedProductIds] = useState<Set<number>>(new Set());
@@ -90,13 +93,16 @@ const Cart = () => {
           .then((results) => {
             const newItems: Item[] = [];
             results.forEach((result) => {
+              const quantity = cartDetails.find((detail) => detail.productId === result.id)
+                ?.quantity!;
               newItems.push({
                 productId: result.id,
-                quantity: cartDetails.find((detail) => detail.productId === result.id)?.quantity!,
+                quantity: quantity,
                 productName: result.name,
                 slug: result.slug,
                 thumbnailUrl: result.thumbnailUrl,
                 price: result.price,
+                stock: result.stock,
               });
             });
             setItems(newItems);
@@ -292,16 +298,18 @@ const Cart = () => {
                   </thead>
                   <tbody>
                     {items.map((item) => {
+                      const isOutOfStock = item.stock === 0;
+                      const isLowStock = item.stock > 0 && item.stock <= LOW_STOCK_THRESHOLD;
                       return (
                         <tr key={item.quantity.toString() + item.productId.toString()}>
                           <td>
                             <label className="item-checkbox-label" htmlFor="select-item-checkbox">
-                              {''}
                               <input
                                 className="form-check-input item-checkbox"
                                 type="checkbox"
                                 checked={selectedProductIds.has(item.productId)}
                                 onChange={() => handleSelectItemChange(item.productId)}
+                                disabled={isOutOfStock}
                               />
                             </label>
                           </td>
@@ -329,6 +337,12 @@ const Cart = () => {
                               >
                                 <h6 className="product-link">{item.productName}</h6>
                               </Link>
+                              {isOutOfStock && (
+                                <p className="text-danger">Out of stock</p>
+                              )}
+                              {isLowStock && (
+                                <p className="text-warning">Low stock: only {item.stock} left!</p>
+                              )}
                             </div>
                           </td>
                           <td className="cart__price">{formatPrice(item.price)}</td>
@@ -341,13 +355,13 @@ const Cart = () => {
                                   value="-"
                                   className="minus"
                                   onClick={() => handleMinus(item.productId, item.quantity)}
+                                  disabled={isOutOfStock}
                                 />
                                 <input
-                                  id="quanity"
+                                  id="quantity"
                                   type="number"
                                   step="1"
                                   min="1"
-                                  max=""
                                   name="quantity"
                                   defaultValue={item.quantity}
                                   onBlur={(e) =>
@@ -362,6 +376,7 @@ const Cart = () => {
                                   onKeyDown={(e) => handleQuantityKeyDown(item.productId, e.key)}
                                   title="Qty"
                                   className="input-text qty text"
+                                  disabled={isOutOfStock}
                                 />
                                 <input
                                   id="plus-button"
@@ -369,21 +384,20 @@ const Cart = () => {
                                   value="+"
                                   className="plus"
                                   onClick={() => handlePlus(item.productId, item.quantity)}
+                                  disabled={isOutOfStock}
                                 />
                               </div>
                             </div>
                           </td>
                           <td className="cart__total">{calculateProductPrice(item)}</td>
                           <td className="cart__close">
-                            {' '}
                             <button
                               className="remove_product"
-                              onClick={() => {
-                                openRemoveConfirmDialog(item.productId);
-                              }}
+                              onClick={() => openRemoveConfirmDialog(item.productId)}
+                              disabled={isOutOfStock}
                             >
                               <i className="bi bi-x-lg fs-5"></i>
-                            </button>{' '}
+                            </button>
                           </td>
                         </tr>
                       );