/* Cart drawer + Tweaks panel */ // Governorate values stay English (stored/sent to the backend unchanged) but // carry an Arabic display label so the checkout select reads correctly in RTL. const EG_GOVS = [ { value: "Cairo", ar: "القاهرة" }, { value: "Giza", ar: "الجيزة" }, { value: "Alexandria", ar: "الإسكندرية" }, { value: "Qalyubia", ar: "القليوبية" }, { value: "Sharqia", ar: "الشرقية" }, { value: "Dakahlia", ar: "الدقهلية" }, { value: "Beheira", ar: "البحيرة" }, { value: "Monufia", ar: "المنوفية" }, { value: "Gharbia", ar: "الغربية" }, { value: "Kafr el-Sheikh", ar: "كفر الشيخ" }, { value: "Damietta", ar: "دمياط" }, { value: "Port Said", ar: "بورسعيد" }, { value: "Ismailia", ar: "الإسماعيلية" }, { value: "Suez", ar: "السويس" }, { value: "North Sinai", ar: "شمال سيناء" }, { value: "South Sinai", ar: "جنوب سيناء" }, { value: "Red Sea", ar: "البحر الأحمر" }, { value: "New Valley", ar: "الوادي الجديد" }, { value: "Matruh", ar: "مطروح" }, { value: "Fayoum", ar: "الفيوم" }, { value: "Beni Suef", ar: "بني سويف" }, { value: "Minya", ar: "المنيا" }, { value: "Asyut", ar: "أسيوط" }, { value: "Sohag", ar: "سوهاج" }, { value: "Qena", ar: "قنا" }, { value: "Luxor", ar: "الأقصر" }, { value: "Aswan", ar: "أسوان" }, ]; // Pluralize the bag's piece count. EN: "1 item" / "2 items". AR follows // Arabic grammatical number: 1 → قطعة, 2 → قطعتان, 3–10 → قطع, 0/11+ → قطعة. function fmtItemCount(n, lang) { if (lang === "en") return `${n} ${n === 1 ? "item" : "items"}`; const num = Number(n).toLocaleString("ar-EG"); let word; if (n === 1) word = "قطعة"; else if (n === 2) word = "قطعتان"; else if (n >= 3 && n <= 10) word = "قطع"; else word = "قطعة"; return `${num} ${word}`; } function CheckoutModal({ open, onClose, items, setItems, lang, session }) { const [step, setStep] = React.useState("form"); // form | syncing | done | error const [err, setErr] = React.useState({ en: "", ar: "", code: "" }); const [conflictItem, setConflictItem] = React.useState(null); // {product_name_en, product_name_ar, available, requested, product_id} const [orderNum, setOrderNum] = React.useState(""); const [addr, setAddr] = React.useState({ recipient: "", phone: "", line1: "", building: "", floor: "", apartment: "", landmark: "", area: "", city: "Cairo", governorate: "Cairo", }); const [notes, setNotes] = React.useState(""); // Submit guard — survives React re-renders. Prevents double-submission // from rapid clicks, Enter-key chord, or page-level keypress. const submittingRef = React.useRef(false); // Idempotency key — a fresh UUID per checkout intent. The Edge Function // doesn't yet use this server-side, but client carries it so we can wire // an Idempotency-Key header later without breaking older flows. const idemRef = React.useRef(null); React.useEffect(() => { if (open) { setStep("form"); setErr({ en: "", ar: "", code: "" }); setOrderNum(""); setConflictItem(null); submittingRef.current = false; idemRef.current = (crypto?.randomUUID && crypto.randomUUID()) || ("idem-" + Date.now() + "-" + Math.random().toString(36).slice(2, 10)); } }, [open]); const set = (k, v) => setAddr(a => ({ ...a, [k]: v })); const submit = async (e) => { e.preventDefault(); if (submittingRef.current) return; // double-submit guard if (!addr.recipient || !addr.phone || !addr.line1 || !addr.city || !addr.governorate) return; submittingRef.current = true; setStep("syncing"); setErr({ en: "", ar: "", code: "" }); setConflictItem(null); let translated = null; try { const body = { address: addr, customer_notes: notes || null }; if (session) { // Logged-in: sync cart to cart_items, Edge Function reads from DB const uid = session.user.id; await window.sb.from("cart_items").delete().eq("user_id", uid); // Collapse to one row per product_id before inserting. The cart UI already // merges quantities per piece, but de-duping here guarantees a repeated // product can't create two cart_items rows that the checkout function would // then double-count (there is no unique (user_id, product_id) constraint). // The preceding delete clears the user's cart, so a plain insert never // conflicts — "replace the whole cart", idempotent. const byProduct = {}; items.filter(i => i.id).forEach(i => { byProduct[i.id] = { user_id: uid, product_id: i.id, quantity: i.qty }; }); const rows = Object.values(byProduct); if (rows.length) await window.sb.from("cart_items").insert(rows); } else { // Guest: pass items directly — Edge Function re-prices from DB body.guest_email = addr.email || ""; body.guest_name = addr.recipient; body.client_items = items.filter(i => i.id).map(i => ({ product_id: i.id, quantity: i.qty })); } const headers = { "Content-Type": "application/json", "apikey": window.SB_ANON, // Edge Functions require a Bearer token. Use user JWT when logged in, otherwise the anon key. "Authorization": "Bearer " + (session?.access_token || window.SB_ANON), // Carries the per-intent key for future server-side dedup. "X-Idempotency-Key": idemRef.current, }; // Network + timeout wrapper — never let a hung fetch lock the UI forever. const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), 30_000); let res, data; try { res = await fetch(`${window.SB_URL}/functions/v1/checkout_create_order`, { method: "POST", headers, body: JSON.stringify(body), signal: controller.signal, }); data = await res.json().catch(() => ({})); } finally { clearTimeout(timeoutId); } if (!res.ok) { // Structured error: { code, friendly_en, friendly_ar, details } translated = window.translateError(data, "generic_5xx"); if (data?.details?.product_name_en) { setConflictItem({ product_id: data.details.product_id, product_name_en: data.details.product_name_en, product_name_ar: data.details.product_name_ar, available: data.details.available, requested: data.details.requested, }); } // If the server says we need fresh auth, kick the silent recovery. if (translated.code === "auth_required") { await window._handleAuthFailure?.({ message: "auth_required" }); } // Log for ops — never visible to customer. window._logClientError?.("checkout_error:" + translated.code, JSON.stringify(data).slice(0, 800), { url: window.location.href }); throw new Error(translated.code); } setOrderNum(data.order_number); setItems([]); setStep("done"); } catch (ex) { // Final translation — covers AbortError, network failure, any thrown shape. const t = translated || window.translateError(ex, "network"); setErr({ en: t.en, ar: t.ar, code: t.code }); setStep("error"); } finally { submittingRef.current = false; } }; if (!open) return null; const inp = { display: "block", width: "100%", marginTop: 6, padding: "11px 14px", border: "1px solid var(--line)", borderRadius: 10, background: "var(--paper)", fontFamily: "var(--ff-sans)", fontSize: 14, outline: 0, boxSizing: "border-box" }; return ( <>
{step === "done" ? (

{lang === "en" ? "Order placed." : "تمّ الطلب."}

{lang === "en" ? `Order ${orderNum} is confirmed. We'll be in touch soon.` : `طلبك ${orderNum} مُؤكَّد. سنتواصل معك قريبًا.`}

) : step === "error" ? (
{lang === "en" ? "A small pause" : "وقفة قصيرة"}

{(() => { if (err.code === "stock_unavailable" || err.code === "stock_race") { return lang === "en" ? "We need to update your bag." : "نحتاج إلى تحديث حقيبتك."; } if (err.code === "auth_required") { return lang === "en" ? "Your session needs a refresh." : "تحتاج جلستك إلى تحديث."; } if (err.code === "cart_empty") { return lang === "en" ? "Your bag is empty." : "حقيبتك فارغة."; } if (err.code === "address_required" || err.code === "invalid_phone" || err.code === "email_required") { return lang === "en" ? "Almost there." : "كاد الطلب يكتمل."; } return lang === "en" ? "Something needs our attention." : "هناك ما يحتاج اهتمامنا."; })()}

{lang === "ar" ? (err.ar || err.en) : (err.en || err.ar)}

{conflictItem && (
{lang === "en" ? "Affected piece" : "القطعة المتأثّرة"}
{lang === "ar" ? (conflictItem.product_name_ar || conflictItem.product_name_en) : conflictItem.product_name_en}
{Number.isFinite(conflictItem.available) && (
{lang === "en" ? (conflictItem.available > 0 ? `Only ${conflictItem.available} now available — you asked for ${conflictItem.requested}.` : "Currently sold out.") : (conflictItem.available > 0 ? `المتاح الآن ${conflictItem.available} — طلبت ${conflictItem.requested}.` : "نفدت حاليًّا.")}
)}
)}
{err.code === "auth_required" && ( {lang === "en" ? "Go to account" : "إلى الحساب"} → )}
) : (

{lang === "en" ? "Delivery details" : "بيانات التوصيل"}

{!session && (
{lang === "en" ? ( <>Checking out as guest. Sign in to track your order. ) : ( <>دفع كضيف. سجّل الدخول لمتابعة طلبك. )}
)} {!session && (
set("email", e.target.value)} style={inp} placeholder="your@email.com" />
)}
set("recipient", e.target.value)} style={inp} />
set("phone", e.target.value)} style={inp} placeholder="+20 1XX XXX XXXX" />
set("line1", e.target.value)} style={inp} placeholder={lang === "en" ? "Street name" : "اسم الشارع"} />
{/* Operational address fields — building / floor / apt / landmark — required for SANAA fulfillment + Bosta/Aramex courier handover */}
set("building", e.target.value)} style={inp} placeholder={lang === "en" ? "14B" : "١٤"} />
set("floor", e.target.value)} style={inp} placeholder="3" />
set("apartment", e.target.value)} style={inp} placeholder="12" />
set("landmark", e.target.value)} style={inp} placeholder={lang === "en" ? "Next to the old cinema" : "بجوار السينما القديمة"} />
set("area", e.target.value)} style={inp} placeholder={lang === "en" ? "Zamalek" : "الزمالك"} />
set("city", e.target.value)} style={inp} />
set("governorate", v)} options={EG_GOVS.map(g => ({ value: g.value, label: lang === "ar" ? g.ar : g.value }))} placeholder={lang === "en" ? "Select governorate" : "اختر المحافظة"} style={{ marginTop: 6 }} />