diff --git a/donutshop_ecommerce/src/app/cart/page.js b/donutshop_ecommerce/src/app/cart/page.js
new file mode 100644
index 0000000..3104e62
--- /dev/null
+++ b/donutshop_ecommerce/src/app/cart/page.js
@@ -0,0 +1,46 @@
+"use client"
+import React, { useContext } from 'react'
+import { CartContext } from '../../components/AppContext'
+import Image from 'next/image';
+
+const CartPage = () => {
+ const {cartProducts} = useContext(CartContext);
+
+
+ return (
+
+
+
My cart
+
+
+ {cartProducts?.length === 0 && (
+
Your cart is empty
+ )}
+ {cartProducts?.length > 0 && cartProducts.map(product => (
+
+
+
+
+
+
{product.itemName}
+ {product.size && (
+
Size: {product.size.itemName}
+ )}
+ {product.extra?.length > 0 && (
+
Toppings: {product.extra.map(extras => (
+ {extras.itemName} (+${extras.price})
+ ))}
+ )}
+
+
+ ))}
+
+
right
+
+
+
+
+ )
+}
+
+export default CartPage
\ No newline at end of file
diff --git a/donutshop_ecommerce/src/components/menu/Menu.js b/donutshop_ecommerce/src/components/menu/Menu.js
index 9529677..8907511 100644
--- a/donutshop_ecommerce/src/components/menu/Menu.js
+++ b/donutshop_ecommerce/src/components/menu/Menu.js
@@ -7,19 +7,22 @@ const Menu = (menuItem) => {
const {menuImg, itemName, description, basePrice, sizes, extraItems} = menuItem
const {addToCart} = useContext(CartContext);
const [showPopup, setShowPopup] = useState(false);
- const [selectedSize, setSelectedsize] = useState(null);
+ const [selectedSize, setSelectedsize] = useState(sizes?.[0] || null);
const [selectedTopping, setSelectedTopping] = useState([]);
function handleAddToCartButtonClick(){
- if(sizes.length === 0 && extraItems.length === 0){
- toast.success('Add to cart');
- addToCart(menuItem);
- } else{
+ const optionAdd = sizes.length > 0 || extraItems.length > 0;
+ if(optionAdd && !showPopup){
setShowPopup(true)
- }
+ return;
+ }
+ addToCart(menuItem, selectedSize, selectedTopping);
+ setShowPopup(false)
+ toast.success('Added to cart');
}
+
//topping checked functionality
function handleSelectedTopping(ev, extraTopping){
const checked = ev.target.checked;
@@ -32,13 +35,23 @@ const Menu = (menuItem) => {
}
}
+ //price calculation
+ let selectedPrice = basePrice;
+ if(selectedSize){
+ selectedPrice += selectedSize.price
+ }
+ if(selectedTopping?.length > 0){
+ for( const extra of selectedTopping){
+ selectedPrice += extra.price
+ }
+ }
return (
<>
{showPopup && (
-
-
+
setShowPopup(false)} className='fixed inset-0 bg-black/80 flex justify-center items-center'>
+
ev.stopPropagation()} className='bg-white p-5 rounded-md max-w-md'>
@@ -64,7 +77,9 @@ const Menu = (menuItem) => {
))}
)}
-
+