@base44/app-plugin-commerce 0.9.4 → 0.10.0

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

@@ -0,0 +1,89 @@
+/** Français — vouvoiement systématique. Clés identiques à en.js. */
+export default {
+  $locale: "fr",
+
+  "common.loading": "Chargement…",
+  "common.error.title": "Une erreur est survenue",
+  "common.error.retry": "Réessayer",
+  "common.remove": "Retirer",
+  "common.quantity": "Quantité",
+  "common.decrease": "Diminuer la quantité",
+  "common.increase": "Augmenter la quantité",
+  "common.free": "Offert",
+  "common.totals.subtotal": "Sous-total",
+  "common.totals.discount": "Remise",
+  "common.totals.shipping": "Livraison",
+  "common.totals.tax": "Taxes",
+  "common.totals.total": "Total",
+  "common.coupon.label": "Code de réduction",
+  "common.coupon.placeholder": "Saisissez le code",
+  "common.coupon.apply": "Appliquer",
+  "common.coupon.applied": "Code {code} appliqué",
+  "common.coupon.remove": "Retirer le code",
+
+  "cart.title": "Votre panier",
+  "cart.summaryTitle": "Récapitulatif de commande",
+  "cart.checkoutCta": "Passer au paiement",
+  "cart.continueShopping": "Continuer vos achats",
+  "cart.empty.title": "Votre panier est vide",
+  "cart.empty.body": "Tout ce que vous ajoutez apparaîtra ici.",
+  "cart.empty.cta": "Découvrir la boutique",
+  "cart.notes.label": "Notes de commande",
+  "cart.notes.placeholder": "Un détail à nous signaler concernant votre commande ?",
+  "cart.taxNote": "Les frais de livraison et les taxes sont calculés au paiement.",
+
+  "minicart.title": "Votre panier",
+  "minicart.close": "Fermer le panier",
+  "minicart.subtotal": "Sous-total",
+  "minicart.checkout": "Paiement",
+  "minicart.viewCart": "Voir le panier",
+  "minicart.empty.title": "Votre panier est vide",
+  "minicart.empty.cta": "Continuer à explorer",
+  "minicart.button": "Ouvrir le panier",
+
+  "checkout.title": "Paiement",
+  "checkout.contactTitle": "Contact et adresse de facturation",
+  "checkout.shipToDifferent": "Livrer à une autre adresse",
+  "checkout.shippingAddressTitle": "Adresse de livraison",
+  "checkout.shippingTitle": "Mode de livraison",
+  "checkout.paymentTitle": "Paiement",
+  "checkout.summaryTitle": "Récapitulatif de commande",
+  "checkout.notes.label": "Notes de commande",
+  "checkout.notes.placeholder": "Un détail à nous signaler concernant votre commande ?",
+  "checkout.terms": "J'accepte les conditions de vente",
+  "checkout.placeOrder": "Commander",
+  "checkout.placing": "Votre commande est en cours…",
+  "checkout.submitted": "Commande passée — redirection vers votre confirmation…",
+  "checkout.empty.title": "Il n'y a encore rien à régler",
+  "checkout.empty.cta": "Retour à la boutique",
+  "checkout.hint.missing_address": "Saisissez votre adresse pour voir les options de livraison.",
+  "checkout.hint.none_available": "Nous ne livrons pas encore à cette adresse.",
+  "checkout.hint.syncing": "Mise à jour des options de livraison…",
+  "checkout.hint.payment_none": "Le paiement est temporairement indisponible — aucun moyen de paiement n'est activé.",
+  "checkout.blocker.cart_loading": "Chargement de votre panier…",
+  "checkout.blocker.empty_cart": "Votre panier est vide.",
+  "checkout.blocker.billing_incomplete": "Renseignez les champs de contact obligatoires.",
+  "checkout.blocker.shipping_address_incomplete": "Renseignez l'adresse de livraison.",
+  "checkout.blocker.shipping_recalculating": "Mise à jour des frais de livraison…",
+  "checkout.blocker.shipping_address_required": "Saisissez votre adresse pour voir les options de livraison.",
+  "checkout.blocker.shipping_method_required": "Choisissez un mode de livraison.",
+  "checkout.blocker.shipping_not_available": "Nous ne livrons pas encore à cette adresse.",
+  "checkout.blocker.payment_method_required": "Choisissez votre moyen de paiement.",
+  "checkout.error.card_payment_in_preview": "Le paiement par carte est impossible dans l'aperçu — ouvrez la boutique publiée pour payer.",
+
+  "order.orderLabel": "Commande",
+  "order.dateLabel": "Date",
+  "order.qty": "Qté {count}",
+  "order.backToStore": "Retour à la boutique",
+  "order.paid.title": "Merci — votre commande est confirmée",
+  "order.paid.body": "Une confirmation est en route vers votre boîte mail.",
+  "order.unpaid.title": "Commande reçue — en attente de paiement",
+  "order.unpaid.body": "Votre commande est en attente jusqu'à réception du paiement. Utilisez les informations ci-dessous.",
+  "order.instructionsTitle": "Instructions de paiement",
+  "order.payNow": "Finaliser le paiement",
+  "order.cancelled.title": "Cette commande a été annulée",
+  "order.cancelled.body": "Si ce n'était pas votre intention, vous pouvez retenter le paiement.",
+  "order.retryPayment": "Retenter le paiement",
+  "order.error.title": "Impossible de vérifier cette commande",
+  "order.error.body": "Le lien est peut-être incomplet — utilisez celui de votre e-mail de confirmation.",
+};

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

