This commit is contained in:
zadit
2025-02-13 08:07:57 +07:00
parent 1c8490b9ab
commit 2ceac51de2
5 changed files with 225 additions and 193 deletions

View File

@@ -7,6 +7,7 @@ const Item = ({
name: initialName, name: initialName,
description: initialDescription, description: initialDescription,
price: initialPrice, price: initialPrice,
promoPrice,
qty: initialQty, qty: initialQty,
imageUrl, imageUrl,
imageFile, imageFile,
@@ -30,16 +31,13 @@ const Item = ({
useEffect(() => { useEffect(() => {
console.log(imageUrl); console.log(imageUrl);
console.log(selectedImage); console.log(selectedImage);
if (selectedImage) { console.log(imageFile)
const reader = new FileReader(); if (imageFile) {
reader.onloadend = () => { setPreviewUrl(imageFile);
setPreviewUrl(reader.result);
};
reader.readAsDataURL(selectedImage);
} else { } else {
setPreviewUrl(imageUrl); setPreviewUrl(imageUrl);
} }
}, [selectedImage, imageUrl]); }, [imageFile, imageUrl]);
const handlePlusClick = () => { const handlePlusClick = () => {
if (!blank) onPlusClick(id); if (!blank) onPlusClick(id);
@@ -92,64 +90,46 @@ const Item = ({
return ( return (
<div> <div>
<div className={`${styles.item} ${forInvoice ? styles.itemInvoice : ""}`}> <div className={`${styles.item} ${forInvoice ? styles.itemInvoice : ""}`}>
{!forInvoice && ( {!forInvoice && (
<div className={styles.imageContainer}> <div className={styles.imageContainer}>
<img <img
src={ src={
blank || previewUrl || isBeingEdit previewUrl
? previewUrl }
: "https://png.pngtree.com/png-vector/20221125/ourmid/pngtree-no-image-available-icon-flatvector-illustration-pic-design-profile-vector-png-image_40966566.jpg" onError={({ currentTarget }) => {
} currentTarget.onerror = null; // prevents looping
onError={({ currentTarget }) => { currentTarget.src =
currentTarget.onerror = null; // prevents looping "https://png.pngtree.com/png-vector/20221125/ourmid/pngtree-no-image-available-icon-flatvector-illustration-pic-design-profile-vector-png-image_40966566.jpg";
currentTarget.src = }}
"https://png.pngtree.com/png-vector/20221125/ourmid/pngtree-no-image-available-icon-flatvector-illustration-pic-design-profile-vector-png-image_40966566.jpg"; alt={itemName}
}} style={{
alt={itemName} filter: !isAvailable ? "grayscale(100%)" : "none",
style={{ }}
filter: !isAvailable ? "grayscale(100%)" : "none", className={styles.itemImage}
}} />
className={styles.itemImage} </div>
/> )}
<div className={styles.itemDetails}>
{(isBeingEdit || blank) && ( {forInvoice &&
<div className={styles.overlay} onClick={handleImageClick}> <svg
<span> className={styles.plusNegative2}
{previewUrl ? "Ganti gambar" : "Tambah gambar"} onClick={onRemoveClick}
</span> clipRule="evenodd"
</div> fillRule="evenodd"
)} strokeLinejoin="round"
<input strokeMiterlimit="2"
type="file" viewBox="0 0 24 24"
ref={fileInputRef} xmlns="http://www.w3.org/2000/svg"
className={styles.fileInput} >
onChange={handleFileChange}
accept="image/*"
style={{ display: "none" }}
/>
</div>
)}
<div className={styles.itemDetails}>
{forInvoice &&
<svg
className={styles.plusNegative2}
onClick={onRemoveClick}
clipRule="evenodd"
fillRule="evenodd"
strokeLinejoin="round"
strokeMiterlimit="2"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path <path
d="m12.002 2c5.518 0 9.998 4.48 9.998 9.998 0 5.517-4.48 9.997-9.998 9.997-5.517 0-9.997-4.48-9.997-9.997 0-5.518 4.48-9.998 9.997-9.998zm0 1.5c-4.69 0-8.497 3.808-8.497 8.498s3.807 8.497 8.497 8.497 8.498-3.807 8.498-8.497-3.808-8.498-8.498-8.498zm-.747 7.75h-3.5c-.414 0-.75.336-.75.75s.336.75.75.75h3.5v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.5h3.5c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-3.5v-3.5c0-.414-.336-.75-.75-.75s-.75.336-.75.75z" d="m12.002 2c5.518 0 9.998 4.48 9.998 9.998 0 5.517-4.48 9.997-9.998 9.997-5.517 0-9.997-4.48-9.997-9.997 0-5.518 4.48-9.998 9.997-9.998zm0 1.5c-4.69 0-8.497 3.808-8.497 8.498s3.807 8.497 8.497 8.497 8.498-3.807 8.498-8.497-3.808-8.498-8.498-8.498zm-.747 7.75h-3.5c-.414 0-.75.336-.75.75s.336.75.75.75h3.5v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.5h3.5c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-3.5v-3.5c0-.414-.336-.75-.75-.75s-.75.336-.75.75z"
fillRule="nonzero" fillRule="nonzero"
/> />
</svg> </svg>
} }
<input {/* <input
className={`${ className={`${
forInvoice ? styles.itemInvoiceName : styles.itemName forInvoice ? styles.itemInvoiceName : styles.itemName
} ${isBeingEdit || blank ? styles.blank : styles.notblank} ${ } ${isBeingEdit || blank ? styles.blank : styles.notblank} ${
@@ -159,117 +139,160 @@ const Item = ({
placeholder="Nama item" placeholder="Nama item"
onChange={handleNameChange} onChange={handleNameChange}
disabled={!blank && !isBeingEdit} disabled={!blank && !isBeingEdit}
/> /> */}
<h3 style={{ textTransform: 'capitalize', margin: '5px 0px 10px 10px', fontSize: '17px' }}>{itemName}</h3>
{forInvoice && (
<>
<p className={styles.multiplySymbol}>x</p>
<p className={styles.qtyInvoice}>{itemQty}</p>
</>
)}
{!forInvoice && (
// <input
// className={`${styles.itemPrice} ${
// isBeingEdit || blank ? styles.blank : styles.notblank
// } ${!isAvailable ? styles.disabled : ""}`}
// value={itemPrice}
// placeholder="Harga"
// onChange={handlePriceChange}
// disabled={!blank && !isBeingEdit}
// />
{forInvoice && ( <div style={{
<> display: 'flex',
<p className={styles.multiplySymbol}>x</p> flexWrap: 'wrap',
<p className={styles.qtyInvoice}>{itemQty}</p> alignItems: 'center',
</> color: 'rgb(28, 29, 29)',
)} fontSize: '0.875rem',
{!forInvoice && ( fontWeight: 600,
<input lineHeight: '1rem',
className={`${styles.itemPrice} ${ marginLeft: 10
isBeingEdit || blank ? styles.blank : styles.notblank }}>
} ${!isAvailable ? styles.disabled : ""}`} {promoPrice && promoPrice != 0 && promoPrice != '' &&
value={itemPrice} <div style={{
placeholder="Harga" position: 'relative',
onChange={handlePriceChange} marginTop: '0.125rem',
disabled={!blank && !isBeingEdit} display: 'flex',
/> width: 'max-content',
)} alignItems: 'center',
whiteSpace: 'nowrap',
borderRadius: '9999px',
backgroundImage: 'linear-gradient(to right, #e52535, #eb525e)',
padding: '0.25rem 0.75rem',
color: 'rgb(255, 255, 255)',
fontSize: '0.75rem',
fontWeight: 600,
lineHeight: '1rem'
}}>
Promo
</div>
}
<div style={{ display: 'flex' }}>
<span style={{
marginLeft: '1rem',
marginRight: '0.5rem',
marginTop: '0.125rem'
}}>{promoPrice}</span>
<span style={{
marginTop: '0.125rem',
color: 'rgb(114, 114, 114)',
textDecoration: 'line-through'
}}>{initialPrice}</span>
</div>
</div>
)}
{!forInvoice && {!forInvoice &&
(!isBeingEdit && itemQty != 0 ? ( (!isBeingEdit && itemQty != 0 ? (
<div className={styles.itemQty}> <div className={styles.itemQty}>
<svg <svg
className={styles.plusNegative} className={styles.plusNegative}
onClick={handleNegativeClick} onClick={handleNegativeClick}
clipRule="evenodd" clipRule="evenodd"
fillRule="evenodd" fillRule="evenodd"
strokeLinejoin="round" strokeLinejoin="round"
strokeMiterlimit="2" strokeMiterlimit="2"
viewBox="0 0 24 24" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="m12.002 2.005c5.518 0 9.998 4.48 9.998 9.997 0 5.518-4.48 9.998-9.998 9.998-5.517 0-9.997-4.48-9.997-9.998 0-5.517 4.48-9.997 9.997-9.997zm0 1.5c-4.69 0-8.497 3.807-8.497 8.497s3.807 8.498 8.497 8.498 8.498-3.808 8.498-8.498-3.808-8.497-8.498-8.497zm4.253 7.75h-8.5c-.414 0-.75.336-.75.75s.336.75.75.75h8.5c.414 0 .75-.336.75-.75s-.336-.75-.75-.75z" d="m12.002 2.005c5.518 0 9.998 4.48 9.998 9.997 0 5.518-4.48 9.998-9.998 9.998-5.517 0-9.997-4.48-9.997-9.998 0-5.517 4.48-9.997 9.997-9.997zm0 1.5c-4.69 0-8.497 3.807-8.497 8.497s3.807 8.498 8.497 8.498 8.498-3.808 8.498-8.498-3.808-8.497-8.498-8.497zm4.253 7.75h-8.5c-.414 0-.75.336-.75.75s.336.75.75.75h8.5c.414 0 .75-.336.75-.75s-.336-.75-.75-.75z"
fillRule="nonzero" fillRule="nonzero"
/> />
</svg> </svg>
{!blank && !isBeingEdit ? ( {!blank && !isBeingEdit ? (
<p className={styles.itemQtyValue}>{itemQty}</p> <p className={styles.itemQtyValue}>{itemQty}</p>
) : ( ) : (
<input <input
className={styles.itemQtyInput} className={styles.itemQtyInput}
value={itemQty} value={itemQty}
onChange={handleQtyChange} onChange={handleQtyChange}
disabled={!blank && !isBeingEdit} disabled={!blank && !isBeingEdit}
/> />
)} )}
<svg <svg
className={styles.plusNegative} className={styles.plusNegative}
onClick={handlePlusClick} onClick={handlePlusClick}
clipRule="evenodd" clipRule="evenodd"
fillRule="evenodd" fillRule="evenodd"
strokeLinejoin="round" strokeLinejoin="round"
strokeMiterlimit="2" strokeMiterlimit="2"
viewBox="0 0 24 24" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="m12.002 2c5.518 0 9.998 4.48 9.998 9.998 0 5.517-4.48 9.997-9.998 9.997-5.517 0-9.997-4.48-9.997-9.997 0-5.518 4.48-9.998 9.997-9.998zm0 1.5c-4.69 0-8.497 3.808-8.497 8.498s3.807 8.497 8.497 8.497 8.498-3.807 8.498-8.497-3.808-8.498-8.498-8.498zm-.747 7.75h-3.5c-.414 0-.75.336-.75.75s.336.75.75.75h3.5v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.5h3.5c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-3.5v-3.5c0-.414-.336-.75-.75-.75s-.75.336-.75.75z" d="m12.002 2c5.518 0 9.998 4.48 9.998 9.998 0 5.517-4.48 9.997-9.998 9.997-5.517 0-9.997-4.48-9.997-9.997 0-5.518 4.48-9.998 9.997-9.998zm0 1.5c-4.69 0-8.497 3.808-8.497 8.498s3.807 8.497 8.497 8.497 8.498-3.807 8.498-8.497-3.808-8.498-8.498-8.498zm-.747 7.75h-3.5c-.414 0-.75.336-.75.75s.336.75.75.75h3.5v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.5h3.5c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-3.5v-3.5c0-.414-.336-.75-.75-.75s-.75.336-.75.75z"
fillRule="nonzero" fillRule="nonzero"
/> />
</svg> </svg>
</div> </div>
) : !blank && !isBeingEdit ? ( ) : !blank && !isBeingEdit ? (
<div className={styles.itemQty}> <div className={styles.itemQty}>
<button <button
className={styles.addButton} className={styles.addButton}
style={{ backgroundColor: !isAvailable ? "" : "inherit", border: `2px solid ${isAvailable? 'inherit': 'gray'}`, color: `${isAvailable? '#73a585': 'gray'}`}} style={{ backgroundColor: !isAvailable ? "" : "inherit", border: `2px solid ${isAvailable ? 'inherit' : 'gray'}`, color: `${isAvailable ? '#73a585' : 'gray'}` }}
onClick={handlePlusClick} onClick={handlePlusClick}
disabled={!isAvailable} // Optionally disable the button if not available disabled={!isAvailable} // Optionally disable the button if not available
> >
Pesan Pesan
</button> </button>
</div> </div>
) : ( ) : (
<div className={styles.itemQty}> <div className={styles.itemQty}>
<button <button
className={styles.addButton} className={styles.addButton}
style={{ style={{
backgroundColor: "white", backgroundColor: "white",
width: "150px", width: "150px",
color: '#73a585' color: '#73a585'
}} }}
onClick={isBeingEdit ? handleUpdate : handleCreate} onClick={isBeingEdit ? handleUpdate : handleCreate}
> >
{isBeingEdit ? "Simpan" : "Buat"} {isBeingEdit ? "Simpan" : "Buat"}
</button> </button>
</div> </div>
))} ))}
{forInvoice && ( {forInvoice && (
<p className={styles.itemPriceInvoice}>Rp {itemQty * itemPrice}</p> <p className={styles.itemPriceInvoice}>Rp {itemQty * itemPrice}</p>
)} )}
</div>
{forCart && (
<div className={styles.remove} onClick={handleRemoveClick}>
</div> </div>
)} {forCart && (
{/* {blank && ( <div className={styles.remove} onClick={handleRemoveClick}>
</div>
)}
{/* {blank && (
<button className={styles.createItem} onClick={handleCreate}> <button className={styles.createItem} onClick={handleCreate}>
Create Item Create Item
</button> </button>
)} */} )} */}
</div> </div>
{itemDescription && itemDescription != 'undefined' && itemDescription?.length && {itemDescription && itemDescription != 'undefined' && itemDescription?.length &&
<div> <div>
<p style={{color: '#5f5f5f', fontSize: '3.2vw', padding: '5px'}}>{itemDescription}</p> <p style={{ color: '#5f5f5f', fontSize: '3.2vw', padding: '5px' }}>{itemDescription}</p>
</div> </div>
} }
</div> </div>
); );
}; };

View File

@@ -27,17 +27,19 @@ const ItemConfig = ({
// Prevent scrolling when modal is open // Prevent scrolling when modal is open
document.body.style.overflow = "hidden"; document.body.style.overflow = "hidden";
if(selectedImage){
if (selectedImage) {
const reader = new FileReader(); const reader = new FileReader();
reader.onloadend = () => { reader.onloadend = () => {
setPreviewUrl(reader.result); setPreviewUrl(reader.result);
}; };
reader.readAsDataURL(selectedImage); reader.readAsDataURL(selectedImage);
}
else if (imageFile) {
setPreviewUrl(imageFile);
} else { } else {
setPreviewUrl(imageUrl); setPreviewUrl(imageUrl);
} }
}, [selectedImage, imageUrl]); }, [selectedImage, imageFile, imageUrl]);
const handleOverlayClick = (event) => { const handleOverlayClick = (event) => {
// Prevent scrolling when modal is open // Prevent scrolling when modal is open
@@ -78,11 +80,11 @@ const ItemConfig = ({
}, [textareaRef.current]); }, [textareaRef.current]);
const handleCreate = () => { const handleCreate = () => {
handleCreateItem(itemName, itemPrice, selectedImage, itemDescription); handleCreateItem(itemName, itemPrice, selectedImage, itemDescription, itemPromoPrice);
}; };
const handleUpdate = () => { const handleUpdate = () => {
console.log(itemDescription) console.log(itemDescription)
handleUpdateItem(itemName, itemPrice, selectedImage, itemDescription); handleUpdateItem(itemName, itemPrice, selectedImage, itemDescription, itemPromoPrice);
}; };
return ( return (

View File

@@ -210,44 +210,45 @@ const ItemLister = ({
name, name,
price, price,
selectedImage, selectedImage,
previewUrl description,
promoPrice
) => { ) => {
setItemsToCreate((prevItems) => setItemsToCreate((prevItems) =>
prevItems.map((item) => prevItems.map((item) =>
item.itemId === itemId item.itemId === itemId
? { ...item, name, price, selectedImage, image: previewUrl } ? { ...item, name, price, selectedImage, description, promoPrice } //image: previewUrl
: item : item
) )
); );
setisEditItem(0); setisEditItem(0);
}; };
const onUpdateItem = (itemId, name, price, image, description) => { const onUpdateItem = (itemId, name, price, image, description, promoPrice) => {
if (isEdit) if (isEdit)
setItemsToUpdate((prev) => [...prev, { itemId, name, price, image, description }]); setItemsToUpdate((prev) => [...prev, { itemId, name, price,promoPrice, image, description }]);
else { else {
console.log(itemId, name, price, image, description) console.log(itemId, name, price, image, description)
handleUpdateItem(itemId, name, price, image, description); handleUpdateItem(itemId, name, price, image, description, promoPrice);
}
const itemIndex = items.findIndex((item) => item.itemId === itemId); const itemIndex = items.findIndex((item) => item.itemId === itemId);
if (itemIndex === -1) return; // Item not found if (itemIndex === -1) return; // Item not found
// Create a copy of the current items array // Create a copy of the current items array
const updatedItems = [...items]; const updatedItems = [...items];
const item = updatedItems[itemIndex]; const item = updatedItems[itemIndex];
console.log(updatedItems) console.log(items)
// Toggle the availability locally // Toggle the availability locally
if(image){ if(image){
const reader = new FileReader(); const reader = new FileReader();
reader.onloadend = () => { reader.onloadend = () => {
updatedItems[itemIndex].image = reader.result; updatedItems[itemIndex].selectedImage = reader.result;
console.log(reader.result) console.log(reader.result)
}; };
reader.readAsDataURL(image); reader.readAsDataURL(image);
} }
const newAvailability = !item.availability;
updatedItems[itemIndex] = { updatedItems[itemIndex] = {
itemId: item.itemId,
name, name,
price, price,
availability: item.availability availability: item.availability
@@ -258,7 +259,7 @@ const ItemLister = ({
setItems(updatedItems); setItems(updatedItems);
setRandomKey(randomKey + 1); setRandomKey(randomKey + 1);
}
console.log(itemsToUpdate); console.log(itemsToUpdate);
}; };
@@ -375,7 +376,8 @@ const ItemLister = ({
name, name,
price, price,
image, image,
description description,
promoPrice
} of itemsToUpdate) { } of itemsToUpdate) {
if (newAvailability != undefined) { if (newAvailability != undefined) {
await executeUpdateAvailability( await executeUpdateAvailability(
@@ -409,7 +411,7 @@ const ItemLister = ({
else { else {
// Call the handleUpdateItem function // Call the handleUpdateItem function
const updatedItem = await handleUpdateItem(itemId, name, price, image, description); const updatedItem = await handleUpdateItem(itemId, name, price, image, description, promoPrice);
// Update shopItems state // Update shopItems state
setShopItems((prevShopItems) => { setShopItems((prevShopItems) => {
@@ -842,7 +844,7 @@ const ItemLister = ({
imageUrl={item.image} imageUrl={item.image}
imageFile={item.selectedImage} imageFile={item.selectedImage}
cancelEdit={() => editItem(0)} cancelEdit={() => editItem(0)}
handleUpdateItem={(name, price, image, description) => { updateItemInCreate(item.itemId, name, price, image, description); setRandomKey(randomKey + 1); console.log(image) } handleUpdateItem={(name, price, image, description, promoPrice) => { updateItemInCreate(item.itemId, name, price, image, description, promoPrice); setRandomKey(randomKey + 1); console.log(image) }
} }
/> />
)} )}
@@ -902,6 +904,7 @@ const ItemLister = ({
forInvoice={forInvoice} forInvoice={forInvoice}
name={item.name} name={item.name}
price={item.price} price={item.price}
promoPrice={item.promoPrice}
qty={item.qty} qty={item.qty}
imageUrl={item.image} imageUrl={item.image}
imageFile={item.selectedImage} imageFile={item.selectedImage}
@@ -910,8 +913,8 @@ const ItemLister = ({
onRemoveClick={() => handleRemoveClick(item.itemId)} onRemoveClick={() => handleRemoveClick(item.itemId)}
isBeingEdit={isEditItem == item.itemId} isBeingEdit={isEditItem == item.itemId}
isAvailable={item.availability} isAvailable={item.availability}
handleUpdateItem={(name, price, image, description) => handleUpdateItem={(name, price, image, description, promoPrice) =>
updateItemInCreate(item.itemId, name, price, image, description) updateItemInCreate(item.itemId, name, price, image, description, promoPrice)
} }
/> />
</div> </div>
@@ -940,12 +943,12 @@ const ItemLister = ({
imageUrl={ imageUrl={
itemTypeId ? getImageUrl(item.image) : item.image itemTypeId ? getImageUrl(item.image) : item.image
} }
imageFile={item.selectedImage}
cancelEdit={() => editItem(0)} cancelEdit={() => editItem(0)}
handleCreateItem={onCreateItem} handleCreateItem={onCreateItem}
handleUpdateItem={(name, price, image, description) => { handleUpdateItem={(name, price, image, description, promoPrice) => {
console.log(description) console.log(description)
onUpdateItem(item.itemId, name, price, image, description); onUpdateItem(item.itemId, name, price, image, description, promoPrice);
setRandomKey(randomKey + 1); console.log(image);
} }
} }
/> />
@@ -1005,18 +1008,20 @@ const ItemLister = ({
forInvoice={forInvoice} forInvoice={forInvoice}
name={item.name} name={item.name}
price={item.price} price={item.price}
promoPrice={item.promoPrice}
qty={item.qty} qty={item.qty}
description={item.description} description={item.description}
imageUrl={ imageUrl={
itemTypeId ? getImageUrl(item.image) : item.image itemTypeId ? getImageUrl(item.image) : item.image
} }
imageFile={item.selectedImage}
onPlusClick={() => handlePlusClick(item.itemId)} onPlusClick={() => handlePlusClick(item.itemId)}
onNegativeClick={() => handleNegativeClick(item.itemId)} onNegativeClick={() => handleNegativeClick(item.itemId)}
onRemoveClick={() => handleRemoveClick(item.itemId)} onRemoveClick={() => handleRemoveClick(item.itemId)}
isBeingEdit={isEditItem == item.itemId} isBeingEdit={isEditItem == item.itemId}
isAvailable={item.availability} isAvailable={item.availability}
handleUpdateItem={(name, price, image, description) => handleUpdateItem={(name, price, image, description, promoPrice) =>
onUpdateItem(item.itemId, name, price, image, description) onUpdateItem(item.itemId, name, price, image, description, promoPrice)
} }
/> />
</div> </div>

View File

@@ -110,7 +110,8 @@ export async function updateItem(
name, name,
price, price,
selectedImage, selectedImage,
description description,
promoPrice
) { ) {
try { try {
console.log( console.log(
@@ -124,6 +125,7 @@ export async function updateItem(
formData.append("price", price); formData.append("price", price);
formData.append("image", selectedImage); formData.append("image", selectedImage);
formData.append("description", description); formData.append("description", description);
formData.append("promoPrice", promoPrice);
const response = await fetch(`${API_BASE_URL}/item/set-item/${itemId}`, { const response = await fetch(`${API_BASE_URL}/item/set-item/${itemId}`, {
method: "PUT", method: "PUT",

View File

@@ -278,8 +278,8 @@ function CafePage({
description description
) )
} }
handleUpdateItem={(itemId, name, price, selectedImage, description) => handleUpdateItem={(itemId, name, price, selectedImage, description, promoPrice) =>
updateItem(itemId, name, price, selectedImage, description) updateItem(itemId, name, price, selectedImage, description, promoPrice)
} }
/> />
))} ))}