IBM e-Plant Shopping Project Submission

src/AboutUs.jsx

@@ -1,29 +1,34 @@
-import React from 'react';
-import './AboutUs.css';
+import React from "react";
+import "./AboutUs.css";
 
 function AboutUs() {
   return (
     <div className="about-us-container">
       {/* <h1 className="about-us-heading">About Us</h1> */}
-      <p className="about-us-description">Welcome to Paradise Nursery, where green meets serenity!</p>
+      <p className="about-us-description">
+        Welcome to Paradise Nursery, where green meets serenity!
+      </p>
       <p className="about-us-content">
-        At Paradise Nursery, we are passionate about bringing nature closer to you. Our mission is to provide a wide range of 
-        high-quality plants that not only enhance the beauty of your surroundings but also contribute to a healthier and 
-        more sustainable lifestyle. From air-purifying plants to aromatic fragrant ones, we have something for every 
-        plant enthusiast.
+        At Paradise Nursery, we are passionate about bringing nature closer to
+        you. Our mission is to provide a wide range of high-quality plants that
+        not only enhance the beauty of your surroundings but also contribute to
+        a healthier and more sustainable lifestyle. From air-purifying plants to
+        aromatic fragrant ones, we have something for every plant enthusiast.
       </p>
       {/* <p className="plant_logo_left"><img src="https://p1.hiclipart.com/preview/922/979/640/green-leaf-logo-emoji-seedling-emoticon-sticker-plant-plant-stem-flower-png-clipart-thumbnail.jpg" height='50px' width='50px' alt="" /></p> */}
       <p className="about-us-content">
-        Our team of experts is dedicated to ensuring that each plant meets our strict standards of quality and care. 
-        Whether you're a seasoned gardener or just starting your green journey, we're here to support you every step of 
-        the way. Feel free to explore our collection, ask questions, and let us help you find the perfect plant for your 
-        home or office.
+        Our team of experts is dedicated to ensuring that each plant meets our
+        strict standards of quality and care. Whether you're a seasoned gardener
+        or just starting your green journey, we're here to support you every
+        step of the way. Feel free to explore our collection, ask questions, and
+        let us help you find the perfect plant for your home or office.
       </p>
       {/* <p className="plant_logo_right"><img src="https://p1.hiclipart.com/preview/922/979/640/green-leaf-logo-emoji-seedling-emoticon-sticker-plant-plant-stem-flower-png-clipart-thumbnail.jpg" height='50px' width='50px' alt="" /></p> */}
 
       <p className="about-us-content">
-        Join us in our mission to create a greener, healthier world. Visit Paradise Nursery today and experience the 
-        beauty of nature right at your doorstep.
+        Join us in our mission to create a greener, healthier world. Visit
+        Paradise Nursery today and experience the beauty of nature right at your
+        doorstep.
       </p>
     </div>
   );

src/App.jsx

@@ -1,11 +1,9 @@
-
-import React, { useState } from 'react';
-import ProductList from './ProductList';
-import './App.css';
-import AboutUs from './AboutUs';
+import React, { useState } from "react";
+import ProductList from "./ProductList";
+import "./App.css";
+import AboutUs from "./AboutUs";
 
 function App() {
-
   const [showProductList, setShowProductList] = useState(false);
 
   const handleGetStartedClick = () => {
@@ -18,32 +16,33 @@ function App() {
 
   return (
     <div className="app-container">
-      <div className={`landing-page ${showProductList ? 'fade-out' : ''}`}>
+      <div className={`landing-page ${showProductList ? "fade-out" : ""}`}>
         <div className="background-image"></div>
         <div className="content">
-         <div className="landing_content">
-         <h1>Welcome To Paradise Nursery</h1>
-          <div className="divider"></div>
-          <p>Where Green Meets Serenity</p>
-         
-          <button className="get-started-button" onClick={handleGetStartedClick}>
-            Get Started
-          </button>
-         </div>
-          <div className="aboutus_container">
-          <AboutUs/>
+          <div className="landing_content">
+            <h1>Welcome To Paradise Nursery</h1>
+            <div className="divider"></div>
+            <p>Where Green Meets Serenity</p>
+
+            <button
+              className="get-started-button"
+              onClick={handleGetStartedClick}
+            >
+              Get Started
+            </button>
           </div>
+          <div className="aboutus_container">
+            <AboutUs />
           </div>
-
+        </div>
       </div>
-      <div className={`product-list-container ${showProductList ? 'visible' : ''}`}>
-        <ProductList onHomeClick={handleHomeClick}/>
+      <div
+        className={`product-list-container ${showProductList ? "visible" : ""}`}
+      >
+        <ProductList onHomeClick={handleHomeClick} />
       </div>
     </div>
   );
 }
 
 export default App;
-
-
-

src/CartItem.jsx

@@ -1,68 +1,126 @@
-import React from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import { removeItem, updateQuantity } from './CartSlice';
-import './CartItem.css';
+import React from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { removeItem, updateQuantity } from "./CartSlice";
+import "./CartItem.css";
 
 const CartItem = ({ onContinueShopping }) => {
-  const cart = useSelector(state => state.cart.items);
+  const cart = useSelector((state) => state.cart.items);
   const dispatch = useDispatch();
 
   // Calculate total amount for all products in the cart
   const calculateTotalAmount = () => {
-
+    let sum = 0;
+    cart.forEach((element) => {
+      sum += parseFloat(element.cost.substring(1)) * element.quantity;
+    });
+    console.log(sum);
+    return sum;
   };
 
-  const handleContinueShopping = (e) => {
-
+  const handleCheckoutShopping = (e) => {
+    alert(
+      `Your product will be shipped:\n${calculateTotalAmount()}$ is price.`
+    );
   };
 
-
-
   const handleIncrement = (item) => {
+    dispatch(
+      updateQuantity({
+        name: item.name,
+        quantity: item.quantity + 1,
+      })
+    );
   };
 
   const handleDecrement = (item) => {
-
+    if (item.quantity > 1) {
+      dispatch(
+        updateQuantity({
+          name: item.name,
+          quantity: item.quantity - 1,
+        })
+      );
+    }
   };
 
   const handleRemove = (item) => {
+    dispatch(removeItem(item.name));
   };
 
   // Calculate total cost based on quantity for an item
   const calculateTotalCost = (item) => {
+    return item.quantity * parseFloat(item.cost.substring(1));
+  };
+
+  const handleContinueShopping = (e) => {
+    if (onContinueShopping) {
+      onContinueShopping();
+    }
   };
 
   return (
     <div className="cart-container">
-      <h2 style={{ color: 'black' }}>Total Cart Amount: ${calculateTotalAmount()}</h2>
+      <h2 style={{ color: "black" }}>
+        Total Cart Amount: ${calculateTotalAmount()}
+      </h2>
       <div>
-        {cart.map(item => (
+        {cart.map((item) => (
           <div className="cart-item" key={item.name}>
             <img className="cart-item-image" src={item.image} alt={item.name} />
             <div className="cart-item-details">
               <div className="cart-item-name">{item.name}</div>
               <div className="cart-item-cost">{item.cost}</div>
               <div className="cart-item-quantity">
-                <button className="cart-item-button cart-item-button-dec" onClick={() => handleDecrement(item)}>-</button>
-                <span className="cart-item-quantity-value">{item.quantity}</span>
-                <button className="cart-item-button cart-item-button-inc" onClick={() => handleIncrement(item)}>+</button>
+                <button
+                  className="cart-item-button cart-item-button-dec"
+                  onClick={() => handleDecrement(item)}
+                >
+                  -
+                </button>
+                <span className="cart-item-quantity-value">
+                  {item.quantity}
+                </span>
+                <button
+                  className="cart-item-button cart-item-button-inc"
+                  onClick={() => handleIncrement(item)}
+                >
+                  +
+                </button>
+              </div>
+              <div className="cart-item-total">
+                Total: ${calculateTotalCost(item)}
               </div>
-              <div className="cart-item-total">Total: ${calculateTotalCost(item)}</div>
-              <button className="cart-item-delete" onClick={() => handleRemove(item)}>Delete</button>
+              <button
+                className="cart-item-delete"
+                onClick={() => handleRemove(item)}
+              >
+                Delete
+              </button>
             </div>
           </div>
         ))}
       </div>
-      <div style={{ marginTop: '20px', color: 'black' }} className='total_cart_amount'></div>
+      <div
+        style={{ marginTop: "20px", color: "black" }}
+        className="total_cart_amount"
+      ></div>
       <div className="continue_shopping_btn">
-        <button className="get-started-button" onClick={(e) => handleContinueShopping(e)}>Continue Shopping</button>
+        <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;
-
-

src/CartSlice.jsx

@@ -1,19 +1,34 @@
-import { createSlice } from '@reduxjs/toolkit';
+import { createSlice } from "@reduxjs/toolkit";
+import { act } from "react";
 
 export const CartSlice = createSlice({
-  name: 'cart',
+  name: "cart",
   initialState: {
     items: [], // Initialize items as an empty array
   },
   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
+      }
     },
   },
 });