// Saraya Events — Store: storefront (search / sort / filter / cards), // product detail page, and admin product management (10 slots per category). // Physical + digital products, Add to Cart / Buy Now / WhatsApp, Request Quote. const { useState: useStateS, useEffect: useEffectS } = React; // ── listing_images gallery hook ─────────────────────────────────────────────── // Fetches all images for a listing from listing_images (preferred, has is_cover + order) // Falls back to the item.images[] array from normProduct if listing_images has none. function useListingImages(listingId, listingType, fallbackImages) { const [images, setImages] = useStateS(fallbackImages || []); const [selIdx, setSelIdx] = useStateS(0); useEffectS(() => { setImages(fallbackImages || []); setSelIdx(0); if (!window.supabaseConfigured || !window.SarayaDB || !listingId) return; window.SarayaDB .from('listing_images') .select('image_url, image_order, is_cover') .eq('listing_id', listingId) .eq('listing_type', listingType) .order('image_order') .then(({ data }) => { if (data && data.length > 0) { const urls = data.map((r) => r.image_url); const ci = data.findIndex((r) => r.is_cover); setImages(urls); setSelIdx(ci >= 0 ? ci : 0); } }) .catch(() => {}); }, [listingId, listingType]); return { images, selIdx, setSelIdx }; } // ── DB-backed product hook with data.js fallback ────────────────────────────── // Called at StorePage top-level; falls through to admin.resolveStore() when // Supabase is not configured so the admin overlay system keeps working. function useStoreProducts() { const hook = window.useProducts ? window.useProducts({ onlyActive: false }) : null; if (!window.supabaseConfigured || !hook) return { dbItems: null, dbLoading: false }; return { dbItems: hook.items, dbLoading: hook.loading }; } /* effective price (respects an admin sale price) */ function effPrice(it) { const sp = Number(it.salePrice); return (sp && sp > 0 && sp < it.price) ? sp : Number(it.price) || 0; } function onSale(it) { const sp = Number(it.salePrice); return !!(sp && sp > 0 && sp < Number(it.price)); } const AVAIL = { in: { en: 'In stock', ar: 'متوفر', tone: 'success' }, order:{ en: 'Made to order', ar: 'حسب الطلب', tone: 'info' }, soon: { en: 'Coming soon', ar: 'قريبًا', tone: 'warning' }, out: { en: 'Unavailable', ar: 'غير متوفر', tone: 'error' }, }; function availOf(it) { return it.availability || 'in'; } /* admin edit fields for a store product */ function storeFields(S) { return [ { key: 'name.en', label: 'Product name (EN)' }, { key: 'name.ar', label: 'Product name (AR)', dir: 'rtl' }, { key: 'category', label: 'Category', type: 'select', options: S.STORE_CATEGORIES.map((c) => ({ value: c.id, label: c.name.en })) }, { key: 'price', label: 'Price (AED)' }, { key: 'salePrice', label: 'Sale price (AED) — optional, leave blank for none' }, { key: 'availability', label: 'Availability', type: 'select', options: [{ value: 'in', label: 'In stock' }, { value: 'order', label: 'Made to order' }, { value: 'soon', label: 'Coming soon' }, { value: 'out', label: 'Unavailable' }] }, { key: 'stock', label: 'Stock count (optional — for low-stock alerts)' }, { key: 'popular', label: 'Popular?', type: 'select', options: [{ value: '', label: 'No' }, { value: '1', label: 'Yes — mark Popular' }] }, { key: 'isNew', label: 'New?', type: 'select', options: [{ value: '', label: 'No' }, { value: '1', label: 'Yes — mark New' }] }, { key: 'hidden', label: 'Visibility', type: 'select', options: [{ value: '', label: 'Visible to customers' }, { value: '1', label: 'Hidden (draft)' }] }, { key: 'digital', label: 'Type', type: 'select', options: [{ value: '', label: 'Physical product' }, { value: '1', label: 'Digital download' }] }, { key: 'fileType', label: 'File type label (digital, e.g. PDF)' }, { key: 'link', label: 'Open-link URL (optional — opens a page/app)' }, { key: 'desc.en', label: 'Short description (EN)', type: 'textarea' }, { key: 'desc.ar', label: 'Short description (AR)', type: 'textarea', dir: 'rtl' }, { key: 'included.en', label: 'What’s included — one per line (EN)', type: 'list' }, { key: 'included.ar', label: 'What’s included — one per line (AR)', type: 'list', dir: 'rtl' }, ]; } /* ============================ STORE PAGE ============================ */ function StorePage() { const { t, lang } = useLang(); const { go } = useNav(); const cart = useCart(); const admin = useAdmin(); const S = window.SARAYA; const ar = lang === 'ar'; const [cat, setCat] = useStateS('all'); const [q, setQ] = useStateS(''); const [sort, setSort] = useStateS('featured'); const { dbItems, dbLoading } = useStoreProducts(); // When Supabase is configured, always use live data — even if zero results. // Fall back to data.js only when Supabase is not configured (local/demo mode). const fallback = admin.resolveStore(); const usingLiveData = window.supabaseConfigured && dbItems !== null; let items = usingLiveData ? (dbItems || []) : fallback; if (!admin.editMode) items = items.filter((i) => !i.hidden); // hide drafts from public if (cat !== 'all') items = items.filter((i) => i.category === cat); if (q.trim()) { const k = q.trim().toLowerCase(); items = items.filter((i) => (i.name.en + ' ' + i.name.ar + ' ' + (i.desc ? i.desc.en : '')).toLowerCase().includes(k)); } items = items.slice(); if (sort === 'price-asc') items.sort((a, b) => effPrice(a) - effPrice(b)); else if (sort === 'price-desc') items.sort((a, b) => effPrice(b) - effPrice(a)); else if (sort === 'newest') items.sort((a, b) => (b.isNew ? 1 : 0) - (a.isNew ? 1 : 0)); else if (sort === 'popular') items.sort((a, b) => (b.popular ? 1 : 0) - (a.popular ? 1 : 0)); /* admin: 10-slot cap per (real) category */ const catCount = (cid) => admin.resolveStore().filter((i) => i.category === cid).length; const addProduct = () => { const category = cat === 'all' ? S.STORE_CATEGORIES[0].id : cat; if (catCount(category) >= S.STORE_CONFIG.slotsPerCategory) { admin.toastMsg('That category already has ' + S.STORE_CONFIG.slotsPerCategory + ' products (the slot limit).', 'error'); return; } const id = 'sp-' + Date.now().toString(36); admin.addStoreItem({ id, category, tone: 'cream', price: 0, availability: 'in', name: { en: 'New product', ar: 'منتج جديد' }, desc: { en: '', ar: '' } }); admin.openEdit({ title: 'New store product', fields: storeFields(S), values: { name: { en: 'New product', ar: 'منتج جديد' }, category, availability: 'in' }, onSave: (v) => admin.mergeEntity('store:' + id, v) }); }; return (
{/* ── Sticky filter bar ── */}
{/* Row 1: search + sort */}
setQ(e.target.value)} placeholder={ar ? 'ابحث في السوق…' : 'Search the marketplace…'} style={{ width: '100%', padding: '10px 14px 10px 40px', borderRadius: 10, border: '1px solid var(--line-strong)', background: 'var(--white)', fontFamily: 'var(--font-body)', fontSize: 13.5, outline: 'none', color: 'var(--fg-primary)' }} />
{/* Row 2: category pills */}
{/* All */} {/* Divider */}
{/* Product categories */} {S.STORE_CATEGORIES.map((c) => ( ))} {/* Divider */}
{/* Furniture Rentals — links to rental subcategory */}
{cat === 'rental' ? ( ) : ( {admin.editMode && (
{cat !== 'all' && {catCount(cat)} / {S.STORE_CONFIG.slotsPerCategory} {ar ? 'خانة مستخدمة' : 'slots used'}}
)} {dbLoading ? (

{ar ? 'جارٍ التحميل…' : 'Loading products…'}

) : items.length === 0 ? (

{usingLiveData && !q.trim() && cat === 'all' ? (ar ? 'لا توجد منتجات معتمدة في المتجر بعد. تابعونا قريبًا!' : 'No approved products yet — check back soon!') : (ar ? 'لا توجد منتجات مطابقة.' : 'No matching products.')}

{usingLiveData && !q.trim() && cat === 'all' && (

{ar ? 'هل أنت بائع؟' : 'Are you a vendor?'}{' '} {ar ? 'سجّل الآن' : 'Register now'}

)}
) : (
{items.map((it, i) => ())}
)}

{ar ? 'الأسعار بالدرهم الإماراتي وتشمل التنسيق. يُضاف التوصيل وضريبة القيمة المضافة (٥٪) عند الدفع.' : 'Prices in AED and include styling. Delivery and 5% VAT are added at checkout.'}

)}
); } /* ---------------- Product card ---------------- */ function StoreCard({ item }) { const { t, lang } = useLang(); const { go } = useNav(); const cart = useCart(); const admin = useAdmin(); item = admin.resolveEntity('store:' + item.id, item); const ar = lang === 'ar'; const catObj = window.SARAYA.STORE_CATEGORIES.find((c) => c.id === item.category); const isDigital = !!item.digital; const av = availOf(item); const avMeta = AVAIL[av]; const sold = av === 'out' || av === 'soon'; const price = effPrice(item); const open = () => go('product/' + item.id); const buyNow = () => { cart.add(item, 1); go('checkout'); }; const waMsg = `Hello Saraya Events, I’d like to enquire about: ${item.name.en}.`; const card = (
{window.WishlistButton && item.supabaseId && (
e.stopPropagation()}> {React.createElement(window.WishlistButton, { productId: item.supabaseId, size: 22 })}
)}
{isDigital && {ar ? 'رقمي' : 'Digital'}} {item.popular && {ar ? 'الأكثر طلبًا' : 'Popular'}} {item.isNew && {ar ? 'جديد' : 'New'}} {onSale(item) && {ar ? 'تخفيض' : 'Sale'}} {item.hidden && {ar ? 'مسودة' : 'Hidden'}}
{admin.editMode && (
e.stopPropagation()} style={{ position: 'absolute', bottom: 10, insetInlineStart: '50%', transform: 'translateX(-50%)', display: 'flex', gap: 6, zIndex: 13 }}>
)}
{catObj ? catObj.name[lang] : ''} {avMeta[lang]}
{item.desc && item.desc[lang] &&

{item.desc[lang]}

} {isDigital && item.fileType &&
{item.fileType} · {ar ? 'تحميل فوري' : 'Instant download'}
}
{money(price)} {onSale(item) && {money(item.price)}}
{item.requestQuote ? ( ) : (
{item.link ? : React.createElement(Button, { variant: "primary", size: "sm", full: true, icon: "file-text", onClick: () => window.openItemRFQModal && window.openItemRFQModal(item) }, ar ? 'اطلب عرض سعر' : 'Request a Quote')}
)} {admin.editMode && isDigital && }
); return admin.openEdit({ title: 'Edit store product', fields: storeFields(window.SARAYA), values: item, onSave: (v) => admin.mergeEntity('store:' + item.id, v) })} onDelete={() => { if (window.confirm('Delete this product?')) admin.deleteStoreItem(item.id); }}>{card}; } /* admin: attach/replace the downloadable file for a digital product */ function DigitalFileControl({ id }) { const admin = useAdmin(); const [name, setName] = useStateS(null); useEffectS(() => { window.getDigitalFile(id).then((r) => setName(r ? r.name : null)); }, [id]); return ( ); } /* ---------------- Product detail page ---------------- */ function ProductDetailPage({ productId }) { const { t, lang } = useLang(); const { go } = useNav(); const cart = useCart(); const admin = useAdmin(); const ar = lang === 'ar'; // Try local store first; for Supabase items (UUID), fetch live from DB const localBase = admin.resolveStore().find((i) => i.id === productId); const [liveItem, setLiveItem] = useStateS(null); useEffectS(() => { setLiveItem(null); if (!localBase && window.supabaseConfigured && window.SarayaService) { window.SarayaService.products.get(productId).then((d) => setLiveItem(d || null)).catch(() => {}); } }, [productId]); const base = localBase || liveItem; const [qty, setQty] = useStateS(1); const [meta, setMeta] = useStateS({}); const fallbackImgs = base ? ((base.images && base.images.length > 0) ? base.images : (base.src ? [base.src] : [])) : []; const { images: galleryImgs, selIdx, setSelIdx } = useListingImages(base ? base.id : null, 'product', fallbackImgs); if (!base) { return (
{!localBase && window.supabaseConfigured && !liveItem ?

{ar ? 'جارٍ التحميل…' : 'Loading…'}

:

{ar ? 'المنتج غير موجود.' : 'Product not found.'}

}
); } const item = base; const catObj = window.SARAYA.STORE_CATEGORIES.find((c) => c.id === item.category); const isDigital = !!item.digital; const isFloral = item.category === 'flowers' || item.category === 'gifts'; const isEvent = item.category === 'party'; const av = availOf(item); const sold = av === 'out' || av === 'soon'; const price = effPrice(item); const setM = (k, v) => setMeta((p) => Object.assign({}, p, { [k]: v })); const included = item.included && item.included[lang] && item.included[lang].length ? item.included[lang] : null; const related = admin.resolveStore().filter((i) => i.category === item.category && i.id !== item.id && !i.hidden).slice(0, 4); // Multi-image gallery: prefer listing_images table, fall back to item.images[] const mainImg = galleryImgs[selIdx] || item.src || null; const addToCart = () => cart.add(item, qty, Object.keys(meta).length ? meta : null); const buyNow = () => { addToCart(); go('checkout'); }; const waMsg = `Hello Saraya Events, I’d like to enquire about: ${item.name.en}` + (price ? ` (${money(price)})` : '') + '.'; return (
{/* gallery */}
{/* Main image */} {mainImg ? {item.name : } {/* Thumbnails: real images when available, else admin-upload slots */}
{galleryImgs.length > 1 ? galleryImgs.map((url, idx) => ( )) : [0, 1, 2].map((n) => )}
{/* info */}
{catObj && {catObj.name[lang]}} {isDigital && {ar ? 'رقمي' : 'Digital'}} {item.popular && {ar ? 'الأكثر طلبًا' : 'Popular'}} {item.isNew && {ar ? 'جديد' : 'New'}}

{item.name[lang]}

{money(price)} {onSale(item) && {money(item.price)}}
{item.desc && item.desc[lang] &&

{item.desc[lang]}

} {included && (
{ar ? 'يشمل' : 'What’s included'}
{included.map((x, i) =>
{x}
)}
)} {/* fulfilment / customisation */} {!isDigital && (
{isFloral && <>
setM('deliveryDate', e.target.value)} />