From c71004417c100a523bb05263f9dad93372c9a21f Mon Sep 17 00:00:00 2001
From: GayathriAMVarman <103264236+GayathriAMVarman@users.noreply.github.com>
Date: Tue, 7 Oct 2025 13:39:13 +0530
Subject: [PATCH 1/2] Update ProductList.jsx

---
 src/ProductList.jsx | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/ProductList.jsx b/src/ProductList.jsx
index 7682c04fc4..9bfc448564 100644
--- a/src/ProductList.jsx
+++ b/src/ProductList.jsx
@@ -274,6 +274,34 @@ function ProductList({ onHomeClick }) {
             </div>
             {!showCart ? (
                 <div className="product-grid">
+                    {plantsArray.map((category, index) => ( // Loop through each category in plantsArray
+  <div key={index}> {/* Unique key for each category div */}
+    <h1>
+      <div>{category.category}</div> {/* Display the category name */}
+    </h1>
+    <div className="product-list"> {/* Container for the list of plant cards */}
+      {category.plants.map((plant, plantIndex) => ( // Loop through each plant in the current category
+        <div className="product-card" key={plantIndex}> {/* Unique key for each plant card */}
+          <img 
+            className="product-image" 
+            src={plant.image} // Display the plant image
+            alt={plant.name} // Alt text for accessibility
+          />
+          <div className="product-title">{plant.name}</div> {/* Display plant name */}
+          {/* Display other plant details like description and cost */}
+          <div className="product-description">{plant.description}</div> {/* Display plant description */}
+          <div className="product-cost">${plant.cost}</div> {/* Display plant cost */}
+          <button
+            className="product-button"
+            onClick={() => handleAddToCart(plant)} // Handle adding plant to cart
+          >
+            Add to Cart
+          </button>
+        </div>
+      ))}
+    </div>
+  </div>
+))}
 
 
                 </div>

From 0fad652696fdbaf93c59eefd6d5ae8c0d19a65d5 Mon Sep 17 00:00:00 2001
From: GayathriAMVarman <gayathri.amv@gmail.com>
Date: Thu, 9 Oct 2025 04:31:43 -0400
Subject: [PATCH 2/2] save latest changes

---
 src/CartItem.jsx    | 31 +++++++++++++++++++++++++-----
 src/CartSlice.jsx   | 12 +++++++++---
 src/ProductList.jsx | 47 +++++++++++++++++++++++----------------------
 3 files changed, 59 insertions(+), 31 deletions(-)

diff --git a/src/CartItem.jsx b/src/CartItem.jsx
index e06317433f..5adf71a698 100644
--- a/src/CartItem.jsx
+++ b/src/CartItem.jsx
@@ -9,27 +9,48 @@ const CartItem = ({ onContinueShopping }) => {
 
   // Calculate total amount for all products in the cart
   const calculateTotalAmount = () => {
- 
+    let total = 0;
+
+    cart.forEach((item) => {
+      const costValue = parseFloat(item.cost.substring(1)); // remove '$'
+      total += costValue * item.quantity;
+    });
+
+    return total.toFixed(2);   
   };
 
   const handleContinueShopping = (e) => {
-   
+   alert('Click on Plants Tab to continue shopping!')
   };
 
 
 
   const handleIncrement = (item) => {
-  };
+    const itemToIncrease = state.items.find(item=>item.name===name);    
+        if(itemToIncrease)
+            itemToIncrease.quantity +=1;
+};
 
   const handleDecrement = (item) => {
-   
+   const itemToDecrease = state.items.find(item=>item.name===name);    
+        if(itemToDecrease && itemToDecrease.quantity > 0)
+            itemToDecrease.quantity -=1;
   };
 
   const handleRemove = (item) => {
-  };
+    dispatch(removeItem(item));
+};
 
   // Calculate total cost based on quantity for an item
   const calculateTotalCost = (item) => {
+    let total = 0;
+
+    cart.forEach((item) => {
+      const costValue = parseFloat(item.cost.substring(1)); // remove '$'
+      total += costValue * item.quantity;
+    });
+
+    return total.toFixed(2);
   };
 
   return (
diff --git a/src/CartSlice.jsx b/src/CartSlice.jsx
index 32b8761ed0..0de1fe5659 100644
--- a/src/CartSlice.jsx
+++ b/src/CartSlice.jsx
@@ -7,13 +7,19 @@ export const CartSlice = createSlice({
   },
   reducers: {
     addItem: (state, action) => {
-    
+        const {name,image,quantity}= action.payload;
+        const existingItem = state.items.find((item)=>item.name===name);
+        if(existingItem)
+            existingItem.quantity +=1;
+        else
+           state.items.push({name,image,quantity:1});
     },
     removeItem: (state, action) => {
+        const name = action.payload;
+        state.items = state.items.filter(item=>item.name===name)
     },
     updateQuantity: (state, action) => {
-
-    
+        const name = action.payload;
     },
   },
 });
diff --git a/src/ProductList.jsx b/src/ProductList.jsx
index 9bfc448564..58fcb6d962 100644
--- a/src/ProductList.jsx
+++ b/src/ProductList.jsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import './ProductList.css'
 import CartItem from './CartItem';
+import { addItem } from './CartSlice';
 function ProductList({ onHomeClick }) {
     const [showCart, setShowCart] = useState(false);
     const [showPlants, setShowPlants] = useState(false); // State to control the visibility of the About Us page
@@ -275,29 +276,29 @@ function ProductList({ onHomeClick }) {
             {!showCart ? (
                 <div className="product-grid">
                     {plantsArray.map((category, index) => ( // Loop through each category in plantsArray
-  <div key={index}> {/* Unique key for each category div */}
-    <h1>
-      <div>{category.category}</div> {/* Display the category name */}
-    </h1>
-    <div className="product-list"> {/* Container for the list of plant cards */}
-      {category.plants.map((plant, plantIndex) => ( // Loop through each plant in the current category
-        <div className="product-card" key={plantIndex}> {/* Unique key for each plant card */}
-          <img 
-            className="product-image" 
-            src={plant.image} // Display the plant image
-            alt={plant.name} // Alt text for accessibility
-          />
-          <div className="product-title">{plant.name}</div> {/* Display plant name */}
-          {/* Display other plant details like description and cost */}
-          <div className="product-description">{plant.description}</div> {/* Display plant description */}
-          <div className="product-cost">${plant.cost}</div> {/* Display plant cost */}
-          <button
-            className="product-button"
-            onClick={() => handleAddToCart(plant)} // Handle adding plant to cart
-          >
-            Add to Cart
-          </button>
-        </div>
+                    <div key={index}> {/* Unique key for each category div */}
+                        <h1>
+                            <div>{category.category}</div> {/* Display the category name */}
+                        </h1>
+                    <div className="product-list"> {/* Container for the list of plant cards */}
+                        {category.plants.map((plant, plantIndex) => ( // Loop through each plant in the current category
+                            <div className="product-card" key={plantIndex}> {/* Unique key for each plant card */}
+                            <img 
+                                className="product-image" 
+                                src={plant.image} // Display the plant image
+                                alt={plant.name} // Alt text for accessibility
+                            />
+                            <div className="product-title">{plant.name}</div> {/* Display plant name */}
+                                {/* Display other plant details like description and cost */}
+                            <div className="product-description">{plant.description}</div> {/* Display plant description */}
+                            <div className="product-cost">${plant.cost}</div> {/* Display plant cost */}
+                    <button
+                        className="product-button"
+                        onClick={() => addItem} // Handle adding plant to cart
+                    >
+                        Add to Cart
+                    </button>
+                </div>
       ))}
     </div>
   </div>