import React, { useEffect, useRef, useState } from "react"; import { callAI } from "call-ai"; import { useFireproof } from "use-fireproof"; import { ImgGen, apiFetch, useVibe } from "use-vibes"; import { Badge, Button, Card, Dot, Empty, ErrorNote, Field, Grid, Heading, Icon, IconButton, Input, Row, RowCard, Spacer, Stack, Text } from "@vibes.diy/ui"; import { Checkbox } from "@vibes.diy/ui/interactive"; const CURRENCY = "usd"; const digits = (cur) => new Intl.NumberFormat("en", { style: "currency", currency: cur }).resolvedOptions().maximumFractionDigits; const money = (amount, cur = CURRENCY) => new Intl.NumberFormat(undefined, { style: "currency", currency: cur }).format(amount / 10 ** digits(cur)); const toMinor = (text, cur) => Math.round(Number(text) * 10 ** digits(cur)); const shown = (amount, cur) => (amount / 10 ** digits(cur)).toFixed(digits(cur)); function useSetup() { const [setup, setSetup] = useState(null); const latest = useRef(0); useEffect(() => { const load = () => { const n = ++latest.current; apiFetch("/setup").then((r) => r.json()).catch(() => ({ ready: false, owner: false })).then((s) => { if (n === latest.current) setSetup(s); }); }; load(); const onVisible = () => { if (document.visibilityState === "visible") load(); }; document.addEventListener("visibilitychange", onVisible); window.addEventListener("focus", load); window.addEventListener("setup-changed", load); return () => { document.removeEventListener("visibilitychange", onVisible); window.removeEventListener("focus", load); window.removeEventListener("setup-changed", load); }; }, []); return setup; } const STRIPE_BUTTON = { absent: "Connect Stripe", onboarding: "Finish Stripe setup", disconnected: "Connect Stripe again" }; function SetupScreen({ setup }) { const vibe = `${setup.ownerHandle}/${setup.appSlug}`; const settingsUrl = `https://vibes.diy/vibes/mine/${vibe}/settings`; const item = setup.items.find((i) => i.id === "stripe-connect"); const live = setup.mode === "live"; const takeLive = () => apiFetch("/go-live", { method: "POST" }).then(() => window.dispatchEvent(new Event("setup-changed"))); return ( Setup {item.label}: {item.done ? "Done" : item.state === "onboarding" ? "Stripe is finishing up" : "To do"} {item.problem && {item.problem}} 1. Open this vibe's Settings tab (My Vibes, this vibe, Settings) and press {STRIPE_BUTTON[item.state] ?? "Connect Stripe"} under Payments. Stripe opens its own setup pages. 2. Come back here: the Pay button works as soon as Stripe says your account is ready. In test mode the card 4242 4242 4242 4242 with any future date pays. {live ? "Live" : "Test mode"} {live ? This shop takes real payments into your Stripe account. : setup.liveReady ? : setup.liveOpen ? After a test payment works, press Go live with Stripe under Payments on the same Settings tab, then return here. : Test mode runs the whole flow. The Go live button appears on the Settings tab when vibes.diy opens live payments.} ); } function ProductRow({ product, save }) { const [price, setPrice] = useState(shown(product.amount, product.currency)); useEffect(() => setPrice(shown(product.amount, product.currency)), [product.amount]); const commit = () => { const amount = toMinor(price, product.currency); if (Number.isInteger(amount) && amount > 0 && amount !== product.amount) save({ ...product, amount }, () => setPrice(shown(product.amount, product.currency))); else setPrice(shown(product.amount, product.currency)); }; return ( {product.title} {(id, d) => } save({ ...product, onSale: on === true })} /> ); } function Products({ products }) { const { database } = useFireproof("orders"); const [title, setTitle] = useState(""); const [price, setPrice] = useState(""); const [error, setError] = useState(""); const [suggesting, setSuggesting] = useState(false); const save = async (product, undo) => { setError(""); const { synced } = await database.put(product); synced.on((s) => { if (s.status !== "refused") return; undo?.(); setError(s.message ?? "That did not save: a product needs a name and a price like 12.50."); }); }; const add = () => { const amount = toMinor(price, CURRENCY); if (!title.trim() || !Number.isInteger(amount) || amount <= 0) return setError("Give it a name and a price like 12.50."); const product = { _id: "product-" + crypto.randomUUID(), type: "product", title: title.trim(), amount, currency: CURRENCY, onSale: true, createdAt: Date.now() }; setTitle(""); setPrice(""); save(product, () => { setTitle(product.title); setPrice(shown(product.amount, product.currency)); }); }; const suggest = async () => { setSuggesting(true); setError(""); try { const res = await callAI("Suggest one specialty coffee shop product: a name of two to five words and a price in dollars between 8 and 60. Different from: " + JSON.stringify(products.map((p) => p.title)), { schema: { properties: { name: { type: "string" }, price: { type: "number" } }, required: ["name", "price"] } }); const raw = JSON.parse(res); if (typeof raw.name === "string" && raw.name.trim() && Number.isFinite(raw.price)) { setTitle(raw.name.trim().split(/\s+/).slice(0, 5).join(" ")); setPrice(Math.min(60, Math.max(8, raw.price)).toFixed(2)); } } catch (e) { setError("Press the sparkle again for another idea."); } finally { setSuggesting(false); } }; return ( Products {products.length === 0 ? "Add the first thing you sell" : "Add a product"} {(id, d) => } {(id, d) => } } onClick={suggest} /> {error && {error}} {products.map((p) => )} ); } function Orders({ orders, setup }) { const sorted = [...orders].sort((a, b) => b.createdAt - a.createdAt); return ( Orders {sorted.length === 0 ? : ( {sorted.map((o) => ( {o.status}: {o.title} @{o.buyerHandle} · {money(o.amount, o.currency)} · I ship it{o.mode === setup.mode ? "" : ` · ${o.mode} rehearsal`} {(o.lines ?? []).map((l) => `${l.qty} x ${l.title}`).join(", ")} ))} )} ); } // Studio photos for the launch catalog, shipped with the app. A product added // later gets its picture from image gen, once, by the owner. const PHOTO = { "product-midnight-blend": "/midnight.jpg", "product-ethiopia-guji": "/guji.jpg", "product-decaf-swiss": "/decaf.jpg", "product-brew-kit": "/brewkit.jpg", }; function ProductPhoto({ product, owner }) { const [wanted, setWanted] = useState(false); const has = Object.keys(product._files ?? {}).length > 0; if (PHOTO[product._id]) return

; if (wanted || has) return ; if (!owner) return null; return } onClick={() => setWanted(true)} />; } function ProductCard({ product, qty, onAdd, owner }) { return (

{product.title} {money(product.amount, product.currency)} {qty > 0 && {qty} in bag} ); } function AskRow({ products }) { const [q, setQ] = useState(""); const [answer, setAnswer] = useState(""); const [busy, setBusy] = useState(false); const ask = async () => { if (!q.trim()) return; setBusy(true); try { const res = await callAI(`Answer from these shop products only. Products: ${JSON.stringify(products.map((p) => ({ name: p.title, price: p.amount / 100 })))}. Question: ${q}`, { schema: { properties: { answer: { type: "string" } }, required: ["answer"] } }); setAnswer(JSON.parse(res).answer ?? ""); } catch (e) { setAnswer("Try asking another way."); } finally { setBusy(false); } }; return ( {(id, d) => } } onClick={ask} /> {answer && {answer}} ); } export default function App() { const { me } = useVibe("orders"); const { useLiveQuery } = useFireproof("orders"); const { docs: orders } = useLiveQuery("type", { key: "order" }); const { docs: products } = useLiveQuery("type", { key: "product" }); const setup = useSetup(); const [picked, setPicked] = useState("shop"); const [bag, setBag] = useState({}); const [error, setError] = useState(""); const [busy, setBusy] = useState(false); const [back, setBack] = useState(null); useEffect(() => { const confirm = () => { const params = new URLSearchParams(location.hash.slice(1)); const orderId = params.get("paid"); if (!orderId) return; history.replaceState(null, "", location.pathname); const total = Number(params.get("total") ?? "x"); const currency = params.get("currency") ?? CURRENCY; const thanks = Number.isInteger(total) ? `Payment received: ${money(total, currency)}. Thank you!` : "Payment received. Thank you!"; setBack({ orderId, thanks, confirming: false }); apiFetch("/confirm", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ orderId }) }) .then((r) => r.json()) .then((d) => { if (d.status === "paid") setBag({}); else setBack({ orderId, thanks, confirming: true }); }) .catch(() => setBack({ orderId, thanks, confirming: true })); }; confirm(); window.addEventListener("hashchange", confirm); return () => window.removeEventListener("hashchange", confirm); }, []); const forSale = products.filter((p) => p.onSale).sort((a, b) => a.createdAt - b.createdAt); const lines = forSale.filter((p) => bag[p._id] > 0).map((p) => ({ product: p, qty: bag[p._id] })); const count = lines.reduce((n, l) => n + l.qty, 0); const subtotal = lines.reduce((n, l) => n + l.qty * l.product.amount, 0); const setQty = (id, qty) => setBag((b) => ({ ...b, [id]: Math.max(0, Math.min(99, qty)) })); const ready = setup?.ready === true; const mine = orders.filter((o) => o.buyerHandle === me?.userHandle && o.mode === setup?.mode); const pay = async () => { setError(""); const tab = window.open("", "_blank"); if (!tab) { setError("Your browser blocked the Stripe tab. Allow pop-ups for this page and press Pay again."); return; } setBusy(true); try { const res = await apiFetch("/checkout", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ lines: lines.map((l) => ({ productId: l.product._id, qty: l.qty })), mode: setup.mode }) }); const data = await res.json(); if (!data.ok) { tab.close(); setError(data.reason === "stripe" ? data.message : data.reason === "mode-changed" ? `Payments just moved to ${data.mode} mode. Refresh and press Pay again.` : data.reason === "unknown-item" ? "Something in your bag is no longer for sale. Refresh and try again." : data.reason === "sign-in" ? "Sign in to pay for your bag." : "Checkout is not open yet."); return; } tab.location.href = data.url; } finally { setBusy(false); } }; const screen = picked === "shop" && setup?.owner && products.length === 0 ? "products" : picked; const c = { page: "min-h-screen bg-background text-foreground font-sans p-6 max-w-3xl mx-auto" }; return (

Night Owl Roasters {setup?.owner && } {setup?.owner && } {setup?.owner && } {screen === "setup" && setup?.owner ? : screen === "products" && setup?.owner ? : screen === "orders" && setup?.owner ? : ( {back && (() => { const status = orders.find((o) => o._id === back.orderId)?.status; const text = status === "expired" ? "That checkout closed before it was paid. Press Pay to start a fresh one." : back.confirming && status !== "paid" ? "Your payment is still confirming. It shows here as paid in a moment." : back.thanks; return {text}; })()}

{forSale.length === 0 ? ( ) : ( {forSale.map((p) => setQty(p._id, (bag[p._id] ?? 0) + 1)} owner={setup?.owner === true} />)} )}

Your bag {lines.length === 0 ? Your bag is empty. Add a coffee to start. : lines.map((l) => ( {l.product.title} } onClick={() => setQty(l.product._id, l.qty - 1)} /> {l.qty} } onClick={() => setQty(l.product._id, l.qty + 1)} /> {money(l.qty * l.product.amount, l.product.currency)} {money(l.product.amount, l.product.currency)} each ))} Total{money(subtotal)} I ship it: your order is shipped to you. {ready ? ( {setup.mode === "test" && Test mode{setup.owner ? "Pay with the test card 4242 4242 4242 4242 and any future date." : "A rehearsal: test purchases end when the shop goes live."}} ) : Checkout is not open yet.} {error && {error}}

{mine.length > 0 && ( Your orders {mine.map((o) => ( {o.title} {money(o.amount, o.currency)} · {o.status === "pending" && o.sessionUrl ? Finish paying : o.status} ))} )} Everyone with the link can browse the shop. Orders stay between you and the roaster. )}

); }

Night Owl Roasters

Midnight blend, 12 oz bag

Ethiopia Guji single origin

Decaf, Swiss water

Brew kit with pour-over and filters

Your bag