From ac6f4ba58fd9a214a46b75b83033938f24c41af2 Mon Sep 17 00:00:00 2001
From: priyankfz7 <110036030+priyankfz7@users.noreply.github.com>
Date: Sat, 28 Jan 2023 13:58:23 +0530
Subject: [PATCH] quantity inc and dec added
---
src/Components/Optional/CartItem.jsx | 169 ++++---
.../Pages/All_Products_Pages/Checkout.jsx | 460 ++++++++++++++----
src/Components/Pages/Cart.jsx | 423 ++++++++--------
src/Components/ProductsPage/ProductPage.js | 12 +-
.../Redux/cart/cart.action.types.js | 2 +
src/Components/Redux/cart/cart.actions.js | 9 +
src/Components/Redux/cart/cart.reducer.js | 16 +
7 files changed, 753 insertions(+), 338 deletions(-)
diff --git a/src/Components/Optional/CartItem.jsx b/src/Components/Optional/CartItem.jsx
index cc09665..9762500 100644
--- a/src/Components/Optional/CartItem.jsx
+++ b/src/Components/Optional/CartItem.jsx
@@ -1,64 +1,115 @@
-import { CheckCircleIcon, SmallCloseIcon } from '@chakra-ui/icons'
-import { Flex, Image, Text, Box, Circle, Heading, useToast } from '@chakra-ui/react'
-import React from 'react'
-import { useDispatch } from 'react-redux'
-import { deleteToCart } from '../Redux/cart/cart.actions'
-
-const CartItem = ({ image_link, name, price, id, brand }) => {
- const toast = useToast()
- console.log(id)
- const dispatch = useDispatch();
- const handleDelete = (id) => {
- toast({
- position: 'top-left',
- duration: 1200,
- render: () => (
-
-
- {`${name} has been deleted!!!`}
-
-
- ),
- })
-
- dispatch(deleteToCart(id))
-
- }
- return (
-
-
-
- {name}
- {`Brand: ${brand}`}
-
- {`$${price}`}
-
-
- handleDelete(id)}
-
- >
-
-
-
+import { CheckCircleIcon, SmallCloseIcon } from "@chakra-ui/icons";
+import {
+ Flex,
+ Image,
+ Text,
+ Box,
+ Circle,
+ Heading,
+ useToast,
+ Button,
+} from "@chakra-ui/react";
+import React from "react";
+import { useDispatch } from "react-redux";
+import {
+ decQuantity,
+ deleteToCart,
+ incQuantity,
+} from "../Redux/cart/cart.actions";
+const CartItem = ({ image_link, name, price, id, brand, quantity }) => {
+ const toast = useToast();
+ console.log(id);
+ const dispatch = useDispatch();
+ const handleDelete = (id) => {
+ toast({
+ position: "top-left",
+ duration: 1200,
+ render: () => (
+
+
+ {`${name} has been deleted!!!`}
+ ),
+ });
+ dispatch(deleteToCart(id));
+ };
+ return (
+
+
+
+
+ {name}
+
+ {`Brand: ${brand}`}
+
+
+
+
+
+ {`$${price}`}
+
+
+ handleDelete(id)}
+ >
+
+
+ {`Subtotal: ${quantity * price}`}
+
+
+ );
+};
-
- )
-}
-
-export default CartItem
\ No newline at end of file
+export default CartItem;
diff --git a/src/Components/Pages/All_Products_Pages/Checkout.jsx b/src/Components/Pages/All_Products_Pages/Checkout.jsx
index 67c924c..8b50be7 100644
--- a/src/Components/Pages/All_Products_Pages/Checkout.jsx
+++ b/src/Components/Pages/All_Products_Pages/Checkout.jsx
@@ -1,18 +1,20 @@
import {
- Box, Image, Flex, Heading, Select, Input
- ,
+ Box,
+ Image,
+ Flex,
+ Heading,
+ Select,
+ Input,
Text,
-
Center,
Button,
- useDisclosure
-
-} from '@chakra-ui/react';
+ useDisclosure,
+} from "@chakra-ui/react";
-import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { Link, useNavigate } from 'react-router-dom';
-import Footer from '../Footer';
+import React from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { Link, useNavigate } from "react-router-dom";
+import Footer from "../Footer";
import {
Modal,
ModalOverlay,
@@ -21,46 +23,60 @@ import {
ModalFooter,
ModalBody,
ModalCloseButton,
-} from '@chakra-ui/react'
-import { CheckCircleIcon } from '@chakra-ui/icons';
-import { resetCart } from '../../Redux/cart/cart.actions';
+} from "@chakra-ui/react";
+import { CheckCircleIcon } from "@chakra-ui/icons";
+import { resetCart } from "../../Redux/cart/cart.actions";
const Checkout = () => {
const cartItems = useSelector((state) => state.cartManager.products);
const { isOpen, onOpen, onClose } = useDisclosure();
- const dispatch = useDispatch()
+ const dispatch = useDispatch();
let cartTotal = cartItems.reduce((acc, p) => {
- return acc + Number(p.price);
+ return acc + Number(p.price) * Number(p.quantity);
}, 0);
const handleProceed = () => {
dispatch(resetCart());
onOpen();
-
-
- }
-
+ };
return (
<>
-
-
-
-
+
+
-
- 1. Shipping Address
+
+
+ {" "}
+ 1. Shipping Address
+
- * Country /Region
-
- * Full Name
-
- * Zip Code/Postcode
-
- * Address
-
- * Town/City
-
- * Contact Number
-
+
+ * Full Name
+
+
+
+ * Zip Code/Postcode
+
+
+
+ * Address
+
+
+
+ * Town/City
+
+
+
+ * Contact Number
+
+
-
{/* ********************************* Payement section****************** */}
-
- 2. Pyement Selection
-
-
-
-
-
-
-
-
+
+
+ {" "}
+ 2. Pyement Selection{" "}
+
+
+
+
+
+
+
+
+
- * Card Number
-
- * Name on card
-
- * Expiry Date
+
+ * Card Number
+
+
+
+ * Name on card
+
+
+
+ * Expiry Date
+
-
-
{/* ***********total item box*********** */}
-
- Order Summary
+
+
+ Order Summary
+
{`Total Items ${cartItems.length}`}
{`$${cartTotal}`}
{` Taxes and duties : $18.5`}
- {` Amount To Pay : $${cartTotal == 0 ? 0 : cartTotal + 18.5}`}
-
+ {` Amount To Pay : $${
+ cartTotal == 0 ? 0 : cartTotal + 18.5
+ }`}
+
-
-
+
-
-
-
-
-
Payment Done !!!
-
- Your order is Successfully Placed.
- Thanks for Placing order. Your order should be placed under 4 to 5 Days.
+
+
+ Your order is Successfully Placed.
+
+
+ Thanks for Placing order. Your order should be placed under 4 to 5
+ Days.{" "}
+
-
+
);
-}
+};
export default Checkout;
diff --git a/src/Components/Pages/Cart.jsx b/src/Components/Pages/Cart.jsx
index b331ba2..14b02ff 100644
--- a/src/Components/Pages/Cart.jsx
+++ b/src/Components/Pages/Cart.jsx
@@ -6,7 +6,6 @@ import {
Text,
Heading,
Spacer,
-
Image,
Accordion,
AccordionItem,
@@ -18,225 +17,263 @@ import {
import { AiFillLock } from "react-icons/ai";
import { CheckCircleIcon, InfoIcon, SmallCloseIcon } from "@chakra-ui/icons";
import { BsGiftFill } from "react-icons/bs";
-import { FaCcAmazonPay, FaCcApplePay, FaCcPaypal, FaGooglePay } from "react-icons/fa"
-import { SiPaytm } from "react-icons/si"
+import {
+ FaCcAmazonPay,
+ FaCcApplePay,
+ FaCcPaypal,
+ FaGooglePay,
+} from "react-icons/fa";
+import { SiPaytm } from "react-icons/si";
import Footer from "./Footer";
import { useSelector } from "react-redux";
import EmptyCart from "../Optional/EmptyCart";
import CartItem from "../Optional/CartItem";
-import { Link } from "react-router-dom"
+import { Link } from "react-router-dom";
const Cart = () => {
const cartItems = useSelector((state) => state.cartManager.products);
+ console.log(cartItems);
let cartTotal = cartItems.reduce((acc, p) => {
- return acc + Number(p.price);
+ return acc + Number(p.price) * Number(p.quantity);
}, 0);
- return <>{
- cartItems.length == 0 ? :
-
-
-
- Your Cart
-
-
-
-
-
-
-
-
-
-
- You have qualified for: {""}Select a gift for you or someone you
- love when you spend $12 or{""} more Don't forget to make your
- selection below
-
-
-
-
-
-
- {`${cartItems.length} items in your cart `}
- {`Cart Total: $${cartTotal}`}
-
-
- {cartItems.map((c) => )}
-
-
-
-
-
+ Your Cart
+
+
+
+
+
+
+
+
+
+
+ You have qualified for: {""}Select a gift for you or someone you
+ love when you spend $12 or{""} more Don't forget to make your
+ selection below
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Gift Selections
-
-
-
-
-
- Select a Gift for You or Someone you love.{" "}
-
-
-
-
-
-
-
-
-
-
- SkinMedica LYTERA 2.0 Pigment Correcting Serum
-
-
-
-
-
-
-
- NUDESTIX Nudies All Over Face Color Matte{" "}
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
- Deck Of Scarlet Metal Leaf Shadow Pot
-
-
-
-
+
-
-
-
-
- Osmosis Beauty Wellness Skin Perfection Elixir{" "}
-
-
-
-
-
-
-
-
-
-
-
- }
-
+
+
+
+
+
+ Gift Selections
+
+
+
+
+
+ Select a Gift for You or Someone you love.{" "}
+
+
+
+
+
+
+
+
+
+
+ SkinMedica LYTERA 2.0 Pigment Correcting Serum
+
+
+
+
+
+
+
+
+
+ NUDESTIX Nudies All Over Face Color Matte{" "}
+
+
+
+
+
+
+
+
+ Deck Of Scarlet Metal Leaf Shadow Pot
+
+
+
+
+
+
+
+
+
+ Osmosis Beauty Wellness Skin Perfection Elixir{" "}
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ );
};
export default Cart;
diff --git a/src/Components/ProductsPage/ProductPage.js b/src/Components/ProductsPage/ProductPage.js
index bf21af5..fe10a81 100644
--- a/src/Components/ProductsPage/ProductPage.js
+++ b/src/Components/ProductsPage/ProductPage.js
@@ -112,8 +112,9 @@ const Shop = () => {
let [brand, setBrand] = useState("");
let [category, setCategory] = useState("foundation");
const { isOpen, onOpen, onClose } = useDisclosure();
- const [modalProps, setModalProps] = useState({});
+ const [modalProps, setModalProps] = useState({ quantity: 1 });
const toast = useToast();
+ console.log(modalProps);
const cartProducts = useSelector((state) => state.cartManager.products);
let cartTotal = cartProducts.reduce((acc, p) => {
return acc + Number(p.price);
@@ -137,7 +138,7 @@ const Shop = () => {
}
};
const handleModal = (data) => {
- setModalProps(data);
+ setModalProps({ ...modalProps, ...data });
onOpen();
};
const handleAdd = (data) => {
@@ -182,7 +183,12 @@ const Shop = () => {
return (
<>
-
+
(dispatch) => {
export const resetCart = () => (dispatch) => {
dispatch({ type: RESET_CART });
};
+
+export const incQuantity = (id) => (dispatch) => {
+ dispatch({ type: INC_QUANTITY, payload: id });
+};
+export const decQuantity = (id) => (dispatch) => {
+ dispatch({ type: DEC_QUANTITY, payload: id });
+};
diff --git a/src/Components/Redux/cart/cart.reducer.js b/src/Components/Redux/cart/cart.reducer.js
index 8d33735..e8b34bb 100644
--- a/src/Components/Redux/cart/cart.reducer.js
+++ b/src/Components/Redux/cart/cart.reducer.js
@@ -1,7 +1,9 @@
import {
ADD_TO_CART,
+ DEC_QUANTITY,
DELETE_FROM_CART,
GET_CART_PRODUCTS,
+ INC_QUANTITY,
RESET_CART,
} from "./cart.action.types";
@@ -30,6 +32,20 @@ const cartReducer = (state = initialState, { type, payload }) => {
localStorage.setItem("cartItems", JSON.stringify([]));
return { ...state, products: [] };
}
+ case INC_QUANTITY: {
+ let updatedCart = state.products.map((p) =>
+ p.id != payload ? p : { ...p, quantity: p.quantity + 1 }
+ );
+ localStorage.setItem("cartItems", JSON.stringify(updatedCart));
+ return { ...state, products: [...updatedCart] };
+ }
+ case DEC_QUANTITY: {
+ let updatedCart = state.products.map((p) =>
+ p.id != payload ? p : { ...p, quantity: p.quantity - 1 }
+ );
+ localStorage.setItem("cartItems", JSON.stringify(updatedCart));
+ return { ...state, products: [...updatedCart] };
+ }
default: {
return state;
}