@base44/app-plugin-commerce 0.9.4 → 0.10.0

package/skills/commerce/references/storefront-ui.md

@@ -0,0 +1,154 @@
+---
+read_when: "The user asks to change something on the shipped cart page, cart drawer, checkout, or order-received page — wording, layout, sections, styling beyond the theme block, an extra locale, or custom content inside them."
+skip_when: "First install (stage 02's theme block + brand props are the whole job), or the change is on a page you built (list/product)."
+---
+
+# storefront-ui — day-2 reference
+
+`src/commerce/storefront-ui/` is **kit-owned**: a kit update re-copies the whole
+directory, so direct edits to its files do not survive and are unsupported. Every
+supported change goes through the surface below, in this order — most requests stop
+at the first rung that fits:
+
+1. **Theme tokens** — colors, radius, heading font.
+2. **`brand` props** — any heading/CTA/empty-state wording.
+3. **`sections` / layout props** — show, hide, or require parts.
+4. **`slots`** — inject your own markup at the defined points.
+5. **CSS overrides in `index.css`** — restyle beyond tokens (below).
+6. **A new locale file** — the one in-directory edit that survives conceptually
+   (re-add it after a kit update; keep a copy in your notes).
+
+If none of those can express the request, say so and ask the user before forking a
+component: copy the file **out** of `storefront-ui/` into the app's own pages,
+rename it, and own it from then on — never edit it in place.
+
+## Theme tokens — the full set
+
+Set on `.sfui` in `index.css`. Colors are **pairs**; never override one side alone.
+Unset tokens fall back to the app's shadcn variables (`--background`, `--primary`, …),
+then to safe literals — an app with no block at all is already correct.
+
+| pair / token | used for | default chain |
+|---|---|---|
+| `--sfui-surface` / `--sfui-on-surface` | page background context + primary text | `--background` / `--foreground` |
+| `--sfui-subtle` / `--sfui-on-subtle` | panels, summary asides, secondary text | `--muted` / `--muted-foreground` |
+| `--sfui-accent` / `--sfui-on-accent` | CTAs, selected choices, badge | `--primary` / `--primary-foreground` |
+| `--sfui-danger` / `--sfui-on-danger` | errors, blockers | `--destructive` / `--destructive-foreground` |
+| `--sfui-border` | hairlines, control borders | `--border` |
+| `--sfui-radius` | panels/cards (controls derive ×0.6, or set `--sfui-radius-control`) | `--radius` → `0.75rem` |
+| `--sfui-font-heading` | headings only — body text always inherits the site font | `inherit` |
+
+**Contrast guard**: on mount each active pair is measured; a pair under 3:1 is reset
+to its default (both sides) and a `console.warn` names it. So a "my colors aren't
+applying" report usually means the pair failed contrast — fix the colors, don't
+fight the guard.
+
+## Components & props
+
+All props optional; the zero-prop render is complete.
+
+### `<CartPage />` — route it (usually `/cart`)
+
+- `brand`: `title`, `summaryTitle`, `checkoutCta`, `continueShopping`,
+  `emptyTitle`, `emptyBody`, `emptyCta`, `note` (the small tax/shipping note).
+- `sections`: `{ coupon: "auto"|true|false, notes: false, continueShopping: true, taxNote: true }`.
+- `checkoutHref="/checkout"`, `continueHref="/"`,
+  `productHref={(item) => "/product/" + item.slug}` — line names link only when given.
+- `slots`: `{ lineExtra({ item, line }), aboveSummary(), emptyState() }` —
+  `lineExtra` renders inside every row (gift-wrap toggle, availability note);
+  `aboveSummary` sits above the totals (trust badges, upsell rail); `emptyState`
+  replaces the designed empty state entirely.
+
+### `<MiniCart />` — mount ONCE in the layout, never on a route
+
+- `brand`: `title`, `checkoutLabel`, `viewCartLabel`, `emptyTitle`, `emptyCta`.
+- `side: "right"|"left"` (`"left"` reads better for RTL stores),
+  `checkoutHref="/checkout"`, `cartHref` (the "view cart" link renders only when
+  given — a store without a cart page just omits it), `productHref`.
+- Open/close state is `<CartUIProvider>`'s: Esc, close-on-navigate and
+  open-on-add already work. Programmatic control is `useCartUI()`
+  (`openCart`/`closeCart`/`toggleCart`) — e.g. suppress open-on-add by rendering
+  the provider with its own options, not by patching MiniCart.
+
+### `<CartButton />` — optional header trigger
+
+`className`, `label` (aria-label). It is only `useCartUI().toggleCart` +
+`useCart().itemCount` around a bag icon — replacing it with the store's own button
+on those two hooks is normal and supported.
+
+### `<CheckoutPage />` — route it (usually `/checkout`)
+
+- `brand`: `title`, `contactTitle`, `shippingTitle`, `paymentTitle`,
+  `summaryTitle`, `submitLabel`, `termsLabel`, `emptyTitle`, `emptyCta`.
+- `layout: "two-column"|"single"` — `"single"` stacks the summary under the form
+  (long forms, narrow brand sites; mobile always stacks).
+- `sections`: `{ coupon: "auto", notes: false, phone: "optional"|"required"|"hidden",
+  shipToDifferent: true, termsCheckbox: false }` — `phone: "required"` marks the
+  field required in the address spec (the blocker wording follows for free);
+  `termsCheckbox: true` gates place-order on an accepted checkbox worded by
+  `brand.termsLabel`.
+- `continueHref="/"` — where the empty state sends people.
+- `onPlaced={(order) => …}` — replaces the default `/order-received` navigation.
+  Advanced: the default flow already handles the card redirect and the offline
+  receipt; use this only when the user explicitly wants a custom post-order flow,
+  and remember card payments still return to `/order-received`.
+- Order notes persist in `sessionStorage` while the customer bounces between cart
+  and checkout, and submit as the order's `customer_note`.
+
+### `<OrderReceivedPage />` — route it at `/order-received` (mandatory)
+
+- `brand`: `paidTitle`, `paidBody`, `unpaidTitle`, `unpaidBody`, `backToStore`.
+- `homeHref="/"`.
+- Renders all `useOrderReturn` states — paid, unpaid (payment instructions +
+  pay-now link), cancelled (retry link), error (retry) — and the order's lines and
+  totals. Must stay under `<StorefrontProvider>`.
+
+## Wording & locales
+
+Functional labels live in `src/commerce/storefront-ui/i18n/locales/` —
+`en de es fr ja pt`, flat keys namespaced `common.*`, `cart.*`, `minicart.*`,
+`checkout.*` (incl. `checkout.hint.*` and `checkout.blocker.*` for every blocker
+code), `order.*`. Switching among the six is ONE edit: repoint
+`import active from "./locales/en.js"` in `i18n/index.js`.
+
+- **Reword one label in the site's voice** → the matching `brand` prop
+  (precedence: brand prop → active locale → en). Never edit a locale file for a
+  brand-voice request.
+- **A language outside the six** → copy `locales/en.js` to `<lang>.js`, translate
+  every value (keep keys and `{placeholders}` exact), repoint the import.
+- **A label with no brand prop** (a blocker line, a validation hint) → that is
+  functional copy; if the user insists on custom wording, a new locale file copied
+  from the active one with that value changed is the supported route.
+
+## Restyling beyond tokens
+
+The stylesheet is plain, low-specificity CSS scoped under `.sfui` with stable
+class names (`.sfui-btn`, `.sfui-panel`, `.sfui-line`, `.sfui-choice`,
+`.sfui-summary`, `.sfui-drawer`, `.sfui-cart-button`, `.sfui-cart-badge`, …).
+Override them from the app's `index.css` — later in the cascade, so equal
+specificity wins:
+
+```css
+.sfui .sfui-btn { text-transform: uppercase; letter-spacing: 0.08em; }
+.sfui .sfui-panel { box-shadow: 0 1px 0 rgb(0 0 0 / 6%); border: 0; }
+```
+
+Keep overrides in `index.css` (they survive kit updates); never edit
+`storefront-ui.css`. The address form inside checkout is `<AddressFields>` —
+already styled; further styling targets its `[data-part]` attributes **on the
+element itself** (`select[data-part="control"]`, never `[data-part="control"] input`).
+
+## Recipes
+
+- **Hide the coupon field everywhere**: `sections={{ coupon: false }}` on both
+  `CartPage` and `CheckoutPage` (default `"auto"` shows it only when the store has
+  coupons — server-decided via `has_coupons`, so day-2 coupons created in the
+  admin surface it automatically).
+- **No cart page, drawer only**: drop the `/cart` route, omit `cartHref` on
+  `MiniCart`, point nav links at `/checkout`.
+- **Upsells in the cart**: `slots.aboveSummary` rendering rows from
+  `useProduct(...)`'s `upsells`/`crossSells` with `useCart().addItem` — one-click
+  Add only for products without attributes (variants answer `400 variation_required`).
+- **B2B-ish checkout**: `sections={{ phone: "required", termsCheckbox: true, notes: true }}`.
+- **Custom thank-you flow**: keep `/order-received` mounted (payment links return
+  there), add `onPlaced` only for the extra hop the user asked for.

