makersclaw 0.2.0 → 0.3.0

package/registry/blocks/cart/cart.jsx

@@ -0,0 +1,597 @@
+"use client";
+
+import { useEffect, useId, useState } from "react";
+import {
+  Button,
+  Card,
+  Checkbox,
+  Empty,
+  Field,
+  Icon,
+  IconButton,
+  Image,
+  Input,
+  Notice,
+  Select,
+  Separator,
+  Skeleton,
+  cx,
+} from "../../ui";
+import { asAmount, countOf, lineTotal, money, subtotalOf } from "./money";
+
+// The cart and its checkout step. Line items come in as props; every
+// change goes out through a callback that returns { ok } and the row says
+// when it failed. The checkout step collects contact and delivery details
+// only — never a card: payment is Paddle's, and the step ends at `onPay`.
+
+const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const ADDRESS_KEYS = ["address", "city", "postal", "country"];
+
+async function attempt(fn) {
+  try {
+    const res = await fn();
+    return res && res.ok === false ? res.error || "That did not save." : null;
+  } catch (e) {
+    return e?.message || "That did not save.";
+  }
+}
+
+function quantityOptions(item) {
+  const max = Math.max(Number(item.maxQuantity) || 10, Number(item.quantity) || 1);
+  return Array.from({ length: max }, (_, i) => ({ value: String(i + 1), label: String(i + 1) }));
+}
+
+// Server and browser may differ in locale, time zone and even the day:
+// the first render uses fixed ones (en-US, UTC) so it matches the server's
+// HTML, then the reader's own take over.
+function useHydrated() {
+  const [hydrated, setHydrated] = useState(false);
+  useEffect(() => setHydrated(true), []);
+  return hydrated;
+}
+
+/* ---------- one line item ---------- */
+
+function LineItem({ item, currency: currencyProp, locale, editable, onQuantityChange, onRemove }) {
+  const currency = item.currency ?? currencyProp;
+  const compareAt = Number(item.compareAt) > Number(item.price) ? Number(item.compareAt) : null;
+  const [busy, setBusy] = useState(null);
+  const [error, setError] = useState(null);
+  const qtyId = useId();
+
+  async function change(next) {
+    if (!onQuantityChange) return;
+    setBusy("qty");
+    setError(null);
+    setError(await attempt(() => onQuantityChange(item, next)));
+    setBusy(null);
+  }
+  async function remove() {
+    setBusy("remove");
+    setError(null);
+    const failed = await attempt(() => onRemove(item));
+    if (failed) setError(failed);
+    setBusy(null);
+  }
+
+  return (
+    <li className="p-4">
+      <div className="flex gap-3 sm:gap-4">
+        <Image src={item.image} alt="" ratio="square" fit="cover" className="size-20 shrink-0 sm:size-24" />
+        <div className="flex min-w-0 flex-1 flex-col gap-2">
+          <div className="flex items-start justify-between gap-2">
+            <div className="min-w-0">
+              {item.href ? (
+                <Button variant="link" href={item.href} className="font-medium leading-snug">
+                  {item.name}
+                </Button>
+              ) : (
+                <p className="font-medium leading-snug">{item.name}</p>
+              )}
+              {item.variant ? <p className="mt-0.5 text-sm text-muted-foreground">{item.variant}</p> : null}
+            </div>
+            {editable && onRemove ? (
+              <IconButton
+                icon="x"
+                label={`Remove ${item.name}`}
+                size="sm"
+                onClick={remove}
+                disabled={Boolean(busy)}
+                className="-mr-2 -mt-1"
+              />
+            ) : null}
+          </div>
+          <div className="mt-auto flex flex-wrap items-center justify-between gap-2">
+            {editable && onQuantityChange ? (
+              <div className="flex items-center gap-2">
+                <label htmlFor={qtyId} className="text-sm text-muted-foreground">
+                  Qty
+                </label>
+                <Select
+                  id={qtyId}
+                  value={String(item.quantity)}
+                  onChange={(e) => change(Number(e.target.value))}
+                  options={quantityOptions(item)}
+                  disabled={Boolean(busy)}
+                  className="w-20"
+                />
+              </div>
+            ) : (
+              <p className="text-sm text-muted-foreground">Qty {item.quantity}</p>
+            )}
+            <div className="text-right">
+              <p className="font-semibold tabular-nums">
+                {compareAt ? (
+                  <>
+                    <s className="mr-1.5 text-sm font-normal text-muted-foreground">
+                      <span className="sr-only">Was </span>
+                      {money(compareAt * (Number(item.quantity) || 0), currency, locale)}
+                    </s>
+                    <span className="sr-only">now </span>
+                  </>
+                ) : null}
+                {money(lineTotal(item), currency, locale)}
+              </p>
+              {Number(item.quantity) > 1 ? (
+                <p className="text-xs text-muted-foreground tabular-nums">{money(item.price, currency, locale)} each</p>
+              ) : null}
+            </div>
+          </div>
+          {error ? (
+            <p role="alert" className="text-xs text-destructive">
+              {error}
+            </p>
+          ) : null}
+        </div>
+      </div>
+    </li>
+  );
+}
+
+/* ---------- the totals ---------- */
+
+function SummaryRow({ label, value, strong, tone }) {
+  return (
+    <div
+      className={cx(
+        "flex items-baseline justify-between gap-3",
+        strong ? "mt-1.5 border-t border-border pt-3 text-base" : "text-sm",
+      )}
+    >
+      <dt className={strong ? "font-semibold" : "text-muted-foreground"}>{label}</dt>
+      <dd
+        className={cx(
+          "text-right tabular-nums",
+          strong ? "text-xl font-semibold" : "font-medium",
+          tone === "success" && "text-success",
+        )}
+      >
+        {value}
+      </dd>
+    </div>
+  );
+}
+
+function charge(v, currency, locale, freeLabel) {
+  if (typeof v === "string") return { value: <span className="font-normal text-muted-foreground">{v}</span> };
+  if (v === 0) return { value: freeLabel, tone: "success" };
+  return { value: money(v, currency, locale) };
+}
+
+function Totals({ items, currency, locale, shipping, tax, discount, onRemoveCode }) {
+  const subtotal = subtotalOf(items);
+  const off = discount ? Math.abs(asAmount(discount.amount)) : 0;
+  const total = Math.max(0, subtotal - off + asAmount(shipping) + asAmount(tax));
+  const ship = shipping !== undefined ? charge(shipping, currency, locale, "Free") : null;
+  const taxRow = tax !== undefined ? charge(tax, currency, locale, money(0, currency, locale)) : null;
+  return (
+    <dl className="grid gap-2.5">
+      <SummaryRow label="Subtotal" value={money(subtotal, currency, locale)} />
+      {discount ? (
+        <div className="flex items-center justify-between gap-3 text-sm">
+          <dt className="flex min-w-0 items-center gap-1 text-muted-foreground">
+            <Icon name="tag" size={14} className="shrink-0" />
+            <span className="truncate">{discount.label || `Code ${discount.code}`}</span>
+            {onRemoveCode ? (
+              <IconButton icon="x" size="sm" label={`Remove code ${discount.code ?? ""}`.trim()} onClick={onRemoveCode} className="-my-2" />
+            ) : null}
+          </dt>
+          <dd className="font-medium tabular-nums text-success">−{money(off, currency, locale)}</dd>
+        </div>
+      ) : null}
+      {ship ? <SummaryRow label="Shipping" {...ship} /> : null}
+      {taxRow ? <SummaryRow label="Tax" {...taxRow} /> : null}
+      <SummaryRow label="Total" value={money(total, currency, locale)} strong />
+    </dl>
+  );
+}
+
+function PromoCode({ onApplyCode }) {
+  const [code, setCode] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null);
+  const id = useId();
+  async function apply(e) {
+    e.preventDefault();
+    const value = code.trim();
+    if (!value) return;
+    setBusy(true);
+    setError(null);
+    const failed = await attempt(() => onApplyCode(value));
+    setBusy(false);
+    if (failed) setError(failed);
+    else setCode("");
+  }
+  return (
+    <form onSubmit={apply} className="grid gap-1.5">
+      <label htmlFor={id} className="text-sm font-medium">
+        Discount code
+      </label>
+      <div className="flex gap-2">
+        <Input
+          id={id}
+          value={code}
+          onChange={(e) => setCode(e.target.value)}
+          placeholder="Enter code"
+          autoCapitalize="characters"
+          invalid={Boolean(error)}
+          aria-describedby={error ? `${id}-error` : undefined}
+          className="min-w-0 flex-1"
+        />
+        <Button type="submit" loading={busy} disabled={!code.trim()}>
+          Apply
+        </Button>
+      </div>
+      {error ? (
+        <p id={`${id}-error`} role="alert" className="text-xs text-destructive">
+          {error}
+        </p>
+      ) : null}
+    </form>
+  );
+}
+
+/* ---------- states ---------- */
+
+function Loading({ step }) {
+  return (
+    <div aria-busy="true" aria-label="Loading the cart" className="grid gap-6 lg:grid-cols-3">
+      <Card padding="none" className="lg:col-span-2">
+        {[0, 1].map((i) => (
+          <div key={i} className="flex gap-4 border-b border-border p-4 last:border-b-0">
+            <Skeleton shape="rect" className="size-20 sm:size-24" />
+            <div className="grid flex-1 content-start gap-2">
+              <Skeleton className="w-1/2" />
+              <Skeleton className="w-1/4" />
+            </div>
+          </div>
+        ))}
+      </Card>
+      <Card title={step === "checkout" ? "Order summary" : "Summary"}>
+        <div className="grid gap-3">
+          <Skeleton className="w-full" />
+          <Skeleton className="w-full" />
+          <Skeleton className="w-2/3" />
+        </div>
+      </Card>
+    </div>
+  );
+}
+
+/* ---------- the checkout step ---------- */
+
+function CheckoutForm({ total, requireAddress, terms, defaultDetails, payLabel, payNote, onPay, onBack, backLabel }) {
+  const base = useId();
+  const [details, setDetails] = useState(() => ({
+    email: "",
+    name: "",
+    address: "",
+    city: "",
+    postal: "",
+    country: "",
+    ...defaultDetails,
+  }));
+  const [agreed, setAgreed] = useState(false);
+  const [errors, setErrors] = useState({});
+  const [busy, setBusy] = useState(false);
+  const [failure, setFailure] = useState(null);
+  const set = (key) => (e) => setDetails((d) => ({ ...d, [key]: e.target.value }));
+  const id = (k) => `${base}-${k}`;
+
+  function validate() {
+    const next = {};
+    if (!EMAIL.test(details.email.trim())) next.email = "Enter an email address like name@company.com.";
+    if (requireAddress) {
+      if (!details.name.trim()) next.name = "Enter the name to deliver to.";
+      for (const k of ADDRESS_KEYS) if (!String(details[k] ?? "").trim()) next[k] = "Required.";
+    }
+    if (terms && !agreed) next.terms = "Tick this to continue.";
+    return next;
+  }
+
+  async function submit(e) {
+    e.preventDefault();
+    const found = validate();
+    setErrors(found);
+    setFailure(null);
+    if (Object.keys(found).length) {
+      const first = Object.keys(found)[0];
+      document.getElementById(id(first))?.focus();
+      return;
+    }
+    const out = { email: details.email.trim() };
+    if (requireAddress) for (const k of ["name", ...ADDRESS_KEYS]) out[k] = String(details[k]).trim();
+    setBusy(true);
+    const failed = await attempt(() => onPay(out));
+    setBusy(false);
+    if (failed) setFailure(failed);
+  }
+
+  const err = (k) => errors[k];
+  const inputProps = (k, extra) => ({
+    id: id(k),
+    value: details[k] ?? "",
+    onChange: set(k),
+    invalid: Boolean(err(k)),
+    "aria-describedby": err(k) ? `${id(k)}-error` : undefined,
+    disabled: busy,
+    ...extra,
+  });
+
+  return (
+    <form onSubmit={submit} noValidate className="grid gap-6">
+      <section className="grid gap-4">
+        <SectionHead icon="mail" title="Contact" description="Where the receipt and order updates go." />
+        <Field id={id("email")} label="Email" error={err("email")} required>
+          <Input {...inputProps("email", { type: "email", autoComplete: "email", placeholder: "you@company.com" })} />
+        </Field>
+      </section>
+
+      {requireAddress ? (
+        <>
+          <Separator />
+          <section className="grid gap-4">
+            <SectionHead icon="truck" title="Delivery" description="Where the order should arrive." />
+            <Field id={id("name")} label="Full name" error={err("name")} required>
+              <Input {...inputProps("name", { autoComplete: "name" })} />
+            </Field>
+            <Field id={id("address")} label="Street address" error={err("address")} required>
+              <Input {...inputProps("address", { autoComplete: "street-address" })} />
+            </Field>
+            <div className="grid gap-4 sm:grid-cols-3">
+              <Field id={id("city")} label="City" error={err("city")} required>
+                <Input {...inputProps("city", { autoComplete: "address-level2" })} />
+              </Field>
+              <Field id={id("postal")} label="Postal code" error={err("postal")} required>
+                <Input {...inputProps("postal", { autoComplete: "postal-code" })} />
+              </Field>
+              <Field id={id("country")} label="Country" error={err("country")} required>
+                <Input {...inputProps("country", { autoComplete: "country-name" })} />
+              </Field>
+            </div>
+          </section>
+        </>
+      ) : null}
+
+      <Separator />
+
+      <section className="grid gap-3">
+        {terms ? (
+          <div className="grid gap-1">
+            <Checkbox
+              id={id("terms")}
+              checked={agreed}
+              onChange={(e) => setAgreed(e.target.checked)}
+              label={terms}
+              disabled={busy}
+              aria-invalid={err("terms") ? true : undefined}
+              aria-describedby={err("terms") ? `${id("terms")}-error` : undefined}
+            />
+            {err("terms") ? (
+              <p id={`${id("terms")}-error`} role="alert" className="text-xs text-destructive">
+                {err("terms")}
+              </p>
+            ) : null}
+          </div>
+        ) : null}
+        {failure ? <Notice tone="danger" title="The order did not go through">{failure}</Notice> : null}
+        <Button type="submit" variant="primary" icon="lock" loading={busy} className="w-full">
+          {payLabel ?? `Continue to payment · ${total}`}
+        </Button>
+        {payNote ? <p className="text-center text-xs text-muted-foreground">{payNote}</p> : null}
+        {onBack ? (
+          <Button variant="quiet" icon="arrow-left" onClick={onBack} disabled={busy} className="justify-self-center">
+            {backLabel}
+          </Button>
+        ) : null}
+      </section>
+    </form>
+  );
+}
+
+function SectionHead({ icon, title, description }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="grid size-9 shrink-0 place-items-center rounded-full bg-primary/10 text-primary">
+        <Icon name={icon} size={16} />
+      </span>
+      <div className="min-w-0">
+        <h3 className="font-semibold leading-tight">{title}</h3>
+        {description ? <p className="text-sm text-muted-foreground">{description}</p> : null}
+      </div>
+    </div>
+  );
+}
+
+/* ---------- the block ---------- */
+
+export function Cart({
+  items,
+  step = "cart",
+  currency = "USD",
+  locale: localeProp,
+  shipping,
+  tax,
+  discount,
+  note,
+  loading = false,
+  error,
+  title,
+  onQuantityChange,
+  onRemove,
+  onApplyCode,
+  onRemoveCode,
+  onCheckout,
+  checkoutLabel = "Checkout",
+  onContinueShopping,
+  continueHref,
+  continueLabel = "Continue shopping",
+  emptyTitle = "Your cart is empty",
+  emptyBody = "Anything you add shows up here.",
+  requireAddress = true,
+  terms,
+  defaultDetails,
+  onPay,
+  payLabel,
+  payNote = "You pay on the next screen. We never see your card.",
+  onBack,
+  backLabel = "Back to cart",
+  className,
+}) {
+  const hydrated = useHydrated();
+  const locale = localeProp ?? (hydrated ? undefined : "en-US");
+  const [checkingOut, setCheckingOut] = useState(false);
+  const [checkoutError, setCheckoutError] = useState(null);
+  const checkout = step === "checkout";
+  const list = (items ?? []).filter(Boolean);
+  const count = countOf(list);
+  const heading = title ?? (checkout ? "Checkout" : "Cart");
+
+  const subtotal = subtotalOf(list);
+  const off = discount ? Math.abs(asAmount(discount.amount)) : 0;
+  const total = money(Math.max(0, subtotal - off + asAmount(shipping) + asAmount(tax)), currency, locale);
+
+  async function goToCheckout() {
+    if (!onCheckout) return;
+    setCheckingOut(true);
+    setCheckoutError(null);
+    const failed = await attempt(() => onCheckout());
+    setCheckingOut(false);
+    if (failed) setCheckoutError(failed);
+  }
+
+  const header = (
+    <div className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1">
+      <h2 className="text-xl font-semibold">{heading}</h2>
+      {!loading && list.length ? (
+        <p className="text-sm text-muted-foreground">
+          {count} {count === 1 ? "item" : "items"}
+        </p>
+      ) : null}
+    </div>
+  );
+
+  let body;
+  if (loading) body = <Loading step={step} />;
+  else if (!list.length) {
+    const action =
+      continueHref || onContinueShopping ? (
+        <Button variant="primary" href={continueHref} onClick={onContinueShopping}>
+          {continueLabel}
+        </Button>
+      ) : null;
+    body = <Empty icon="shopping-cart" title={emptyTitle} body={emptyBody} action={action} className="py-16" />;
+  } else if (checkout) {
+    body = (
+      <div className="grid items-start gap-6 lg:grid-cols-5 lg:gap-10">
+        <div className="order-2 lg:order-1 lg:col-span-3">
+          <CheckoutForm
+            total={total}
+            requireAddress={requireAddress}
+            terms={terms}
+            defaultDetails={defaultDetails}
+            payLabel={payLabel}
+            payNote={payNote}
+            onPay={onPay ?? (async () => ({ ok: true }))}
+            onBack={onBack}
+            backLabel={backLabel}
+          />
+        </div>
+        <Card title="Order summary" padding="none" className="order-1 lg:sticky lg:top-4 lg:order-2 lg:col-span-2">
+          <ul className="divide-y divide-border border-y border-border">
+            {list.map((item) => (
+              <LineItem key={item.key ?? item.id} item={item} currency={currency} locale={locale} editable={false} />
+            ))}
+          </ul>
+          <div className="p-4">
+            <Totals items={list} currency={currency} locale={locale} shipping={shipping} tax={tax} discount={discount} />
+            {note ? <SummaryNote note={note} className="mt-4" /> : null}
+          </div>
+        </Card>
+      </div>
+    );
+  } else {
+    body = (
+      <div className="grid items-start gap-6 lg:grid-cols-3">
+        <Card padding="none" className="lg:col-span-2">
+          <ul aria-label="Items in the cart" className="divide-y divide-border">
+            {list.map((item) => (
+              <LineItem
+                key={item.key ?? item.id}
+                item={item}
+                currency={currency}
+                locale={locale}
+                editable
+                onQuantityChange={onQuantityChange}
+                onRemove={onRemove}
+              />
+            ))}
+          </ul>
+        </Card>
+        <Card title="Summary" className="lg:sticky lg:top-4">
+          <div className="grid gap-4">
+            <Totals
+              items={list}
+              currency={currency}
+              locale={locale}
+              shipping={shipping}
+              tax={tax}
+              discount={discount}
+              onRemoveCode={onRemoveCode}
+            />
+            {onApplyCode && !discount ? <PromoCode onApplyCode={onApplyCode} /> : null}
+            {checkoutError ? <Notice tone="danger">{checkoutError}</Notice> : null}
+            {onCheckout ? (
+              <Button variant="primary" icon="lock" onClick={goToCheckout} loading={checkingOut} className="w-full">
+                {checkoutLabel}
+              </Button>
+            ) : null}
+            {continueHref || onContinueShopping ? (
+              <Button variant="quiet" href={continueHref} onClick={onContinueShopping} className="w-full">
+                {continueLabel}
+              </Button>
+            ) : null}
+            {note ? <SummaryNote note={note} /> : null}
+          </div>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cx("grid gap-4", className)}>
+      {header}
+      {error ? <Notice tone="danger">{error}</Notice> : null}
+      {body}
+    </div>
+  );
+}
+
+function SummaryNote({ note, className }) {
+  return (
+    <div className={cx("flex items-start gap-2 rounded-md bg-muted p-3 text-sm", className)}>
+      <Icon name="truck" size={16} className="mt-0.5 shrink-0 text-muted-foreground" />
+      <div className="min-w-0 text-muted-foreground">{note}</div>
+    </div>
+  );
+}

