@reblu/site-blocks 0.5.1 → 0.6.0

package/dist/index.cjs

@@ -21,8 +21,15 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   ALLOWED_YOUTUBE_HOSTS: () => ALLOWED_YOUTUBE_HOSTS,
+  AddToCartButton: () => AddToCartButton,
+  CartIcon: () => CartIcon,
+  CartLineList: () => CartLineList,
+  CartSummary: () => CartSummary,
+  CheckoutForm: () => CheckoutForm,
+  CheckoutLoginPrompt: () => CheckoutLoginPrompt,
   DEFAULT_SHOP_PRICE_BANDS: () => DEFAULT_SHOP_PRICE_BANDS,
   MarkdownRenderer: () => MarkdownRenderer,
+  OrderConfirmation: () => OrderConfirmation,
   ProductCard: () => ProductCard,
   ProfileCard: () => ProfileCard,
   SafeHtml: () => SafeHtml,
@@ -13619,11 +13626,617 @@ function ShopFilters({
     )
   ] });
 }
+
+// src/components/add-to-cart-button.tsx
+var import_utils8 = require("@reblu/site-ui/utils");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var DEFAULT_LABELS2 = {
+  add: "A\xF1adir al carrito",
+  adding: "A\xF1adiendo\u2026",
+  outOfStock: "Agotado"
+};
+function AddToCartButton({
+  onAddToCart,
+  disabled,
+  outOfStock,
+  pending,
+  labels,
+  className
+}) {
+  const t = { ...DEFAULT_LABELS2, ...labels };
+  const isDisabled = Boolean(disabled || outOfStock || pending);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick: onAddToCart,
+      disabled: isDisabled,
+      "data-slot": "add-to-cart-button",
+      className: (0, import_utils8.cn)(
+        "inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        isDisabled ? "cursor-not-allowed bg-muted text-muted-foreground" : "bg-primary text-primary-foreground hover:bg-primary/90",
+        className
+      ),
+      children: outOfStock ? t.outOfStock : pending ? t.adding : t.add
+    }
+  );
+}
+
+// src/components/cart-icon.tsx
+var import_utils9 = require("@reblu/site-ui/utils");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var DEFAULT_LABELS3 = {
+  cart: "Carrito",
+  itemsSuffix: (count) => `${count} art\xEDculo${count === 1 ? "" : "s"}`
+};
+function CartIcon({ itemCount, href, labels, className }) {
+  const t = { ...DEFAULT_LABELS3, ...labels };
+  const ariaLabel = itemCount > 0 ? `${t.cart} (${t.itemsSuffix(itemCount)})` : t.cart;
+  const displayCount = itemCount > 99 ? "99+" : String(itemCount);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "a",
+    {
+      href,
+      "aria-label": ariaLabel,
+      "data-slot": "cart-icon",
+      className: (0, import_utils9.cn)(
+        "relative inline-flex items-center justify-center rounded-lg p-2 text-foreground/80 transition-colors hover:bg-muted/60 hover:text-foreground",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          "svg",
+          {
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            className: "h-5 w-5",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "9", cy: "21", r: "1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "20", cy: "21", r: "1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" })
+            ]
+          }
+        ),
+        itemCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "absolute -top-0.5 -right-0.5 flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-bold leading-none tabular-nums text-primary-foreground",
+            children: displayCount
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/cart-line-list.tsx
+var import_utils10 = require("@reblu/site-ui/utils");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var DEFAULT_LABELS4 = {
+  quantityLabel: "Cantidad",
+  decrease: "Reducir cantidad",
+  increase: "Aumentar cantidad",
+  remove: "Eliminar",
+  unitPriceSuffix: "/ ud."
+};
+function lineKey(productId, variantId) {
+  return `${productId}-${variantId ?? "no-variant"}`;
+}
+function CartLineList({
+  items,
+  onQuantityChange,
+  onRemove,
+  liveMessage,
+  labels,
+  currencyCode,
+  locale,
+  className
+}) {
+  const t = { ...DEFAULT_LABELS4, ...labels };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: (0, import_utils10.cn)("space-y-4", className), "data-slot": "cart-line-list", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { "aria-live": "polite", className: "sr-only", children: liveMessage }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { className: "space-y-4", children: items.map((item) => {
+      const maxQty = item.maxStock ?? Infinity;
+      const atMax = item.quantity >= maxQty;
+      const atMin = item.quantity <= 1;
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        "li",
+        {
+          className: "flex gap-4 rounded-xl border border-border bg-card p-4",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-20 w-20 flex-shrink-0 overflow-hidden rounded-lg bg-muted", children: item.imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("img", { src: item.imageUrl, alt: item.name, className: "h-full w-full object-cover" }) : null }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "truncate text-sm font-semibold leading-tight", children: item.name }),
+              item.variantName && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "mt-0.5 text-xs text-muted-foreground", children: item.variantName }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", { className: "mt-1 text-sm text-muted-foreground", children: [
+                formatPrice(item.unitPrice, currencyCode, locale),
+                " ",
+                t.unitPriceSuffix
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                "div",
+                {
+                  role: "group",
+                  "aria-label": t.quantityLabel,
+                  className: "mt-3 flex items-center gap-3",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": t.decrease,
+                        disabled: !onQuantityChange || atMin,
+                        onClick: onQuantityChange ? () => onQuantityChange(item.productId, item.variantId, item.quantity - 1) : void 0,
+                        className: "flex h-7 w-7 items-center justify-center rounded border border-border transition hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40",
+                        children: "\u2212"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "w-8 text-center text-sm font-semibold tabular-nums", children: item.quantity }),
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": t.increase,
+                        disabled: !onQuantityChange || atMax,
+                        onClick: onQuantityChange ? () => onQuantityChange(item.productId, item.variantId, item.quantity + 1) : void 0,
+                        className: "flex h-7 w-7 items-center justify-center rounded border border-border transition hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40",
+                        children: "+"
+                      }
+                    ),
+                    onRemove && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": `${t.remove} ${item.name}`,
+                        onClick: () => onRemove(item.productId, item.variantId),
+                        className: "ml-2 text-muted-foreground transition-colors hover:text-destructive",
+                        children: t.remove
+                      }
+                    )
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex-shrink-0 text-right", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-base font-bold", children: formatPrice(item.unitPrice * item.quantity, currencyCode, locale) }) })
+          ]
+        },
+        lineKey(item.productId, item.variantId)
+      );
+    }) })
+  ] });
+}
+
+// src/components/cart-summary.tsx
+var import_utils11 = require("@reblu/site-ui/utils");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var DEFAULT_LABELS5 = {
+  subtotal: "Subtotal",
+  discountPrefix: "Descuento",
+  shipping: "Env\xEDo",
+  freeShipping: "Env\xEDo gratis",
+  shippingCalculated: "Se calcula en el pago",
+  total: "Total"
+};
+function CartSummary({
+  subtotal,
+  discount,
+  discountCode,
+  shipping,
+  shippingEnabled,
+  total,
+  labels,
+  currencyCode,
+  locale,
+  className
+}) {
+  const t = { ...DEFAULT_LABELS5, ...labels };
+  const hasDiscount = Boolean(discount && discount > 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("dl", { className: (0, import_utils11.cn)("space-y-2 text-sm", className), "data-slot": "cart-summary", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex justify-between text-muted-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("dt", { children: t.subtotal }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("dd", { children: formatPrice(subtotal, currencyCode, locale) })
+    ] }),
+    hasDiscount && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex justify-between text-green-600 dark:text-green-400", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("dt", { children: [
+        t.discountPrefix,
+        discountCode ? ` (${discountCode})` : ""
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("dd", { children: [
+        "-",
+        formatPrice(discount, currencyCode, locale)
+      ] })
+    ] }),
+    shippingEnabled && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex justify-between text-muted-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("dt", { children: t.shipping }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("dd", { children: shipping == null || !Number.isFinite(shipping) ? t.shippingCalculated : shipping === 0 ? t.freeShipping : formatPrice(shipping, currencyCode, locale) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex justify-between border-t border-border pt-2 text-base font-bold", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("dt", { children: t.total }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("dd", { children: formatPrice(total, currencyCode, locale) })
+    ] })
+  ] });
+}
+
+// src/components/checkout-login-prompt.tsx
+var import_utils12 = require("@reblu/site-ui/utils");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var DEFAULT_LABELS6 = {
+  title: "Identificaci\xF3n",
+  description: "Introduce tu email para agilizar el proceso o contin\xFAa como invitado.",
+  emailLabel: "Email",
+  emailPlaceholder: "tu@email.com",
+  continueWithEmail: "Continuar con este email",
+  checking: "Verificando\u2026",
+  continueAsGuest: "Continuar como invitado",
+  close: "Cerrar"
+};
+var EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function CheckoutLoginPrompt({
+  open,
+  email,
+  onEmailChange,
+  onClose,
+  onSubmitEmail,
+  onContinueAsGuest,
+  checking,
+  error,
+  labels,
+  className
+}) {
+  if (!open) return null;
+  const t = { ...DEFAULT_LABELS6, ...labels };
+  const isValidEmail = EMAIL_PATTERN.test(email.trim());
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "fixed inset-0 z-50 bg-black/50", onClick: onClose, "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": "checkout-login-prompt-title",
+        "data-slot": "checkout-login-prompt",
+        className: (0, import_utils12.cn)(
+          "fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 space-y-5 rounded-2xl border border-border bg-background p-6 shadow-2xl",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h2", { id: "checkout-login-prompt-title", className: "text-xl font-bold", children: t.title }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-1 text-sm text-muted-foreground", children: t.description })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                "aria-label": t.close,
+                className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                children: "\u2715"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("label", { htmlFor: "checkout-login-prompt-email", className: "text-sm font-medium", children: t.emailLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              "input",
+              {
+                id: "checkout-login-prompt-email",
+                type: "email",
+                autoComplete: "email",
+                value: email,
+                onChange: (e) => onEmailChange(e.target.value),
+                placeholder: t.emailPlaceholder,
+                className: (0, import_utils12.cn)(
+                  "w-full rounded-lg border bg-background px-3 py-2 text-sm transition focus:outline-none focus:ring-2 focus:ring-primary/20",
+                  error ? "border-destructive" : "border-border focus:border-primary"
+                )
+              }
+            ),
+            error && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-xs text-destructive", children: error })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: onSubmitEmail,
+                disabled: checking || !isValidEmail,
+                className: (0, import_utils12.cn)(
+                  "flex w-full items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-semibold transition-all",
+                  checking || !isValidEmail ? "cursor-not-allowed bg-muted text-muted-foreground" : "bg-primary text-primary-foreground hover:bg-primary/90"
+                ),
+                children: checking ? t.checking : t.continueWithEmail
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: onContinueAsGuest,
+                className: "flex w-full items-center justify-center gap-2 rounded-xl bg-muted px-4 py-2.5 text-sm font-semibold text-muted-foreground transition-colors hover:bg-muted/70",
+                children: t.continueAsGuest
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/checkout-form.tsx
+var import_utils13 = require("@reblu/site-ui/utils");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var DEFAULT_LABELS7 = {
+  contactTitle: "Datos de contacto",
+  nameLabel: "Nombre completo",
+  namePlaceholder: "Tu nombre",
+  emailLabel: "Email",
+  emailPlaceholder: "tu@email.com",
+  phoneLabel: "Tel\xE9fono",
+  discountTitle: "C\xF3digo de descuento",
+  discountPlaceholder: "C\xD3DIGO10",
+  applyDiscount: "Aplicar",
+  applyingDiscount: "Aplicando\u2026",
+  removeDiscount: "Quitar",
+  discountAppliedSuffix: (amount) => `\u2014 ${amount} de descuento`,
+  submit: "Confirmar y pagar",
+  submitting: "Procesando\u2026"
+};
+function CheckoutForm({
+  contact,
+  onContactChange,
+  contactErrors,
+  discountCode,
+  onDiscountCodeChange,
+  onApplyDiscount,
+  onRemoveDiscount,
+  appliedDiscount,
+  discountApplying,
+  discountError,
+  loginPrompt,
+  children: children2,
+  submitting,
+  submitDisabled,
+  onSubmit,
+  labels,
+  currencyCode,
+  locale,
+  className
+}) {
+  const t = { ...DEFAULT_LABELS7, ...labels };
+  function patchContact(patch3) {
+    onContactChange({ ...contact, ...patch3 });
+  }
+  function handleDiscountCodeKeyDown(event) {
+    if (event.key !== "Enter") return;
+    if (event.nativeEvent.isComposing) return;
+    event.preventDefault();
+    if (discountCode.trim() && !discountApplying) onApplyDiscount();
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    loginPrompt,
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "form",
+      {
+        "data-testid": "checkout-form",
+        onSubmit,
+        className: (0, import_utils13.cn)("space-y-8", className),
+        "data-slot": "checkout-form",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("section", { className: "space-y-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { className: "border-b border-border pb-2 text-lg font-semibold", children: t.contactTitle }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { htmlFor: "checkout-form-name", className: "text-sm font-medium", children: t.nameLabel }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  "input",
+                  {
+                    id: "checkout-form-name",
+                    type: "text",
+                    autoComplete: "name",
+                    value: contact.name,
+                    onChange: (e) => patchContact({ name: e.target.value }),
+                    placeholder: t.namePlaceholder,
+                    className: (0, import_utils13.cn)(
+                      "w-full rounded-lg border bg-background px-3 py-2 text-sm transition focus:outline-none focus:ring-2 focus:ring-primary/20",
+                      contactErrors?.name ? "border-destructive" : "border-border focus:border-primary"
+                    )
+                  }
+                ),
+                contactErrors?.name && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-xs text-destructive", children: contactErrors.name })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { htmlFor: "checkout-form-email", className: "text-sm font-medium", children: t.emailLabel }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  "input",
+                  {
+                    id: "checkout-form-email",
+                    type: "email",
+                    autoComplete: "email",
+                    value: contact.email,
+                    onChange: (e) => patchContact({ email: e.target.value }),
+                    placeholder: t.emailPlaceholder,
+                    className: (0, import_utils13.cn)(
+                      "w-full rounded-lg border bg-background px-3 py-2 text-sm transition focus:outline-none focus:ring-2 focus:ring-primary/20",
+                      contactErrors?.email ? "border-destructive" : "border-border focus:border-primary"
+                    )
+                  }
+                ),
+                contactErrors?.email && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-xs text-destructive", children: contactErrors.email })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { htmlFor: "checkout-form-phone", className: "text-sm font-medium", children: t.phoneLabel }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  "input",
+                  {
+                    id: "checkout-form-phone",
+                    type: "tel",
+                    autoComplete: "tel",
+                    value: contact.phone ?? "",
+                    onChange: (e) => patchContact({ phone: e.target.value }),
+                    className: (0, import_utils13.cn)(
+                      "w-full rounded-lg border bg-background px-3 py-2 text-sm transition focus:outline-none focus:ring-2 focus:ring-primary/20",
+                      contactErrors?.phone ? "border-destructive" : "border-border focus:border-primary"
+                    )
+                  }
+                ),
+                contactErrors?.phone && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-xs text-destructive", children: contactErrors.phone })
+              ] })
+            ] })
+          ] }),
+          children2,
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("section", { className: "space-y-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { className: "border-b border-border pb-2 text-lg font-semibold", children: t.discountTitle }),
+            appliedDiscount ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-between rounded-lg border border-green-200 bg-green-50 px-4 py-3 dark:border-green-800 dark:bg-green-900/20", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2 text-sm text-green-700 dark:text-green-400", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "font-semibold", children: appliedDiscount.code }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: t.discountAppliedSuffix(formatPrice(appliedDiscount.amount, currencyCode, locale)) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: onRemoveDiscount,
+                  "aria-label": t.removeDiscount,
+                  className: "text-green-600 transition-colors hover:text-green-800 dark:text-green-400 dark:hover:text-green-200",
+                  children: t.removeDiscount
+                }
+              )
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { htmlFor: "checkout-form-discount-code", className: "sr-only", children: t.discountTitle }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "input",
+                {
+                  id: "checkout-form-discount-code",
+                  type: "text",
+                  value: discountCode,
+                  onChange: (e) => onDiscountCodeChange(e.target.value.toUpperCase()),
+                  onKeyDown: handleDiscountCodeKeyDown,
+                  placeholder: t.discountPlaceholder,
+                  className: "flex-1 rounded-lg border border-border bg-background px-3 py-2 text-sm uppercase transition focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: onApplyDiscount,
+                  disabled: !discountCode.trim() || discountApplying,
+                  className: "rounded-lg bg-muted px-4 py-2 text-sm font-medium text-foreground transition hover:bg-muted/70 disabled:cursor-not-allowed disabled:opacity-50",
+                  children: discountApplying ? t.applyingDiscount : t.applyDiscount
+                }
+              )
+            ] }),
+            discountError && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-xs text-destructive", children: discountError })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "button",
+            {
+              type: "submit",
+              disabled: submitting || submitDisabled,
+              className: (0, import_utils13.cn)(
+                "flex w-full items-center justify-center gap-2 rounded-xl px-4 py-3 font-semibold transition-all",
+                submitting || submitDisabled ? "cursor-not-allowed bg-muted text-muted-foreground" : "bg-primary text-primary-foreground hover:bg-primary/90"
+              ),
+              children: submitting ? t.submitting : t.submit
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/order-confirmation.tsx
+var import_utils14 = require("@reblu/site-ui/utils");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var DEFAULT_LABELS8 = {
+  pollingTitle: "Confirmando tu pedido\u2026",
+  pollingDescription: "Estamos procesando el pago, un momento\u2026",
+  foundTitle: "\xA1Pedido confirmado!",
+  foundDescription: "Recibir\xE1s un email de confirmaci\xF3n con todos los detalles.",
+  timeoutTitle: "Pago recibido",
+  timeoutDescription: "Tu pago se ha procesado. Recibir\xE1s un email de confirmaci\xF3n en breve.",
+  orderNumberLabel: "Pedido confirmado",
+  totalLabel: "Total",
+  confirmationEmailPrefix: "Te hemos enviado un email de confirmaci\xF3n a",
+  sessionReferenceLabel: "Referencia de sesi\xF3n"
+};
+function OrderConfirmation({
+  status,
+  order,
+  sessionId,
+  labels,
+  currencyCode,
+  locale,
+  className
+}) {
+  const t = { ...DEFAULT_LABELS8, ...labels };
+  const title = status === "polling" ? t.pollingTitle : order ? t.foundTitle : t.timeoutTitle;
+  const description = status === "polling" ? t.pollingDescription : order ? t.foundDescription : t.timeoutDescription;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: (0, import_utils14.cn)("space-y-6 text-center", className), "data-slot": "order-confirmation", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h1", { className: "text-3xl font-bold", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-lg text-muted-foreground", children: description }),
+    order && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "inline-block rounded-xl bg-muted px-6 py-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "mb-1 text-xs uppercase tracking-widest text-muted-foreground", children: t.orderNumberLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "font-mono text-lg font-semibold", children: order.orderNumber })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "mx-auto max-w-sm space-y-3 rounded-xl border border-border bg-card p-5 text-left", children: [
+        order.items.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+          "div",
+          {
+            className: "flex justify-between gap-4 text-sm",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "max-w-[60%] truncate text-muted-foreground", children: [
+                item.product.name,
+                item.variant ? ` (${item.variant.name})` : "",
+                " x",
+                item.quantity
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: formatPrice(item.total, currencyCode, locale) })
+            ]
+          },
+          idx
+        )),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "space-y-1 border-t border-border pt-3 text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex justify-between pt-1 text-base font-bold", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: t.totalLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: formatPrice(order.total, currencyCode, locale) })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { className: "mx-auto max-w-sm text-sm text-muted-foreground", children: [
+        t.confirmationEmailPrefix,
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "font-medium text-foreground", children: order.customerEmail }),
+        "."
+      ] })
+    ] }),
+    !order && status === "timeout" && sessionId && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "inline-block rounded-xl bg-muted px-6 py-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "mb-1 text-xs uppercase tracking-widest text-muted-foreground", children: t.sessionReferenceLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "break-all font-mono text-sm font-semibold", children: sessionId })
+    ] })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ALLOWED_YOUTUBE_HOSTS,
+  AddToCartButton,
+  CartIcon,
+  CartLineList,
+  CartSummary,
+  CheckoutForm,
+  CheckoutLoginPrompt,
   DEFAULT_SHOP_PRICE_BANDS,
   MarkdownRenderer,
+  OrderConfirmation,
   ProductCard,
   ProfileCard,
   SafeHtml,