/* PLP, PDP, Cart, Checkout (personal + corporate), Confirmation, Survey, Access code, ERG, Exec */ /* globals React, Icon, ProductImage, UberMark */ // ——————— Shared product card ——————— const ProductCard = ({ product, onOpen }) => { return ( ); }; window.ProductCard = ProductCard; // ——————— PLP ——————— const isEatsProduct = (p) => p.color === 'eats' || /uber eats/i.test(p.name); const CATEGORY_MAP = { 'Apparel':'Apparel', 'Accessories':'Accessories', 'Drinkware':'Drinkware', 'Tech':'Tech', 'Gift kits':'Gift Kits' }; const PLP = ({ filter, onOpen, onNav }) => { const all = window.CATALOG; const [brand, setBrand] = React.useState('all'); // 'all' | 'uber' | 'eats' const [cats, setCats] = React.useState(new Set()); // multi-select; empty = All const [tiers, setTiers] = React.useState(new Set()); // 'standard' | 'premium' const [sizes, setSizes] = React.useState(new Set()); const [sort, setSort] = React.useState('featured'); const toggleSet = (setter, set, value) => { const next = new Set(set); if (next.has(value)) next.delete(value); else next.add(value); setter(next); }; let items = all; let title = 'Shop all'; let sub = 'Every item, approved by Brand Desk.'; if (filter === 'apparel') { items = all.filter(p => p.cat === 'Apparel'); title = 'Apparel'; sub = 'T-shirts, sweatshirts, outerwear.'; } else if (filter === 'accessories') { items = all.filter(p => p.cat === 'Accessories'); title = 'Accessories'; sub = 'Bags, hats, lanyards, pens, notebooks.'; } else if (filter === 'drinkware') { items = all.filter(p => p.cat === 'Drinkware'); title = 'Drinkware'; sub = 'Tumblers, bottles, mugs.'; } else if (filter === 'tech') { items = all.filter(p => p.cat === 'Tech'); title = 'Tech accessories'; sub = 'Charging, audio, bags, and on-the-go essentials.'; } else if (filter === 'kits') { items = all.filter(p => p.cat === 'Gift Kits'); title = 'Gift kits'; sub = 'Pre-curated kits for onboarding, milestones, and teams.'; } // Apply sidebar filters if (brand === 'uber') items = items.filter(p => !isEatsProduct(p)); else if (brand === 'eats') items = items.filter(p => isEatsProduct(p)); if (cats.size > 0) items = items.filter(p => [...cats].some(c => CATEGORY_MAP[c] === p.cat)); if (tiers.size > 0) items = items.filter(p => tiers.has(p.tier)); if (sizes.size > 0) items = items.filter(p => p.sizes && p.sizes.some(s => sizes.has(s))); // Sorting items = [...items]; if (sort === 'newest') items.reverse(); else if (sort === 'price-low') items.sort((a,b) => a.price - b.price); else if (sort === 'price-high') items.sort((a,b) => b.price - a.price); const activeCount = (brand !== 'all' ? 1 : 0) + cats.size + tiers.size + sizes.size; return (
/ {title}

{title}

{sub}

{activeCount > 0 && ( )}
{/* Filter toolbar + grid (full-width grid, filters as dropdowns) */}
{items.length > 0 ? (
{items.map(p => )}
) : (
No items match your filters.
Try removing a filter to see more products.
)}
); }; window.PLP = PLP; // ——————— Filter toolbar (horizontal, above grid) ——————— const FilterToolbar = ({ brand, setBrand, tiers, setTiers, sizes, setSizes, toggleSet, itemCount }) => { const [open, setOpen] = React.useState(null); // 'brand' | 'tier' | 'size' | null const ref = React.useRef(null); React.useEffect(() => { const onClick = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(null); }; document.addEventListener('mousedown', onClick); return () => document.removeEventListener('mousedown', onClick); }, []); const brandLabel = brand === 'all' ? 'All brands' : brand === 'uber' ? 'Uber' : 'Uber Eats'; const tierLabel = tiers.size === 0 ? 'All tiers' : tiers.size === 1 ? (tiers.has('premium') ? 'Presentation-grade' : 'Standard swag') : `${tiers.size} tiers`; const sizeLabel = sizes.size === 0 ? 'All sizes' : [...sizes].join(', '); const Chip = ({ id, label, active, hasValue }) => ( ); return (
{itemCount} {itemCount === 1 ? 'item' : 'items'} {/* Brand */}
{open === 'brand' && (
{[{v:'all',l:'All brands'},{v:'uber',l:'Uber'},{v:'eats',l:'Uber Eats'}].map(o => ( ))}
)}
{/* Tier */}
0}/> {open === 'tier' && (
{[{v:'standard',l:'Standard swag'},{v:'premium',l:'Presentation-grade'}].map(o => ( ))}
)}
{/* Size */}
0}/> {open === 'size' && (
{['XS','S','M','L','XL','XXL'].map(o => ( ))}
)}
); }; window.FilterToolbar = FilterToolbar; // ——————— PDP ——————— const PDP = ({ product, onAdd, onNav }) => { const [size, setSize] = React.useState(product.sizes ? 'M' : null); const [qty, setQty] = React.useState(1); const [added, setAdded] = React.useState(false); return (
/ / {product.name}
{[0,1,2,3].map(i => (
view {i+1}
))}
{product.cat} · {product.sub} · SKU {product.sku}

{product.name}

${product.price}
{product.tier === 'premium' && (
Presentation-grade
Premium materials, gift packaging, hand-inspected. For executive and client-facing use.
)}

{product.desc}

{product.sizes && (
Size Size guide
{product.sizes.map(s => ( ))}
)}
Quantity
{qty}
Ships in 5–7 days
Brand Desk approved
Global fulfillment
Auto PO + receipt
); }; window.PDP = PDP; // ——————— Cart ——————— const Cart = ({ items, setItems, mode, onNav }) => { const sub = items.reduce((s, i) => s + i.price * i.qty, 0); const tax = sub * 0.085; const ship = sub > 75 ? 0 : 9.5; const total = sub + tax + ship; return (

Cart

{items.length === 0 ? (
Your cart is empty.
) : (
{items.map((it, idx) => (
{it.cat}
{it.name}
{it.size && Size {it.size} · }SKU {it.sku}
{it.qty}
${(it.price * it.qty).toFixed(2)}
))}
)}
); }; window.Cart = Cart;