68 lines
1.9 KiB
JavaScript
68 lines
1.9 KiB
JavaScript
import { useState } from "react";
|
||
import "../../styles/ConfirmBuyModal.css";
|
||
|
||
export default function ConfirmBuyModal({ item, onConfirm, onCancel }) {
|
||
const [quantity, setQuantity] = useState(item.quantity);
|
||
const maxQuantity = item.quantity;
|
||
|
||
const handleIncrement = () => {
|
||
if (quantity < maxQuantity) {
|
||
setQuantity(prev => prev + 1);
|
||
}
|
||
};
|
||
|
||
const handleDecrement = () => {
|
||
if (quantity > 1) {
|
||
setQuantity(prev => prev - 1);
|
||
}
|
||
};
|
||
|
||
const handleConfirm = () => {
|
||
onConfirm(quantity);
|
||
};
|
||
|
||
return (
|
||
<div className="confirm-buy-modal-overlay" onClick={onCancel}>
|
||
<div className="confirm-buy-modal" onClick={(e) => e.stopPropagation()}>
|
||
<h2>Mark as Bought</h2>
|
||
<p className="confirm-buy-item-name">"{item.item_name}"</p>
|
||
|
||
<div className="confirm-buy-quantity-section">
|
||
<p className="confirm-buy-label">Quantity to buy:</p>
|
||
<div className="confirm-buy-counter">
|
||
<button
|
||
onClick={handleDecrement}
|
||
className="confirm-buy-counter-btn"
|
||
disabled={quantity <= 1}
|
||
>
|
||
−
|
||
</button>
|
||
<input
|
||
type="number"
|
||
value={quantity}
|
||
readOnly
|
||
className="confirm-buy-counter-display"
|
||
/>
|
||
<button
|
||
onClick={handleIncrement}
|
||
className="confirm-buy-counter-btn"
|
||
disabled={quantity >= maxQuantity}
|
||
>
|
||
+
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="confirm-buy-actions">
|
||
<button onClick={onCancel} className="confirm-buy-cancel">
|
||
Cancel
|
||
</button>
|
||
<button onClick={handleConfirm} className="confirm-buy-confirm">
|
||
Mark as Bought
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|