From 5f3d441fcc9cd6c52320e3cbc481a17d665d542c Mon Sep 17 00:00:00 2001 From: Shivani Singh Date: Tue, 11 Nov 2025 10:10:42 -0500 Subject: [PATCH 1/7] Add handleRemove and item subtotal functions --- src/CartItem.jsx | 46 ++++++++++++++++++++++++++++++++++++++++++--- src/CartSlice.jsx | 19 +++++++++++++++++-- src/ProductList.jsx | 38 ++++++++++++++++++++++++++++++++++++- 3 files changed, 97 insertions(+), 6 deletions(-) diff --git a/src/CartItem.jsx b/src/CartItem.jsx index e06317433f..dde7081519 100644 --- a/src/CartItem.jsx +++ b/src/CartItem.jsx @@ -9,27 +9,67 @@ const CartItem = ({ onContinueShopping }) => { // Calculate total amount for all products in the cart const calculateTotalAmount = () => { - + let total = 0; + + cart.forEach((item) => { + // Extract cost as a number (remove "$" and parse) + const cost = parseFloat(item.cost.substring(1)); + + // Multiply cost by quantity + const itemTotal = cost * item.quantity; + + // Add to running total + total += itemTotal; + }); + + return total; }; const handleContinueShopping = (e) => { - + e.preventDefault(); + onContinueShopping(e); }; + const handleCheckoutShopping = (e) => { + alert('Functionality to be added for future reference'); +}; const handleIncrement = (item) => { + dispatch( + updateQuantity({ + name: item.name, + quantity: item.quantity + 1, // increase by 1 + }) + ); }; const handleDecrement = (item) => { - + if (item.quantity > 1) { + // Decrease quantity + dispatch( + updateQuantity({ + name: item.name, + quantity: item.quantity - 1, + }) + ); + } else { + // Remove item entirely + dispatch(removeItem({ name: item.name })); + } }; const handleRemove = (item) => { + dispatch(removeItem({ name: item.name })); }; // Calculate total cost based on quantity for an item const calculateTotalCost = (item) => { + const unitPrice = parseFloat(item.cost.substring(1)); + + // Multiply by quantity to get subtotal + const totalCost = unitPrice * item.quantity; + }; return ( diff --git a/src/CartSlice.jsx b/src/CartSlice.jsx index 32b8761ed0..88777fc709 100644 --- a/src/CartSlice.jsx +++ b/src/CartSlice.jsx @@ -7,12 +7,27 @@ export const CartSlice = createSlice({ }, reducers: { addItem: (state, action) => { - + const { name, image, cost } = action.payload; // Destructure product details from the action payload + // Check if the item already exists in the cart by comparing names + const existingItem = state.items.find(item => item.name === name); + if (existingItem) { + // If item already exists in the cart, increase its quantity + existingItem.quantity++; + } else { + // If item does not exist, add it to the cart with quantity 1 + state.items.push({ name, image, cost, quantity: 1 }); + } }, removeItem: (state, action) => { + state.items = state.items.filter(item => item.name !== action.payload); }, updateQuantity: (state, action) => { - +const { name, quantity } = action.payload; // Destructure the product name and new quantity from the action payload +// Find the item in the cart that matches the given name +const itemToUpdate = state.items.find(item => item.name === name); +if (itemToUpdate) { + itemToUpdate.quantity = quantity; // If the item is found, update its quantity to the new value +} }, }, diff --git a/src/ProductList.jsx b/src/ProductList.jsx index 7682c04fc4..a74a308469 100644 --- a/src/ProductList.jsx +++ b/src/ProductList.jsx @@ -4,6 +4,7 @@ import CartItem from './CartItem'; 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({}); const plantsArray = [ { @@ -248,6 +249,14 @@ function ProductList({ onHomeClick }) { setShowCart(false); // Hide the cart when navigating to About Us }; + const handleAddToCart = (product) => { + dispatch(addItem(product)); // Dispatch the action to add the product to the cart (Redux action) + setAddedToCart((prevState) => ({ // Update the local state to reflect that the product has been added + ...prevState, // Spread the previous state to retain existing entries + [product.name]: true, // Set the current product's name as a key with value 'true' to mark it as added + })); +}; + const handleContinueShopping = (e) => { e.preventDefault(); setShowCart(false); @@ -274,7 +283,34 @@ function ProductList({ onHomeClick }) { {!showCart ? (
- + {plantsArray.map((category, index) => ( // Loop through each category in plantsArray +
{/* Unique key for each category div */} +

+
{category.category}
{/* Display the category name */} +

+
{/* Container for the list of plant cards */} + {category.plants.map((plant, plantIndex) => ( // Loop through each plant in the current category +
{/* Unique key for each plant card */} + {plant.name} +
{plant.name}
{/* Display plant name */} + {/* Display other plant details like description and cost */} +
{plant.description}
{/* Display plant description */} +
${plant.cost}
{/* Display plant cost */} + +
+ ))} +
+
+))}
) : ( From fe48a613d2285ef7a99f673f2c79bb5746f017be Mon Sep 17 00:00:00 2001 From: singhshivani81 <66040496+singhshivani81@users.noreply.github.com> Date: Wed, 12 Nov 2025 15:14:05 +0530 Subject: [PATCH 2/7] Update ProductList.jsx --- src/ProductList.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ProductList.jsx b/src/ProductList.jsx index a74a308469..7eeac5a87a 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 From 7b6e6f86f39b74ddc1ed008d6548c048e73c8b3a Mon Sep 17 00:00:00 2001 From: singhshivani81 <66040496+singhshivani81@users.noreply.github.com> Date: Wed, 12 Nov 2025 15:15:39 +0530 Subject: [PATCH 3/7] Update ProductList.jsx --- src/ProductList.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/ProductList.jsx b/src/ProductList.jsx index 7eeac5a87a..33511b7fc4 100644 --- a/src/ProductList.jsx +++ b/src/ProductList.jsx @@ -7,6 +7,8 @@ function ProductList({ onHomeClick }) { const [showPlants, setShowPlants] = useState(false); // State to control the visibility of the About Us page const [addedToCart, setAddedToCart] = useState({}); + const dispatch = useDispatch(); + const plantsArray = [ { category: "Air Purifying Plants", From d5e2aa51446ce687bbc37b896716c0795108da92 Mon Sep 17 00:00:00 2001 From: singhshivani81 <66040496+singhshivani81@users.noreply.github.com> Date: Wed, 12 Nov 2025 17:39:51 +0530 Subject: [PATCH 4/7] Update ProductList.jsx --- src/ProductList.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ProductList.jsx b/src/ProductList.jsx index 33511b7fc4..e7e09496d2 100644 --- a/src/ProductList.jsx +++ b/src/ProductList.jsx @@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'; import './ProductList.css' import CartItem from './CartItem'; import { addItem } from './CartSlice'; +import { useDispatch } from 'react-redux'; function ProductList({ onHomeClick }) { const [showCart, setShowCart] = useState(false); const [showPlants, setShowPlants] = useState(false); // State to control the visibility of the About Us page From 31a392841ea26c7d939fdd7474ecf82158ba3054 Mon Sep 17 00:00:00 2001 From: singhshivani81 <66040496+singhshivani81@users.noreply.github.com> Date: Wed, 12 Nov 2025 17:41:10 +0530 Subject: [PATCH 5/7] Update CartSlice.jsx --- src/CartSlice.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/CartSlice.jsx b/src/CartSlice.jsx index 88777fc709..b47ff97178 100644 --- a/src/CartSlice.jsx +++ b/src/CartSlice.jsx @@ -19,7 +19,8 @@ export const CartSlice = createSlice({ } }, 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); }, updateQuantity: (state, action) => { const { name, quantity } = action.payload; // Destructure the product name and new quantity from the action payload From e6335cfcfcb54c0ac44f9f216614380c7f24cee1 Mon Sep 17 00:00:00 2001 From: singhshivani81 <66040496+singhshivani81@users.noreply.github.com> Date: Wed, 12 Nov 2025 17:42:01 +0530 Subject: [PATCH 6/7] Update CartItem.jsx --- src/CartItem.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/CartItem.jsx b/src/CartItem.jsx index dde7081519..7c217df179 100644 --- a/src/CartItem.jsx +++ b/src/CartItem.jsx @@ -97,7 +97,7 @@ const CartItem = ({ onContinueShopping }) => {

- +
); From 4278dedff7185f68997997c9712a5c1c5a6bff90 Mon Sep 17 00:00:00 2001 From: singhshivani81 <66040496+singhshivani81@users.noreply.github.com> Date: Wed, 12 Nov 2025 17:44:20 +0530 Subject: [PATCH 7/7] Update CartItem.jsx --- src/CartItem.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/CartItem.jsx b/src/CartItem.jsx index 7c217df179..ef9b77747a 100644 --- a/src/CartItem.jsx +++ b/src/CartItem.jsx @@ -97,7 +97,7 @@ const CartItem = ({ onContinueShopping }) => {

- +
);