@@ -0,0 +1,89 @@
+/** 日本語 — です・ます調で統一。キーは en.js と同一。 */
+export default {
+  $locale: "ja",
+
+  "common.loading": "読み込み中…",
+  "common.error.title": "問題が発生しました",
+  "common.error.retry": "再試行",
+  "common.remove": "削除",
+  "common.quantity": "数量",
+  "common.decrease": "数量を減らす",
+  "common.increase": "数量を増やす",
+  "common.free": "無料",
+  "common.totals.subtotal": "小計",
+  "common.totals.discount": "割引",
+  "common.totals.shipping": "配送料",
+  "common.totals.tax": "税",
+  "common.totals.total": "合計",
+  "common.coupon.label": "クーポンコード",
+  "common.coupon.placeholder": "コードを入力",
+  "common.coupon.apply": "適用",
+  "common.coupon.applied": "コード{code}を適用しました",
+  "common.coupon.remove": "コードを削除",
+
+  "cart.title": "カート",
+  "cart.summaryTitle": "ご注文内容",
+  "cart.checkoutCta": "レジに進む",
+  "cart.continueShopping": "買い物を続ける",
+  "cart.empty.title": "カートは空です",
+  "cart.empty.body": "追加した商品はここに表示されます。",
+  "cart.empty.cta": "ストアを見る",
+  "cart.notes.label": "ご注文メモ",
+  "cart.notes.placeholder": "ご注文について何かあればお書きください。",
+  "cart.taxNote": "配送料と税はレジで計算されます。",
+
+  "minicart.title": "カート",
+  "minicart.close": "カートを閉じる",
+  "minicart.subtotal": "小計",
+  "minicart.checkout": "レジに進む",
+  "minicart.viewCart": "カートを見る",
+  "minicart.empty.title": "カートは空です",
+  "minicart.empty.cta": "買い物を続ける",
+  "minicart.button": "カートを開く",
+
+  "checkout.title": "ご購入手続き",
+  "checkout.contactTitle": "連絡先・請求先住所",
+  "checkout.shipToDifferent": "別の住所に配送する",
+  "checkout.shippingAddressTitle": "お届け先住所",
+  "checkout.shippingTitle": "配送方法",
+  "checkout.paymentTitle": "お支払い",
+  "checkout.summaryTitle": "ご注文内容",
+  "checkout.notes.label": "ご注文メモ",
+  "checkout.notes.placeholder": "ご注文について何かあればお書きください。",
+  "checkout.terms": "販売条件に同意します",
+  "checkout.placeOrder": "注文を確定する",
+  "checkout.placing": "ご注文を処理しています…",
+  "checkout.submitted": "ご注文を承りました — 確認ページへ移動します…",
+  "checkout.empty.title": "ご購入いただける商品がまだありません",
+  "checkout.empty.cta": "ストアに戻る",
+  "checkout.hint.missing_address": "住所を入力すると配送方法が表示されます。",
+  "checkout.hint.none_available": "申し訳ありませんが、その住所への配送はまだ承っておりません。",
+  "checkout.hint.syncing": "配送方法を更新しています…",
+  "checkout.hint.payment_none": "現在ご購入手続きをご利用いただけません — 有効なお支払い方法がありません。",
+  "checkout.blocker.cart_loading": "カートを読み込んでいます…",
+  "checkout.blocker.empty_cart": "カートは空です。",
+  "checkout.blocker.billing_incomplete": "必須の連絡先項目をご入力ください。",
+  "checkout.blocker.shipping_address_incomplete": "お届け先住所をご入力ください。",
+  "checkout.blocker.shipping_recalculating": "配送料を更新しています…",
+  "checkout.blocker.shipping_address_required": "住所を入力すると配送方法が表示されます。",
+  "checkout.blocker.shipping_method_required": "配送方法をお選びください。",
+  "checkout.blocker.shipping_not_available": "申し訳ありませんが、その住所への配送はまだ承っておりません。",
+  "checkout.blocker.payment_method_required": "お支払い方法をお選びください。",
+  "checkout.error.card_payment_in_preview": "プレビューではカード決済を完了できません — 公開されたストアでお支払いください。",
+
+  "order.orderLabel": "注文番号",
+  "order.dateLabel": "日付",
+  "order.qty": "数量 {count}",
+  "order.backToStore": "ストアに戻る",
+  "order.paid.title": "ありがとうございます — ご注文が確定しました",
+  "order.paid.body": "確認メールをお送りしています。",
+  "order.unpaid.title": "ご注文を受け付けました — お支払い待ち",
+  "order.unpaid.body": "お支払いの確認まで、ご注文は保留となります。以下の情報をご利用ください。",
+  "order.instructionsTitle": "お支払い方法のご案内",
+  "order.payNow": "お支払いを完了する",
+  "order.cancelled.title": "このご注文はキャンセルされました",
+  "order.cancelled.body": "お心当たりがない場合は、お支払いを再試行できます。",
+  "order.retryPayment": "お支払いを再試行",
+  "order.error.title": "ご注文を確認できませんでした",
+  "order.error.body": "リンクが不完全な可能性があります — 確認メールのリンクをお使いください。",
+};

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

