import React, { useEffect, useRef, useState } from "react"; import { callAI } from "call-ai"; import { useFireproof } from "use-fireproof"; import { apiFetch, useVibe } from "use-vibes"; import { Badge, Button, Card, Empty, Field, Grid, Heading, Icon, IconButton, Input, Row, RowCard, Stack, Text, Segmented as _S } from "@vibes.diy/ui"; import { Checkbox, Sheet } from "@vibes.diy/ui/interactive"; import { Segmented } from "@vibes.diy/ui"; const SKIN = ` @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&display=swap'); [data-reskin] .ui-h1, [data-reskin] .ui-h2, [data-reskin] .ui-h3 { font-family: 'Playfair Display', Georgia, serif; } [data-reskin] .glaze { border-top: 4px solid var(--orange); padding-top: 12px; } `; const digits = (cur) => new Intl.NumberFormat("en", { style: "currency", currency: cur }).resolvedOptions().maximumFractionDigits; const money = (amount, cur) => new Intl.NumberFormat(undefined, { style: "currency", currency: cur }).format(amount / 10 ** digits(cur)); const toMinor = (t, cur) => Math.round(Number(t) * 10 ** digits(cur)); const shown = (a, cur) => (a / 10 ** digits(cur)).toFixed(digits(cur)); const CUR = "usd"; 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 vis = () => { if (document.visibilityState === "visible") load(); }; document.addEventListener("visibilitychange", vis); window.addEventListener("focus", load); window.addEventListener("setup-changed", load); return () => { document.removeEventListener("visibilitychange", vis); 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}}

Open this vibe's Settings tab and press {STRIPE_BUTTON[item.state] ?? "Connect Stripe"} under Payments.
Come back here: the Pay button works once 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 ? <>Your live Stripe account is ready. : setup.liveOpen ? <>After a test payment, press Go live with Stripe on the same Settings tab, then return here. : "Test mode runs the whole flow. The Go live button appears on the Settings tab when live payments open."}

); } 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(null); const [suggesting, setSuggesting] = useState(false); const save = async (product, undo) => { setError(null); 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, CUR); 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: CUR, onSale: true, createdAt: Date.now() }; setTitle(""); setPrice(""); save(product, () => { setTitle(product.title); setPrice(shown(product.amount, CUR)); }); }; const suggest = async () => { setSuggesting(true); try { const r = await callAI(`Suggest one handmade ceramic piece name of two to four words, plus a price in dollars between 15 and 90. Different from: ${products.map((p) => p.title).join(", ")}.`, { schema: { properties: { name: { type: "string" }, price: { type: "number" } }, required: ["name", "price"] } }); const o = JSON.parse(r); if (typeof o.name === "string") setTitle(o.name.trim().split(/\s+/).slice(0, 4).join(" ")); if (Number.isFinite(o.price)) setPrice(String(Math.min(90, Math.max(15, Math.round(o.price))))); } catch (e) { setError("Press the sparkle again for another suggestion."); } finally { setSuggesting(false); } }; return ( Products {(id, d) => } {(id, d) => } } onClick={suggest} /> {error && {error}} {products.map((p) => )} ); } function ProductCard({ product, qty, onAdd, database }) { return ( {product.title} {money(product.amount, product.currency)} ); } const post = (b) => ({ method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(b) }); export default function App() { const { database, useLiveQuery } = useFireproof("orders"); const { me } = useVibe("orders"); const { docs: products } = useLiveQuery("type", { key: "product" }); const { docs: orders } = useLiveQuery("type", { key: "order" }); const setup = useSetup(); const [screen, setScreen] = useState("shop"); const [bag, setBag] = useState({}); const [bagOpen, setBagOpen] = useState(false); const [fulfil, setFulfil] = useState("pickup"); const [busy, setBusy] = useState(false); const [error, setError] = useState(null); const [back, setBack] = useState(null); const [question, setQuestion] = useState(""); const [answer, setAnswer] = useState(""); const [asking, setAsking] = useState(false); useEffect(() => { const confirm = () => { const p = new URLSearchParams(location.hash.slice(1)); const orderId = p.get("paid"); if (!orderId) return; history.replaceState(null, "", location.pathname); const total = Number(p.get("total") ?? "x"); const thanks = Number.isInteger(total) ? `Payment received: ${money(total, p.get("currency") ?? "usd")}. Thank you!` : "Payment received. Thank you!"; setBack({ orderId, thanks, confirming: false }); setBag({}); apiFetch("/confirm", post({ orderId })).then((r) => r.json()).then((d) => { if (d.status !== "paid") 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); 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, q) => setBag((b) => ({ ...b, [id]: Math.max(0, Math.min(99, q)) })); const pay = async () => { setError(null); const tab = window.open("", "_blank"); if (!tab) { setError("Your browser blocked the Stripe tab. Allow pop-ups and press Pay again."); return; } setBusy(true); try { const res = await apiFetch("/checkout", post({ lines: lines.map((l) => ({ productId: l.product._id, qty: l.qty })), fulfillment: fulfil, 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." : "Checkout is not open yet."); return; } tab.location.href = data.url; } finally { setBusy(false); } }; const ask = async (e) => { e.preventDefault(); if (!question.trim()) return; setAsking(true); try { const r = await callAI(`Answer from this shop catalog only. Catalog: ${JSON.stringify(forSale.map((p) => ({ name: p.title, price: p.amount / 100 })))}. Question: ${question}`, { schema: { properties: { answer: { type: "string" } }, required: ["answer"] } }); setAnswer(JSON.parse(r).answer); } catch { setAnswer("Try asking another way."); } finally { setAsking(false); } }; const ready = setup?.ready === true; const mine = orders.filter((o) => o.buyerHandle === me?.userHandle && o.mode === setup?.mode); const c = { page: "min-h-screen bg-background text-foreground font-sans p-6 max-w-3xl mx-auto" }; return (

Hilltop Creations {setup?.owner && } {setup?.owner && } {screen === "setup" && setup?.owner ? : screen === "products" && setup?.owner ? : ( {back && ( {(() => { const st = orders.find((o) => o._id === back.orderId)?.status; if (st === "expired") return "That checkout closed before it was paid. Open your bag to start again."; if (back.confirming && st !== "paid") return "Your payment is still confirming. It shows here as paid in a moment."; return back.thanks; })()} )}

{forSale.length === 0 ? ( {setup?.owner ? "Add your pieces under Products." : "Nothing for sale yet."} ) : ( {forSale.map((p, i) => (

setQty(p._id, (bag[p._id] ?? 0) + 1)} database={database} />

))} )}

{mine.length > 0 && ( Your orders {mine.map((o) => ( {o.title} · {money(o.amount, o.currency)} · {o.fulfillment} · {o.status === "pending" && o.sessionUrl ? Finish paying : o.status} ))} )} {setup?.owner && orders.length > 0 && ( Orders {orders.map((o) => ( @{o.buyerHandle} · {money(o.amount, o.currency)} · {o.status} · {o.fulfillment} {(o.lines ?? []).map((l) => `${l.qty} × ${l.title}`).join(", ")} ))} )} Anyone with the link can browse the shop; only the owner changes products and sees every order. )} {lines.length === 0 ? Add a piece from the shelves. : 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)} ))} {lines.length > 0 && ( Total{money(subtotal, CUR)} {setup?.mode === "test" && Test modeTest card 4242 4242 4242 4242, any future date.} {ready ? ( ) : ( Checkout is not open yet. )} {error && {error}} )}

); } function Spacer2() { return

; }

Hilltop Creations

Bud vase

Nesting bowls, set of three

Salt cellar with spoon

Speckled mug