/** * rCart demo page — static community garden shopping cart. * * Renders a fully server-side demo with 8 cart items, funding progress bars, * member activity, and summary stats. No WebSocket needed (all static data). */ /* ─── Mock Data ─────────────────────────────────────────────── */ const members = [ { name: "Alice", color: "#10b981" }, { name: "Bob", color: "#0ea5e9" }, { name: "Carol", color: "#f59e0b" }, { name: "Dave", color: "#8b5cf6" }, ]; interface CartItem { name: string; price: number; requestedBy: string; funded: number; status: "Funded" | "In Cart" | "Needs Funding"; } const cartItems: CartItem[] = [ { name: "Raised Garden Bed Kit (4x8 ft)", price: 89.99, requestedBy: "Alice", funded: 89.99, status: "Funded" }, { name: "Organic Seed Variety Pack (30 types)", price: 34.5, requestedBy: "Carol", funded: 34.5, status: "Funded" }, { name: "Premium Potting Soil (40 qt, 3-pack)", price: 47.99, requestedBy: "Bob", funded: 32.0, status: "In Cart" }, { name: "Stainless Steel Garden Tool Set", price: 62.0, requestedBy: "Dave", funded: 62.0, status: "Funded" }, { name: "Drip Irrigation Kit (100 ft)", price: 54.95, requestedBy: "Alice", funded: 20.0, status: "Needs Funding" }, { name: "Compost Tumbler (45 gal)", price: 109.0, requestedBy: "Bob", funded: 109.0, status: "Funded" }, { name: "Garden Kneeling Pad & Gloves Set", price: 28.5, requestedBy: "Carol", funded: 12.0, status: "Needs Funding" }, { name: "Solar-Powered Pest Repeller (4-pack)", price: 39.99, requestedBy: "Dave", funded: 39.99, status: "In Cart" }, ]; /* ─── Helpers ──────────────────────────────────────────────── */ function getMemberColor(name: string): string { return members.find((m) => m.name === name)?.color || "#64748b"; } function statusBadgeClass(status: CartItem["status"]): string { switch (status) { case "Funded": return "rd-badge--emerald"; case "In Cart": return "rd-badge--sky"; case "Needs Funding": return "rd-badge--amber"; } } function progressFillClass(pct: number): string { if (pct >= 100) return "rd-progress__fill--emerald"; if (pct >= 50) return "rd-progress__fill--sky"; return "rd-progress__fill--amber"; } /* ─── Render ─────────────────────────────────────────────── */ export function renderDemo(): string { const totalCost = cartItems.reduce((sum, item) => sum + item.price, 0); const totalFunded = cartItems.reduce((sum, item) => sum + item.funded, 0); const perPerson = totalCost / members.length; const fundedCount = cartItems.filter((i) => i.status === "Funded").length; const overallPct = Math.round((totalFunded / totalCost) * 100); const uniqueRequesters = new Set(cartItems.map((i) => i.requestedBy)).size; return `

Group Shopping, Together

See how rCart works

A community garden project where neighbors pool resources to buy everything they need together.

8 items | $${totalCost.toFixed(2)} total | ${fundedCount}/${cartItems.length} funded

${members .map( (m) => `

${m.name[0]}

`, ) .join("\n ")} ${members.length} members

Community Garden Project

Shared cart for our neighborhood garden setup

$${totalFunded.toFixed(2)}

of $${totalCost.toFixed(2)} funded

${overallPct}% funded $${(totalCost - totalFunded).toFixed(2)} remaining

🛒 Cart Items

Funded In Cart Needs Funding

${cartItems .map((item) => { const pct = Math.round((item.funded / item.price) * 100); const memberColor = getMemberColor(item.requestedBy); return `

${item.name} ${item.status}

${item.requestedBy[0]} ${item.requestedBy} requested this

$${item.price.toFixed(2)}

${item.status !== "Funded" ? `

$${item.funded.toFixed(2)} funded

` : ""}

`; }) .join("")}

Total Cost

$${totalCost.toFixed(2)}

${cartItems.length} items across ${uniqueRequesters} requesters

Amount Funded

$${totalFunded.toFixed(2)}

${fundedCount} of ${cartItems.length} items fully funded

Per-Person Split

$${perPerson.toFixed(2)}

split equally among ${members.length} members

Member Activity

${members .map((member) => { const requested = cartItems.filter((i) => i.requestedBy === member.name); const requestedTotal = requested.reduce((sum, i) => sum + i.price, 0); return `

${member.name[0]}

${member.name}

${requested.length} item${requested.length !== 1 ? "s" : ""} requested · $${requestedTotal.toFixed(2)} total

$${perPerson.toFixed(2)}

share

`; }) .join("")}

Ready to shop together?

Create a shared cart for your group, community, or team. Add items from any store, split costs fairly, and check out together.

Create Your First Cart

`; }