// Shop — the UP merch store. // // Deliberately backend-free: every product checks out through its own Stripe // Payment Link, so Stripe hosts the cart, the payment form and the receipt. // Nothing here touches card details — no server, no SDK, no secret key and no // PCI surface on updietitian.com. // // One page, no product detail routes. Clicking a card opens a modal with the // full description and an image gallery rather than jumping straight out to // Stripe, so people can read about the product without leaving the site. // // PRICES: typed by hand, NOT read from Stripe. Changing a price in the Stripe // dashboard will silently disagree with the figure shown here — update both // together. A product left at `price: null` shows "Price at checkout" instead. // // SIZES: `sizes` lists what's stocked and `soldOut` the ones that have run out // (still shown, struck through, so people know they existed). Like prices this // is display only — the size options themselves live on the Stripe Payment // Link, so mark a size sold out there too or people can still pick it. const SHOP_PRODUCTS = [ { id: 'tee', name: 'UP Oversize Tee', type: 'Tees', price: 45, meta: 'Oversized fit', sizes: ['S', 'M', 'L'], blurb: 'A relaxed, everyday cotton staple designed for comfort, style and effortless lifestyle wear — coffee runs, rest days, weekend adventures and everything in between.', images: ['tee-0403', 'tee-0471', 'tee-0427', 'tee-0495', 'tee-0558', 'tee-0357'], stripe: 'https://buy.stripe.com/9B67sE2bz1mo6QWdWp3Nm04', }, { id: 'tank', name: 'UP Active Tank', type: 'Tanks', price: 50, meta: 'Cropped fit', sizes: ['S', 'M', 'L'], soldOut: ['M'], blurb: 'A flattering cropped active tank designed for those who like to train hard and look good doing it. Perfect for every session, from long runs to Hyrox.', images: ['tank-0552', 'tank-0565', 'tank-55', 'tank-56', 'tank-0555'], stripe: 'https://buy.stripe.com/4gM14g6rP7KMejo19D3Nm03', }, { id: 'socks', name: 'Level UP Running & Cycling Socks', type: 'Socks', price: 20, meta: 'Two sizes', sizes: ['US 2–6', 'US 7–12'], blurb: 'Fuel your training from head to toe. Custom UP Dietitian socks designed for running, cycling and everyday training, combining a comfortable, performance-focused fit.', images: ['socks-0378', 'socks-0638', 'socks-0411', 'socks-0670'], stripe: 'https://buy.stripe.com/14A4gs3fD7KM3EK4lP3Nm05', }, ]; // Size charts, transcribed from the supplier's charts. Keyed by product id so // the modal can deep-link to the right tab. All measurements in cm, garment // laid flat; the supplier notes a ±2.5cm tolerance. The full supplier range is // kept here, but only SIZES_AVAILABLE are shown/sold at this stage — widen that // list when Lauren stocks more sizes. Per-product sell-outs live on the // product's `soldOut`, not here. const SIZES_AVAILABLE = ['S', 'M', 'L']; const SIZE_CHARTS = [ { id: 'tank', label: 'Active Tank', sizes: ['XS', 'S', 'M', 'L', 'XL', '2XL'], rows: [ { label: '½ Chest', values: [31.5, 34, 36.5, 39, 41.5, 44] }, { label: 'Full length', values: [43, 44, 45, 46, 47, 48] }, ], }, { id: 'tee', label: 'Oversize Tee', sizes: ['S', 'M', 'L', 'XL', '2XL', '3XL'], rows: [ { label: 'Body width', values: [58, 60.5, 63, 65.5, 68, 70.5] }, { label: 'Body length', values: [72, 74, 76, 78, 80, 82] }, ], }, ]; const SHOP_TICKER = false; const shopImg = (slug) => `assets/images/shop/${slug}`; function formatPrice(v) { if (v == null) return null; return `$${Number(v).toFixed(2)} AUD`; } const inStock = (p) => (p.sizes || []).filter(sz => !(p.soldOut || []).includes(sz)); // "S and L", "S, M and L" const listSizes = (a) => a.length < 2 ? a.join('') : `${a.slice(0, -1).join(', ')} and ${a[a.length - 1]}`; function trackShop(name, product) { try { window.va('event', { name, data: { product } }); } catch (e) {} } // Fills its (positioned) parent. AVIF first with a JPG fallback — sips AVIF has // silently produced blank files on this project before, so the keeps // a real JPG behind every image. function ShopImage({ slug, alt, style }) { return ( {alt} ); } // Scroll reveal — fades and lifts a block the first time it enters view, then // leaves it alone. Honours prefers-reduced-motion by rendering straight to the // resting state. `delay` staggers siblings so a row arrives in sequence. function Reveal({ children, delay = 0, className, style }) { const ref = React.useRef(null); const seen = useInView(ref, { threshold: 0.15, rootMargin: '0px 0px -8% 0px' }); const still = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; const on = seen || still; return (
{children}
); } // ---- Product modal -------------------------------------------------------- // Opens on card click. Carries the full description, a click-through gallery // and the only "Buy now" that actually leaves for Stripe. function ProductModal({ product, onClose, onSizeGuide }) { const [i, setI] = React.useState(0); const closeRef = React.useRef(null); const images = (product && product.images) || []; // Esc to close, and lock the page behind the modal so it doesn't scroll. React.useEffect(() => { if (!product) return; const onKey = (e) => { if (e.key === 'Escape') onClose(); if (e.key === 'ArrowRight') setI(v => (v + 1) % images.length); if (e.key === 'ArrowLeft') setI(v => (v - 1 + images.length) % images.length); }; window.addEventListener('keydown', onKey); const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; if (closeRef.current) closeRef.current.focus(); return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = prev; }; }, [product, images.length]); React.useEffect(() => { setI(0); }, [product && product.id]); if (!product) return null; const price = formatPrice(product.price); return (
e.stopPropagation()} >
{/* Gallery */}
{images.length > 1 && (
{images.map((slug, n) => ( ))}
)}
{/* Detail — green panel, matching the site's dark sections. */}
{product.type}

