// Pickle Master — Shared Components: Light Theme const { useState, useEffect, useRef } = React; // ─── Site content cache (shared across components) ──────────────────────────── window.PM_CONTENT = window.PM_CONTENT || {}; window._pmContentPromise = null; window.fetchSiteContent = function() { if (window._pmContentPromise) return window._pmContentPromise; window._pmContentPromise = fetch('/api/content') .then(r => r.json()) .then(d => { Object.assign(window.PM_CONTENT, d); return d; }) .catch(() => ({})); return window._pmContentPromise; }; // ─── ICONS ─────────────────────────────────────────────────── function IconCart({ n }) { return ( {n > 0 && {n}} ); } function IconClose() { return ; } function IconMenu() { return ; } function IconCheck() { return ; } // ─── NAV (LIGHT) ────────────────────────────────────────────── function Nav({ page, setPage, lang, setLang, user, setUser, cart, setCartOpen, mobileOpen, setMobileOpen }) { const t = window.LANG[lang]; const [moreOpen, setMoreOpen] = useState(false); const [scrolled, setScrolled] = useState(false); const moreRef = useRef(null); const navItems = [ { id: 'home', label: t.nav_home }, { id: 'member', label: t.nav_member }, { id: 'book', label: t.nav_book }, { id: 'social', label: t.nav_social }, { id: 'private', label: t.nav_private }, { id: 'contact', label: t.nav_contact }, ]; const moreItems = [ { id: 'coaches', label: t.nav_coaches }, { id: 'tournament', label: t.nav_tournament }, { id: 'shop', label: t.nav_shop }, { id: 'faq', label: t.nav_faq }, ]; const extraPages = moreItems.map(i => i.id); const totalItems = cart.reduce((s, i) => s + i.qty, 0); useEffect(() => { function handleClick(e) { if (moreRef.current && !moreRef.current.contains(e.target)) setMoreOpen(false); } document.addEventListener('mousedown', handleClick); return () => document.removeEventListener('mousedown', handleClick); }, []); useEffect(() => { function onScroll() { setScrolled(window.scrollY > 8); } window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); const navBg = scrolled ? '#FFFFFF' : '#FDFAF5'; const shadow = scrolled ? '0 2px 16px rgba(26,18,8,0.08)' : 'none'; return ( <> {/* Promo banner */}
setPage('member')}> {t.promo_banner}
{/* Main nav */} ); } // ─── FOOTER (LIGHT) ────────────────────────────────────────── function Footer({ setPage, lang }) { const t = window.LANG[lang]; const [contactInfo, setContactInfo] = useState(window.PM_CONTENT.contact_info || null); useEffect(() => { window.fetchSiteContent().then(d => { if (d.contact_info) setContactInfo(d.contact_info); }); }, []); const address = contactInfo ? (lang === 'EN' ? contactInfo.address_en : contactInfo.address_zh) || t.home_address_val : t.home_address_val; return ( ); } // ─── CART SIDEBAR (LIGHT) ───────────────────────────────────── function CartSidebar({ open, onClose, cart, setCart, lang, setPage, user }) { const t = window.LANG[lang]; const [checkout, setCheckout] = useState(false); const [success, setSuccess] = useState(false); const [loading, setLoading] = useState(false); const [processing, setProcessing] = useState(false); const [apiError, setApiError] = useState(null); const [clientSecret, setClientSecret] = useState(null); const [stripeObj, setStripeObj] = useState(null); const [elements, setElements] = useState(null); const total = cart.reduce((s, i) => s + i.price * (i.qty || 1), 0); function remove(idx) { setCart(c => c.filter((_, i) => i !== idx)); } async function startCheckout() { setLoading(true); setApiError(null); const res = await window.API.post('/api/checkout/create-intent', { cart: cart.map(i => ({ type: i.courtId ? 'booking' : 'product', courtId: i.courtId, sessionType: i.sessionType, date: i.date, time: i.time, product_id: i.product_id, qty: i.qty || 1, price: i.price, name: i.name, detail: i.detail, })), guest_name: user ? user.name : '', guest_email: user ? user.email : '', }); setLoading(false); if (res.error) { setApiError(res.error); return; } setClientSecret(res.client_secret); setCheckout(true); const stripe = window.Stripe(window.STRIPE_PK); setStripeObj(stripe); const els = stripe.elements({ clientSecret: res.client_secret, appearance: { theme: 'flat', variables: { colorPrimary: '#0F3D24', colorBackground: '#FDFAF5', fontFamily: 'DM Sans, sans-serif' } } }); setElements(els); setTimeout(() => { const pe = els.create('payment'); pe.mount('#pm-stripe-payment-element'); }, 50); } async function doCheckout(e) { e.preventDefault(); if (!stripeObj || !elements) return; setProcessing(true); setApiError(null); const { error, paymentIntent } = await stripeObj.confirmPayment({ elements, confirmParams: { return_url: window.location.href }, redirect: 'if_required', }); if (error) { setApiError(error.message); setProcessing(false); return; } const confirmRes = await window.API.post('/api/checkout/confirm', { payment_intent_id: paymentIntent.id }); setProcessing(false); if (confirmRes.error) { setApiError(confirmRes.error); return; } setSuccess(true); setTimeout(() => { setCart([]); setSuccess(false); setCheckout(false); setClientSecret(null); setStripeObj(null); setElements(null); onClose(); }, 2800); } if (!open) return null; return ( <>
{/* Header */}
{checkout ? t.checkout_title : t.cart_title}
{success ? (
{t.checkout_success}
{t.checkout_success_sub}
) : checkout ? (
Payment Details
{apiError &&
{apiError}
}
{t.cart_total}HK${total}
) : (
{cart.length === 0 ? (
{t.cart_empty}
) : ( <>
{!user &&
{t.cart_guest_note}
} {user &&
{t.cart_member_disc}
} {cart.map((item, i) => (
{item.name}
{item.detail}
HK${item.price}
))}
{t.cart_total}HK${total}
{apiError &&
{apiError}
}
)}
)}
); } Object.assign(window, { Nav, Footer, CartSidebar, IconCheck, IconClose, IconCart });