@base44/app-plugin-commerce 0.9.4 → 0.10.0

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

@@ -0,0 +1,128 @@
+import React, { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { Link } from "react-router-dom";
+import { useCart, useCartUI, useFormatMoney } from "@/commerce/storefront";
+import { makeT } from "./i18n/index.js";
+import { CartLineRow, LoadingState, SfuiRoot } from "./internal.jsx";
+
+const BRAND_KEYS = {
+  title: "minicart.title",
+  checkoutLabel: "minicart.checkout",
+  viewCartLabel: "minicart.viewCart",
+  emptyTitle: "minicart.empty.title",
+  emptyCta: "minicart.empty.cta",
+};
+
+/**
+ * The cart drawer — a complete overlay: portal, backdrop, dialog semantics,
+ * focus trap, body scroll-lock. Mount it ONCE inside the store's layout (never
+ * on a route); it opens and closes through <CartUIProvider>'s state, so
+ * `useAddToCart` flows and the store's cart button drive it with no extra
+ * wiring. Escape and close-on-navigate are the provider's job already.
+ *
+ * @param {object} props
+ * @param {Record<string,string>} [props.brand] wording overrides (title,
+ *   checkoutLabel, viewCartLabel, emptyTitle, emptyCta).
+ * @param {"right"|"left"} [props.side="right"]
+ * @param {string} [props.checkoutHref="/checkout"]
+ * @param {string} [props.cartHref] renders a "view cart" link when given.
+ * @param {(item) => string} [props.productHref]
+ */
+export function MiniCart({ brand, side = "right", checkoutHref = "/checkout", cartHref, productHref }) {
+  const tt = makeT(brand, BRAND_KEYS);
+  const { open, closeCart } = useCartUI();
+  const { status, cart, itemCount } = useCart();
+  const formatMoney = useFormatMoney();
+  const panelRef = useRef(null);
+  const restoreRef = useRef(null);
+
+  // Focus management + scroll lock, for exactly the open window.
+  useEffect(() => {
+    if (!open) return;
+    restoreRef.current = document.activeElement;
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    panelRef.current?.focus();
+    const trap = (e) => {
+      if (e.key !== "Tab" || !panelRef.current) return;
+      const focusables = panelRef.current.querySelectorAll(
+        'a[href], button:not([disabled]), input, select, textarea, [tabindex]:not([tabindex="-1"])',
+      );
+      if (!focusables.length) return;
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", trap);
+    return () => {
+      document.removeEventListener("keydown", trap);
+      document.body.style.overflow = prevOverflow;
+      restoreRef.current?.focus?.();
+    };
+  }, [open]);
+
+  if (!open || typeof document === "undefined") return null;
+
+  return createPortal(
+    <SfuiRoot as="div">
+      <div className="sfui-drawer-backdrop" onClick={closeCart} aria-hidden="true" />
+      <div
+        className="sfui-drawer"
+        data-side={side}
+        role="dialog"
+        aria-modal="true"
+        aria-label={tt("minicart.title")}
+        tabIndex={-1}
+        ref={panelRef}
+      >
+        <div className="sfui-drawer-head">
+          <h2 className="sfui-heading sfui-h2">{tt("minicart.title")}</h2>
+          <button type="button" className="sfui-drawer-close" onClick={closeCart} aria-label={tt("minicart.close")}>
+            ×
+          </button>
+        </div>
+        <div className="sfui-drawer-body">
+          {status === "loading" && <LoadingState />}
+          {status === "empty" && (
+            <div className="sfui-state">
+              <h3 className="sfui-heading sfui-h2">{tt("minicart.empty.title")}</h3>
+              <button type="button" className="sfui-btn sfui-btn-ghost sfui-btn-inline" onClick={closeCart}>
+                {tt("minicart.empty.cta")}
+              </button>
+            </div>
+          )}
+          {status === "ready" && (
+            <ul className="sfui-lines">
+              {cart.items.map((item) => (
+                <CartLineRow key={item.item_key} item={item} tt={tt} productHref={productHref} compact />
+              ))}
+            </ul>
+          )}
+        </div>
+        {status === "ready" && (
+          <div className="sfui-drawer-foot">
+            <div className="sfui-drawer-subtotal">
+              <span>{tt("minicart.subtotal")}</span>
+              <span>{formatMoney(cart.totals?.subtotal)}</span>
+            </div>
+            <Link className="sfui-btn" to={checkoutHref} onClick={closeCart}>
+              {tt("minicart.checkout")}
+            </Link>
+            {cartHref && (
+              <Link className="sfui-btn sfui-btn-ghost" to={cartHref} onClick={closeCart}>
+                {tt("minicart.viewCart")} {itemCount ? `(${itemCount})` : ""}
+              </Link>
+            )}
+          </div>
+        )}
+      </div>
+    </SfuiRoot>,
+    document.body,
+  );
+}

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

@@ -0,0 +1,159 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { useFormatMoney, useOrderReturn } from "@/commerce/storefront";
+import { orderTotalsLines } from "@/commerce/utils";
+import { makeT, t } from "./i18n/index.js";
+import { ErrorState, LoadingState, SfuiRoot } from "./internal.jsx";
+
+const BRAND_KEYS = {
+  paidTitle: "order.paid.title",
+  paidBody: "order.paid.body",
+  unpaidTitle: "order.unpaid.title",
+  unpaidBody: "order.unpaid.body",
+  backToStore: "order.backToStore",
+};
+
+/**
+ * The mandatory /order-received page, complete: every payment link returns
+ * here, and this page is how a manual (offline) order tells the customer how
+ * to pay. Renders all of useOrderReturn's states — paid, unpaid (payment
+ * instructions + pay-now link), cancelled, error — plus the order's lines and
+ * totals. Mount it on the `/order-received` route.
+ *
+ * @param {object} props
+ * @param {Record<string,string>} [props.brand] wording overrides (paidTitle,
+ *   paidBody, unpaidTitle, unpaidBody, backToStore).
+ * @param {string} [props.homeHref="/"]
+ */
+export function OrderReceivedPage({ brand, homeHref = "/" }) {
+  const tt = makeT(brand, BRAND_KEYS);
+  const { status, order, lines, paymentLink, paymentInstructions, error, reload } = useOrderReturn();
+
+  return (
+    <SfuiRoot className="sfui-order">
+      <div className="sfui-order-inner">
+        {status === "loading" && <LoadingState />}
+
+        {status === "error" && (
+          <ErrorState title={tt("order.error.title")} body={error?.message ?? tt("order.error.body")} onRetry={reload} />
+        )}
+
+        {status === "cancelled" && (
+          <div className="sfui-order-head">
+            <h1 className="sfui-heading sfui-h1">{tt("order.cancelled.title")}</h1>
+            <p className="sfui-muted">{tt("order.cancelled.body")}</p>
+            {paymentLink?.url && (
+              <a className="sfui-btn sfui-btn-inline" href={paymentLink.url}>
+                {tt("order.retryPayment")}
+              </a>
+            )}
+            <Link className="sfui-link" to={homeHref}>
+              {tt("order.backToStore")}
+            </Link>
+          </div>
+        )}
+
+        {(status === "paid" || status === "unpaid") && (
+          <>
+            <div className="sfui-order-head">
+              <div className="sfui-order-badge" aria-hidden="true">
+                {status === "paid" ? "✓" : "…"}
+              </div>
+              <h1 className="sfui-heading sfui-h1">
+                {status === "paid" ? tt("order.paid.title") : tt("order.unpaid.title")}
+              </h1>
+              <p className="sfui-muted">
+                {status === "paid" ? tt("order.paid.body") : tt("order.unpaid.body")}
+              </p>
+            </div>
+
+            {status === "unpaid" && (paymentInstructions || paymentLink?.url) && (
+              <div className="sfui-instructions">
+                <h2 className="sfui-heading sfui-h2">{tt("order.instructionsTitle")}</h2>
+                {paymentInstructions?.description && <p className="sfui-muted">{paymentInstructions.description}</p>}
+                {paymentInstructions?.account_details && (
+                  <dl>
+                    {Object.entries(paymentInstructions.account_details).map(([k, v]) => (
+                      <div key={k}>
+                        <dt>{k}</dt>
+                        <dd>{String(v)}</dd>
+                      </div>
+                    ))}
+                  </dl>
+                )}
+                {paymentLink?.url && (
+                  <a className="sfui-btn" href={paymentLink.url}>
+                    {tt("order.payNow")}
+                  </a>
+                )}
+              </div>
+            )}
+
+            {order && (
+              <div className="sfui-panel sfui-order-card">
+                <div className="sfui-order-meta">
+                  <div>
+                    <dt className="sfui-label">{tt("order.orderLabel")}</dt>
+                    <dd>{order.number ?? order.id}</dd>
+                  </div>
+                  <div style={{ textAlign: "end" }}>
+                    <dt className="sfui-label">{tt("order.dateLabel")}</dt>
+                    <dd>{order.created_date ? new Date(order.created_date).toLocaleDateString() : ""}</dd>
+                  </div>
+                </div>
+                <ul className="sfui-lines">
+                  {lines.map((l, i) => (
+                    <li className="sfui-line" key={i}>
+                      <div className="sfui-line-media" aria-hidden="true">
+                        {l.image?.src && <img src={l.image.src} alt="" loading="lazy" />}
+                      </div>
+                      <div className="sfui-line-main">
+                        <p className="sfui-line-name">{l.name}</p>
+                        {l.attributesLabel && <p className="sfui-line-attrs">{l.attributesLabel}</p>}
+                        <p className="sfui-line-attrs">{tt("order.qty", { count: l.quantity })}</p>
+                      </div>
+                      <div className="sfui-line-end">
+                        <span className="sfui-line-price">{l.totalLabel}</span>
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+                <OrderTotals order={order} />
+              </div>
+            )}
+
+            <p style={{ textAlign: "center", margin: 0 }}>
+              <Link className="sfui-link" to={homeHref}>
+                {tt("order.backToStore")}
+              </Link>
+            </p>
+          </>
+        )}
+      </div>
+    </SfuiRoot>
+  );
+}
+
+function OrderTotals({ order }) {
+  const formatMoney = useFormatMoney();
+  const lines = orderTotalsLines(order, {
+    formatMoney,
+    labels: {
+      subtotal: t("common.totals.subtotal"),
+      discount: t("common.totals.discount"),
+      shipping: t("common.totals.shipping"),
+      tax: t("common.totals.tax"),
+      total: t("common.totals.total"),
+    },
+  }).filter((l) => !l.hidden);
+  return (
+    <dl className="sfui-totals">
+      {lines.map((l) => (
+        <div key={l.key} data-emphasis={l.emphasis || undefined}>
+          <dt>{l.label}</dt>
+          <dd>{l.formatted}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}

package/src/commerce/storefront-ui/i18n/index.js

@@ -0,0 +1,51 @@
+/**
+ * storefront-ui localization — the admin i18n pattern, for the shipped
+ * customer-facing surfaces (CartPage, MiniCart, CheckoutPage,
+ * OrderReceivedPage). Every functional label renders through `t()`; the
+ * wording lives in `./locales/<lang>.js` (en, de, es, fr, ja, pt ship with the
+ * plugin; en is the default and the fallback).
+ *
+ * Switching the storefront's language is a one-line change: point the `active`
+ * import below at another locale file. A language outside the six: copy
+ * `./locales/en.js` to `./locales/<code>.js`, set `$locale`, translate every
+ * value (keep `{placeholders}` verbatim), point the import at it. Missing keys
+ * fall back to English, so a partial file renders mixed rather than broken.
+ *
+ * Brand wording (titles, CTAs, trust notes — the store's voice) does NOT live
+ * here: it comes in per-component via the `brand` prop, which overrides the
+ * matching keys. Precedence: brand prop → active locale → English.
+ */
+import en from "./locales/en.js";
+import active from "./locales/en.js"; // ← the storefront's language: "./locales/de.js", "./locales/es.js", "./locales/fr.js", "./locales/ja.js", "./locales/pt.js"
+
+/** BCP-47 tag of the active language — set it on the page's <html lang> too. */
+export const locale = active.$locale || "en";
+
+function lookup(overrides, key, vars) {
+  let s = overrides?.[key] ?? active[key] ?? en[key] ?? key;
+  if (vars) {
+    for (const k of Object.keys(vars)) s = s.split(`{${k}}`).join(String(vars[k] ?? ""));
+  }
+  return s;
+}
+
+/** Message lookup with `{name}` interpolation and English fallback. */
+export function t(key, vars) {
+  return lookup(null, key, vars);
+}
+
+/**
+ * A `t` bound to one component's brand overrides. `brand` maps SHORT names to
+ * strings; `keymap` maps those short names to the full i18n keys, so
+ * `brand={{ title: "Your bag" }}` overrides exactly `cart.title` and nothing
+ * else. Unknown short names are ignored.
+ */
+export function makeT(brand, keymap) {
+  if (!brand) return t;
+  const overrides = {};
+  for (const short of Object.keys(brand)) {
+    const full = keymap[short];
+    if (full && brand[short] != null) overrides[full] = brand[short];
+  }
+  return (key, vars) => lookup(overrides, key, vars);
+}

package/src/commerce/storefront-ui/i18n/locales/de.js

@@ -0,0 +1,89 @@
+/** Deutsch — formelle Anrede (Sie) durchgehend. Schlüssel wie in en.js. */
+export default {
+  $locale: "de",
+
+  "common.loading": "Wird geladen…",
+  "common.error.title": "Etwas ist schiefgelaufen",
+  "common.error.retry": "Erneut versuchen",
+  "common.remove": "Entfernen",
+  "common.quantity": "Menge",
+  "common.decrease": "Menge verringern",
+  "common.increase": "Menge erhöhen",
+  "common.free": "Kostenlos",
+  "common.totals.subtotal": "Zwischensumme",
+  "common.totals.discount": "Rabatt",
+  "common.totals.shipping": "Versand",
+  "common.totals.tax": "Steuern",
+  "common.totals.total": "Gesamtsumme",
+  "common.coupon.label": "Rabattcode",
+  "common.coupon.placeholder": "Code eingeben",
+  "common.coupon.apply": "Einlösen",
+  "common.coupon.applied": "Code {code} eingelöst",
+  "common.coupon.remove": "Code entfernen",
+
+  "cart.title": "Ihr Warenkorb",
+  "cart.summaryTitle": "Bestellübersicht",
+  "cart.checkoutCta": "Zur Kasse",
+  "cart.continueShopping": "Weiter einkaufen",
+  "cart.empty.title": "Ihr Warenkorb ist leer",
+  "cart.empty.body": "Alles, was Sie hinzufügen, erscheint hier.",
+  "cart.empty.cta": "Zum Shop",
+  "cart.notes.label": "Anmerkungen zur Bestellung",
+  "cart.notes.placeholder": "Gibt es etwas, das wir wissen sollten?",
+  "cart.taxNote": "Versandkosten und Steuern werden an der Kasse berechnet.",
+
+  "minicart.title": "Ihr Warenkorb",
+  "minicart.close": "Warenkorb schließen",
+  "minicart.subtotal": "Zwischensumme",
+  "minicart.checkout": "Zur Kasse",
+  "minicart.viewCart": "Warenkorb ansehen",
+  "minicart.empty.title": "Ihr Warenkorb ist leer",
+  "minicart.empty.cta": "Weiter stöbern",
+  "minicart.button": "Warenkorb öffnen",
+
+  "checkout.title": "Kasse",
+  "checkout.contactTitle": "Kontakt & Rechnungsadresse",
+  "checkout.shipToDifferent": "An eine andere Adresse liefern",
+  "checkout.shippingAddressTitle": "Lieferadresse",
+  "checkout.shippingTitle": "Versandart",
+  "checkout.paymentTitle": "Zahlung",
+  "checkout.summaryTitle": "Bestellübersicht",
+  "checkout.notes.label": "Anmerkungen zur Bestellung",
+  "checkout.notes.placeholder": "Gibt es etwas, das wir wissen sollten?",
+  "checkout.terms": "Ich stimme den Verkaufsbedingungen zu",
+  "checkout.placeOrder": "Jetzt bestellen",
+  "checkout.placing": "Ihre Bestellung wird aufgegeben…",
+  "checkout.submitted": "Bestellung aufgegeben — Sie werden zur Bestätigung weitergeleitet…",
+  "checkout.empty.title": "Es gibt noch nichts zu bestellen",
+  "checkout.empty.cta": "Zurück zum Shop",
+  "checkout.hint.missing_address": "Geben Sie Ihre Adresse ein, um Lieferoptionen zu sehen.",
+  "checkout.hint.none_available": "An diese Adresse können wir leider noch nicht liefern.",
+  "checkout.hint.syncing": "Lieferoptionen werden aktualisiert…",
+  "checkout.hint.payment_none": "Die Kasse ist vorübergehend nicht verfügbar — keine Zahlungsart aktiviert.",
+  "checkout.blocker.cart_loading": "Ihr Warenkorb wird geladen…",
+  "checkout.blocker.empty_cart": "Ihr Warenkorb ist leer.",
+  "checkout.blocker.billing_incomplete": "Füllen Sie die erforderlichen Kontaktfelder aus.",
+  "checkout.blocker.shipping_address_incomplete": "Füllen Sie die Lieferadresse aus.",
+  "checkout.blocker.shipping_recalculating": "Versandkosten werden aktualisiert…",
+  "checkout.blocker.shipping_address_required": "Geben Sie Ihre Adresse ein, um Lieferoptionen zu sehen.",
+  "checkout.blocker.shipping_method_required": "Wählen Sie eine Versandart.",
+  "checkout.blocker.shipping_not_available": "An diese Adresse können wir leider noch nicht liefern.",
+  "checkout.blocker.payment_method_required": "Wählen Sie eine Zahlungsart.",
+  "checkout.error.card_payment_in_preview": "Kartenzahlung ist in der Vorschau nicht möglich — öffnen Sie den veröffentlichten Shop.",
+
+  "order.orderLabel": "Bestellung",
+  "order.dateLabel": "Datum",
+  "order.qty": "Menge {count}",
+  "order.backToStore": "Zurück zum Shop",
+  "order.paid.title": "Vielen Dank — Ihre Bestellung ist bestätigt",
+  "order.paid.body": "Eine Bestätigung ist auf dem Weg in Ihr Postfach.",
+  "order.unpaid.title": "Bestellung eingegangen — Zahlung ausstehend",
+  "order.unpaid.body": "Ihre Bestellung wird zurückgehalten, bis die Zahlung eingeht. Nutzen Sie die folgenden Angaben.",
+  "order.instructionsTitle": "Zahlungshinweise",
+  "order.payNow": "Zahlung abschließen",
+  "order.cancelled.title": "Diese Bestellung wurde storniert",
+  "order.cancelled.body": "Falls das nicht beabsichtigt war, können Sie die Zahlung erneut versuchen.",
+  "order.retryPayment": "Zahlung erneut versuchen",
+  "order.error.title": "Wir konnten diese Bestellung nicht verifizieren",
+  "order.error.body": "Der Link ist möglicherweise unvollständig — verwenden Sie den Link aus Ihrer Bestätigungs-E-Mail.",
+};

package/src/commerce/storefront-ui/i18n/locales/en.js

@@ -0,0 +1,100 @@
+/**
+ * English — the storefront-ui default language and the fallback for every
+ * other locale file. Keys are flat and dot-namespaced by surface; `{name}`
+ * marks an interpolated value and must survive translation verbatim.
+ *
+ * Adding a key: add it here first, then to every other file in this folder.
+ */
+export default {
+  $locale: "en",
+
+  // ── shared ──────────────────────────────────────────────────────
+  "common.loading": "Loading…",
+  "common.error.title": "Something went wrong",
+  "common.error.retry": "Try again",
+  "common.remove": "Remove",
+  "common.quantity": "Quantity",
+  "common.decrease": "Decrease quantity",
+  "common.increase": "Increase quantity",
+  "common.free": "Free",
+  "common.totals.subtotal": "Subtotal",
+  "common.totals.discount": "Discount",
+  "common.totals.shipping": "Shipping",
+  "common.totals.tax": "Tax",
+  "common.totals.total": "Total",
+  "common.coupon.label": "Discount code",
+  "common.coupon.placeholder": "Enter code",
+  "common.coupon.apply": "Apply",
+  "common.coupon.applied": "Code {code} applied",
+  "common.coupon.remove": "Remove code",
+
+  // ── cart page ───────────────────────────────────────────────────
+  "cart.title": "Your cart",
+  "cart.summaryTitle": "Order summary",
+  "cart.checkoutCta": "Proceed to checkout",
+  "cart.continueShopping": "Continue shopping",
+  "cart.empty.title": "Your cart is empty",
+  "cart.empty.body": "Everything you add will show up here.",
+  "cart.empty.cta": "Browse the store",
+  "cart.notes.label": "Order notes",
+  "cart.notes.placeholder": "Anything we should know about your order?",
+  "cart.taxNote": "Shipping and taxes are calculated at checkout.",
+
+  // ── minicart ────────────────────────────────────────────────────
+  "minicart.title": "Your cart",
+  "minicart.close": "Close cart",
+  "minicart.subtotal": "Subtotal",
+  "minicart.checkout": "Checkout",
+  "minicart.viewCart": "View cart",
+  "minicart.empty.title": "Your cart is empty",
+  "minicart.empty.cta": "Keep browsing",
+  "minicart.button": "Open cart",
+
+  // ── checkout ────────────────────────────────────────────────────
+  "checkout.title": "Checkout",
+  "checkout.contactTitle": "Contact & billing address",
+  "checkout.shipToDifferent": "Deliver to a different address",
+  "checkout.shippingAddressTitle": "Delivery address",
+  "checkout.shippingTitle": "Delivery method",
+  "checkout.paymentTitle": "Payment",
+  "checkout.summaryTitle": "Order summary",
+  "checkout.notes.label": "Order notes",
+  "checkout.notes.placeholder": "Anything we should know about your order?",
+  "checkout.terms": "I agree to the terms of sale",
+  "checkout.placeOrder": "Place order",
+  "checkout.placing": "Placing your order…",
+  "checkout.submitted": "Order placed — taking you to your confirmation…",
+  "checkout.empty.title": "There's nothing to check out yet",
+  "checkout.empty.cta": "Back to the store",
+  "checkout.hint.missing_address": "Enter your address to see delivery options.",
+  "checkout.hint.none_available": "We can't deliver to that address yet.",
+  "checkout.hint.syncing": "Updating delivery options…",
+  "checkout.hint.payment_none": "Checkout is temporarily unavailable — no payment method is enabled.",
+  "checkout.blocker.cart_loading": "Loading your cart…",
+  "checkout.blocker.empty_cart": "Your cart is empty.",
+  "checkout.blocker.billing_incomplete": "Fill in the required contact fields.",
+  "checkout.blocker.shipping_address_incomplete": "Fill in the delivery address.",
+  "checkout.blocker.shipping_recalculating": "Updating delivery costs…",
+  "checkout.blocker.shipping_address_required": "Enter your address to see delivery options.",
+  "checkout.blocker.shipping_method_required": "Choose a delivery method.",
+  "checkout.blocker.shipping_not_available": "We can't deliver to that address yet.",
+  "checkout.blocker.payment_method_required": "Choose how you'd like to pay.",
+  "checkout.error.card_payment_in_preview": "Card payment can't be completed in preview — open the published store to pay.",
+
+  // ── order received ──────────────────────────────────────────────
+  "order.orderLabel": "Order",
+  "order.dateLabel": "Date",
+  "order.qty": "Qty {count}",
+  "order.backToStore": "Back to the store",
+  "order.paid.title": "Thank you — your order is confirmed",
+  "order.paid.body": "A confirmation is on its way to your inbox.",
+  "order.unpaid.title": "Order received — awaiting payment",
+  "order.unpaid.body": "Your order is on hold until payment is received. Use the details below to complete it.",
+  "order.instructionsTitle": "Payment instructions",
+  "order.payNow": "Complete payment",
+  "order.cancelled.title": "This order was cancelled",
+  "order.cancelled.body": "If that wasn't intended, you can retry the payment.",
+  "order.retryPayment": "Retry payment",
+  "order.error.title": "We couldn't verify this order",
+  "order.error.body": "The link may be incomplete — try the link from your confirmation email.",
+};

package/src/commerce/storefront-ui/i18n/locales/es.js

@@ -0,0 +1,89 @@
+/** Español — tono cercano y claro, neutro latinoamericano. Claves como en en.js. */
+export default {
+  $locale: "es",
+
+  "common.loading": "Cargando…",
+  "common.error.title": "Algo salió mal",
+  "common.error.retry": "Intentar de nuevo",
+  "common.remove": "Eliminar",
+  "common.quantity": "Cantidad",
+  "common.decrease": "Disminuir cantidad",
+  "common.increase": "Aumentar cantidad",
+  "common.free": "Gratis",
+  "common.totals.subtotal": "Subtotal",
+  "common.totals.discount": "Descuento",
+  "common.totals.shipping": "Envío",
+  "common.totals.tax": "Impuestos",
+  "common.totals.total": "Total",
+  "common.coupon.label": "Código de descuento",
+  "common.coupon.placeholder": "Ingresa el código",
+  "common.coupon.apply": "Aplicar",
+  "common.coupon.applied": "Código {code} aplicado",
+  "common.coupon.remove": "Quitar código",
+
+  "cart.title": "Tu carrito",
+  "cart.summaryTitle": "Resumen del pedido",
+  "cart.checkoutCta": "Ir a pagar",
+  "cart.continueShopping": "Seguir comprando",
+  "cart.empty.title": "Tu carrito está vacío",
+  "cart.empty.body": "Todo lo que agregues aparecerá aquí.",
+  "cart.empty.cta": "Explorar la tienda",
+  "cart.notes.label": "Notas del pedido",
+  "cart.notes.placeholder": "¿Algo que debamos saber sobre tu pedido?",
+  "cart.taxNote": "El envío y los impuestos se calculan al pagar.",
+
+  "minicart.title": "Tu carrito",
+  "minicart.close": "Cerrar carrito",
+  "minicart.subtotal": "Subtotal",
+  "minicart.checkout": "Pagar",
+  "minicart.viewCart": "Ver carrito",
+  "minicart.empty.title": "Tu carrito está vacío",
+  "minicart.empty.cta": "Seguir explorando",
+  "minicart.button": "Abrir carrito",
+
+  "checkout.title": "Pago",
+  "checkout.contactTitle": "Contacto y dirección de facturación",
+  "checkout.shipToDifferent": "Enviar a una dirección diferente",
+  "checkout.shippingAddressTitle": "Dirección de entrega",
+  "checkout.shippingTitle": "Método de envío",
+  "checkout.paymentTitle": "Pago",
+  "checkout.summaryTitle": "Resumen del pedido",
+  "checkout.notes.label": "Notas del pedido",
+  "checkout.notes.placeholder": "¿Algo que debamos saber sobre tu pedido?",
+  "checkout.terms": "Acepto las condiciones de venta",
+  "checkout.placeOrder": "Realizar pedido",
+  "checkout.placing": "Realizando tu pedido…",
+  "checkout.submitted": "Pedido realizado — te llevamos a tu confirmación…",
+  "checkout.empty.title": "Todavía no hay nada para pagar",
+  "checkout.empty.cta": "Volver a la tienda",
+  "checkout.hint.missing_address": "Ingresa tu dirección para ver las opciones de entrega.",
+  "checkout.hint.none_available": "Aún no podemos hacer entregas en esa dirección.",
+  "checkout.hint.syncing": "Actualizando opciones de entrega…",
+  "checkout.hint.payment_none": "El pago no está disponible por el momento — no hay ningún método de pago habilitado.",
+  "checkout.blocker.cart_loading": "Cargando tu carrito…",
+  "checkout.blocker.empty_cart": "Tu carrito está vacío.",
+  "checkout.blocker.billing_incomplete": "Completa los campos de contacto obligatorios.",
+  "checkout.blocker.shipping_address_incomplete": "Completa la dirección de entrega.",
+  "checkout.blocker.shipping_recalculating": "Actualizando costos de envío…",
+  "checkout.blocker.shipping_address_required": "Ingresa tu dirección para ver las opciones de entrega.",
+  "checkout.blocker.shipping_method_required": "Elige un método de envío.",
+  "checkout.blocker.shipping_not_available": "Aún no podemos hacer entregas en esa dirección.",
+  "checkout.blocker.payment_method_required": "Elige cómo quieres pagar.",
+  "checkout.error.card_payment_in_preview": "El pago con tarjeta no puede completarse en la vista previa — abre la tienda publicada para pagar.",
+
+  "order.orderLabel": "Pedido",
+  "order.dateLabel": "Fecha",
+  "order.qty": "Cant. {count}",
+  "order.backToStore": "Volver a la tienda",
+  "order.paid.title": "Gracias — tu pedido está confirmado",
+  "order.paid.body": "Una confirmación va en camino a tu correo.",
+  "order.unpaid.title": "Pedido recibido — pago pendiente",
+  "order.unpaid.body": "Tu pedido queda en espera hasta recibir el pago. Usa los datos de abajo para completarlo.",
+  "order.instructionsTitle": "Instrucciones de pago",
+  "order.payNow": "Completar el pago",
+  "order.cancelled.title": "Este pedido fue cancelado",
+  "order.cancelled.body": "Si no fue tu intención, puedes reintentar el pago.",
+  "order.retryPayment": "Reintentar el pago",
+  "order.error.title": "No pudimos verificar este pedido",
+  "order.error.body": "Puede que el enlace esté incompleto — usa el enlace de tu correo de confirmación.",
+};