@asteby/storefront-react 0.20.0 → 0.21.0

package/dist/account.cjs

@@ -207,7 +207,7 @@ __export(voucher_document_exports, {
 function esc(s) {
   return s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
 }
-function formatMoney2(m, locale) {
+function formatMoney3(m, locale) {
   if (!m) return "";
   try {
     return new Intl.NumberFormat(locale, { style: "currency", currency: m.currency_code }).format(Number(m.amount));
@@ -248,7 +248,7 @@ function renderVoucherDocument(v, opts = {}) {
 <meta name="robots" content="noindex"><title>${esc(t.title)}${shop ? ` - ${esc(shop)}` : ""}</title><style>${CSS}</style></head>
 <body><main>
 <div class="head"><div><h1>${esc(t.title)}</h1><div class="muted">${subtitle}</div></div>
-${v.amount ? `<div><div class="label" style="text-align:right">${esc(t.total)}</div><div class="amount">${esc(formatMoney2(v.amount, locale))}</div></div>` : ""}</div>
+${v.amount ? `<div><div class="label" style="text-align:right">${esc(t.total)}</div><div class="amount">${esc(formatMoney3(v.amount, locale))}</div></div>` : ""}</div>
 ${field(t.reference, v.reference)}${field(t.clabe, v.clabe)}
 ${svg ? `<div class="bar">${svg}<div class="muted" style="font-family:ui-monospace,monospace">${esc(code)}</div></div>` : ""}
 ${expires ? `<p><strong>${esc(t.expires)}:</strong> ${esc(expires)}. ${esc(t.expiresNote)}</p>` : ""}
@@ -877,6 +877,11 @@ var ES4 = {
   "order.view": "Ver pedido",
   "order.items.one": "{count} art\xEDculo",
   "order.items.other": "{count} art\xEDculos",
+  "order.lines": "Art\xEDculos del pedido",
+  "order.line.quantity": "Cantidad {n}",
+  "order.line.each": "{price} c/u",
+  "order.line.unavailable": "Producto no disponible",
+  "order.productsMore": "y {n} m\xE1s",
   "order.stepOf": "Paso {n} de {total}: {step}",
   "order.listLabel": "Tus pedidos",
   "order.loading": "Cargando tus pedidos",
@@ -1039,6 +1044,11 @@ var EN4 = {
   "order.view": "View order",
   "order.items.one": "{count} item",
   "order.items.other": "{count} items",
+  "order.lines": "Items in this order",
+  "order.line.quantity": "Quantity {n}",
+  "order.line.each": "{price} each",
+  "order.line.unavailable": "Product unavailable",
+  "order.productsMore": "and {n} more",
   "order.stepOf": "Step {n} of {total}: {step}",
   "order.listLabel": "Your orders",
   "order.loading": "Loading your orders",
@@ -1198,6 +1208,203 @@ var StorefrontContext = react.createContext(null);
 function useOptionalStorefront() {
   return react.useContext(StorefrontContext);
 }
+var DEFAULT_IMAGE_WIDTHS = [320, 480, 640, 768, 1024, 1280, 1600];
+var defaultImageLoader = (src, width, height) => {
+  try {
+    const isAbsolute = /^[a-z][a-z0-9+.-]*:/i.test(src);
+    const url = new URL(src, "http://relative.invalid");
+    url.searchParams.set("width", String(width));
+    if (height) url.searchParams.set("height", String(height));
+    return isAbsolute ? url.toString() : url.pathname + url.search + url.hash;
+  } catch {
+    return src;
+  }
+};
+function parseRatio(ratio) {
+  if (!ratio) return null;
+  const [w, h] = ratio.split(/[/:]/).map((n) => Number.parseFloat(n));
+  return w && h ? w / h : null;
+}
+function Image({
+  data,
+  sizes = "100vw",
+  widths = DEFAULT_IMAGE_WIDTHS,
+  loader = defaultImageLoader,
+  priority = false,
+  aspectRatio,
+  alt,
+  loading,
+  decoding,
+  ...rest
+}) {
+  const ratio = parseRatio(aspectRatio) ?? (data.width && data.height ? data.width / data.height : null);
+  let candidates = [...widths].sort((a, b) => a - b);
+  if (data.width) {
+    const capped = candidates.filter((w) => w <= data.width);
+    candidates = capped.length ? capped : [data.width];
+  }
+  const srcSet = loader ? candidates.map((w) => `${loader(data.url, w, ratio ? Math.round(w / ratio) : void 0)} ${w}w`).join(", ") : void 0;
+  const width = data.width ?? candidates[candidates.length - 1];
+  const height = data.height ?? (ratio && width ? Math.round(width / ratio) : void 0);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src: data.url,
+      alt: alt ?? data.alt ?? "",
+      ...srcSet ? { srcSet, sizes } : {},
+      ...width ? { width } : {},
+      ...height ? { height } : {},
+      loading: loading ?? (priority ? "eager" : "lazy"),
+      decoding: decoding ?? (priority ? "auto" : "async"),
+      ...priority ? { fetchPriority: "high" } : {},
+      ...rest
+    }
+  );
+}
+function productInitials(name) {
+  const words = (name ?? "").normalize("NFKC").split(/[\s\-_/.,()]+/).map((w) => Array.from(w).find((c) => /\p{L}|\p{N}/u.test(c)) ?? "").filter(Boolean);
+  if (words.length === 0) return "";
+  return (words.length > 1 ? words[0] + words[1] : words[0]).toLocaleUpperCase();
+}
+function ProductThumb({
+  image,
+  name,
+  size = 56,
+  ratio = "1/1",
+  fit = "contain",
+  quantity,
+  decorative = false,
+  zoom = true,
+  priority = false,
+  sizes,
+  loader,
+  className,
+  classNames: cx = {}
+}) {
+  const url = image?.url || null;
+  const [state, setState] = react.useState(url ? "loading" : "fallback");
+  const box = react.useRef(null);
+  react.useEffect(() => {
+    const img = box.current?.querySelector("img");
+    setState(!url ? "fallback" : img?.complete ? img.naturalWidth > 0 ? "loaded" : "fallback" : "loading");
+  }, [url]);
+  const label = name?.trim() || "";
+  const initials = productInitials(label);
+  const showBadge = typeof quantity === "number" && quantity > 1;
+  const a11y = state === "fallback" && !decorative && label ? { role: "img", "aria-label": label } : { "aria-hidden": decorative || state === "fallback" ? true : void 0 };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      ref: box,
+      className: [cx.root, className].filter(Boolean).join(" ") || void 0,
+      style: { ["--sf-preview-size"]: `${size}px`, ["--sf-preview-ratio"]: ratio.replace(":", "/") },
+      "data-sf-thumb": "",
+      "data-state": state,
+      "data-fit": fit,
+      "data-zoom": zoom || void 0,
+      ...a11y,
+      children: [
+        url && state !== "fallback" ? /* @__PURE__ */ jsxRuntime.jsx(
+          Image,
+          {
+            data: { url, alt: image?.alt ?? null, ...image?.width ? { width: image.width } : {}, ...image?.height ? { height: image.height } : {} },
+            alt: decorative ? "" : image?.alt ?? label,
+            aspectRatio: ratio,
+            sizes: sizes ?? `${size * 2}px`,
+            widths: [Math.round(size), Math.round(size * 2), Math.round(size * 3)],
+            ...loader !== void 0 ? { loader } : {},
+            priority,
+            className: cx.img,
+            onLoad: () => setState("loaded"),
+            onError: () => setState("fallback")
+          }
+        ) : null,
+        state === "fallback" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx.fallback, "data-sf-thumb-fallback": "", "aria-hidden": "true", children: initials ? /* @__PURE__ */ jsxRuntime.jsx("span", { "data-sf-thumb-initial": "", children: initials }) : /* @__PURE__ */ jsxRuntime.jsx(PackageGlyph, {}) }) : null,
+        showBadge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx.badge, "data-sf-thumb-qty": "", "aria-hidden": "true", children: quantity }) : null
+      ]
+    }
+  );
+}
+function PackageGlyph() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", width: "45%", height: "45%", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", focusable: "false", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 8 12 3 3 8v8l9 5 9-5V8Z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m3 8 9 5 9-5M12 13v8" })
+  ] });
+}
+function ProductPreview({
+  image,
+  name,
+  variant,
+  sku,
+  quantity,
+  unitPrice,
+  total,
+  href,
+  children,
+  size = 64,
+  ratio,
+  fit,
+  zoom,
+  priority,
+  sizes,
+  loader,
+  quantityLabel,
+  unavailableLabel = "Producto no disponible",
+  className,
+  classNames: cx = {}
+}) {
+  const missing = !name.trim();
+  const title = missing ? unavailableLabel : name;
+  const hasQty = typeof quantity === "number" && Number.isFinite(quantity);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: [cx.root, className].filter(Boolean).join(" ") || void 0, "data-sf-preview": "", "data-missing": missing || void 0, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx.media, "data-sf-preview-media": "", children: /* @__PURE__ */ jsxRuntime.jsx(
+      ProductThumb,
+      {
+        image,
+        name: missing ? null : name,
+        size,
+        decorative: true,
+        ...ratio ? { ratio } : {},
+        ...fit ? { fit } : {},
+        ...zoom !== void 0 ? { zoom } : {},
+        ...priority ? { priority } : {},
+        ...sizes ? { sizes } : {},
+        ...loader !== void 0 ? { loader } : {},
+        ...hasQty ? { quantity } : {},
+        ...cx.thumb ? { classNames: cx.thumb } : {}
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx.body, "data-sf-preview-body": "", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx.name, "data-sf-preview-name": "", children: href && !missing ? /* @__PURE__ */ jsxRuntime.jsx("a", { href, children: title }) : title }),
+      variant ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx.variant, "data-sf-preview-variant": "", children: variant }) : null,
+      sku ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx.sku, "data-sf-preview-sku": "", children: [
+        "SKU ",
+        sku
+      ] }) : null,
+      hasQty ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx.meta, "data-sf-preview-meta": "", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx.qty, "data-sf-preview-qty": "", children: (quantityLabel ?? "Cantidad {n}").replace("{n}", String(quantity)) }),
+        unitPrice != null && quantity > 1 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx.unit, "data-sf-preview-unit": "", children: [
+          " \xB7 ",
+          unitPrice
+        ] }) : null
+      ] }) : null,
+      children
+    ] }),
+    total != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx.total, "data-sf-preview-total": "", children: total }) : unitPrice != null && !(hasQty && quantity > 1) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx.price, "data-sf-preview-total": "", children: unitPrice }) : null
+  ] });
+}
+function ProductThumbStack({ items, max = 4, size = 44, moreLabel = "y {n} m\xE1s", className }) {
+  if (items.length === 0) return null;
+  const shown = items.length > max ? items.slice(0, max - 1) : items;
+  const rest = items.length - shown.length;
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className, "data-sf-thumb-stack": "", style: { ["--sf-preview-size"]: `${size}px` }, children: [
+    shown.map((it, i) => /* @__PURE__ */ jsxRuntime.jsx(ProductThumb, { image: it.image ?? null, name: it.name ?? null, size, zoom: false }, i)),
+    rest > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-sf-thumb-more": "", role: "img", "aria-label": moreLabel.replace("{n}", String(rest)), children: [
+      "+",
+      rest
+    ] }) : null
+  ] });
+}
 
 // src/locale.ts
 function useResolvedLocale(locale) {
@@ -1276,6 +1483,61 @@ function CopyButton({ value, label, copiedLabel, failedLabel, className, ariaLab
     /* @__PURE__ */ jsxRuntime.jsx("span", { role: "status", "aria-live": "polite", "data-sf-copy-status": true, style: state === "failed" ? void 0 : SR_ONLY, children: state === "copied" ? copiedLabel : state === "failed" ? failedLabel : "" })
   ] });
 }
