jtpmcdevitt/web_next
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updated checked sizes and toppings functionality

Browse source
This commit is contained in:
Juthatip McDevitt 2024-05-23 09:56:13 -05:00
parent d9ee93365f
commit 8366b9e322
1 changed files with 42 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
donutshop_ecommerce/src/components/menu/Menu.js
View file

@ -7,6 +7,9 @@ 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 [selectedTopping, setSelectedTopping] = useState([]);
function handleAddToCartButtonClick(){
if(sizes.length === 0 && extraItems.length === 0){
@ -17,6 +20,17 @@ const Menu = (menuItem) => {
}
}
//topping checked functionality
function handleSelectedTopping(ev, extraTopping){
const checked = ev.target.checked;
if(checked){
setSelectedTopping(prev => [...prev, extraTopping]);
} else {
setSelectedTopping(prev => {
return prev.filter(e => e.itemName !== extraTopping.itemName);
});
}
}
@ -24,32 +38,34 @@ const Menu = (menuItem) => {
<>
{showPopup && (
<div className='fixed inset-0 bg-black/80 flex justify-center items-center'>
<div className='bg-white p-5 rounded-md'>
<div className='py-0 sm:py-5 flex flex-col gap-2 sm:gap-4 justify-center items-center text-center px-0 sm:px-10'>
<Image src={menuImg} width={300} height={300} alt='menu-donut' className='w-[100px] min-[550px]:w-[120px]'/>
<p className='text-sm sm:text-base font-semibold capitalize text-[#95743D] px-2'>{itemName}</p>
<p className='text-xs sm:text-sm px-2 line-clamp-2 text-[#95743D]'>{description}</p>
{sizes?.length > 0 && (
<div className='w-full border-t-[1px] border-pink-500 border-dashed'>
<p className='text-xs sm:text-sm font-semibold capitalize text-[#95743D] px-2 m-2'>Choose your size</p>
{sizes.map(size => (
<div className='flex justify-start text-start text-xs sm:text-sm gap-2 py-1'>
<input type='radio' name='size'/>{size.itemName} ${basePrice + size.price}
</div>
))}
</div>
)}
{extraItems?.length > 0 && (
<div className='w-full border-t-[1px] border-pink-500 border-dashed'>
<p className='text-xs sm:text-sm font-semibold capitalize text-[#95743D] px-2 m-2'>Extra toppings</p>
{extraItems.map(extraTopping => (
<div className='flex justify-start text-start text-xs sm:text-sm gap-2 py-1'>
<input type='checkbox' name={extraTopping.itemName}/>{extraTopping.itemName} (${extraTopping.price})
</div>
))}
</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>
<div 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]'/>
<p className='text-sm sm:text-base font-semibold capitalize text-[#95743D] px-2'>{itemName}</p>
<p className='text-xs sm:text-sm px-2 line-clamp-2 text-[#95743D]'>{description}</p>
{sizes?.length > 0 && (
<div className='w-full border-t-[1px] border-pink-500 border-dashed'>
<p className='text-xs sm:text-sm font-semibold capitalize text-[#95743D] px-2 m-2'>Choose your size</p>
{sizes.map(size => (
<div className='flex justify-start text-start text-xs sm:text-sm gap-2 py-1'>
<input type='radio' name='size' onClick={() => setSelectedsize(size)} checked={selectedSize?.itemName === size.itemName}/>{size.itemName} ${basePrice + size.price}
</div>
))}
</div>
)}
{extraItems?.length > 0 && (
<div className='w-full border-t-[1px] border-pink-500 border-dashed'>
<p className='text-xs sm:text-sm font-semibold capitalize text-[#95743D] px-2 m-2'>Extra toppings</p>
{extraItems.map(extraTopping => (
<div className='flex justify-start text-start text-xs sm:text-sm gap-2 py-1'>
<input type='checkbox' name={extraTopping.itemName} onClick={ev => handleSelectedTopping(ev, extraTopping)}/>{extraTopping.itemName} (${extraTopping.price})
</div>
))}
</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>
</div>
</div>
</div>
</div>