diff --git a/src/redux-store/CartStore/ducs.js b/src/redux-store/CartStore/ducs.js index 6c65769..f7e9bac 100644 --- a/src/redux-store/CartStore/ducs.js +++ b/src/redux-store/CartStore/ducs.js @@ -1,15 +1,18 @@ const initialState = { items: [], } + const cartactionTypes = { ADD_TO_CART: 'ADD_TO_CART', REMOVE_FROM_CART: 'REMOVE_FROM_CART', INCREASE_COUNT: 'INCREASE_COUNT', DECREASE_COUNT: 'DECREASE_COUNT', + UPDATE_QUANTITY: 'UPDATE_QUANTITY', // New action type LOAD_CART: 'LOAD_CART', CLEAR_CART: 'CLEAR_CART', } +// Action Creators export const addToCart = (product) => (dispatch, getState) => { dispatch({ type: cartactionTypes.ADD_TO_CART, @@ -42,6 +45,14 @@ export const decreaseCount = (productId) => (dispatch, getState) => { localStorage.setItem('cart', JSON.stringify(getState().cart.items)) } +export const updateQuantity = (productId, quantity) => (dispatch, getState) => { + dispatch({ + type: cartactionTypes.UPDATE_QUANTITY, + payload: { productId, quantity }, + }) + localStorage.setItem('cart', JSON.stringify(getState().cart.items)) +} + export const loadCart = () => (dispatch) => { const cartItems = JSON.parse(localStorage.getItem('cart')) || [] dispatch({ @@ -57,6 +68,7 @@ export const clearCart = () => (dispatch) => { localStorage.removeItem('cart') } +// Reducer export const cartReducer = (state = initialState, action) => { switch (action.type) { case cartactionTypes.LOAD_CART: @@ -98,6 +110,15 @@ export const cartReducer = (state = initialState, action) => { item._id === action.payload && item.count > 1 ? { ...item, count: item.count - 1 } : item, ), } + case cartactionTypes.UPDATE_QUANTITY: + return { + ...state, + items: state.items.map((item) => + item._id === action.payload.productId + ? { ...item, count: action.payload.quantity } + : item, + ), + } case cartactionTypes.CLEAR_CART: return { ...state, @@ -108,19 +129,14 @@ export const cartReducer = (state = initialState, action) => { } } -// src/store/cart/selectors.js - -// Selector to get all cart items +// Selectors export const selectCartItems = (state) => state.cart.items -// Selector to get the total count of items in the cart export const selectCartItemCount = (state) => state.cart.items.reduce((total, item) => total + item.count, 0) -// Selector to get the subtotal (sum of price * count) of items in the cart export const selectCartSubtotal = (state) => state.cart.items.reduce((total, item) => total + item.price * item.count, 0) -// Selector to check if a specific product is already in the cart export const selectIsProductInCart = (productId) => (state) => state.cart.items.some((item) => item._id === productId) diff --git a/src/views/pages/cart/shopingCart.js b/src/views/pages/cart/shopingCart.js index e2ec788..7c0544d 100644 --- a/src/views/pages/cart/shopingCart.js +++ b/src/views/pages/cart/shopingCart.js @@ -13,6 +13,7 @@ import { TableHead, TableRow, useMediaQuery, + TextField, } from '@mui/material' import ClearIcon from '@mui/icons-material/Clear' import { useDispatch, useSelector } from 'react-redux' @@ -23,7 +24,8 @@ import { decreaseCount, removeFromCart, selectCartItemCount, -} from '../../../redux-store/CartStore/ducs' // Adjust this path as per your project structure + updateQuantity, +} from '../../../redux-store/CartStore/ducs' const ShoppingCart = ({ handleTabChange }) => { const matches = useMediaQuery('(min-width:1200px)') @@ -35,7 +37,6 @@ const ShoppingCart = ({ handleTabChange }) => { // Calculate total GST for the entire cart const totalGST = cartItems.reduce((acc, item) => { - // console.log(item) const gstAmount = (item.price * item.GST) / 100 return acc + gstAmount * item.count }, 0) @@ -48,6 +49,13 @@ const ShoppingCart = ({ handleTabChange }) => { dispatch(increaseCount(productId)) } + const handleInputChange = (productId, value) => { + const quantity = parseInt(value, 10) + if (!isNaN(quantity) && quantity > 0) { + dispatch(updateQuantity(productId, quantity)) + } + } + const removeCartItemHandler = (productId) => { dispatch(removeFromCart(productId)) } @@ -86,11 +94,6 @@ const ShoppingCart = ({ handleTabChange }) => { > - {/* {row.product.name} */} {row.name} { sx={{ display: 'flex', alignItems: 'center', - border: '1px solid #6C7275', + // border: '1px solid #6C7275', borderRadius: '4px', - width: '80px', justifyContent: 'space-between', }} > - handleDecrease(row._id)} sx={{ cursor: 'pointer', padding: '0.5rem' }} > - - - {row.count} - */} + handleInputChange(row._id, e.target.value)} + size="small" + sx={{ minWidth: '200px', textAlign: 'center' }} + inputProps={{ min: 1 }} + /> + {/* handleIncrease(row._id)} sx={{ cursor: 'pointer', padding: '0.5rem' }} > + - + */} ₹{row.price}