/* Shop.jsx — Love Park merchandise page (CR #264). Storefront pulls live catalog from /api/shop (GET). Cart state lives in component state; on checkout we POST to /api/shop and redirect to the Stripe-hosted page. Off-nav: JJ asked for this page to not appear in header/footer; reach it via /#shop direct URL. Both GET (list) and POST (create session) share a single Vercel serverless function -- POST with a stripe-signature header is the Stripe webhook path. This keeps the project under the Hobby plan's 12-function cap. Until SHOP_LIVE=true is set on the Vercel project, POST /api/shop returns 503 and the UI surfaces a friendly preview-mode message. */ // Fallback design mockups when no image_url is returned. Each composites // the official Love Park logo (CR #265 attachment) onto a simple garment // shape so a brand-new client storefront can render before product photos // are shot. const LOGO_HREF = "/img/shop/lovepark-logo.png"; const SHOP_DESIGNS = { 'lp-red-jacket': ( ), 'lp-tee': ( ), 'lp-mug': ( ), 'lp-paddles': ( ), }; const SWATCH_FOR_SLUG = { 'lp-red-jacket': 'var(--c-primary)', 'lp-tee': '#cfeaf3', 'lp-mug': 'var(--c-cream-deep)', 'lp-paddles': 'var(--c-cream-deep)', }; const fmtUsd = (cents) => (cents / 100).toLocaleString('en-US', { style: 'currency', currency: 'USD' }); function ShopPage() { const [products, setProducts] = React.useState([]); const [loading, setLoading] = React.useState(true); const [cart, setCart] = React.useState([]); // [{slug, size, qty, name, price_cents}] const [checkoutError, setCheckoutError] = React.useState(""); const [checkingOut, setCheckingOut] = React.useState(false); const [cartOpen, setCartOpen] = React.useState(false); React.useEffect(() => { fetch('/api/shop') .then(r => r.ok ? r.json() : { ok: false }) .then(j => setProducts(j.rows || [])) .catch(() => setProducts([])) .finally(() => setLoading(false)); }, []); const addToCart = (product, size) => { setCart(prev => { const key = `${product.slug}__${size || ''}`; const idx = prev.findIndex(i => `${i.slug}__${i.size || ''}` === key); if (idx >= 0) { const next = prev.slice(); next[idx] = { ...next[idx], qty: Math.min(99, next[idx].qty + 1) }; return next; } return [...prev, { slug: product.slug, name: product.name, size: size || null, qty: 1, price_cents: product.price_cents }]; }); setCartOpen(true); }; const updateQty = (idx, qty) => { setCart(prev => { if (qty <= 0) return prev.filter((_, i) => i !== idx); const next = prev.slice(); next[idx] = { ...next[idx], qty: Math.min(99, qty) }; return next; }); }; const removeLine = (idx) => setCart(prev => prev.filter((_, i) => i !== idx)); const subtotalCents = cart.reduce((sum, i) => sum + i.price_cents * i.qty, 0); const checkout = async () => { if (!cart.length) return; setCheckingOut(true); setCheckoutError(""); try { const r = await fetch('/api/shop', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ items: cart.map(i => ({ slug: i.slug, size: i.size, qty: i.qty })) }), }); const j = await r.json().catch(() => ({})); if (r.status === 503 && j.error === 'shop_not_live') { setCheckoutError(j.message || "The shop isn't taking payments yet."); } else if (!j.ok || !j.url) { setCheckoutError(j.error ? `Checkout failed: ${j.error}` : "Couldn't start checkout. Try again."); } else { window.location.href = j.url; return; } } catch (e) { setCheckoutError(`Network error: ${e.message || e}`); } finally { setCheckingOut(false); } }; return (
{/* Hero -- Love Park red with the LOVE YOUR PARKS billboard backdrop */}
{/* About */}
Why this merch exists

100% of net proceeds fund Love Park programming.

