@base44/app-plugin-commerce 0.2.1 → 0.2.3

package/src/commerce/storefront/useCartLine.js

@@ -107,6 +107,43 @@ export function useCartLine(line, { debounceMs = 250 } = {}) {
   };
 }
 
+/**
+ * CartLine — headless per-line binding for the rows of a cart you render
+ * yourself. It renders **nothing**: the render function you pass as `children`
+ * receives the `useCartLine` controls for that line and returns your markup.
+ * It exists so a `lines.map(...)` doesn't tempt a hook call inside a loop:
+ *
+ *   const { lines } = useCart();
+ *   {lines.map(line => (
+ *     <CartLine key={line.item_key} line={line}>
+ *       {(l) => (
+ *         <li>
+ *           {line.name} {line.attributesLabel}
+ *           <button onClick={l.decrease} disabled={!l.canDecrease || l.pending}>−</button>
+ *           {l.quantity}
+ *           <button onClick={l.increase} disabled={!l.canIncrease || l.pending}>+</button>
+ *           <button onClick={l.remove}>Remove</button>
+ *           {l.error && <p role="alert">{l.error.message}</p>}
+ *         </li>
+ *       )}
+ *     </CartLine>
+ *   ))}
+ *
+ * Equivalent to extracting your own row component that calls `useCartLine` —
+ * use whichever reads better in your page.
+ *
+ * @param {{line: object, options?: {debounceMs?: number},
+ *   children: (controls: object) => React.ReactNode}} props
+ */
+export function CartLine({ line, options, children }) {
+  const controls = useCartLine(line, options);
+  if (typeof children !== "function") {
+    throw new Error("<CartLine> is headless: pass a render function as its only child.");
+  }
+  if (!line) return null;
+  return children(controls);
+}
+
 /**
  * useCoupon — the coupon field. Small, and the difference between a store that
  * can honour its own discounts and one that cannot.

package/src/commerce/storefront/useCheckout.jsx

@@ -1,6 +1,7 @@
 import React, { createContext, useCallback, useContext, useEffect, useState } from "react";
 import { storefrontErrorCode, storefrontErrorMessage } from "@/commerce/utils";
 import { useStorefrontState } from "./StorefrontProvider";
+import { orderReceivedUrl } from "./useOrderReturn";
 import {
   REQUIRED_BILLING_FIELDS,
   isShippingAddressComplete,
@@ -62,10 +63,15 @@ function resolvePaymentMethod(gateways, picked) {
  * - **The gate.** `canPlaceOrder` + `blockers` say exactly what still stands
  *   between the customer and the order — drive the button's disabled state
  *   and the "what's missing" hints from them instead of re-deriving.
- * - **placeOrder.** Sends the order, clears the shared cart, and (by default)
- *   redirects to the provider's payment page when the gateway is online.
- *   Resolves to `{ ok: true, result }` or `{ ok: false, error }`; a manual-
- *   gateway result carries `result.payment_instructions` to render.
+ * - **placeOrder.** Sends the order, clears the shared cart, and navigates:
+ *   an online gateway redirects to the provider's payment page
+ *   (`redirectToPayment`), everything else lands on the order-received page
+ *   (`orderReceivedPath`, default `/order-received`) — which is where a manual
+ *   order's payment instructions are rendered, so the offline default confirms
+ *   properly with no extra wiring. Resolves to `{ ok: true, result }` or
+ *   `{ ok: false, error }`. Pass `orderReceivedPath: null` to handle the
+ *   result yourself (a manual-gateway result carries
+ *   `result.payment_instructions`).
  *
  * Blocker codes, in the order checked: `cart_loading`, `empty_cart`,
  * `billing_incomplete`, `shipping_address_incomplete`, `shipping_recalculating`,
@@ -73,7 +79,8 @@ function resolvePaymentMethod(gateways, picked) {
  * `shipping_not_available`, `payment_method_required`.
  *
  * Options: `debounceMs` (600), `addressComplete` (predicate overriding the
- * country+city rule), `requiredBillingFields`, `redirectToPayment` (true).
+ * country+city rule), `requiredBillingFields`, `redirectToPayment` (true),
+ * `orderReceivedPath` ("/order-received"; null disables the navigation).
  */
 export function useCheckout(options = {}) {
   const {
@@ -81,6 +88,7 @@ export function useCheckout(options = {}) {
     addressComplete = isShippingAddressComplete,
     requiredBillingFields = REQUIRED_BILLING_FIELDS,
     redirectToPayment = true,
+    orderReceivedPath = "/order-received",
   } = options;
 
   const { client, info, cart, runCart, clearCart } = useStorefrontState();
@@ -204,6 +212,10 @@ export function useCheckout(options = {}) {
           typeof window !== "undefined"
         ) {
           window.location.assign(result.payment.checkout_url);
+        } else if (orderReceivedPath && !result.payment && typeof window !== "undefined") {
+          // A manual/offline order settles nothing online — land it on the
+          // order-received page, where its payment instructions are rendered.
+          window.location.assign(orderReceivedUrl(result, orderReceivedPath));
         }
         return { ok: true, result };
       } catch (e) {
@@ -224,7 +236,7 @@ export function useCheckout(options = {}) {
         setPlacing(false);
       }
     },
-    [placing, client, paymentMethod, billing, shipToDifferent, shipping, clearCart, redirectToPayment, runCart],
+    [placing, client, paymentMethod, billing, shipToDifferent, shipping, clearCart, redirectToPayment, orderReceivedPath, runCart],
   );
 
   return {

package/src/commerce/storefront/useOrderReturn.js

@@ -1,29 +1,36 @@
 import { useCallback, useEffect, useState } from "react";
-import { storefrontErrorCode, storefrontErrorMessage } from "@/commerce/utils";
+import { orderLines, storefrontErrorCode, storefrontErrorMessage } from "@/commerce/utils";
 import { useStorefrontState } from "./StorefrontProvider";
+import { orderSeo, useStorefrontSeo } from "./useStorefrontSeo";
 
 /**
  * useOrderReturn — the whole `/order-received` page in one hook. Mount the
  * route (it is mandatory — every payment link returns here) and branch on
- * `status`:
+ * `status`; the markup for every state is yours to write:
  *
- *   const { status, order, paymentLink, paymentInstructions, error, reload } =
- *     useOrderReturn();
- *   // "loading"   → spinner
- *   // "paid"      → thank-you + order summary (the order is now marked paid)
- *   // "unpaid"    → card order: offer paymentLink.url to pay now;
+ *   const { status, order, lines, paymentLink, paymentInstructions, error,
+ *     reload } = useOrderReturn();
+ *   // "loading"   → confirming copy (never an empty page)
+ *   // "paid"      → thank-you + order number + summary (the order is now paid)
+ *   // "unpaid"    → card order: link paymentLink.url to pay now;
  *   //               manual order: render paymentInstructions
- *   //               ({ description, account_details })
+ *   //               ({ description, account_details }) — these ARE how the
+ *   //               customer pays; a page that drops them strands the order
  *   // "cancelled" → payment was cancelled — offer paymentLink.url or support
  *   // "error"     → render error.message with a retry via reload()
  *
+ * `lines` are the order's items in the decorated cart-line shape, so the same
+ * row markup renders the bag and the confirmation; totals come from
+ * `useTotalsLines(order)`. The page is marked `noindex` automatically — a
+ * receipt carrying an order key must not rank (`seo: false` opts out).
+ *
  * It reads `order_id`/`order_key`/`payment` from the URL itself and verifies
  * with the payment provider server-side — safe and idempotent on every visit.
  *
  * `order` carries FLAT totals — `order.total`, `order.shipping_total`,
  * `order.total_tax`; there is no `order.totals` object on it.
  */
-export function useOrderReturn({ auto = true } = {}) {
+export function useOrderReturn({ auto = true, seo = true } = {}) {
   const { client } = useStorefrontState();
   const [result, setResult] = useState({ status: auto ? "loading" : "idle" });
 
@@ -52,5 +59,24 @@ export function useOrderReturn({ auto = true } = {}) {
     if (auto) reload();
   }, [auto, reload]);
 
-  return { ...result, reload };
+  useStorefrontSeo(seo ? orderSeo(result.order ?? null) : null);
+
+  return { ...result, lines: orderLines(result.order ?? null), reload };
+}
+
+/**
+ * The URL a just-placed manual/offline order should land on: the order-received
+ * page, carrying the id + key `useOrderReturn` reads back. `useCheckout` builds
+ * this itself by default (`orderReceivedPath`); use it directly only in a
+ * custom `placeOrder` flow.
+ *
+ * @param {{order_id: string, order_key: string}} result from `placeOrder`
+ * @param {string} [path]
+ */
+export function orderReceivedUrl(result, path = "/order-received") {
+  const q = new URLSearchParams({
+    order_id: result?.order_id ?? "",
+    order_key: result?.order_key ?? "",
+  });
+  return `${path}?${q}`;
 }

package/src/commerce/storefront/useProduct.js

@@ -225,3 +225,75 @@ export function useAddToCart() {
 
   return { add, adding, error, lastAdded, reset };
 }
+
+/**
+ * useAddToCartButton — the buy button's whole state machine, ready to bind to
+ * markup you write. Pass the entire `useProduct` result:
+ *
+ *   const p = useProduct(slug);
+ *   const buy = useAddToCartButton(p, { onAdded: () => navigate("/bag") });
+ *   <button disabled={buy.disabled} onClick={buy.add}>
+ *     {buy.adding ? "Adding…" : buy.soldOut ? "Sold out"
+ *       : buy.needsSelection ? "Select options" : "Add to bag"}
+ *   </button>
+ *   {buy.error && <p role="alert">{buy.error.message}</p>}
+ *
+ * What it wires so a hand-written buy box can't drop it: the button is gated on
+ * `view.purchasable`; a rejected add (sold out, stale variant) lands in `error`
+ * instead of leaving the button stuck on "Adding…"; a stale-variant rejection
+ * reloads the product; and the quantity controls respect `sold_individually`
+ * and tracked stock (`showQuantity` is false when only 1 can be bought — render
+ * no stepper then). Every label and every element is yours.
+ *
+ * A not-yet-loaded product is fine (`disabled: true`), so call this next to
+ * `useProduct` **above** the page's `loading`/`not_found` guards — a hook below
+ * an early return breaks the hook order the next render.
+ *
+ * @param {object} product the whole `useProduct` result
+ * @param {{onAdded?: (cart: object) => void}} [options]
+ * @returns {{add: () => Promise<object>, adding: boolean, error: object|null,
+ *   reset: () => void, disabled: boolean, soldOut: boolean,
+ *   needsSelection: boolean, purchasable: boolean,
+ *   quantity: number, setQuantity: (n: number) => void, increase: () => void,
+ *   decrease: () => void, canIncrease: boolean, canDecrease: boolean,
+ *   maxQuantity: number, showQuantity: boolean}}
+ */
+export function useAddToCartButton(product, { onAdded } = {}) {
+  const { add, adding, error, reset } = useAddToCart();
+  const view = product?.view ?? null;
+
+  const submit = useCallback(async () => {
+    if (!view) return { ok: false, error: { code: "no_product", message: "Product not loaded." } };
+    const res = await add(view.addToCart, product.quantity);
+    if (res.ok) onAdded?.(res.cart);
+    else if (res.error?.shouldReload) product.reload?.();
+    return res;
+  }, [add, view, product, onAdded]);
+
+  // A variable product with an incomplete selection isn't sold out — it needs
+  // a pick; only a resolved (or simple) unpurchasable view reads as sold out.
+  const soldOut = view
+    ? view.isVariable
+      ? view.complete && !view.purchasable
+      : !view.purchasable
+    : false;
+
+  return {
+    add: submit,
+    adding,
+    error,
+    reset,
+    disabled: !view?.purchasable || adding,
+    soldOut,
+    needsSelection: Boolean(view?.isVariable && !view.complete),
+    purchasable: Boolean(view?.purchasable),
+    quantity: product?.quantity ?? 1,
+    setQuantity: product?.setQuantity ?? (() => {}),
+    increase: product?.incQuantity ?? (() => {}),
+    decrease: product?.decQuantity ?? (() => {}),
+    canIncrease: Boolean(product?.canIncrease),
+    canDecrease: (product?.quantity ?? 1) > 1,
+    maxQuantity: product?.maxQuantity ?? 1,
+    showQuantity: (product?.maxQuantity ?? 1) > 1,
+  };
+}

package/src/commerce/storefront/useProductGallery.js

@@ -19,6 +19,10 @@ import { imageIndex, productImages } from "@/commerce/utils";
  * moves the active image to the variation's own picture while a manual pick
  * still wins until the selection changes again** — highlight, not replace.
  *
+ * A null/not-yet-loaded product is fine (`hasImages: false`), so call this with
+ * the other hooks **above** the page's `loading`/`not_found` guards — a hook
+ * below an early return breaks the hook order the next render.
+ *
  * @param {object} product
  * @param {object|null} [view] a `resolveSelection` view; its
  *   `display.image` is the variation's image

package/src/commerce/utils/index.js

@@ -13,10 +13,10 @@
  *   checkout/return-page calls. Create ONE instance and import it everywhere.
  * - `variants.js` — variant selection: map attribute selections (Size, Color)
  *   to a `ProductVariation` and back, per-option availability, variant price
- *   ranges. See `.agents/skills/commerce/references/catalog-rendering.md`.
+ *   ranges. See the commerce skill's references/catalog-rendering.md.
  * - `shipping-promos.js` — read the store's real free-shipping configuration so
  *   "Free shipping over €150" copy states a configured rule, not an invented
- *   number. See `.agents/skills/commerce/docs/api-storefront.md`.
+ *   number. See the commerce skill's docs/api-storefront.md.
  * - `price.js` — `productPrice`: the from-price and price-range rules, encoded
  *   once so a card and a product page cannot disagree.
  * - `totals.js` — `cartTotalsLines` / `orderTotalsLines` / `orderLines` /
@@ -25,12 +25,14 @@
  * - `address-spec.js` — `addressFieldSpec`: the checkout address form as data,
  *   with country/state options that are always arrays.
  * - `images.js` — `productImages`: images normalized to `{src, name, alt}`.
+ * - `specs.js` — `productSpecs`: `meta_data` → spec-table rows.
  *
  * Building the storefront in React? **Prefer `@/commerce/storefront`** — it
- * layers hooks and ready-made UI blocks on top of this module, and a hook that
- * pre-composes these helpers is the difference between a rule that holds and a
- * rule you have to remember. Use this module directly for non-React code, and
- * inside your own custom logic.
+ * layers headless hooks on top of this module, and a hook that pre-composes
+ * these helpers is the difference between a rule that holds and a rule you
+ * have to remember. Neither layer ships any UI: all markup and styling belong
+ * to the storefront you build. Use this module directly for non-React code,
+ * and inside your own custom logic.
  */
 export * from "./storefront.js";
 export * from "./variants.js";
@@ -39,3 +41,4 @@ export * from "./price.js";
 export * from "./totals.js";
 export * from "./address-spec.js";
 export * from "./images.js";
+export * from "./specs.js";

package/src/commerce/utils/shipping-promos.js

@@ -23,8 +23,8 @@
  * `available_shipping_methods` after `set-shipping-address` — that is computed
  * by the same engine and needs no extra exposure.
  *
- * Framework-free and dependency-free. See
- * `.agents/skills/commerce/docs/api-storefront.md` for the surrounding rules.
+ * Framework-free and dependency-free. See the commerce skill's
+ * docs/api-storefront.md for the surrounding rules.
  */
 
 /**

package/src/commerce/utils/specs.js

@@ -0,0 +1,26 @@
+/**
+ * Product spec rows — the descriptive properties a product page lists in a
+ * table (Material, Care, Fit).
+ *
+ * These live in `product.meta_data` (the admin's *Modifiers* section) and are
+ * **not** attributes and not ribbons: they describe the product, they don't
+ * select a variant. Hidden keys (leading `_`) and empty values are skipped.
+ * You render the rows yourself:
+ *
+ *   const specs = productSpecs(product);
+ *   {specs.length > 0 && <dl>{specs.map(s =>
+ *     <div key={s.key}><dt>{s.label}</dt><dd>{s.value}</dd></div>)}</dl>}
+ *
+ * @param {object} product
+ * @returns {Array<{key: string, label: string, value: string}>} `[]` when the
+ *   product has no visible meta_data — render nothing, not an empty section.
+ */
+export function productSpecs(product) {
+  return (product?.meta_data ?? [])
+    .filter((m) => m?.key && !String(m.key).startsWith("_") && m.value != null && m.value !== "")
+    .map((m) => ({
+      key: String(m.key),
+      label: String(m.key).replace(/_/g, " "),
+      value: String(m.value),
+    }));
+}

package/src/commerce/utils/variants.js

@@ -11,8 +11,8 @@
  *
  * Framework-free, dependency-free, no I/O — feed them the `{ product,
  * variations }` pair from `commerce/storefront-catalog` `get-product` (the
- * admin's variation editor can use them too). See
- * `.agents/skills/commerce/references/catalog-rendering.md` for the UI rules.
+ * admin's variation editor can use them too). See the commerce skill's
+ * references/catalog-rendering.md for the UI rules.
  *
  * A `selection` throughout is a plain object keyed by axis key (see
  * `attributeKey`): `{ "<color-attr-id>": "Red", "<size-attr-id>": "M" }`.
@@ -435,3 +435,50 @@ export function selectionFromParams(product, variations, params) {
   }
   return selection;
 }
+
+/**
+ * A resolved view's axes as a render-ready model for the variant selector *you*
+ * write: one entry per axis, one entry per option, with selected / stock /
+ * disabled state already derived. All markup and styling are yours; the two
+ * rules this model encodes are **one control per axis** (never a flat list of
+ * variations) and **an unbuyable option renders disabled, not hidden** — a
+ * customer who can't see that a size exists assumes the store doesn't carry it.
+ *
+ *   const { view, pick } = useProduct(slug);
+ *   variantAxes(view, pick).map(axis =>
+ *     // axis.name, axis.selectedOption
+ *     axis.options.map(o =>
+ *       // o.value, o.selected, o.disabled (don't render clickable),
+ *       // o.outOfStock (strike through / mark, still visible), o.pick()
+ *     ));
+ *
+ * @param {object|null} view from `resolveSelection` / `useProduct().view`
+ * @param {(axisKey: string, option: string) => void} [pick] click handler to
+ *   bind per option (`useProduct().pick`)
+ * @returns {Array<{key: string, name: string, selectedOption: string|null,
+ *   options: Array<{value: string, selected: boolean, state: string,
+ *     outOfStock: boolean, disabled: boolean, pick: () => void}>}>}
+ *   `[]` for a product without variants — render nothing.
+ */
+export function variantAxes(view, pick) {
+  if (!view?.isVariable) return [];
+  return (view.axes ?? []).map((axis) => {
+    const selectedOption = view.selection?.[axis.key] || null;
+    return {
+      key: axis.key,
+      name: axis.name,
+      selectedOption,
+      options: (axis.options ?? []).map((option) => {
+        const state = view.availability?.[axis.key]?.[option] ?? OPTION_AVAILABLE;
+        return {
+          value: option,
+          selected: option === selectedOption,
+          state,
+          outOfStock: state === OPTION_OUT_OF_STOCK,
+          disabled: state === OPTION_UNAVAILABLE,
+          pick: () => pick?.(axis.key, option),
+        };
+      }),
+    };
+  });
+}

package/src/commerce/storefront/blocks/AddToCartBlock.jsx

@@ -1,86 +0,0 @@
-import React from "react";
-import { useAddToCart } from "../useProduct";
-
-/**
- * The buy button, with quantity, stock state and every add-to-cart failure
- * handled.
- *
- *   const p = useProduct(slug);
- *   <AddToCartBlock product={p} onAdded={() => navigate("/bag")} />
- *
- * Pass the whole `useProduct` result as `product` and it wires itself: the
- * button is gated on `view.purchasable`, the quantity respects
- * `sold_individually` and tracked stock, a rejected add (sold out, stale
- * variant) renders inline instead of leaving the button stuck on "Adding…", and
- * a stale-variant error reloads the product.
- *
- * @param {{product: object, className?: string, label?: string,
- *   addingLabel?: string, showQuantity?: boolean,
- *   onAdded?: (cart: object) => void}} props
- */
-export function AddToCartBlock({
-  product,
-  className = "",
-  label = "Add to bag",
-  addingLabel = "Adding…",
-  showQuantity = true,
-  onAdded,
-}) {
-  const { add, adding, error } = useAddToCart();
-  if (!product?.view) return null;
-
-  const { view, quantity, incQuantity, decQuantity, canIncrease, maxQuantity, reload } = product;
-  const soldOut = view.isVariable ? view.complete && !view.purchasable : !view.purchasable;
-
-  const onClick = async () => {
-    const res = await add(view.addToCart, quantity);
-    if (res.ok) onAdded?.(res.cart);
-    else if (res.error?.shouldReload) reload?.();
-  };
-
-  return (
-    <div data-commerce="add-to-cart-block" className={className}>
-      {showQuantity && maxQuantity > 1 && (
-        <div className="mb-3 flex items-center gap-1">
-          <button
-            type="button"
-            data-commerce="product-quantity-decrease"
-            onClick={decQuantity}
-            disabled={quantity <= 1}
-            aria-label="Decrease quantity"
-            className="h-9 w-9 border border-border disabled:opacity-40"
-          >
-            −
-          </button>
-          <span data-commerce="product-quantity" className="w-10 text-center text-sm">{quantity}</span>
-          <button
-            type="button"
-            data-commerce="product-quantity-increase"
-            onClick={incQuantity}
-            disabled={!canIncrease}
-            aria-label="Increase quantity"
-            className="h-9 w-9 border border-border disabled:opacity-40"
-          >
-            +
-          </button>
-        </div>
-      )}
-
-      <button
-        type="button"
-        data-commerce="add-to-cart"
-        onClick={onClick}
-        disabled={!view.purchasable || adding}
-        className="w-full bg-primary px-6 py-3 text-sm text-primary-foreground disabled:opacity-50"
-      >
-        {adding ? addingLabel : soldOut ? "Sold out" : !view.complete ? "Select options" : label}
-      </button>
-
-      {error && (
-        <p data-commerce="add-to-cart-error" role="alert" className="mt-2 text-sm text-destructive">
-          {error.message}
-        </p>
-      )}
-    </div>
-  );
-}

package/src/commerce/storefront/blocks/AddressFieldsBlock.jsx

@@ -1,96 +0,0 @@
-import React from "react";
-import { useAddressForm } from "../useAddressForm";
-import { useCheckoutContext } from "../useCheckout";
-
-/**
- * The checkout address form, rendered from the field spec — so `state` is
- * collected (rates and taxes match on country + state), the country select
- * never maps a null list, and browser autofill works.
- *
- *   <AddressFieldsBlock />                       // billing
- *   <AddressFieldsBlock which="shipping" />      // a separate delivery address
- *
- * Needs a `<CheckoutProvider>` above it (`<CheckoutBlock/>` supplies one).
- *
- * @param {{which?: "billing"|"shipping", className?: string, legend?: string,
- *   includeCompany?: boolean, includePhone?: boolean}} props
- */
-export function AddressFieldsBlock({
-  which = "billing",
-  className = "",
-  legend,
-  includeCompany = false,
-  includePhone = true,
-}) {
-  const { fields, set, countriesLoading } = useAddressForm(which, { includeCompany, includePhone });
-
-  return (
-    <fieldset data-commerce={`address-${which}`} className={className}>
-      {legend && <legend className="mb-3 text-xs uppercase tracking-wide text-muted-foreground">{legend}</legend>}
-      <div className="grid grid-cols-2 gap-3">
-        {fields.map((f) => (
-          <label
-            key={f.key}
-            className={f.colSpan === 2 ? "col-span-2" : "col-span-2 sm:col-span-1"}
-          >
-            <span className="block text-xs text-muted-foreground">
-              {f.label}
-              {f.required && <span aria-hidden> *</span>}
-            </span>
-            {f.type === "select" ? (
-              <select
-                data-commerce={`address-field-${f.key}`}
-                value={f.value}
-                required={f.required}
-                onChange={(e) => set(f.key, e.target.value)}
-                autoComplete={f.autoComplete}
-                disabled={f.key === "country" && countriesLoading}
-                className="mt-1 w-full border border-border bg-transparent px-3 py-2 text-sm"
-              >
-                <option value="">
-                  {f.key === "country" && countriesLoading ? "Loading…" : `Select ${f.label.toLowerCase()}`}
-                </option>
-                {f.options.map((o) => (
-                  <option key={o.value} value={o.value}>
-                    {o.label}
-                  </option>
-                ))}
-              </select>
-            ) : (
-              <input
-                data-commerce={`address-field-${f.key}`}
-                type={f.type}
-                value={f.value}
-                required={f.required}
-                onChange={(e) => set(f.key, e.target.value)}
-                autoComplete={f.autoComplete}
-                className="mt-1 w-full border border-border bg-transparent px-3 py-2 text-sm"
-              />
-            )}
-            {f.error && (
-              <span role="alert" className="mt-1 block text-xs text-destructive">
-                {f.error}
-              </span>
-            )}
-          </label>
-        ))}
-      </div>
-      {which === "billing" && <ShipToDifferentToggle />}
-    </fieldset>
-  );
-}
-
-function ShipToDifferentToggle() {
-  const { shipToDifferent, setShipToDifferent } = useCheckoutContext();
-  return (
-    <label className="mt-3 flex items-center gap-2 text-sm">
-      <input
-        type="checkbox"
-        data-commerce="ship-to-different"
-        checked={shipToDifferent}
-        onChange={(e) => setShipToDifferent(e.target.checked)}
-      />
-      Deliver to a different address
-    </label>
-  );
-}

package/src/commerce/storefront/blocks/BreadcrumbsBlock.jsx

@@ -1,52 +0,0 @@
-import React from "react";
-
-/**
- * Category breadcrumbs for a product page.
- *
- *   <BreadcrumbsBlock categories={categories} current={product.name} />
- *
- * Ribbons are deliberately NOT breadcrumbs — they are labels ("Best Seller"),
- * not places in the catalog. Pass `renderLink` to use your router's `<Link>`
- * instead of a plain anchor.
- *
- * @param {{categories?: Array<object>, current?: string, className?: string,
- *   homeLabel?: string, homeHref?: string, categoryHref?: (c: object) => string,
- *   renderLink?: (o: {href: string, label: string}) => React.ReactNode}} props
- */
-export function BreadcrumbsBlock({
-  categories = [],
-  current,
-  className = "",
-  homeLabel = "Home",
-  homeHref = "/",
-  categoryHref = (c) => `/collection?category_id=${c.id}`,
-  renderLink,
-}) {
-  const crumbs = [
-    { href: homeHref, label: homeLabel },
-    ...categories.map((c) => ({ href: categoryHref(c), label: c.name })),
-  ];
-
-  const link = ({ href, label }) =>
-    renderLink ? (
-      renderLink({ href, label })
-    ) : (
-      <a href={href} className="underline-offset-2 hover:underline">
-        {label}
-      </a>
-    );
-
-  return (
-    <nav data-commerce="breadcrumbs" aria-label="Breadcrumb" className={`text-xs text-muted-foreground ${className}`}>
-      <ol className="flex flex-wrap items-center gap-1.5">
-        {crumbs.map((c) => (
-          <li key={`${c.href}-${c.label}`} className="flex items-center gap-1.5">
-            {link(c)}
-            <span aria-hidden>/</span>
-          </li>
-        ))}
-        {current && <li aria-current="page">{current}</li>}
-      </ol>
-    </nav>
-  );
-}