made changes in ProductList.jsx and Carditem.jsx

package.json

@@ -5,9 +5,11 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d dist",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite build; vite preview --host"
+    "preview": "vite build && vite preview --host"
   },
   "dependencies": {
     "@reduxjs/toolkit": "^2.2.3",
@@ -23,7 +25,7 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
-    "gh-pages": "^6.1.1",
+    "gh-pages": "^6.3.0",
     "vite": "^5.2.0"
   }
 }

src/CartItem.jsx

@@ -9,27 +9,51 @@ const CartItem = ({ onContinueShopping }) => {
 
   // Calculate total amount for all products in the cart
   const calculateTotalAmount = () => {
-
+    let total = 0;
+    cart.forEach(item => {
+      // Convert cost string (e.g., "$10") to number and multiply by quantity
+      total += parseFloat(item.cost.substring(1)) * item.quantity;
+    });
+    return total.toFixed(2); // Return with 2 decimal places
   };
 
   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
+    }));
   };
 
   const handleDecrement = (item) => {
-
+    if (item.quantity > 1) {
+      // If quantity is greater than 1, decrease by 1
+      dispatch(updateQuantity({
+        name: item.name,
+        quantity: item.quantity - 1
+      }));
+    } else {
+      // If quantity would become 0, remove the item
+      dispatch(removeItem(item.name));
+    }
   };
 
   const handleRemove = (item) => {
+    dispatch(removeItem(item.name));
   };
 
   // Calculate total cost based on quantity for an item
   const calculateTotalCost = (item) => {
+    const unitPrice = parseFloat(item.cost.substring(1));
+    return (unitPrice * item.quantity).toFixed(2);
   };
 
   return (
@@ -57,12 +81,10 @@ 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={handleCheckoutShopping}>Checkout</button>
       </div>
     </div>
   );
 };
 
-export default CartItem;
-
-
+export default CartItem;

src/CartSlice.jsx

@@ -7,17 +7,31 @@ 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
+      // 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
+      }
     },
   },
 });
 
 export const { addItem, removeItem, updateQuantity } = CartSlice.actions;
 
-export default CartSlice.reducer;
+export default CartSlice.reducer;