function CartDrawer({ open, cart, setQty, removeItem, onClose, onConfirm }) { if (!open) return null; const subtotal = cart.reduce((s, i) => s + i.qty * i.price, 0); const total = subtotal; return ( <>
); } function QtyControl({ qty, setQty }) { return (
{qty}
); } function Line({ label, value }) { return (
{label} {value.toFixed(2).replace(".", ",")} €
); } // ── Confirmation modal ────────────────────────────────────────── const RESTAURANT_LAT = 48.84018, RESTAURANT_LON = 2.37855; function haversineKm(lat1, lon1, lat2, lon2) { const R = 6371; const dLat = (lat2 - lat1) * Math.PI / 180; const dLon = (lon2 - lon1) * Math.PI / 180; const a = Math.sin(dLat / 2) ** 2 + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon / 2) ** 2; return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); } async function geocodeAddress(address) { const url = "https://photon.komoot.io/api/?q=" + encodeURIComponent(address) + "&limit=1&lang=fr&bbox=2.2241,48.8156,2.4699,48.9021"; const data = await fetch(url).then(r => r.json()); if (!data.features?.length) return null; const [lon, lat] = data.features[0].geometry.coordinates; return { lat, lon }; } function photonDisplayName(p) { const parts = [ p.housenumber && p.street ? `${p.housenumber} ${p.street}` : p.street || p.name, p.postcode && p.city ? `${p.postcode} ${p.city}` : p.city, ].filter(Boolean); return parts.join(", "); } function isDeliveryOpen() { const now = new Date(); const day = now.getDay(); // 0=dim, 1=lun … 5=ven, 6=sam if (day === 0 || day === 6) return false; // livraison lun-ven uniquement const h = now.getHours(), m = now.getMinutes(), total = h * 60 + m; return total >= 12 * 60 && total < 14 * 60 + 30; } function ConfirmCartModal({ cart, onClose, onPay, authUser }) { const deliveryAvailable = authUser || isDeliveryOpen(); const [type, setType] = React.useState(deliveryAvailable ? "Livraison" : "À emporter"); const [form, setForm] = React.useState({ name: "", phone: "", email: "", address: "", note: "" }); const [zoneError, setZoneError] = React.useState(""); const [zoneChecking, setZoneChecking] = React.useState(false); const [suggestions, setSuggestions] = React.useState([]); const [showSuggestions, setShowSuggestions] = React.useState(false); const selectedCoordsRef = React.useRef(null); const debounceRef = React.useRef(null); const subtotal = cart.reduce((s, i) => s + i.qty * i.price, 0); const total = subtotal; React.useEffect(() => { if (type !== "Livraison" || form.address.length < 3) { setSuggestions([]); return; } clearTimeout(debounceRef.current); debounceRef.current = setTimeout(async () => { try { const url = "https://photon.komoot.io/api/?q=" + encodeURIComponent(form.address) + "&limit=5&lang=fr&bbox=2.2241,48.8156,2.4699,48.9021"; const data = await fetch(url).then(r => r.json()); const seen = new Set(); const items = (data.features || []).map(f => ({ label: photonDisplayName(f.properties), lat: f.geometry.coordinates[1], lon: f.geometry.coordinates[0], })).filter(s => { if (!s.label || seen.has(s.label)) return false; seen.add(s.label); return true; }); setSuggestions(items); setShowSuggestions(true); } catch { setSuggestions([]); } }, 400); return () => clearTimeout(debounceRef.current); }, [form.address, type]); const valid = form.name.trim() && form.phone.trim() && (type === "À emporter" || form.address.trim()) && !zoneChecking; const handleSubmit = async () => { if (type === "Livraison") { setZoneError(""); setZoneChecking(true); try { const coords = selectedCoordsRef.current || await geocodeAddress(form.address); if (!coords) { setZoneError("Adresse introuvable. Veuillez vérifier votre saisie."); setZoneChecking(false); return; } const dist = haversineKm(RESTAURANT_LAT, RESTAURANT_LON, coords.lat, coords.lon); if (dist > 2) { setZoneError(`Adresse hors zone de livraison (${dist.toFixed(1)} km du restaurant). Nous livrons uniquement dans un rayon de 2 km.`); setZoneChecking(false); return; } } catch { setZoneError("Impossible de vérifier l'adresse. Veuillez réessayer."); setZoneChecking(false); return; } setZoneChecking(false); } onPay({ type, ...form, total }); }; return (
e.target === e.currentTarget && onClose()}>
Étape 1 / 3
Confirmer votre commande
Récapitulatif
{cart.map(i => (
{i.qty} × {i.name} {(i.qty * i.price).toFixed(2).replace(".", ",")} €
))}
Total {total.toFixed(2).replace(".", ",")} €
Mode de retrait
{[ { id: "Livraison", sub: deliveryAvailable ? "Sous 30–45 min" : "Indisponible actuellement", disabled: !deliveryAvailable }, { id: "À emporter", sub: "Prêt en 20 min", disabled: false }, ].map(t => ( ))}
{!deliveryAvailable && (
La livraison est disponible du lundi au vendredi de 12h à 14h30.
)}
setForm({...form, name: e.target.value})} placeholder="Marie Dupont" />
setForm({...form, phone: e.target.value})} placeholder="06 12 34 56 78" />
setForm({...form, email: e.target.value})} placeholder="marie@exemple.fr" autoComplete="email" />
{type === "Livraison" && (
{ setForm({...form, address: e.target.value}); setZoneError(""); setShowSuggestions(true); selectedCoordsRef.current = null; }} onBlur={() => setTimeout(() => setShowSuggestions(false), 150)} onFocus={() => suggestions.length && setShowSuggestions(true)} placeholder="9 rue Henri Desgranges, 75012 Paris" autoComplete="off" /> {showSuggestions && suggestions.length > 0 && (
    {suggestions.map((s, i) => (
  • { setForm(f => ({...f, address: s.label})); selectedCoordsRef.current = { lat: s.lat, lon: s.lon }; setSuggestions([]); setShowSuggestions(false); setZoneError(""); }} style={{ padding: "10px 14px", fontSize: 13, cursor: "pointer", borderBottom: i < suggestions.length - 1 ? "1px solid var(--line)" : "none", }} onMouseEnter={e => e.currentTarget.style.background = "var(--cream)"} onMouseLeave={e => e.currentTarget.style.background = "#fff"} >{s.label}
    • ))}
)} {zoneError && (
{zoneError}
)}
)}