48 lines
1.5 KiB
JavaScript
48 lines
1.5 KiB
JavaScript
import "../../styles/components/ConfirmAddExistingModal.css";
|
|
|
|
export default function ConfirmAddExistingModal({
|
|
itemName,
|
|
currentQuantity,
|
|
addingQuantity,
|
|
onConfirm,
|
|
onCancel
|
|
}) {
|
|
const newQuantity = currentQuantity + addingQuantity;
|
|
|
|
return (
|
|
<div className="modal-overlay" onClick={onCancel}>
|
|
<div className="modal" onClick={(e) => e.stopPropagation()}>
|
|
<h2 className="text-center text-xl mb-4">
|
|
<strong className="text-primary font-semibold">{itemName}</strong> is already in your list
|
|
</h2>
|
|
|
|
<div className="mb-4">
|
|
<div className="confirm-add-existing-qty-info">
|
|
<div className="qty-row">
|
|
<span className="qty-label">Current quantity:</span>
|
|
<span className="qty-value">{currentQuantity}</span>
|
|
</div>
|
|
<div className="qty-row">
|
|
<span className="qty-label">Adding:</span>
|
|
<span className="qty-value">+{addingQuantity}</span>
|
|
</div>
|
|
<div className="qty-row qty-total">
|
|
<span className="qty-label">New total:</span>
|
|
<span className="qty-value">{newQuantity}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="modal-actions">
|
|
<button className="btn btn-outline flex-1" onClick={onCancel}>
|
|
Cancel
|
|
</button>
|
|
<button className="btn btn-primary flex-1" onClick={onConfirm}>
|
|
Update Quantity
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|