package/registry/blocks/cart/demo.jsx

@@ -0,0 +1,98 @@
+"use client";
+
+// The Cart with items in memory — the gallery's and the smoke test's
+// surface. Not installed into apps: `makersclaw add cart` lays index.js,
+// cart.jsx and money.js only.
+import { useState } from "react";
+import { Switch, ToggleGroup } from "../components/ui";
+import { Cart } from "../components/blocks/cart";
+
+const photo = (id) => `https://images.unsplash.com/${id}?w=320&h=320&fit=crop&auto=format&q=70`;
+
+const START = [
+  { id: "li_1", name: "Field jacket", image: photo("photo-1591047139829-d91aecb6caea"), price: 184, quantity: 1, variant: "Olive · M" },
+  { id: "li_2", name: "Canvas weekender", image: photo("photo-1553062407-98eeb64c6a62"), price: 129, quantity: 1, variant: "Sand" },
+  { id: "li_3", name: "Merino crew socks", image: photo("photo-1586350977771-b3b0abd50c82"), price: 18, quantity: 3, variant: "Charcoal · 3 pack" },
+];
+
+const CODES = { WELCOME10: 0.1, SPRING: 0.15 };
+
+const VIEWS = [
+  { value: "cart", label: "Cart" },
+  { value: "checkout", label: "Checkout" },
+  { value: "empty", label: "Empty" },
+  { value: "loading", label: "Loading" },
+];
+
+const wait = (ms) => new Promise((r) => setTimeout(r, ms));
+
+export default function CartDemo() {
+  const [view, setView] = useState("cart");
+  const [items, setItems] = useState(START);
+  const [discount, setDiscount] = useState(null);
+  const [failing, setFailing] = useState(false);
+  const [paid, setPaid] = useState(null);
+
+  const subtotal = items.reduce((s, i) => s + i.price * i.quantity, 0);
+  const fail = async () => {
+    await wait(400);
+    return failing ? { ok: false, error: "The shop did not answer. Try again." } : null;
+  };
+
+  return (
+    <div className="grid gap-6">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <ToggleGroup items={VIEWS} value={view} onChange={setView} size="sm" aria-label="Which state to show" />
+        <Switch id="cart-fail" checked={failing} onChange={(e) => setFailing(e.target.checked)} label="Make saves fail" />
+      </div>
+
+      {paid ? (
+        <p role="status" className="text-sm text-muted-foreground">
+          onPay was called for {paid.email}. The app would open Paddle's checkout now.
+        </p>
+      ) : null}
+
+      <Cart
+        items={view === "empty" ? [] : items}
+        loading={view === "loading"}
+        step={view === "checkout" ? "checkout" : "cart"}
+        shipping={subtotal >= 150 ? 0 : 12}
+        tax="Calculated at payment"
+        discount={discount ? { code: discount.code, amount: Math.round(subtotal * discount.rate * 100) / 100 } : null}
+        note={subtotal >= 150 ? "Free delivery applied. Arrives in 3–5 working days." : "Free delivery on orders over $150."}
+        onQuantityChange={async (item, quantity) => {
+          const failed = await fail();
+          if (failed) return failed;
+          setItems((all) => all.map((i) => (i.id === item.id ? { ...i, quantity } : i)));
+          return { ok: true };
+        }}
+        onRemove={async (item) => {
+          const failed = await fail();
+          if (failed) return failed;
+          setItems((all) => all.filter((i) => i.id !== item.id));
+          return { ok: true };
+        }}
+        onApplyCode={async (code) => {
+          await wait(400);
+          const rate = CODES[code.toUpperCase()];
+          if (!rate) return { ok: false, error: `"${code}" is not a code we know. Try WELCOME10.` };
+          setDiscount({ code: code.toUpperCase(), rate });
+          return { ok: true };
+        }}
+        onRemoveCode={() => setDiscount(null)}
+        onCheckout={() => setView("checkout")}
+        onContinueShopping={() => setItems(START)}
+        continueLabel={view === "empty" ? "Browse the shop" : "Continue shopping"}
+        terms="I agree to the terms of sale and the returns policy"
+        defaultDetails={{ email: "maya@northwind.co" }}
+        onPay={async (details) => {
+          const failed = await fail();
+          if (failed) return failed;
+          setPaid(details);
+          return { ok: true };
+        }}
+        onBack={() => setView("cart")}
+      />
+    </div>
+  );
+}