131 lines
3.6 KiB
JavaScript
131 lines
3.6 KiB
JavaScript
import { useEffect, useState } from "react";
|
||
import "../../styles/ConfirmBuyModal.css";
|
||
|
||
export default function ConfirmBuyModal({
|
||
item,
|
||
onConfirm,
|
||
onCancel,
|
||
allItems = [],
|
||
onNavigate
|
||
}) {
|
||
const [quantity, setQuantity] = useState(item.quantity);
|
||
const maxQuantity = item.quantity;
|
||
|
||
// Update quantity when item changes (navigation)
|
||
useEffect(() => {
|
||
setQuantity(item.quantity);
|
||
}, [item.id, item.quantity]);
|
||
|
||
// Find current index and check for prev/next
|
||
const currentIndex = allItems.findIndex(i => i.id === item.id);
|
||
const hasPrev = currentIndex > 0;
|
||
const hasNext = currentIndex < allItems.length - 1;
|
||
|
||
const handleIncrement = () => {
|
||
if (quantity < maxQuantity) {
|
||
setQuantity(prev => prev + 1);
|
||
}
|
||
};
|
||
|
||
const handleDecrement = () => {
|
||
if (quantity > 1) {
|
||
setQuantity(prev => prev - 1);
|
||
}
|
||
};
|
||
|
||
const handleConfirm = () => {
|
||
onConfirm(quantity);
|
||
};
|
||
|
||
const handlePrev = () => {
|
||
if (hasPrev && onNavigate) {
|
||
const prevItem = allItems[currentIndex - 1];
|
||
onNavigate(prevItem);
|
||
}
|
||
};
|
||
|
||
const handleNext = () => {
|
||
if (hasNext && onNavigate) {
|
||
const nextItem = allItems[currentIndex + 1];
|
||
onNavigate(nextItem);
|
||
}
|
||
};
|
||
|
||
const imageUrl = item.item_image && item.image_mime_type
|
||
? `data:${item.image_mime_type};base64,${item.item_image}`
|
||
: null;
|
||
|
||
return (
|
||
<div className="confirm-buy-modal-overlay" onClick={onCancel}>
|
||
<div className="confirm-buy-modal" onClick={(e) => e.stopPropagation()}>
|
||
<div className="confirm-buy-header">
|
||
{item.zone && <div className="confirm-buy-zone">{item.zone}</div>}
|
||
<h2 className="confirm-buy-item-name">{item.item_name}</h2>
|
||
</div>
|
||
|
||
<div className="confirm-buy-image-section">
|
||
<button
|
||
className="confirm-buy-nav-btn confirm-buy-nav-prev"
|
||
onClick={handlePrev}
|
||
style={{ visibility: hasPrev ? 'visible' : 'hidden' }}
|
||
disabled={!hasPrev}
|
||
>
|
||
‹
|
||
</button>
|
||
|
||
<div className="confirm-buy-image-container">
|
||
{imageUrl ? (
|
||
<img src={imageUrl} alt={item.item_name} className="confirm-buy-image" />
|
||
) : (
|
||
<div className="confirm-buy-image-placeholder">📦</div>
|
||
)}
|
||
</div>
|
||
|
||
<button
|
||
className="confirm-buy-nav-btn confirm-buy-nav-next"
|
||
onClick={handleNext}
|
||
style={{ visibility: hasNext ? 'visible' : 'hidden' }}
|
||
disabled={!hasNext}
|
||
>
|
||
›
|
||
</button>
|
||
</div>
|
||
|
||
<div className="confirm-buy-quantity-section">
|
||
<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>
|
||
);
|
||
}
|