@@ -0,0 +1,89 @@
+/** Português (Brasil) — tom caloroso e direto. Chaves iguais a en.js. */
+export default {
+  $locale: "pt",
+
+  "common.loading": "Carregando…",
+  "common.error.title": "Algo deu errado",
+  "common.error.retry": "Tentar novamente",
+  "common.remove": "Remover",
+  "common.quantity": "Quantidade",
+  "common.decrease": "Diminuir quantidade",
+  "common.increase": "Aumentar quantidade",
+  "common.free": "Grátis",
+  "common.totals.subtotal": "Subtotal",
+  "common.totals.discount": "Desconto",
+  "common.totals.shipping": "Frete",
+  "common.totals.tax": "Impostos",
+  "common.totals.total": "Total",
+  "common.coupon.label": "Cupom de desconto",
+  "common.coupon.placeholder": "Digite o código",
+  "common.coupon.apply": "Aplicar",
+  "common.coupon.applied": "Cupom {code} aplicado",
+  "common.coupon.remove": "Remover cupom",
+
+  "cart.title": "Seu carrinho",
+  "cart.summaryTitle": "Resumo do pedido",
+  "cart.checkoutCta": "Finalizar compra",
+  "cart.continueShopping": "Continuar comprando",
+  "cart.empty.title": "Seu carrinho está vazio",
+  "cart.empty.body": "Tudo o que você adicionar vai aparecer aqui.",
+  "cart.empty.cta": "Ver a loja",
+  "cart.notes.label": "Observações do pedido",
+  "cart.notes.placeholder": "Algo que devemos saber sobre o seu pedido?",
+  "cart.taxNote": "Frete e impostos são calculados na finalização da compra.",
+
+  "minicart.title": "Seu carrinho",
+  "minicart.close": "Fechar carrinho",
+  "minicart.subtotal": "Subtotal",
+  "minicart.checkout": "Finalizar compra",
+  "minicart.viewCart": "Ver carrinho",
+  "minicart.empty.title": "Seu carrinho está vazio",
+  "minicart.empty.cta": "Continuar explorando",
+  "minicart.button": "Abrir carrinho",
+
+  "checkout.title": "Finalizar compra",
+  "checkout.contactTitle": "Contato e endereço de cobrança",
+  "checkout.shipToDifferent": "Entregar em outro endereço",
+  "checkout.shippingAddressTitle": "Endereço de entrega",
+  "checkout.shippingTitle": "Forma de entrega",
+  "checkout.paymentTitle": "Pagamento",
+  "checkout.summaryTitle": "Resumo do pedido",
+  "checkout.notes.label": "Observações do pedido",
+  "checkout.notes.placeholder": "Algo que devemos saber sobre o seu pedido?",
+  "checkout.terms": "Aceito as condições de venda",
+  "checkout.placeOrder": "Fazer pedido",
+  "checkout.placing": "Processando seu pedido…",
+  "checkout.submitted": "Pedido realizado — levando você para a confirmação…",
+  "checkout.empty.title": "Ainda não há nada para finalizar",
+  "checkout.empty.cta": "Voltar para a loja",
+  "checkout.hint.missing_address": "Informe seu endereço para ver as opções de entrega.",
+  "checkout.hint.none_available": "Ainda não entregamos nesse endereço.",
+  "checkout.hint.syncing": "Atualizando opções de entrega…",
+  "checkout.hint.payment_none": "A finalização está temporariamente indisponível — nenhuma forma de pagamento habilitada.",
+  "checkout.blocker.cart_loading": "Carregando seu carrinho…",
+  "checkout.blocker.empty_cart": "Seu carrinho está vazio.",
+  "checkout.blocker.billing_incomplete": "Preencha os campos de contato obrigatórios.",
+  "checkout.blocker.shipping_address_incomplete": "Preencha o endereço de entrega.",
+  "checkout.blocker.shipping_recalculating": "Atualizando o valor do frete…",
+  "checkout.blocker.shipping_address_required": "Informe seu endereço para ver as opções de entrega.",
+  "checkout.blocker.shipping_method_required": "Escolha uma forma de entrega.",
+  "checkout.blocker.shipping_not_available": "Ainda não entregamos nesse endereço.",
+  "checkout.blocker.payment_method_required": "Escolha como você quer pagar.",
+  "checkout.error.card_payment_in_preview": "O pagamento com cartão não funciona na pré-visualização — abra a loja publicada para pagar.",
+
+  "order.orderLabel": "Pedido",
+  "order.dateLabel": "Data",
+  "order.qty": "Qtd. {count}",
+  "order.backToStore": "Voltar para a loja",
+  "order.paid.title": "Obrigado — seu pedido está confirmado",
+  "order.paid.body": "Uma confirmação está a caminho do seu e-mail.",
+  "order.unpaid.title": "Pedido recebido — aguardando pagamento",
+  "order.unpaid.body": "Seu pedido fica em espera até recebermos o pagamento. Use as informações abaixo para concluir.",
+  "order.instructionsTitle": "Instruções de pagamento",
+  "order.payNow": "Concluir pagamento",
+  "order.cancelled.title": "Este pedido foi cancelado",
+  "order.cancelled.body": "Se não foi intencional, você pode tentar o pagamento novamente.",
+  "order.retryPayment": "Tentar pagamento novamente",
+  "order.error.title": "Não conseguimos verificar este pedido",
+  "order.error.body": "O link pode estar incompleto — use o link do seu e-mail de confirmação.",
+};

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

