Edited ProductList.jsx

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.aider*

src/App.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import ProductList from './Components/ProductList';
 import ShoppingCart from './Components/ShoppingCart';
+import SuperCoin from './Components/SuperCoin';
 import './App.css'
 const App = () => {
   return (
@@ -10,6 +11,7 @@ const App = () => {
         <h1 className='app-heading'>E-Commerce Application</h1>
         <ProductList />
         <ShoppingCart />
+        <SuperCoin />
       </div>
 
   );

src/Components/CartSlice.jsx

@@ -1,6 +1,54 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+    cartItems: [],
+  };
+
+const CartSlice = createSlice({
+  name: 'cart',
+  initialState,
+  reducers: {
+    addItemToCart(state, action) {
+        const existingItem = state.cartItems.find(item => item.id === action.payload.id);
+        if (existingItem) {
+          existingItem.quantity += 1;
+        } else {
+          state.cartItems.push({ ...action.payload, quantity: 1 });
+        }
+    },
+
+    removeItemFromCart(state, action) {
+        state.cartItems = state.cartItems.filter(item => item.id !== action.payload);
+    },
+
+    clearCart(state) {
+        state.cartItems = [];
+    },
+
+    increaseItemQuantity(state, action) {
+        const itemToIncrease = state.cartItems.find(item => item.id === action.payload);
+        if (itemToIncrease) {
+          itemToIncrease.quantity += 1;
+        }
+    },
+
+    decreaseItemQuantity(state, action) {
+        const itemToDecrease = state.cartItems.find(item => item.id === action.payload);
+        if (itemToDecrease && itemToDecrease.quantity > 1) {
+          itemToDecrease.quantity -= 1;
+        }
+      },
+  }
 
-const CartSlice = ({
-
 });
 
+export const {
+    addItemToCart,
+    removeItemFromCart,
+    clearCart,
+    increaseItemQuantity,
+    decreaseItemQuantity,
+  } = CartSlice.actions;
+  export default CartSlice.reducer;
+
 

src/Components/ProductList.jsx

@@ -1,20 +1,41 @@
 import React from 'react';
+import { useDispatch } from 'react-redux';
+import { useState } from 'react';
+import { addItemToCart } from './CartSlice';
 import './ProductList.css'; 
 
 const ProductList = () => {
+  const dispatch = useDispatch();
+  const [disabledProducts, setDisabledProducts] = useState([]); // State to store disabled products
 
   const products = [
     { id: 1, name: 'Product A', price: 60 },
     { id: 2, name: 'Product B', price: 75 },
     { id: 3, name: 'Product C', price: 30 },
   ];
 
+  const handleAddToCart = product => {
+    dispatch(addItemToCart(product));
+    setDisabledProducts([...disabledProducts, product.id]); // Mark the product as disabled
+  };
+
   return (
     <div className="product-list">
       <h2 className="product-list-title">Products</h2>
       <ul className="product-list-items">
-
-      </ul>
+        {products.map(product => (
+          <li key={product.id} className="product-list-item">
+          <span>{product.name} - ${product.price}</span>
+          <button
+            className={`add-to-cart-btn ${disabledProducts.includes(product.id) ? 'disabled' : ''}`}
+            onClick={() => handleAddToCart(product)}
+            disabled={disabledProducts.includes(product.id)} // Disable button if product is in disabledProducts
+            >
+            Add to Cart
+          </button>
+        </li>
+        ))}
+       </ul>
     </div>
   );
 };

src/Components/ShoppingCart.jsx

@@ -1,18 +1,51 @@
 import React from 'react';
-import './ShoppingCart.css'; 
+import { useDispatch, useSelector } from 'react-redux';
+import { removeItemFromCart, clearCart, increaseItemQuantity, decreaseItemQuantity } from './CartSlice'; // Assuming you have action creators for increasing and decreasing item quantity
+import './ShoppingCart.css';
 
 const ShoppingCart = () => {
 
+  const dispatch = useDispatch();
+  const cartItems = useSelector(state => state.cart.cartItems);
+  const totalAmount = cartItems.reduce((total, item) => total + item.price * item.quantity, 0);
+
+  const handleRemoveItem = itemId => {
+    dispatch(removeItemFromCart(itemId));
+  };
+
+  const handleClearCart = () => {
+    dispatch(clearCart());
+  };
+
+  const handleIncreaseQuantity = itemId => {
+    dispatch(increaseItemQuantity(itemId));
+  };
+
+  const handleDecreaseQuantity = itemId => {
+    dispatch(decreaseItemQuantity(itemId));
+  };
+
+
   return (
     <>
     <div className="shopping-cart">
       <h2 className="shopping-cart-title">Shopping Cart</h2>
       <ul className="cart-items">
-
+      {cartItems.map(item => (
+            <li key={item.id} className="cart-item">
+              <span>{item.name} - ${item.price}</span>
+              <div className="quantity-controls">
+                <button className="quantity-control-btn" onClick={() => handleDecreaseQuantity(item.id)}>-</button>
+                <span> {item.quantity}</span>
+                <button className="quantity-control-btn" onClick={() => handleIncreaseQuantity(item.id)}>+</button>
+              </div>
+              <button className="remove-item-btn" onClick={() => handleRemoveItem(item.id)}>Remove</button>
+            </li>
+          ))}       
       </ul>
-      <button className="clear-cart-btn">Clear Cart</button>
+      <button className="clear-cart-btn" onClick={handleClearCart}>Clear Cart</button>
     </div>
-
+    <div>{totalAmount ? <div>'The total amount is {totalAmount}</div> : ''}</div>
     </>
   );
 };

src/Components/SuperCoin.css

@@ -0,0 +1,36 @@
+.super-coins-container {
+  border: 2px solid #ffd700;
+  border-radius: 8px;
+  padding: 20px;
+  margin: 20px;
+  background-color: #fffdf0;
+}
+
+.super-coins-info {
+  text-align: center;
+}
+
+.coins-display {
+  margin: 15px 0;
+  font-size: 24px;
+}
+
+.coin-icon {
+  font-size: 32px;
+  margin-right: 10px;
+}
+
+.coin-amount {
+  font-weight: bold;
+  color: #ffa500;
+}
+
+.cart-details {
+  text-align: left;
+  margin-top: 15px;
+}
+
+.cart-details p {
+  margin: 5px 0;
+  color: #666;
+}

src/Components/SuperCoin.jsx

@@ -0,0 +1,41 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import './SuperCoin.css';
+
+const SuperCoin = () => {
+  const [superCoins, setSuperCoins] = useState(0);
+  const cartItems = useSelector(state => state.cart.cartItems);
+  const totalQuantity = cartItems.reduce((total, item) => total + item.quantity, 0);
+  const totalAmount = cartItems.reduce((total, item) => total + item.price * item.quantity, 0);
+
+  useEffect(() => {
+    if (totalAmount < 100) {
+      setSuperCoins(0);
+    } else if (totalAmount >= 100 && totalAmount < 200) {
+      setSuperCoins(10);
+    } else if (totalAmount >= 200 && totalAmount < 300) {
+      setSuperCoins(20);
+    } else {
+      setSuperCoins(30);
+    }
+  }, [totalAmount]);
+
+  return (
+    <div className="super-coins-container">
+      <div className="super-coins-info">
+        <h3>Super Coins Rewards</h3>
+        <div className="coins-display">
+          <span className="coin-icon">🪙</span>
+          <span className="coin-amount">{superCoins}</span>
+        </div>
+        <div className="cart-details">
+          <p>Total Items in Cart: {totalQuantity}</p>
+          <p>Total Amount: ${totalAmount}</p>
+          <p>Super Coins Earned: {superCoins}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SuperCoin;

src/main.jsx

@@ -2,8 +2,12 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
 import './index.css'
+import { Provider } from 'react-redux'
+import store from './store.js'
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
+ <Provider store={store}>
     <App />
+    </Provider>
   </React.StrictMode>,
-)
+)

src/store.js

@@ -0,0 +1,9 @@
+import { configureStore } from '@reduxjs/toolkit';
+import cartReducer from './Components/CartSlice';
+const store = configureStore({
+  reducer: {
+    cart: cartReducer,
+  },
+});
+
+export default store;