+function lineImage(line) {
+  const img = line?.image;
+  if (!img || typeof img !== "object") return null;
+  const url = str(img.url);
+  if (!url) return null;
+  const alt = str(img.alt);
+  const w = Number(img.width);
+  const h = Number(img.height);
+  return { url, alt, ...Number.isFinite(w) && w > 0 ? { width: w } : {}, ...Number.isFinite(h) && h > 0 ? { height: h } : {} };
+}
+function validLines(order) {
+  return (Array.isArray(order.lines) ? order.lines : []).filter((l) => !!l && typeof l === "object");
+}
+function OrderLines({ order, lineHref, size = 64, label, classNames: cx = {}, ...text2 }) {
+  const { m, locale } = useAccountText(text2);
+  const lines = validLines(order);
+  if (lines.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx.root, "data-sf-order-lines": "", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cx.list, "aria-label": label ?? m["order.lines"], "data-sf-order-lines-list": "", children: lines.map((l, i) => {
+    const qty = Number.isFinite(l.quantity) && l.quantity > 0 ? l.quantity : 1;
+    const unit = moneyText(l.unit, locale);
+    const variant = str(l.variant_title);
+    return /* @__PURE__ */ jsxRuntime.jsx("li", { className: cx.item, "data-sf-order-line": "", children: /* @__PURE__ */ jsxRuntime.jsx(
+      ProductPreview,
+      {
+        image: lineImage(l),
+        name: str(l.title) ?? "",
+        variant: variant && !/^default( title)?$/i.test(variant) ? variant : null,
+        sku: str(l.sku),
+        quantity: qty,
+        quantityLabel: m["order.line.quantity"],
+        unavailableLabel: m["order.line.unavailable"],
+        unitPrice: unit ? fill(m["order.line.each"], { price: unit }) : null,
+        total: moneyText(l.total, locale),
+        href: lineHref?.(l) ?? null,
+        size,
+        ...cx.preview ? { classNames: cx.preview } : {}
+      }
+    ) }, `${str(l.sku) ?? ""}-${i}`);
+  }) }) });
+}
+function OrderProductsStack({ order, size = 44, max = 4, className, ...text2 }) {
+  const { m } = useAccountText(text2);
+  const lines = validLines(order);
+  if (lines.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ProductThumbStack,
+    {
+      items: lines.map((l) => ({ image: lineImage(l), name: str(l.title) })),
+      size,
+      max,
+      moreLabel: m["order.productsMore"],
+      ...className ? { className } : {}
+    }
+  );
+}
 var STEP_STATES = /* @__PURE__ */ new Set(["done", "current", "pending", "problem"]);
 var stepState = (s) => typeof s === "string" && STEP_STATES.has(s) ? s : "pending";
 var GLYPH = { done: "\u2713", current: "\u25CF", pending: "\u25CB", problem: "!" };
