New branch

.dependencygraph/data.json

@@ -0,0 +1 @@
+{"dependencyTree":{"children":[]},"dependencyNodes":{}}

.dependencygraph/setting.json

@@ -0,0 +1,15 @@
+{
+  "entryFilePath": "src\\extension.ts",
+  "alias": {
+    "@": "./src"
+  },
+  "resolveExtensions": [
+    ".js",
+    ".jsx",
+    ".ts",
+    ".tsx",
+    ".vue",
+    ".scss",
+    ".less"
+  ]
+}

src/CartItem.jsx

@@ -9,16 +9,31 @@ const CartItem = ({ onContinueShopping }) => {
 
   // Calculate total amount for all products in the cart
   const calculateTotalAmount = () => {
-
-  };
+    let total = 0;
+
+    if (!cart || cart.length === 0) return total;
+
+    cart.forEach(item => {
+        // Extract cost (remove $ and convert to number)
+        const cost = parseFloat(item.cost.substring(1));
+        // Get quantity
+        const quantity = item.quantity || 0;
+        // Add to running total
+        total += cost * quantity;
+    });
+
+    // Return formatted total with 2 decimal places
+    return total.toFixed(2);
+};
 
   const handleContinueShopping = (e) => {
 
   };
 
 
-
   const handleIncrement = (item) => {
+    const updatedItem = { ...item, quantity: item.quantity + 1 };
+    dispatch(updateQuantity(updatedItem));
   };
 
   const handleDecrement = (item) => {
@@ -30,7 +45,10 @@ const CartItem = ({ onContinueShopping }) => {
 
   // Calculate total cost based on quantity for an item
   const calculateTotalCost = (item) => {
-  };
+    if (!item) return "0.00";
+    const cost = parseFloat(item.cost.substring(1));
+    return (cost * item.quantity).toFixed(2);
+};
 
   return (
     <div className="cart-container">

src/CartSlice.jsx

@@ -7,17 +7,30 @@ export const CartSlice = createSlice({
   },
   reducers: {
     addItem: (state, action) => {
-
+      const { name, image, cost } = action.payload;
+      const existingItem = state.items.find(item => item.name === name);
+      if (existingItem) {
+        existingItem.quantity++;
+      } else {
+        state.items.push({ name, image, cost, quantity: 1 });
+      }
     },
+
     removeItem: (state, action) => {
+      state.items = state.items.filter(item => item.name !== action.payload);
     },
-    updateQuantity: (state, action) => {
 
-
-    },
-  },
+    updateQuantity: (state, action) => {
+      const { name, quantity } = action.payload;
+      const itemToUpdate = state.items.find(item => item.name === name);
+      if (itemToUpdate) {
+        itemToUpdate.quantity = quantity;
+      }
+    }
+  }
 });
 
 export const { addItem, removeItem, updateQuantity } = CartSlice.actions;
 
 export default CartSlice.reducer;
+

src/ProductList.jsx

@@ -1,9 +1,18 @@
 import React, { useState, useEffect } from 'react';
 import './ProductList.css'
 import CartItem from './CartItem';
+import { useDispatch } from 'react-redux';
+import CartSlice, { addItem, removeItem, updateQuantity } from './CartSlice'; // Import the reducer
+
+
 function ProductList({ onHomeClick }) {
     const [showCart, setShowCart] = useState(false);
     const [showPlants, setShowPlants] = useState(false); // State to control the visibility of the About Us page
+    const [addedToCart, setAddedToCart] = useState({}); // State to store the items added to the cart
+    const [cartItems, setCartItems] = useState([]); // State to store the items in the cart
+    const dispatch = useDispatch();
+
+
 
     const plantsArray = [
         {
@@ -252,6 +261,16 @@ function ProductList({ onHomeClick }) {
         e.preventDefault();
         setShowCart(false);
     };
+
+    const handleAddToCart = (product) => {
+        dispatch(addItem(product));
+        setAddedToCart((prevState) => ({
+           ...prevState,
+           [product.name]: true, // Set the product name as key and value as true to indicate it's added to cart
+         }));
+      };
+
+
     return (
         <div>
             <div className="navbar" style={styleObj}>
@@ -274,8 +293,24 @@ function ProductList({ onHomeClick }) {
             </div>
             {!showCart ? (
                 <div className="product-grid">
-
-
+                    <div className="product-grid">
+                        {plantsArray.map((category, index) => (
+                            <div key={index}>
+                                <h1>{category.category}</h1>
+                                <div className="product-list">
+                                    {category.plants.map((plant, plantIndex) => (
+                                        <div className="product-card" key={plantIndex}>
+                                            <div className="product-title">{plant.name}</div>
+                                            <img className="product-image" src={plant.image} alt={plant.name}/>
+                                            <h5>{plant.description}</h5>
+                                            <h3>{plant.cost}</h3>
+                                            <button className="product-button" onClick={() => handleAddToCart(plant)}>Add to Cart</button>
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
                 </div>
             ) : (
                 <CartItem onContinueShopping={handleContinueShopping} />