Philadelphia Parks & Recreation runs a year-round slate of free performances and community events at Love Park. From spring jazz showcases to December tree-lighting concerts to summer family movie nights, every program is funded by ticket-free, donation-driven support. This merch line is the most direct way to keep those nights happening.

When you buy a jacket, you're paying for an entire family's night out — admission, the stage, the sound crew, all of it. Thank you.

{/* Events */}
Coming up at Love Park

What your support pays for.

  • Spring jazz showcase — community ensembles, every Sunday afternoon in May and June.
  • Youth open-mic nights — first Friday of every month, ages 13–18, no entry fee.
  • Summer family movies — projector + popcorn + lawn chairs, every other Thursday in July.
  • Tree-lighting concert — first weekend of December, MECE City Choir + neighborhood youth choirs.
{/* CR #266: shortcut links to the official phila.gov events list + the Love Park Philly Instagram so shoppers can see what's on. */}
Full Love Park events calendar ↗ Follow @loveparkphilly ↗

Specific dates posted on the events calendar each season.

{/* Catalog */}
Shop

The line.

{loading ?
Loading catalog…
: products.length === 0 ?
Catalog coming soon. Email JJ to pre-order.
: (
{products.map(p => )}
) }
{/* Pre-order / inquiry CTA -- CR #265/#271: contact is Andrew Emma, with his photo + short bio. */}
Andrew Emma, Manager of Love Park, in front of the LOVE sculpture
Manager of Love Park
Andrew Emma.

Andrew is the Manager of Love Park for the Philadelphia Parks & Recreation department, a position he’s held since September 2018. During this time, he’s developed and supported diverse programming that has brought nearly 1,000 weddings, 7 seasons of Friday evening salsa, multiple installations in partnership with Mural Arts, and numerous other activations featuring a wide array of local creatives.

Prior to this role, his work at PPR included creating TreeKeepers, a workforce development program that combined reentry and sustainable land care, and expanding a Standards & Inspections program for all citywide park assets.

{/* Sticky cart button + drawer */} {cart.length > 0 && ( )}
); } function ProductCard({ product, onAdd }) { const sizes = (product.sizes || "").split(",").map(s => s.trim()).filter(Boolean); const [size, setSize] = React.useState(sizes[0] || ""); const swatch = SWATCH_FOR_SLUG[product.slug] || "var(--c-cream-deep)"; return (
{product.image_url ? {product.name} : (SHOP_DESIGNS[product.slug] ||
{product.name}
)}
{product.name}
{fmtUsd(product.price_cents)}
{product.blurb && (

{product.blurb}

)} {sizes.length > 1 && (
{sizes.map(s => ( ))}
)} {sizes.length === 1 && (
{sizes[0]}
)}
); } function CartFloater({ cart, subtotalCents, open, setOpen, updateQty, removeLine, checkout, checkingOut, checkoutError }) { const totalQty = cart.reduce((n, i) => n + i.qty, 0); return ( <> {open && (
setOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 91, background: "rgba(42,24,32,0.55)", display: "flex", justifyContent: "flex-end", }} >
e.stopPropagation()} style={{ background: "var(--c-paper)", width: "100%", maxWidth: 440, borderLeft: "2px solid var(--c-ink)", display: "flex", flexDirection: "column", height: "100vh", }} >
Cart
{cart.map((i, idx) => (
{i.name}
{i.size &&
{i.size}
}
{i.qty}
{fmtUsd(i.price_cents * i.qty)}
))}
Subtotal{fmtUsd(subtotalCents)}
Shipping and tax calculated at checkout.
{checkoutError && (
{checkoutError}
)}
)} ); } /* Success screen rendered when Stripe redirects back to /#shop-success?ref=... */ function ShopSuccessPage() { const params = new URLSearchParams(window.location.hash.split("?")[1] || ""); const ref = params.get("ref") || ""; return (
✦

Order placed.

{ref ? <>Reference {ref}. : null} We've emailed you a confirmation. JJ will follow up when your order ships.

Thank you for supporting Love Park programming.

Back to shop
); } Object.assign(window, { ShopPage, ShopSuccessPage });