test version demo

src/CartItem.jsx

@@ -9,33 +9,65 @@ const CartItem = ({ onContinueShopping }) => {
 
   // Calculate total amount for all products in the cart
   const calculateTotalAmount = () => {
-
+    let total_cart_amount =0;
+    cart.forEach(item => {
+        const itemCost =parseFloat(item.cost.replace('$',''));
+        total_cart_amount += itemCost * item.updateQuantity;
+    });
+    return total_cart_amount;
+  };
+
+  const handleCheckoutShopping = (e) => {
+    alert('coming!');
+
   };
 
   const handleContinueShopping = (e) => {
-
+    if (e) e.preventDefault();
+    onContinueShopping(e);
   };
 
 
 
   const handleIncrement = (item) => {
+    const newQuantity = item.quantity + 1;
+    dispatch(updateQuantity({name: item.name,quantity:
+    newQuantity}));
+    console.log("Item quantity incremented by 1: ", newQuantity,
+item);
   };
 
   const handleDecrement = (item) => {
-
+    if (item.quantity > 0) {
+        const newQuantity = item.quantity - 1;
+        if (newQuantity === 0) {
+          dispatch(removeItem({ name: item.name }));
+          console.log("Item removed quantity went below 1:", item);
+        } else {
+          dispatch(updateQuantity({ name: item.name, quantity: newQuantity }));
+          console.log("Item quantity decremented by 1: ", newQuantity, item);
+        }
+      } else {
+        dispatch(removeItem({ name: item.name }));
+        console.log("Item removed because item quantity was 0:", item);
+      }
   };
 
   const handleRemove = (item) => {
+    dispatch(removeItem({name: item.name}));
+    console.log("Item removed:", item);
   };
 
   // Calculate total cost based on quantity for an item
   const calculateTotalCost = (item) => {
+    const itemCost = parseFloat(item.cost.replace('$', ''));
+    return itemCost * item.quantity;
   };
 
   return (
     <div className="cart-container">
       <h2 style={{ color: 'black' }}>Total Cart Amount: ${calculateTotalAmount()}</h2>
-      <div>
+      <div className='cart-items'>
         {cart.map(item => (
           <div className="cart-item" key={item.name}>
             <img className="cart-item-image" src={item.image} alt={item.name} />
@@ -57,7 +89,7 @@ const CartItem = ({ onContinueShopping }) => {
       <div className="continue_shopping_btn">
         <button className="get-started-button" onClick={(e) => handleContinueShopping(e)}>Continue Shopping</button>
         <br />
-        <button className="get-started-button1">Checkout</button>
+        <button className="get-started-button1"  onClick={(e) => handleCheckOutShopping(e)}>Checkout</button>
       </div>
     </div>
   );

src/CartSlice.jsx

@@ -4,16 +4,34 @@ export const CartSlice = createSlice({
   name: 'cart',
   initialState: {
     items: [], // Initialize items as an empty array
+    totalQuantity: 0,
   },
   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);
+        const {name} = action.payload;
+        state.items = state.items.filter(item => item.name !== name);
+        state.totalQuantity=state.items.reduce((total, item) =>
+        total +item.quantity, 0);
     },
     updateQuantity: (state, action) => {
 
-
+    const { name, quantity } = action.payload;
+const itemToUpdate = state.items.find(item => item.name === name);
+if (itemToUpdate) {
+  itemToUpdate.quantity = quantity;
+  state.totalQuantity=state.items.reduce((total, item) =>
+  total +item.quantity, 0);
+}
     },
   },
 });

src/ProductList.jsx

@@ -1,9 +1,17 @@
 import React, { useState,useEffect } from 'react';
 import './ProductList.css'
 import CartItem from './CartItem';
+import addItem from './CartSlice';
+import { useDispatch, useSelector } from 'react-redux';
+
 function ProductList() {
+    const dispatch=useDispatch();
+    const cart= useSelector((state) => state.cart.items);
+    const totalQuantity = useSelector((state) => state.cart.totalQuantity);
+    const productStatus = useSelector(state => state.cart.productStatus);
     const [showCart, setShowCart] = useState(false); 
     const [showPlants, setShowPlants] = useState(false); // State to control the visibility of the About Us page
+    const [addedToCart, setAddedToCart] = useState({});
 
     const plantsArray = [
         {
@@ -243,9 +251,20 @@ const handlePlantsClick = (e) => {
 };
 
    const handleContinueShopping = (e) => {
-    e.preventDefault();
+    if (e)e.preventDefault();
     setShowCart(false);
   };
+
+  const handleAddToCart = (product,e) => {
+    if (e)e.preventDefault();
+    console.log(dispatch(addItem(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}>
@@ -268,7 +287,24 @@ const handlePlantsClick = (e) => {
         </div>
         {!showCart? (
         <div className="product-grid">
-
+            {plantsArray.map((category, index) => (
+    <div key={index}>
+        <h1><div>{category.category}</div></h1>
+        <div className="product-list">
+            {category.plants.map((plant, plantIndex) => (
+            <div className="product-card" key={plantIndex}>
+                <img className="product-image" src={plant.image} alt={plant.name} />
+                <div className="product-title">{plant.name}</div>
+                <div className="product-title">{plant.description}</div>
+                <div className="product-title">{plant.cost}</div>
+                {/*Similarly like the above plant.name show other details like description and cost*/}
+                {/*<button  className="product-button" onClick={() => handleAddToCart(plant)}>Add to Cart</button>*/}
+                <button  className="product-button" onClick={(e) => handleAddToCart(plant,e)}>Add to Cart</button>
+            </div>
+            ))}
+        </div>
+    </div>
+    ))}
 
         </div>
  ) :  (