{product.name}

{product.blurb}

{price || 'Price at checkout'} {product.meta}
{product.sizes && (
{product.sizes.map(sz => { const out = (product.soldOut || []).includes(sz); return ( {sz} ); })}
{product.soldOut && product.soldOut.length > 0 && (

{listSizes(product.soldOut)} sold out · only {listSizes(inStock(product))} remain

)}
)} trackShop('shop_checkout_click', product.id)} className="btn-shine mt-7 inline-flex items-center justify-center gap-3 px-7 py-4 rounded-full font-mono text-[13px] uppercase tracking-[.18em] font-bold" style={{ background: '#FF6C00', color: '#EAE6D7' }} data-blob-hover > Buy now →

Choose your size at checkout · Opens in a new tab

{SIZE_CHARTS.some(c => c.id === product.id) && ( )}
); } // ---- Card ----------------------------------------------------------------- function ProductCard({ product, onOpen }) { const [hover, setHover] = React.useState(false); const images = product.images || []; // Hover swaps to the second shot where one exists; single-image products // just get the scale. const shown = hover && images.length > 1 ? images[1] : images[0]; const price = formatPrice(product.price); return ( ); } // ---- Size guide ----------------------------------------------------------- // Collapsed by default so the grid stays the focus; opens on the toggle or // from a product modal's "View size guide" link (which also picks the tab). function SizeGuide({ open, tab, onToggle, onTab, products }) { const full = SIZE_CHARTS.find(c => c.id === tab) || SIZE_CHARTS[0]; // Trim each chart to the sizes actually on sale. const keep = full.sizes.map((sz, i) => SIZES_AVAILABLE.includes(sz) ? i : -1).filter(i => i >= 0); const chart = { ...full, sizes: keep.map(i => full.sizes[i]), rows: full.rows.map(r => ({ ...r, values: keep.map(i => r.values[i]) })), }; const product = products.find(p => p.id === chart.id) || {}; const soldOut = product.soldOut || []; const available = chart.sizes.filter(sz => !soldOut.includes(sz)); const cell = 'px-4 py-3 text-center font-mono text-[13px] whitespace-nowrap'; return (
{open && (
{SIZE_CHARTS.map((c) => { const on = c.id === chart.id; return ( ); })}
{chart.sizes.map(sz => { const out = soldOut.includes(sz); return ( ); })} {chart.rows.map((r, n) => ( {r.values.map((v, i) => )} ))}
cm {sz} {out && Sold out}
{r.label}{v}

Currently available in {listSizes(available)}{soldOut.length > 0 && ` (${listSizes(soldOut)} sold out)`}. Garment measured flat. Measurements can vary within 2.5cm — this is within the supplier's tolerance.

)}
); } // ---- Page ----------------------------------------------------------------- function Shop({ theme }) { const products = C('shop.products', SHOP_PRODUCTS); const types = ['All', ...Array.from(new Set(products.map(p => p.type).filter(Boolean)))]; const [filter, setFilter] = React.useState('All'); const [active, setActive] = React.useState(null); const [sizeOpen, setSizeOpen] = React.useState(false); const [sizeTab, setSizeTab] = React.useState(SIZE_CHARTS[0].id); const shown = filter === 'All' ? products : products.filter(p => p.type === filter); // From the modal: close it, open the guide on that product's tab, scroll to it. const openSizeGuide = (id) => { trackShop('shop_size_guide', id); setActive(null); setSizeTab(id); setSizeOpen(true); setTimeout(() => { const el = document.getElementById('size-guide'); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }, 50); }; return (
{/* Header band — the dark green, noise-textured treatment used by Services and the seminars intro, so the shop reads as part of the site rather than a bolt-on storefront. */}
← Back to UP Dietitian
{C('shop.eyebrow', 'The UP Store')}
{/* Accent on the second word, as in the hero and the legal pages. */}

UP{' '} MERCH

{C('shop.intro', 'Training & Lifestyle Apparel')}

{/* The site's ticker bar. Hidden at the client's request — too busy on this page. Flip SHOP_TICKER back to true to bring it back. */} {SHOP_TICKER && ( )}
Shop the kit {shown.length} {shown.length === 1 ? 'item' : 'items'}
{types.map((t) => { const on = t === filter; return ( ); })}
{shown.map((p, n) => ( ))}
{ if (!sizeOpen) trackShop('shop_size_guide', 'toggle'); setSizeOpen(v => !v); }} onTab={setSizeTab} products={products} /> {/* Orange rule + note, the same footer treatment Services uses. */}

{C('shop.footerNote', 'Choose your size at checkout.')}

setActive(null)} onSizeGuide={openSizeGuide} /> ); } window.Shop = Shop;