ok
This commit is contained in:
karyamanswasta
@@ -4,6 +4,7 @@ const Item = ({
|
||||
blank,
|
||||
forCart,
|
||||
forInvoice,
|
||||
portrait,
|
||||
name: initialName,
|
||||
description: initialDescription,
|
||||
price: initialPrice,
|
||||
@@ -53,10 +54,10 @@ const Item = ({
|
||||
};
|
||||
|
||||
const handleCreate = () => {
|
||||
handleCreateItem(itemName, itemPrice, selectedImage, previewUrl);
|
||||
handleCreateItem(itemName, itemPrice, selectedImage, previewUrl, itemDescription, promoPrice);
|
||||
};
|
||||
const handleUpdate = () => {
|
||||
handleUpdateItem(itemName, itemPrice, selectedImage, previewUrl);
|
||||
handleUpdateItem(itemName, itemPrice, selectedImage, itemDescription, promoPrice);
|
||||
};
|
||||
|
||||
const handleRemoveClick = () => {
|
||||
@@ -94,21 +95,57 @@ const Item = ({
|
||||
setItemName(event.target.value);
|
||||
};
|
||||
|
||||
const toTitleCase = (str) => {
|
||||
if (!str) return str;
|
||||
return String(str)
|
||||
.toLowerCase()
|
||||
.replace(/(^|[\s\-/'])([a-zA-Z\u00C0-\u024F])/g, (m, p1, p2) => p1 + p2.toUpperCase());
|
||||
};
|
||||
|
||||
const displayName = toTitleCase(itemName);
|
||||
|
||||
return (
|
||||
<div className={`${!last && !forInvoice ? styles.notLast : ""}`}>
|
||||
<div className={`${styles.item} ${forInvoice ? styles.itemInvoice : ""} `}>
|
||||
<div className={`${(!portrait && !last && !forInvoice) ? styles.notLast : ""}`}>
|
||||
<div className={`${styles.item} ${forInvoice ? styles.itemInvoice : ""} ${portrait ? styles.itemPortrait : ""} `}>
|
||||
{!forInvoice && (
|
||||
<img
|
||||
src={previewUrl}
|
||||
onError={({ currentTarget }) => {
|
||||
currentTarget.onerror = null;
|
||||
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={{ filter: !isAvailable ? "grayscale(100%)" : "none" }}
|
||||
className={styles.imageContainer}
|
||||
/>
|
||||
<div className={styles.imageWrap}>
|
||||
<img
|
||||
src={previewUrl}
|
||||
onError={({ currentTarget }) => {
|
||||
currentTarget.onerror = null;
|
||||
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={{ filter: !isAvailable ? "grayscale(100%)" : "none" }}
|
||||
className={styles.imageContainer}
|
||||
/>
|
||||
{promoPrice && promoPrice != 0 && promoPrice != '' && (
|
||||
<div className={styles.promoPill}>Promo</div>
|
||||
)}
|
||||
{portrait && (
|
||||
<>
|
||||
<div className={styles.overlayName}>{displayName}</div>
|
||||
<div className={styles.bottomOverlay}>
|
||||
<div className={styles.overlayPriceCol}>
|
||||
{(promoPrice && promoPrice != 0 && promoPrice != '') ? (
|
||||
<>
|
||||
<span className={styles.overlayOriginal}>Rp {formatCurrency(initialPrice)}</span>
|
||||
<span className={styles.overlayPromo}>Rp {formatCurrency(promoPrice)}</span>
|
||||
</>
|
||||
) : (
|
||||
<span className={styles.overlayPromo}>Rp {formatCurrency(initialPrice)}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.qtyGroup}>
|
||||
<button className={styles.qtyBtn} onClick={handleNegativeClick} aria-label="Kurangi">-</button>
|
||||
<span className={styles.qtyVal}>{itemQty}</span>
|
||||
<button className={styles.qtyBtn} onClick={handlePlusClick} aria-label="Tambah">+</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.itemDetails}>
|
||||
{forInvoice &&
|
||||
@@ -129,37 +166,27 @@ const Item = ({
|
||||
</svg>
|
||||
|
||||
}
|
||||
{/* <input
|
||||
className={`${
|
||||
forInvoice ? styles.itemInvoiceName : styles.itemName
|
||||
} ${isBeingEdit || blank ? styles.blank : styles.notblank} ${
|
||||
!isAvailable ? styles.disabled : ""
|
||||
}`}
|
||||
value={itemName}
|
||||
placeholder="Nama item"
|
||||
onChange={handleNameChange}
|
||||
disabled={!blank && !isBeingEdit}
|
||||
/> */}
|
||||
<div style={{ marginRight: forInvoice ? 10 : 0 }}>
|
||||
<h3 className={styles.title} style={{ width: forInvoice ? 160 : 'auto' }}>{itemName}</h3>
|
||||
{!forInvoice && (
|
||||
<div className={styles.priceRow}>
|
||||
{promoPrice && promoPrice != 0 && promoPrice != '' ? (
|
||||
<>
|
||||
<div className={styles.promoBadge} style={{ background: !isAvailable ? 'gray' : undefined }}>
|
||||
Promo {(((initialPrice - promoPrice) / initialPrice) * 100).toFixed(0)}%
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<span className={styles.priceNow}>Rp {formatCurrency(promoPrice)}</span>
|
||||
<span className={styles.priceOld}>Rp {formatCurrency(initialPrice)}</span>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<span className={styles.priceNow}>Rp {formatCurrency(initialPrice)}</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Title under image for portrait, non-overlay */}
|
||||
{portrait && null}
|
||||
{!portrait && (
|
||||
<div style={{ marginRight: forInvoice ? 10 : 0 }}>
|
||||
<h3 className={styles.title} style={{ width: forInvoice ? 160 : 'auto' }}>{displayName}</h3>
|
||||
{!forInvoice && (
|
||||
<div className={styles.priceRow}>
|
||||
{promoPrice && promoPrice != 0 && promoPrice != '' ? (
|
||||
<>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||
<span className={`${styles.itemPriceList} ${styles.promo}`}>Rp {formatCurrency(promoPrice)}</span>
|
||||
<span className={`${styles.itemPriceList} ${styles.original}`}>Rp {formatCurrency(initialPrice)}</span>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<span className={styles.itemPriceList}>Rp {formatCurrency(initialPrice)}</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{forInvoice && (
|
||||
<>
|
||||
<p className={styles.multiplySymbol}>x</p>
|
||||
@@ -168,30 +195,30 @@ const Item = ({
|
||||
)}
|
||||
|
||||
{!forInvoice && (
|
||||
!isBeingEdit && itemQty > 0 ? (
|
||||
<div className={styles.itemQty}>
|
||||
<div className={styles.qtyGroup}>
|
||||
<button className={styles.qtyBtn} onClick={handleNegativeClick} aria-label="Kurangi">-</button>
|
||||
{!blank && !isBeingEdit ? (
|
||||
<span className={styles.qtyVal}>{itemQty}</span>
|
||||
) : (
|
||||
<input className={styles.itemQtyInput} value={itemQty} onChange={handleQtyChange} disabled={!blank && !isBeingEdit} />
|
||||
)}
|
||||
<button className={styles.qtyBtn} onClick={handlePlusClick} aria-label="Tambah">+</button>
|
||||
portrait ? (
|
||||
(blank || isBeingEdit) ? (
|
||||
<div className={styles.itemQty}>
|
||||
<button className={styles.addButton} style={{ backgroundColor: '#ffffff', color: 'var(--brand-sage, #6B8F71)', borderColor: 'var(--brand-sage, #6B8F71)', minWidth: 90, height: 36, fontSize: 14 }} onClick={isBeingEdit ? handleUpdate : handleCreate}>
|
||||
{isBeingEdit ? 'Simpan' : 'Buat'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : !blank && !isBeingEdit ? (
|
||||
<div className={styles.itemQty}>
|
||||
<button className={styles.addButton} onClick={handlePlusClick} disabled={!isAvailable}>
|
||||
Pesan
|
||||
</button>
|
||||
</div>
|
||||
) : null
|
||||
) : (
|
||||
<div className={styles.itemQty}>
|
||||
<button className={styles.addButton} style={{ backgroundColor: '#ffffff', color: 'var(--brand-sage, #6B8F71)', borderColor: 'var(--brand-sage, #6B8F71)', width: 150 }} onClick={isBeingEdit ? handleUpdate : handleCreate}>
|
||||
{isBeingEdit ? 'Simpan' : 'Buat'}
|
||||
</button>
|
||||
</div>
|
||||
!isBeingEdit ? (
|
||||
<div className={styles.itemQty}>
|
||||
<div className={styles.qtyGroup}>
|
||||
<button className={styles.qtyBtn} onClick={handleNegativeClick} aria-label="Kurangi" style={{ width: 32, height: 32, fontSize: 18 }}>-</button>
|
||||
<span className={styles.qtyVal}>{itemQty}</span>
|
||||
<button className={styles.qtyBtn} onClick={handlePlusClick} aria-label="Tambah" style={{ width: 32, height: 32, fontSize: 18 }}>+</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className={styles.itemQty}>
|
||||
<button className={styles.addButton} style={{ backgroundColor: '#ffffff', color: 'var(--brand-sage, #6B8F71)', borderColor: 'var(--brand-sage, #6B8F71)', width: 130, height: 36, fontSize: 14 }} onClick={isBeingEdit ? handleUpdate : handleCreate}>
|
||||
{isBeingEdit ? 'Simpan' : 'Buat'}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
)}
|
||||
|
||||
@@ -204,19 +231,10 @@ const Item = ({
|
||||
ⓧ
|
||||
</div>
|
||||
)}
|
||||
{/* {blank && (
|
||||
<button className={styles.createItem} onClick={handleCreate}>
|
||||
Create Item
|
||||
</button>
|
||||
)} */}
|
||||
</div>
|
||||
{itemDescription && itemDescription != 'undefined' && itemDescription?.length ? (
|
||||
<div>
|
||||
<p className={styles.desc} style={{ padding: '4px 6px', margin: 0 }}>{itemDescription}</p>
|
||||
</div>
|
||||
) : null}
|
||||
{null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Item;
|
||||
export default Item;
|
||||
Reference in New Issue
Block a user