created cart page

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 (
+    <div className='pb-20 md:pb-40'>
+        <div className='px-5 sm:px-10 py-5 sm:py-10'>
+            <p className='text-center text-2xl sm:text-3xl md:text-4xl text-pink-500 uppercase font-bold drop-shadow-[0_2px_2px_rgba(105,105,105,1)]'>My cart</p>
+            <div className='grid grid-cols-2 mt-10'>
+                <div className='border-t'>
+                    {cartProducts?.length === 0 && (
+                        <div>Your cart is empty</div>
+                    )}
+                    {cartProducts?.length > 0 &&  cartProducts.map(product => (
+                        <div className='flex flex-row gap-2 items-center border-b'>
+                            <div className='w-[100px] flex items-center justify-center m-2'>
+                                <Image src={product.menuImg} alt='' width={100} height={100} className='w-[100px]'/>
+                            </div>
+                            <div>
+                                <p>{product.itemName}</p>
+                                {product.size && (
+                                    <div>Size: <span>{product.size.itemName}</span></div>
+                                )}
+                                {product.extra?.length > 0 && (
+                                    <div>Toppings: {product.extra.map(extras => (
+                                        <span>{extras.itemName} <span>(+${extras.price})</span></span>
+                                    ))}</div>
+                                )}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+                <div>right</div>
+            </div>
+        </div>
+        
+    </div>
+  )
+}
+
+export default CartPage

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){
+    const optionAdd = sizes.length > 0 ||  extraItems.length > 0;
-      toast.success('Add to cart');
+    if(optionAdd && !showPopup){
-      addToCart(menuItem);
-    } else{
       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 && (
-      <div className='fixed inset-0 bg-black/80 flex justify-center items-center'>
+      <div onClick={() => setShowPopup(false)} className='fixed inset-0 bg-black/80 flex justify-center items-center'>
-        <div className='bg-white p-5 rounded-md max-w-md'>
+        <div onClick={ev => ev.stopPropagation()} className='bg-white p-5 rounded-md max-w-md'>
           <div className='overflow-y-scroll' style={{maxHeight:'calc(100vh - 250px)'}}>
             <div className='py-0 sm:py-5 flex flex-col gap-2 sm:gap-4 justify-center items-center text-center px-5'>
               <Image src={menuImg} width={300} height={300} alt='menu-donut' className='w-[100px] min-[550px]:w-[120px]'/>
@@ -64,7 +77,9 @@ const Menu = (menuItem) => {
                   ))}
                 </div>
               )}
-              <button type='button' className='bg-pink-500 text-white p-1 sm:p-2 text-sm sm:text-base rounded-md hover:opacity-80 duration-300 mt-5'>Add to cart</button>
+              <button type='button' onClick={handleAddToCartButtonClick}
+                className='bg-pink-500 text-white p-1 sm:p-2 text-sm sm:text-base rounded-md hover:opacity-80 duration-300 mt-5'>Add to cart (${selectedPrice})
+              </button>
             </div>
           </div>
         </div>