package/src/commerce/storefront/index.js

@@ -8,10 +8,13 @@
  *
  * The split: **logic is premade, UI never is.** Checkout repricing, variant
  * resolution, cart state, order-return verification — done here, and
- * hand-rolling any of it is where storefront bugs cluster. What a checkout or a
- * product page *looks like* is the store's identity, and no two stores should
- * share it — so nothing here emits markup, and every state arrives as a **code**
+ * hand-rolling any of it is where storefront bugs cluster. What a catalog
+ * page *looks like* is the store's identity, and no two stores should share
+ * it — so nothing here emits markup, and every state arrives as a **code**
  * (`state`, `status`, `hint.code`, `blockers`) that you write the words for.
+ * The conversion surfaces (cart page, drawer, checkout, order received) ship
+ * finished on top of this layer in `@/commerce/storefront-ui` — mount those
+ * instead of building them from these hooks.
  *
  * `StorefrontProvider` mounts once, above every storefront route (see its own
  * doc comment — getting the mounting wrong is the one setup error worth

package/src/commerce/storefront-ui/CartButton.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { useCart, useCartUI } from "@/commerce/storefront";
+import { t } from "./i18n/index.js";
+
+/**
+ * Optional header trigger for the MiniCart: a bag icon with a live item-count
+ * badge, wired to the cart drawer. The header itself stays the store's brand
+ * surface — use this for the wiring and restyle it via .sfui-cart-button /
+ * .sfui-cart-badge (or replace it with your own button calling
+ * `useCartUI().toggleCart` and rendering `useCart().itemCount`).
+ */
+export function CartButton({ className = "", label }) {
+  const { toggleCart } = useCartUI();
+  const { itemCount } = useCart();
+  return (
+    <button
+      type="button"
+      className={`sfui sfui-cart-button ${className}`}
+      onClick={toggleCart}
+      aria-label={label ?? t("minicart.button")}
+    >
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden="true">
+        <path d="M6 7h12l-1 13H7L6 7Z" strokeLinejoin="round" />
+        <path d="M9 9V6a3 3 0 0 1 6 0v3" strokeLinecap="round" />
+      </svg>
+      {itemCount > 0 && (
+        <span className="sfui-cart-badge" aria-hidden="true">
+          {itemCount > 99 ? "99+" : itemCount}
+        </span>
+      )}
+    </button>
+  );
+}

package/src/commerce/storefront-ui/CartPage.jsx

@@ -0,0 +1,140 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { useCart, useStoreInfo } from "@/commerce/storefront";
+import { makeT } from "./i18n/index.js";
+import {
+  CartLineRow,
+  CouponField,
+  ErrorState,
+  LoadingState,
+  SfuiRoot,
+  TotalsBlock,
+  couponVisible,
+  readOrderNote,
+  writeOrderNote,
+} from "./internal.jsx";
+
+const BRAND_KEYS = {
+  title: "cart.title",
+  summaryTitle: "cart.summaryTitle",
+  checkoutCta: "cart.checkoutCta",
+  continueShopping: "cart.continueShopping",
+  emptyTitle: "cart.empty.title",
+  emptyBody: "cart.empty.body",
+  emptyCta: "cart.empty.cta",
+  note: "cart.taxNote",
+};
+
+/**
+ * The routed cart page — complete: line rows with row-scoped quantity editing,
+ * the full totals breakdown, coupons, optional order notes, a designed empty
+ * state. Mount it on a route inside the store's layout; everything inside is
+ * shipped and tested.
+ *
+ * @param {object} props
+ * @param {Record<string,string>} [props.brand] wording overrides (title,
+ *   summaryTitle, checkoutCta, continueShopping, emptyTitle, emptyBody,
+ *   emptyCta, note) — the store's voice; labels beyond these are localized
+ *   via ./i18n.
+ * @param {object} [props.sections] `{ coupon: "auto"|true|false, notes: false,
+ *   continueShopping: true, taxNote: true }`
+ * @param {string} [props.checkoutHref="/checkout"]
+ * @param {string} [props.continueHref="/"]
+ * @param {(item) => string} [props.productHref] line names link to the product
+ *   when given; plain text otherwise (never a guessed route).
+ * @param {object} [props.slots] `{ lineExtra?({item,line}), aboveSummary?(),
+ *   emptyState?() }`
+ */
+export function CartPage({
+  brand,
+  sections = {},
+  checkoutHref = "/checkout",
+  continueHref = "/",
+  productHref,
+  slots = {},
+}) {
+  const tt = makeT(brand, BRAND_KEYS);
+  const cartApi = useCart();
+  const { info } = useStoreInfo();
+  const [note, setNote] = useState(readOrderNote);
+  const { status, cart } = cartApi;
+  const {
+    coupon = "auto",
+    notes = false,
+    continueShopping = true,
+    taxNote = true,
+  } = sections;
+
+  return (
+    <SfuiRoot className="sfui-cart" aria-labelledby="sfui-cart-title">
+      <div className="sfui-cart-inner">
+        <div>
+          <h1 id="sfui-cart-title" className="sfui-heading sfui-h1" style={{ marginBlockEnd: "1rem" }}>
+            {tt("cart.title")}
+          </h1>
+          {status === "loading" && <LoadingState />}
+          {status === "empty" &&
+            (slots.emptyState ? (
+              slots.emptyState()
+            ) : (
+              <div className="sfui-state">
+                <h2 className="sfui-heading sfui-h2">{tt("cart.empty.title")}</h2>
+                <p className="sfui-muted">{tt("cart.empty.body")}</p>
+                <Link className="sfui-btn sfui-btn-inline" to={continueHref}>
+                  {tt("cart.empty.cta")}
+                </Link>
+              </div>
+            ))}
+          {status === "ready" && cartApi.error && <ErrorState onRetry={cartApi.refresh} />}
+          {status === "ready" && (
+            <ul className="sfui-lines">
+              {cart.items.map((item) => (
+                <CartLineRow
+                  key={item.item_key}
+                  item={item}
+                  tt={tt}
+                  productHref={productHref}
+                  lineExtra={slots.lineExtra}
+                />
+              ))}
+            </ul>
+          )}
+        </div>
+
+        {status === "ready" && (
+          <aside className="sfui-panel sfui-summary" aria-label={tt("cart.summaryTitle")}>
+            <h2 className="sfui-heading sfui-h2">{tt("cart.summaryTitle")}</h2>
+            {slots.aboveSummary && slots.aboveSummary()}
+            {couponVisible(coupon, cart, info) && <CouponField tt={tt} />}
+            {notes && (
+              <div>
+                <label className="sfui-label" htmlFor="sfui-cart-note">
+                  {tt("cart.notes.label")}
+                </label>
+                <textarea
+                  id="sfui-cart-note"
+                  value={note}
+                  placeholder={tt("cart.notes.placeholder")}
+                  onChange={(e) => {
+                    setNote(e.target.value);
+                    writeOrderNote(e.target.value);
+                  }}
+                />
+              </div>
+            )}
+            <TotalsBlock cart={cart} tt={tt} />
+            {taxNote && <p className="sfui-note">{tt("cart.taxNote")}</p>}
+            <Link className="sfui-btn" to={checkoutHref}>
+              {tt("cart.checkoutCta")}
+            </Link>
+            {continueShopping && (
+              <Link className="sfui-btn sfui-btn-ghost" to={continueHref}>
+                {tt("cart.continueShopping")}
+              </Link>
+            )}
+          </aside>
+        )}
+      </div>
+    </SfuiRoot>
+  );
+}

package/src/commerce/storefront-ui/CheckoutPage.jsx

@@ -0,0 +1,287 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import {
+  AddressFields,
+  CheckoutProvider,
+  PaymentMethodPicker,
+  ShippingMethodPicker,
+  useCheckoutContext,
+  useStoreInfo,
+} from "@/commerce/storefront";
+import { makeT } from "./i18n/index.js";
+import {
+  CouponField,
+  LoadingState,
+  SfuiRoot,
+  TotalsBlock,
+  couponVisible,
+  readOrderNote,
+  writeOrderNote,
+} from "./internal.jsx";
+
+const BRAND_KEYS = {
+  title: "checkout.title",
+  contactTitle: "checkout.contactTitle",
+  shippingTitle: "checkout.shippingTitle",
+  paymentTitle: "checkout.paymentTitle",
+  summaryTitle: "checkout.summaryTitle",
+  submitLabel: "checkout.placeOrder",
+  termsLabel: "checkout.terms",
+  emptyTitle: "checkout.empty.title",
+  emptyCta: "checkout.empty.cta",
+};
+
+/**
+ * The complete checkout: contact + billing address (AddressFields), optional
+ * separate delivery address, shipping choice, payment choice, order summary,
+ * blockers, placeOrder — with the offline payment-instructions flow and the
+ * card payment-link redirect handled by useCheckout. Mount it on a route; a
+ * store customizes it through the theme tokens, `brand` wording and
+ * `sections`, never by editing this file.
+ *
+ * @param {object} props
+ * @param {Record<string,string>} [props.brand] wording overrides (title,
+ *   contactTitle, shippingTitle, paymentTitle, summaryTitle, submitLabel,
+ *   termsLabel, emptyTitle, emptyCta).
+ * @param {"two-column"|"single"} [props.layout="two-column"]
+ * @param {object} [props.sections] `{ coupon: "auto"|true|false, notes: false,
+ *   phone: "optional"|"required"|"hidden", shipToDifferent: true,
+ *   termsCheckbox: false }` — `phone: "required"` is enforced by marking the
+ *   field required in the address spec via requiredBillingFields.
+ * @param {string} [props.continueHref="/"] where the empty state sends people.
+ * @param {(order) => void} [props.onPlaced] replaces the default
+ *   order-received navigation (advanced; the default flow is complete).
+ */
+export function CheckoutPage({
+  brand,
+  layout = "two-column",
+  sections = {},
+  continueHref = "/",
+  onPlaced,
+}) {
+  const {
+    phone = "optional",
+    shipToDifferent: allowShipToDifferent = true,
+  } = sections;
+  const options = {
+    ...(onPlaced ? { orderReceivedPath: null } : {}),
+    ...(phone === "required"
+      ? { requiredBillingFields: ["first_name", "last_name", "address_1", "city", "country", "email", "phone"] }
+      : {}),
+  };
+  return (
+    <CheckoutProvider options={options}>
+      <CheckoutBody
+        brand={brand}
+        layout={layout}
+        sections={{ ...sections, phone, shipToDifferent: allowShipToDifferent }}
+        continueHref={continueHref}
+        onPlaced={onPlaced}
+      />
+    </CheckoutProvider>
+  );
+}
+
+function CheckoutBody({ brand, layout, sections, continueHref, onPlaced }) {
+  const tt = makeT(brand, BRAND_KEYS);
+  const checkout = useCheckoutContext();
+  const { info } = useStoreInfo();
+  const [note, setNote] = useState(readOrderNote);
+  const [termsAccepted, setTermsAccepted] = useState(false);
+  const { coupon = "auto", notes = false, phone, shipToDifferent, termsCheckbox = false } = sections;
+  const { cart, stage, blockers, canPlaceOrder, placing, orderError } = checkout;
+
+  const submit = async () => {
+    const extra = note.trim() ? { customer_note: note.trim() } : {};
+    const res = await checkout.placeOrder(extra);
+    if (res.ok) {
+      writeOrderNote("");
+      if (onPlaced) onPlaced(res.result);
+    }
+  };
+
+  // The submitted guard renders BEFORE the empty-cart branch: placeOrder clears
+  // the cart, so checking cart state first repaints "empty" over a just-placed
+  // order for the frames before the browser navigates away.
+  if (stage === "submitted") {
+    return (
+      <SfuiRoot className="sfui-checkout">
+        <div className="sfui-checkout-inner">
+          <LoadingState label={tt("checkout.submitted")} />
+        </div>
+      </SfuiRoot>
+    );
+  }
+
+  if (cart === null || (cart && !cart.items?.length)) {
+    return (
+      <SfuiRoot className="sfui-checkout">
+        <div className="sfui-checkout-inner">
+          <div className="sfui-state">
+            <h1 className="sfui-heading sfui-h1">{tt("checkout.empty.title")}</h1>
+            <Link className="sfui-btn sfui-btn-inline" to={continueHref}>
+              {tt("checkout.empty.cta")}
+            </Link>
+          </div>
+        </div>
+      </SfuiRoot>
+    );
+  }
+
+  const disabled = !canPlaceOrder || placing || (termsCheckbox && !termsAccepted);
+
+  return (
+    <SfuiRoot className="sfui-checkout" aria-labelledby="sfui-checkout-title">
+      <div className="sfui-checkout-inner" data-layout={layout}>
+        <div className="sfui-checkout-form">
+          <h1 id="sfui-checkout-title" className="sfui-heading sfui-h1">
+            {tt("checkout.title")}
+          </h1>
+
+          <section className="sfui-section sfui-address" aria-label={tt("checkout.contactTitle")}>
+            <h2 className="sfui-label">{tt("checkout.contactTitle")}</h2>
+            <AddressFields which="billing" includePhone={phone !== "hidden"} />
+            {allowsShipToDifferent(shipToDifferent) && (
+              <label className="sfui-checkbox">
+                <input
+                  type="checkbox"
+                  checked={checkout.shipToDifferent}
+                  onChange={(e) => checkout.setShipToDifferent(e.target.checked)}
+                />
+                {tt("checkout.shipToDifferent")}
+              </label>
+            )}
+            {checkout.shipToDifferent && (
+              <>
+                <h2 className="sfui-label">{tt("checkout.shippingAddressTitle")}</h2>
+                <AddressFields which="shipping" includePhone={false} />
+              </>
+            )}
+          </section>
+
+          <ShippingMethodPicker>
+            {({ methods, mustChoose, single, chosen, hint }) => (
+              <section className="sfui-section" aria-label={tt("checkout.shippingTitle")}>
+                <h2 className="sfui-label">{tt("checkout.shippingTitle")}</h2>
+                {mustChoose && (
+                  <div className="sfui-choices" role="radiogroup" aria-label={tt("checkout.shippingTitle")}>
+                    {methods.map((m) => (
+                      <label key={m.id} className="sfui-choice" data-selected={m.selected || undefined}>
+                        <input type="radio" name="sfui-shipping" checked={m.selected} onChange={m.select} />
+                        <span className="sfui-choice-main">
+                          <span className="sfui-choice-title">{m.title}</span>
+                        </span>
+                        <span className="sfui-choice-cost">
+                          {m.cost === 0 ? tt("common.free") : m.costLabel}
+                        </span>
+                      </label>
+                    ))}
+                  </div>
+                )}
+                {single && chosen && (
+                  <div className="sfui-chosen-single">
+                    <span>{chosen.title}</span>
+                    <span>{chosen.cost === 0 ? tt("common.free") : chosen.costLabel}</span>
+                  </div>
+                )}
+                {hint && (
+                  <p
+                    className={hint.severity === "error" ? "sfui-error" : "sfui-note"}
+                    role={hint.severity === "error" ? "alert" : "status"}
+                  >
+                    {hint.serverMessage ?? tt(`checkout.hint.${hint.code}`)}
+                  </p>
+                )}
+              </section>
+            )}
+          </ShippingMethodPicker>
+
+          <PaymentMethodPicker>
+            {({ gateways, mustChoose, single, selected, hint }) => (
+              <section className="sfui-section" aria-label={tt("checkout.paymentTitle")}>
+                <h2 className="sfui-label">{tt("checkout.paymentTitle")}</h2>
+                {mustChoose && (
+                  <div className="sfui-choices" role="radiogroup" aria-label={tt("checkout.paymentTitle")}>
+                    {gateways.map((g) => (
+                      <label key={g.slug} className="sfui-choice" data-selected={g.selected || undefined}>
+                        <input type="radio" name="sfui-payment" checked={g.selected} onChange={g.select} />
+                        <span className="sfui-choice-main">
+                          <span className="sfui-choice-title">{g.title}</span>
+                          {g.description && <span className="sfui-choice-desc">{g.description}</span>}
+                        </span>
+                      </label>
+                    ))}
+                  </div>
+                )}
+                {single && selected && (
+                  <div className="sfui-chosen-single">
+                    <span className="sfui-choice-main">
+                      <span className="sfui-choice-title">{selected.title}</span>
+                      {selected.description && <span className="sfui-choice-desc">{selected.description}</span>}
+                    </span>
+                  </div>
+                )}
+                {hint && (
+                  <p className="sfui-error" role="alert">
+                    {tt("checkout.hint.payment_none")}
+                  </p>
+                )}
+              </section>
+            )}
+          </PaymentMethodPicker>
+
+          {notes && (
+            <section className="sfui-section">
+              <label className="sfui-label" htmlFor="sfui-checkout-note">
+                {tt("checkout.notes.label")}
+              </label>
+              <textarea
+                id="sfui-checkout-note"
+                value={note}
+                placeholder={tt("checkout.notes.placeholder")}
+                onChange={(e) => {
+                  setNote(e.target.value);
+                  writeOrderNote(e.target.value);
+                }}
+              />
+            </section>
+          )}
+        </div>
+
+        <aside className="sfui-panel sfui-summary" aria-label={tt("checkout.summaryTitle")}>
+          <h2 className="sfui-heading sfui-h2">{tt("checkout.summaryTitle")}</h2>
+          {couponVisible(coupon, cart, info) && <CouponField tt={tt} />}
+          <TotalsBlock cart={cart} tt={tt} />
+          {termsCheckbox && (
+            <label className="sfui-checkbox">
+              <input type="checkbox" checked={termsAccepted} onChange={(e) => setTermsAccepted(e.target.checked)} />
+              {tt("checkout.terms")}
+            </label>
+          )}
+          <button type="button" className="sfui-btn" onClick={submit} disabled={disabled}>
+            {placing ? tt("checkout.placing") : tt("checkout.placeOrder")}
+          </button>
+          {/* A disabled button must say why: one line per blocker, localized. */}
+          {!canPlaceOrder && blockers.length > 0 && (
+            <ul className="sfui-blockers" aria-live="polite">
+              {blockers.map((code) => (
+                <li key={code}>{tt(`checkout.blocker.${code}`)}</li>
+              ))}
+            </ul>
+          )}
+          {orderError && (
+            <p className="sfui-error" role="alert">
+              {orderError.code === "card_payment_in_preview"
+                ? tt("checkout.error.card_payment_in_preview")
+                : orderError.message}
+            </p>
+          )}
+        </aside>
+      </div>
+    </SfuiRoot>
+  );
+}
+
+function allowsShipToDifferent(section) {
+  return section !== false;
+}