@@ -1375,6 +1637,7 @@ function OrderCard({ order, orderHref, actionHref, onAction, headingLevel = 3, c
         plural(m, "order.items", items)
       ] }) : null
     ] }),
+    Array.isArray(order.lines) && order.lines.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx.products, "data-sf-order-products": true, children: /* @__PURE__ */ jsxRuntime.jsx(OrderProductsStack, { order, ...text2 }) }) : null,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx.summary, "data-sf-order-summary": true, children: [
       /* @__PURE__ */ jsxRuntime.jsx(OrderProgress, { progress, variant: "compact", ...text2, ...cx.progress ? { classNames: cx.progress } : {} }),
       showShipment ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx.shipment, "data-sf-order-shipment": true, children: [
@@ -1912,13 +2175,18 @@ exports.Barcode = Barcode;
 exports.InvoiceList = InvoiceList;
 exports.NextActionBar = NextActionBar;
 exports.OrderCard = OrderCard;
+exports.OrderLines = OrderLines;
 exports.OrderList = OrderList;
+exports.OrderProductsStack = OrderProductsStack;
 exports.OrderProgress = OrderProgress;
 exports.OrderStatusBadge = OrderStatusBadge;
 exports.PaymentSummary = PaymentSummary;
 exports.PendingPaymentCard = PendingPaymentCard;
 exports.PendingPaymentList = PendingPaymentList;
 exports.PostPurchaseAccountPrompt = PostPurchaseAccountPrompt;
+exports.ProductPreview = ProductPreview;
+exports.ProductThumb = ProductThumb;
+exports.ProductThumbStack = ProductThumbStack;
 exports.RefundList = RefundList;
 exports.ShipmentCard = ShipmentCard;
 exports.accountAuthMessages = accountAuthMessages;
@@ -1927,7 +2195,9 @@ exports.barcodeGeometry = barcodeGeometry;
 exports.barcodeValue = barcodeValue;
 exports.code128Modules = code128Modules;
 exports.enumText = enumText;
+exports.lineImage = lineImage;
 exports.postPurchaseAccountPromptMessages = postPurchaseAccountPromptMessages;
+exports.productInitials = productInitials;
 exports.stageTone = stageTone;
 exports.useCustomerOrder = useCustomerOrder;
 exports.useCustomerOrders = useCustomerOrders;