// Saraya Events — Checkout, Payment UI, and Order Confirmation. // // ⚠️ DEV NOTE — PAYMENT GATEWAY INTEGRATION // This is a complete front-end payment FLOW only. No real charge is made. // To go live, connect a UAE payment gateway where marked `=== GATEWAY ===` // below (recommended: Stripe, Tap Payments, Telr, PayTabs, or Network // International). Typically you would: create a payment intent / session on // your backend, redirect or mount the gateway's hosted fields here, and on // the success webhook mark the order `payment.status = 'paid'`. For now we // simulate success for card/Apple Pay/Google Pay and mark transfer / COD / // pay-on-confirmation as 'awaiting'. const { useState: useStateCo } = React; // Only methods with active !== false are shown at checkout. Card runs through // Stripe Checkout, which itself offers Apple Pay / Google Pay to eligible devices // (so separate buttons are redundant). Tabby/Tamara are NOT integrated — they must // never be selectable, as they would create an UNPAID order. Flip active to true // only once a method is genuinely wired end-to-end. const PAYMENT_METHODS = [ { id: 'card', icon: 'credit-card', label: { en: 'Credit / Debit Card', ar: 'بطاقة ائتمان / خصم' }, instant: true, active: true }, { id: 'applepay', icon: 'apple', label: { en: 'Apple Pay', ar: 'Apple Pay' }, instant: true, active: false }, { id: 'googlepay',icon: 'smartphone', label: { en: 'Google Pay', ar: 'Google Pay' }, instant: true, active: false }, { id: 'tabby', icon: 'calendar', label: { en: 'Tabby — Pay in 4', ar: 'تابي — ادفع على 4 دفعات' }, instant: false, active: false }, { id: 'tamara', icon: 'layers', label: { en: 'Tamara — Split in 3', ar: 'تمارا — قسّم على 3 دفعات' }, instant: false, active: false }, ]; function CheckoutPage() { const { t, lang } = useLang(); const { go } = useNav(); const cart = useCart(); const ar = lang === 'ar'; const T = cart.totals; const allDigital = T.allDigital; const hasPhysical = T.hasPhysical; const subItem = cart.items.find((x) => x.isSubscription); const subMeta = (subItem && subItem.meta) || {}; const hasRental = cart.items.some((x) => x.meta && x.meta.rental); const hasService = cart.items.some((x) => x.meta && x.meta.serviceBooking); const [f, setF] = useStateCo({ name: subMeta.owner || '', phone: subMeta.phone || '', email: subMeta.email || '', address: '', emirate: '', deliveryDate: '', deliveryTime: '', eventDate: '', eventTime: '', rentalStart: '', rentalEnd: '', svcEventDate: '', svcEventTime: '', svcGuests: '', svcVenue: '', notes: '', giftMessage: '', recipientName: '', recipientPhone: '' }); const [method, setMethod] = useStateCo('card'); const [card, setCard] = useStateCo({ num: '', exp: '', cvc: '', name: '' }); const [code, setCode] = useStateCo(cart.code || ''); const [codeMsg, setCodeMsg] = useStateCo(''); const [processing, setProcessing] = useStateCo(false); const [errors, setErrors] = useStateCo({}); const set = (k, v) => setF((p) => Object.assign({}, p, { [k]: v })); React.useEffect(() => { try { if (!cart.items || cart.items.length === 0) return; window.sarayaTrack && window.sarayaTrack('begin_checkout', { currency: 'AED', value: T.total, items: cart.items.map((it) => ({ item_id: it.id, item_name: (it.name && (it.name.en || it.name)) || '', price: Number(it.price) || 0, quantity: it.qty })), }); } catch (e) {} }, []); // Prefill service/rental dates chosen on the listing page. React.useEffect(() => { const svc = cart.items.find((x) => x.meta && x.meta.serviceBooking && x.meta.eventDate); if (svc && svc.meta) { setF((p) => Object.assign({}, p, { svcEventDate: p.svcEventDate || svc.meta.eventDate || '', svcEventTime: p.svcEventTime || svc.meta.eventTime || '', svcGuests: p.svcGuests || (svc.meta.guests != null && svc.meta.guests !== '' ? String(svc.meta.guests) : ''), svcVenue: p.svcVenue || svc.meta.venue || '', })); } const rnt = cart.items.find((x) => x.meta && x.meta.rental && x.meta.rentalStart); if (rnt && rnt.meta) { setF((p) => Object.assign({}, p, { rentalStart: p.rentalStart || rnt.meta.rentalStart || '', rentalEnd: p.rentalEnd || rnt.meta.rentalEnd || '', })); } }, []); if (cart.items.length === 0) { return