@@ -0,0 +1,16 @@
+/**
+ * storefront-ui — the shipped, tested conversion surfaces: cart page, cart
+ * drawer, checkout and order-received. They render complete on their own; a
+ * store integrates them with a route (or one layout mount for the drawer),
+ * a ≤12-token theme block in index.css, and `brand` wording props. Functional
+ * labels are localized in ./i18n (repoint one import); brand wording comes in
+ * via props and overrides the matching labels.
+ *
+ * Customize through tokens, `brand`, `sections` and `slots` — these files are
+ * plugin-owned and re-copied on kit updates, so direct edits do not survive.
+ */
+export { CartPage } from "./CartPage.jsx";
+export { MiniCart } from "./MiniCart.jsx";
+export { CartButton } from "./CartButton.jsx";
+export { CheckoutPage } from "./CheckoutPage.jsx";
+export { OrderReceivedPage } from "./OrderReceivedPage.jsx";

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

@@ -0,0 +1,218 @@
+import React, { useRef, useState } from "react";
+import { useCart, useCartLine, useFormatMoney } from "@/commerce/storefront";
+import { attributesLabel, cartTotalsLines } from "@/commerce/utils";
+import { useThemeGuard } from "./theme.js";
+import { t } from "./i18n/index.js";
+
+/**
+ * Internal building blocks shared by the shipped storefront surfaces. Not part
+ * of the public barrel — pages compose these; stores customize via tokens,
+ * `brand` props and `slots`, never by importing from here.
+ */
+
+/** Every surface's root: applies the .sfui scope and the theme-solidity guard. */
+export function SfuiRoot({ as: As = "section", className = "", children, ...rest }) {
+  const ref = useRef(null);
+  useThemeGuard(ref);
+  return (
+    <As ref={ref} className={`sfui ${className}`} {...rest}>
+      {children}
+    </As>
+  );
+}
+
+export function LoadingState({ label }) {
+  return (
+    <div className="sfui-state" role="status">
+      <span className="sfui-spinner" aria-hidden="true" />
+      <p className="sfui-muted">{label ?? t("common.loading")}</p>
+    </div>
+  );
+}
+
+export function ErrorState({ title, body, onRetry, retryLabel }) {
+  return (
+    <div className="sfui-state" role="alert">
+      <h2 className="sfui-heading sfui-h2">{title ?? t("common.error.title")}</h2>
+      {body && <p className="sfui-muted">{body}</p>}
+      {onRetry && (
+        <button type="button" className="sfui-btn sfui-btn-ghost sfui-btn-inline" onClick={onRetry}>
+          {retryLabel ?? t("common.error.retry")}
+        </button>
+      )}
+    </div>
+  );
+}
+
+/**
+ * One cart line, used by CartPage and MiniCart. Quantity edits are optimistic
+ * and row-scoped (useCartLine); the stepper never disables during a pending
+ * update — the row dims instead.
+ */
+export function CartLineRow({ item, tt, productHref, compact = false, lineExtra }) {
+  const line = useCartLine(item);
+  const formatMoney = useFormatMoney();
+  const attrs = attributesLabel(item.attributes);
+  const href = productHref ? productHref(item) : null;
+  return (
+    <li className="sfui-line" data-pending={line.pending || undefined} data-compact={compact || undefined}>
+      <div className="sfui-line-media" aria-hidden="true">
+        {item.image?.src && <img src={item.image.src} alt="" loading="lazy" />}
+      </div>
+      <div className="sfui-line-main">
+        <p className="sfui-line-name">
+          {href ? (
+            <a className="sfui-link" href={href}>
+              {item.name}
+            </a>
+          ) : (
+            item.name
+          )}
+        </p>
+        {attrs && <p className="sfui-line-attrs">{attrs}</p>}
+        <div className="sfui-qty" role="group" aria-label={tt("common.quantity")}>
+          <button
+            type="button"
+            onClick={line.decrease}
+            disabled={!line.canDecrease}
+            aria-label={tt("common.decrease")}
+          >
+            −
+          </button>
+          <span aria-live="polite">{line.quantity}</span>
+          <button
+            type="button"
+            onClick={line.increase}
+            disabled={!line.canIncrease}
+            aria-label={tt("common.increase")}
+          >
+            +
+          </button>
+        </div>
+        {line.error && <p className="sfui-error">{line.error.message}</p>}
+        {lineExtra && lineExtra({ item, line })}
+      </div>
+      <div className="sfui-line-end">
+        <span className="sfui-line-price">{formatMoney(item.total ?? item.subtotal)}</span>
+        <button type="button" className="sfui-line-remove" onClick={line.remove}>
+          {tt("common.remove")}
+        </button>
+      </div>
+    </li>
+  );
+}
+
+/** The totals breakdown, labels localized through the bound `tt`. */
+export function TotalsBlock({ cart, tt }) {
+  const formatMoney = useFormatMoney();
+  const lines = cartTotalsLines(cart, {
+    formatMoney,
+    labels: {
+      subtotal: tt("common.totals.subtotal"),
+      discount: tt("common.totals.discount"),
+      shipping: tt("common.totals.shipping"),
+      tax: tt("common.totals.tax"),
+      total: tt("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>
+  );
+}
+
+/**
+ * Discount-code entry plus the applied-coupon rows. Renders errors from
+ * `applyCoupon`'s own result — never throws into the page.
+ */
+export function CouponField({ tt }) {
+  const { cart, applyCoupon, removeCoupon } = useCart();
+  const [code, setCode] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null);
+  const applied = cart?.coupons ?? [];
+
+  const submit = async () => {
+    const value = code.trim();
+    if (!value || busy) return;
+    setBusy(true);
+    setError(null);
+    const res = await applyCoupon(value);
+    setBusy(false);
+    if (res.ok) setCode("");
+    else setError(res.message || res.code || "error");
+  };
+
+  return (
+    <div>
+      <label className="sfui-label" htmlFor="sfui-coupon">
+        {tt("common.coupon.label")}
+      </label>
+      <div className="sfui-coupon">
+        <input
+          id="sfui-coupon"
+          value={code}
+          placeholder={tt("common.coupon.placeholder")}
+          onChange={(e) => setCode(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              submit();
+            }
+          }}
+        />
+        <button
+          type="button"
+          className="sfui-btn sfui-btn-ghost sfui-btn-inline"
+          onClick={submit}
+          disabled={busy || !code.trim()}
+        >
+          {tt("common.coupon.apply")}
+        </button>
+      </div>
+      {error && <p className="sfui-error">{error}</p>}
+      {applied.map((c) => (
+        <div className="sfui-coupon-applied" key={c.code} style={{ marginBlockStart: "0.5rem" }}>
+          <span>{tt("common.coupon.applied", { code: String(c.code).toUpperCase() })}</span>
+          <button
+            type="button"
+            className="sfui-line-remove"
+            onClick={() => removeCoupon(c.code)}
+            aria-label={tt("common.coupon.remove")}
+          >
+            {tt("common.coupon.remove")}
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/** `sections.coupon: "auto"` — show when coupons exist (store-level or on the cart). */
+export function couponVisible(section, cart, info) {
+  if (section === true || section === false) return section;
+  return Boolean(cart?.coupons?.length || info?.has_coupons);
+}
+
+/** The order-notes textarea; the value travels cart → checkout via sessionStorage. */
+export const ORDER_NOTE_KEY = "sfui-order-note";
+export function readOrderNote() {
+  try {
+    return window.sessionStorage.getItem(ORDER_NOTE_KEY) ?? "";
+  } catch {
+    return "";
+  }
+}
+export function writeOrderNote(value) {
+  try {
+    window.sessionStorage.setItem(ORDER_NOTE_KEY, value);
+  } catch {
+    /* private mode — the note just won't persist across pages */
+  }
+}