{ar ? 'سلتك فارغة' : 'Your cart is empty'}

; } const applyCode = () => { const r = cart.applyCode(code); setCodeMsg(r.msg); }; const methods = PAYMENT_METHODS.filter((m) => m.active !== false && !(m.physicalOnly && !hasPhysical)); const validate = () => { const e = {}; if (!f.name.trim()) e.name = 1; if (f.phone.replace(/\D/g, '').length < 7) e.phone = 1; if (!f.email.trim() || !/^[^@]+@[^@]+\.[^@]+$/.test(f.email)) e.email = 1; if (hasPhysical) { if (!f.address.trim()) e.address = 1; if (!f.emirate) e.emirate = 1; if (!f.deliveryDate) e.deliveryDate = 1; if (!f.deliveryTime) e.deliveryTime = 1; } if (hasRental) { if (!f.rentalStart) e.rentalStart = 1; if (!f.rentalEnd) e.rentalEnd = 1; if (f.rentalStart && f.rentalEnd && f.rentalEnd < f.rentalStart) e.rentalEnd = 1; const badRental = cart.items.some((it) => it.meta && it.meta.rental && (!(Number(it.meta.perDay) > 0) || !(Number(it.meta.appliedDays) >= 1) || !(Number(it.qty) >= (Number(it.meta.minQty) || 1)))); if (badRental) e.rentalItem = 1; } if (hasService) { if (!f.svcEventDate) e.svcEventDate = 1; if (!String(f.svcEventTime).trim()) e.svcEventTime = 1; if (!String(f.svcGuests).trim() || Number(f.svcGuests) < 1) e.svcGuests = 1; if (!String(f.svcVenue).trim()) e.svcVenue = 1; } // On-site card fields only exist in demo mode; with live Stripe the card is // entered on Stripe's page, so don't require them here. if (method === 'card' && !(window.stripeConfigured && window.stripeConfigured())) { if (card.num.replace(/\s/g, '').length < 12) e.cardnum = 1; if (!card.exp) e.exp = 1; if (!card.cvc) e.cvc = 1; } setErrors(e); return Object.keys(e).length === 0; }; const placeOrder = async () => { if (!validate()) { window.scrollTo({ top: 0, behavior: 'smooth' }); return; } setProcessing(true); // Guard: re-check the chosen service date is still bookable (blocks lead-time, // blocked dates, non-working days and capacity — prevents a double-booking // between opening the page and paying). if (hasService && window.SarayaService && window.SarayaService.availability) { const svc = cart.items.find((x) => x.meta && x.meta.serviceBooking); const vid = svc && svc.meta && svc.meta.vendorId; const lead = (svc && svc.meta && Number(svc.meta.leadDays)) || 0; if (vid && f.svcEventDate) { const ok = await window.SarayaService.availability.isBookable(vid, f.svcEventDate, lead); if (!ok) { setProcessing(false); setErrors({ svcEventDate: 1, svcUnavailable: 1 }); window.scrollTo({ top: 0, behavior: 'smooth' }); return; } } } // Guard: re-check every rental line's date range is still available for its qty. if (hasRental && window.SarayaService && window.SarayaService.rentals && window.SarayaService.rentals.rangeAvailable && f.rentalStart && f.rentalEnd) { for (const it of cart.items) { if (it.meta && it.meta.rental && it.meta.rentalId) { const ok = await window.SarayaService.rentals.rangeAvailable(it.meta.rentalId, f.rentalStart, f.rentalEnd, Number(it.qty) || 1); if (!ok) { setProcessing(false); setErrors({ rentalStart: 1, rentalEnd: 1, rentalUnavailable: 1 }); window.scrollTo({ top: 0, behavior: 'smooth' }); return; } } } } const mObj = PAYMENT_METHODS.find((m) => m.id === method); // Vendor package subscription (dashboard "add to cart" flow): charge the real // recurring Stripe subscription. Scoped to sub items that carry a packageLevel // — the showroom lead flow (no packageLevel) and every product / rental / // service checkout are left completely untouched. if (subItem && subMeta.packageLevel && mObj.instant && window.stripeConfigured && window.stripeConfigured()) { try { const res = await window.stripeSubscribe({ packageLevel: subMeta.packageLevel, billingInterval: subMeta.interval === 'annual' ? 'year' : 'month', successPath: 'vendor-dashboard', cancelPath: 'checkout', }); if (res && res.redirected) { try { cart.clear(); } catch (_) {} return; } // simulated (Stripe not configured) → fall through to the request-recording flow } catch (e) { setProcessing(false); setErrors({ stripe: 1 }); window.scrollTo({ top: 0, behavior: 'smooth' }); return; } } // Stripe: card / Apple Pay / Google Pay redirect to Stripe Checkout when // a publishable key + backend are configured (admin → Payments). The order // is then created server-side by the webhook. If Stripe isn't configured, // we fall through to the built-in simulation so the demo still completes. // Real card payment via Stripe Checkout (products / rentals / services). // The Supabase edge function creates the order (+ items) with exact totals // and the Stripe session; the stripe-webhook records the payment and marks // the order paid. Subscriptions are NOT charged here (they record a // request); vendor subscriptions have their own Stripe flow. if (mObj.instant && !subItem && window.stripeConfigured && window.stripeConfigured()) { try { const _typeOf = (it) => (it.meta && it.meta.rental) ? 'rental' : (it.meta && it.meta.serviceBooking) ? 'service' : 'product'; const _types = Array.from(new Set(cart.items.map(_typeOf))); const res = await window.stripeCheckout({ lineItems: window.buildStripeLineItems(cart.items), // raw product lines (fils) customer: { name: f.name, email: f.email, phone: f.phone }, totals: { subtotal: T.subtotal, delivery: T.delivery, vat: T.vat, discount: T.discount, total: T.total }, metadata: { name: f.name, email: f.email, phone: f.phone, address: hasPhysical ? f.address : '', emirate: hasPhysical ? f.emirate : '', discountCode: cart.code || '', order_type: _types.length === 1 ? _types[0] : 'product', rental_start: hasRental ? f.rentalStart : '', rental_end: hasRental ? f.rentalEnd : '', service_event_date: hasService ? f.svcEventDate : '', service_event_time: hasService ? f.svcEventTime : '', guest_count: hasService ? f.svcGuests : '', venue: hasService ? f.svcVenue : '', notes: [f.notes || '', cart.items.filter((it) => it.meta && it.meta.serviceBooking).map((it) => { const full = Number(it.meta.fullPrice) || 0; const paid = Number(it.price) || 0; const nm = (it.meta.serviceName && (it.meta.serviceName.en || it.meta.serviceName)) || 'Service'; return nm + ': ' + (it.meta.depositPct || 10) + '% deposit AED ' + paid.toFixed(2) + ' paid; full AED ' + full.toFixed(2) + '; balance AED ' + Math.max(0, full - paid).toFixed(2) + ' due.'; }).join(' ')].filter(Boolean).join(' — '), }, }); if (res && res.redirected) return; // Stripe hosted page takes over } catch (e) { setProcessing(false); setErrors({ stripe: 1 }); window.scrollTo({ top: 0, behavior: 'smooth' }); return; } } // Simulated success (no Stripe yet) or non-instant methods (transfer / COD / pay-on-confirmation). setTimeout(async () => { // Subscription: on successful payment, create it + generate access credentials. let access = null, subscriptionId = null; if (subItem) { const m = subItem.meta || {}; const handle = (f.email.split('@')[0] || 'member').replace(/[^a-z0-9]/gi, '').toLowerCase(); access = { username: handle + '-' + Math.random().toString(36).slice(2, 5), password: Math.random().toString(36).slice(2, 9) }; try { const sub = window.SubsAPI.create({ owner: m.owner || f.name, business: m.business || f.name, phone: f.phone, email: f.email, category: m.category || '', desc: m.desc || '', status: 'active', payment: mObj.instant ? 'paid' : 'pending', access }); subscriptionId = sub.id; } catch (e2) {} try { localStorage.setItem('saraya_member', JSON.stringify({ business: m.business || f.name, email: f.email, since: Date.now() })); } catch (e3) {} // Persist the subscription signup so Saraya actually receives it — it // was localStorage-only before. subscriptions.INSERT is admin-only by // design (admins provision after payment), so we record it as a request // in `leads` rather than minting an unpaid "active" subscription. if (window.SarayaDB && window.saveLead) { let subRes = { ok: false }; try { subRes = await window.saveLead({ leadType: 'vendor_application', source: 'showroom_subscription', name: (m.business || f.name), phone: f.phone, email: f.email, message: 'Virtual Showroom subscription request: ' + ((subItem.name && (subItem.name.en || subItem.name)) || 'plan') + ' — AED ' + subItem.price + '/mo. Payment not collected yet; please provision after payment.', }); } catch (e5) { subRes = { ok: false, error: e5 }; } if (!subRes.ok && !subRes.fallback) { setProcessing(false); setErrors({ order: 1 }); window.scrollTo({ top: 0, behavior: 'smooth' }); return; // real failure → don't claim success; the signup wasn't received } } } // Persist the order to Supabase so Saraya actually receives it (source of // truth for Staff Operations) — checkout previously wrote only localStorage. // Nothing is charged in simulated mode, so the payment stays PENDING; a real // Stripe webhook is the only thing that may later mark it paid. Subscriptions // use their own flow above and are not double-persisted here. let dbRef = null; if (!subItem && window.SarayaDB) { // Type the order + each item by what's actually in the cart so rentals // and service bookings aren't miscategorised as products in Staff Ops. const itemTypeOf = (it) => (it.meta && it.meta.rental) ? 'rental' : (it.meta && it.meta.serviceBooking) ? 'service' : 'product'; const _types = Array.from(new Set(cart.items.map(itemTypeOf))); // orders.type allows product|rental|service (no "mixed"); for a mixed // cart use the first item's type — each item still carries its own type. const orderPayload = { type: _types.length === 1 ? _types[0] : itemTypeOf(cart.items[0]), subtotal: T.subtotal, discount_amount: T.discount, delivery_fee: T.delivery, vat_amount: T.vat, total_amount: T.total, delivery_address: hasPhysical ? { emirate: f.emirate, street: f.address } : null, notes: f.notes || '', guest_name: f.name, guest_email: f.email, guest_phone: f.phone, payment_method: method, items: cart.items.map((it) => { // Route the real UUID to the matching column so the order attributes // to the right vendor (drives commission + payout in create_guest_order). const _t = itemTypeOf(it); const _ref = (it.meta && it.meta.serviceId) || (it.meta && it.meta.rentalId) || it.id; const _uuid = (typeof _ref === 'string' && _ref.length === 36) ? _ref : null; return { item_type: _t, product_id: _t === 'product' ? _uuid : null, rental_id: _t === 'rental' ? _uuid : null, service_id: _t === 'service' ? _uuid : null, name_en: (it.name && (it.name.en || it.name)) || 'Item', unit_price: it.price, quantity: it.qty, line_total: it.price * it.qty, }; }), }; try { const { data: created, error } = await window.SarayaDB.rpc('create_guest_order', { p: orderPayload }); if (error || !created) { setProcessing(false); setErrors({ order: 1 }); window.scrollTo({ top: 0, behavior: 'smooth' }); return; // real failure → keep the form open, do NOT show a false success } const rec = Array.isArray(created) ? created[0] : created; dbRef = rec && rec.reference; } catch (e4) { setProcessing(false); setErrors({ order: 1 }); window.scrollTo({ top: 0, behavior: 'smooth' }); return; } } const orderInput = { customer: { name: f.name, phone: f.phone, email: f.email }, address: hasPhysical ? f.address : '', emirate: hasPhysical ? f.emirate : '', items: cart.items.map((it) => ({ id: it.id, name: it.name, price: it.price, qty: it.qty, digital: it.digital, isSubscription: it.isSubscription, meta: it.meta || null })), totals: { subtotal: T.subtotal, discount: T.discount, delivery: T.delivery, vat: T.vat, total: T.total, allDigital: T.allDigital }, fulfilment: { deliveryDate: f.deliveryDate, deliveryTime: f.deliveryTime, eventDate: f.eventDate, eventTime: f.eventTime, giftMessage: f.giftMessage, recipientName: f.recipientName, recipientPhone: f.recipientPhone, }, notes: f.notes, // Honest: never "paid" in simulated mode — only a real charge may set paid. payment: { method, methodLabel: mObj.label.en, status: 'awaiting' }, discountCode: cart.code || '', access, subscriptionId, }; if (dbRef) orderInput.number = dbRef; // keep the customer's ref == the DB reference const order = window.OrdersAPI.create(orderInput); cart.clear(); go('confirmation/' + order.id); setProcessing(false); }, 1400); }; return (

{ar ? 'إتمام الشراء' : 'Checkout'}

{ar ? 'دفع آمن ومشفّر' : 'Secure, encrypted checkout'}
{/* LEFT: forms */}
set('name', e.target.value)} /> set('phone', e.target.value)} placeholder="+971…" />
set('email', e.target.value)} /> {hasPhysical && (