@asteby/storefront-react 0.20.0 → 0.22.0

package/dist/checkout.css

@@ -328,3 +328,145 @@
     zoom: 0.78;
   }
 }
+
+/*
+ * <ProductThumb>, <ProductPreview>, <ProductThumbStack>: la foto del producto y la línea de producto de la tienda.
+ * CSS plano sobre los tokens de la tienda (--foreground, --background, --border, --muted-foreground, --radius); en tema
+ * oscuro la superficie y el brillo salen de color-mix, sin colores escritos aquí. Va incluido en cart.css, checkout.css,
+ * account.css y ui.css (misma regla, un solo origen: src/ui/product-preview.css).
+ */
+[data-sf-thumb] {
+  --_surface: color-mix(in srgb, var(--foreground, #111) 5%, var(--background, #fff));
+  position: relative;
+  display: inline-block;
+  flex: none;
+  box-sizing: border-box;
+  width: var(--sf-preview-size, 3.5rem);
+  aspect-ratio: var(--sf-preview-ratio, 1 / 1);
+  overflow: hidden;
+  border-radius: calc(var(--radius, 0.5rem) * 1.25);
+  background: var(--_surface);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground, #111) 9%, transparent);
+  vertical-align: middle;
+}
+:root[data-theme="dark"] [data-sf-thumb] { --_surface: color-mix(in srgb, var(--foreground, #fff) 9%, var(--background, #111)); }
+[data-sf-thumb] > img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  object-fit: contain;
+  padding: 6%;
+  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 180ms;
+}
+[data-sf-thumb][data-fit="cover"] > img { object-fit: cover; padding: 0; }
+/* Fotos sobre fondo blanco: se funden con la superficie en tema claro (no hay caja blanca dentro del marco). */
+[data-sf-thumb][data-fit="contain"] > img { mix-blend-mode: multiply; }
+:root[data-theme="dark"] [data-sf-thumb] > img { mix-blend-mode: normal; }
+[data-sf-thumb][data-state="loading"]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--foreground, #111) 8%, transparent) 50%, transparent 80%);
+  background-size: 200% 100%;
+  animation: sf-thumb-shimmer 1.4s linear infinite;
+  pointer-events: none;
+}
+@keyframes sf-thumb-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
+[data-sf-thumb][data-zoom]:hover > img { transform: scale(1.07); }
+@media (prefers-reduced-motion: reduce) {
+  [data-sf-thumb][data-state="loading"]::before { animation: none; }
+  [data-sf-thumb] > img { transition: none; }
+  [data-sf-thumb][data-zoom]:hover > img { transform: none; }
+}
+
+[data-sf-thumb-fallback] {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  color: color-mix(in srgb, var(--foreground, #111) 42%, transparent);
+  background: linear-gradient(145deg, color-mix(in srgb, var(--foreground, #111) 3%, transparent), color-mix(in srgb, var(--foreground, #111) 9%, transparent));
+}
+[data-sf-thumb-initial] {
+  font-size: calc(var(--sf-preview-size, 3.5rem) * 0.36);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  line-height: 1;
+}
+
+[data-sf-thumb-qty] {
+  position: absolute;
+  top: 0.2rem;
+  right: 0.2rem;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.3rem;
+  box-sizing: border-box;
+  display: inline-grid;
+  place-items: center;
+  border-radius: 999px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  background: var(--sf-summary-qty-bg, color-mix(in srgb, var(--foreground, #111) 78%, transparent));
+  color: var(--sf-summary-qty-fg, var(--background, #fff));
+}
+
+/* Línea de producto: foto | texto | importe. */
+[data-sf-preview] {
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+  min-width: 0;
+}
+[data-sf-preview][data-missing] [data-sf-preview-name] { font-style: italic; color: var(--muted-foreground, color-mix(in srgb, currentColor 60%, transparent)); }
+[data-sf-preview-media] { flex: none; display: inline-flex; }
+[data-sf-preview-body] { display: grid; flex: 1 1 auto; gap: 0.125rem; min-width: 0; }
+[data-sf-preview-name] {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+[data-sf-preview-name] a { color: inherit; text-decoration: none; }
+[data-sf-preview-name] a:hover { text-decoration: underline; }
+[data-sf-preview-variant],
+[data-sf-preview-sku],
+[data-sf-preview-meta] {
+  font-size: 0.8125rem;
+  line-height: 1.35;
+  color: var(--muted-foreground, color-mix(in srgb, currentColor 66%, transparent));
+}
+[data-sf-preview-sku] { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
+[data-sf-preview-total] {
+  flex: none;
+  align-self: flex-start;
+  font-size: 0.9375rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+/* Fotos apiladas (tarjeta de pedido). */
+[data-sf-thumb-stack] { display: inline-flex; align-items: center; }
+[data-sf-thumb-stack] > * { box-shadow: 0 0 0 2px var(--card, var(--background, #fff)), inset 0 0 0 1px color-mix(in srgb, var(--foreground, #111) 9%, transparent); }
+[data-sf-thumb-stack] > * + * { margin-inline-start: -0.625rem; }
+[data-sf-thumb-more] {
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  box-sizing: border-box;
+  width: var(--sf-preview-size, 2.75rem);
+  aspect-ratio: 1 / 1;
+  border-radius: calc(var(--radius, 0.5rem) * 1.25);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--muted-foreground, color-mix(in srgb, currentColor 66%, transparent));
+  background: color-mix(in srgb, var(--foreground, #111) 7%, var(--background, #fff));
+}

package/dist/checkout.d.cts

@@ -14,6 +14,10 @@ type AddressFieldsMessages = Record<AddressFieldKey | ContactFieldKey, string> &
     emailHint: string;
     phoneHint: string;
     lookupFilled: string;
+    /** Tooltip and note of a state the postal code defined (locked). */
+    provinceLocked: string;
+    /** Discreet action that releases the locked state so the buyer can fix the postal code. */
+    changePostalCode: string;
 };
 declare function addressFieldsMessages(locale?: string | null, overrides?: Partial<AddressFieldsMessages> | null): AddressFieldsMessages;
 type FieldLayoutClassNames = CheckoutFieldClassNames & {
@@ -88,8 +92,11 @@ type AddressFieldsProps = Common & {
     /**
      * Once `lookupPostalCode` fills the state field (never over what the buyer already typed), lock it: a plain
      * `<input>` turns read-only; a `<select>` (from `provinces`) turns disabled with a hidden field that keeps
-     * submitting its value. The buyer corrects the state by correcting the postal code. Default false: the filled
-     * state stays as editable as any other field. Marked with `data-sf-locked="1"` for the shop's own styling.
+     * submitting its value. The state is the postal code's: the field shows a lock, the tooltip `provinceLocked` and a
+     * discreet `changePostalCode` action; editing the postal code releases the lock and clears what the lookup filled
+     * (also when the new code resolves nothing), so a stale state is never left behind. Default TRUE (the server
+     * validates the pair again; set `false` to keep the filled state as editable as any field). Marked with
+     * `data-sf-locked="1"` for the shop's own styling.
      */
     lockProvinceOnFill?: boolean;
     /** Rendered after the fields (e.g. "save this address"). */
@@ -131,8 +138,10 @@ type OrderSummaryProps = {
     cost: CartCost;
     /** The delivery is being saved and the cart re-read: shipping and total say so (`aria-busy`). */
     updating?: boolean;
-    /** Picture of a line (e.g. `<ProductImage>`), 48-64 px. The quantity badge sits on it. */
+    /** Picture of a line (e.g. `<ProductImage>`), 48-64 px. The quantity badge sits on it. Default: `<ProductThumb>` of the line's image (fallback initial when it has none). */
     renderLineMedia?: (line: CartLine) => ReactNode;
+    /** Show the default picture of each line. Default true; `false` gives the text-only "2 × Name" list. */
+    media?: boolean;
     renderAmount?: (amount: Money) => ReactNode;
     /** Heading. `false` hides it (the disclosure already names the block). */
     title?: ReactNode | false;

package/dist/checkout.d.ts

@@ -14,6 +14,10 @@ type AddressFieldsMessages = Record<AddressFieldKey | ContactFieldKey, string> &
     emailHint: string;
     phoneHint: string;
     lookupFilled: string;
+    /** Tooltip and note of a state the postal code defined (locked). */
+    provinceLocked: string;
+    /** Discreet action that releases the locked state so the buyer can fix the postal code. */
+    changePostalCode: string;
 };
 declare function addressFieldsMessages(locale?: string | null, overrides?: Partial<AddressFieldsMessages> | null): AddressFieldsMessages;
 type FieldLayoutClassNames = CheckoutFieldClassNames & {
@@ -88,8 +92,11 @@ type AddressFieldsProps = Common & {
     /**
      * Once `lookupPostalCode` fills the state field (never over what the buyer already typed), lock it: a plain
      * `<input>` turns read-only; a `<select>` (from `provinces`) turns disabled with a hidden field that keeps
-     * submitting its value. The buyer corrects the state by correcting the postal code. Default false: the filled
-     * state stays as editable as any other field. Marked with `data-sf-locked="1"` for the shop's own styling.
+     * submitting its value. The state is the postal code's: the field shows a lock, the tooltip `provinceLocked` and a
+     * discreet `changePostalCode` action; editing the postal code releases the lock and clears what the lookup filled
+     * (also when the new code resolves nothing), so a stale state is never left behind. Default TRUE (the server
+     * validates the pair again; set `false` to keep the filled state as editable as any field). Marked with
+     * `data-sf-locked="1"` for the shop's own styling.
      */
     lockProvinceOnFill?: boolean;
     /** Rendered after the fields (e.g. "save this address"). */
@@ -131,8 +138,10 @@ type OrderSummaryProps = {
     cost: CartCost;
     /** The delivery is being saved and the cart re-read: shipping and total say so (`aria-busy`). */
     updating?: boolean;
-    /** Picture of a line (e.g. `<ProductImage>`), 48-64 px. The quantity badge sits on it. */
+    /** Picture of a line (e.g. `<ProductImage>`), 48-64 px. The quantity badge sits on it. Default: `<ProductThumb>` of the line's image (fallback initial when it has none). */
     renderLineMedia?: (line: CartLine) => ReactNode;
+    /** Show the default picture of each line. Default true; `false` gives the text-only "2 × Name" list. */
+    media?: boolean;
     renderAmount?: (amount: Money) => ReactNode;
     /** Heading. `false` hides it (the disclosure already names the block). */
     title?: ReactNode | false;

package/dist/checkout.js

@@ -2,6 +2,8 @@ import { brandName, BrandMark, brandKey } from './chunk-JNUJGPJC.js';
 export { BrandMark, brandKey, brandLogo, brandName, findBrand, listBrands } from './chunk-JNUJGPJC.js';
 import { CheckoutField } from './chunk-DFGLCIEG.js';
 export { CheckoutField, ErrorSummary, fieldMessages, useFieldErrors, validationMessage } from './chunk-DFGLCIEG.js';
+import { ProductThumb } from './chunk-VHEY5AU3.js';
+import './chunk-6CVKW7F3.js';
 import { useResolvedLocale } from './chunk-T52H5HL3.js';
 import './chunk-DQBL2DFJ.js';
 import { useId, useState, useRef, useEffect, useMemo, useSyncExternalStore } from 'react';
@@ -26,7 +28,9 @@ var ES = {
   referenceHint: "Entre qu\xE9 calles, color de la fachada\u2026",
   emailHint: "Te enviamos aqu\xED la confirmaci\xF3n y el seguimiento.",
   phoneHint: "Solo para la paqueter\xEDa, por si necesita contactarte.",
-  lookupFilled: "Completamos estado y ciudad con tu c\xF3digo postal."
+  lookupFilled: "Completamos estado y ciudad con tu c\xF3digo postal.",
+  provinceLocked: "Definido por tu c\xF3digo postal",
+  changePostalCode: "Cambiar c\xF3digo postal"
 };
 var EN = {
   email: "Email",
@@ -46,7 +50,9 @@ var EN = {
   referenceHint: "Cross streets, building color\u2026",
   emailHint: "We send the confirmation and tracking here.",
   phoneHint: "Only for the carrier, in case they need to reach you.",
-  lookupFilled: "We filled in state and city from your postal code."
+  lookupFilled: "We filled in state and city from your postal code.",
+  provinceLocked: "Set by your postal code",
+  changePostalCode: "Change postal code"
 };
 function addressFieldsMessages(locale, overrides) {
   const base = (locale ?? "es-MX").toLowerCase().startsWith("en") ? EN : ES;
@@ -72,8 +78,10 @@ function lockField(el) {
   if (el instanceof HTMLSelectElement) {
     const name = el.getAttribute("name");
     if (name) {
+      el.dataset.sfName = name;
       const hidden = document.createElement("input");
       hidden.type = "hidden";
+      hidden.dataset.sfLockMirror = "1";
       hidden.name = name;
       hidden.value = el.value;
       el.insertAdjacentElement("afterend", hidden);
@@ -84,12 +92,27 @@ function lockField(el) {
     el.readOnly = true;
   }
 }
+function unlockField(el) {
+  if (el.dataset.sfLocked !== "1") return;
+  delete el.dataset.sfLocked;
+  el.removeAttribute("aria-readonly");
+  el.removeAttribute("title");
+  if (el instanceof HTMLSelectElement) {
+    const mirror = el.nextElementSibling;
+    if (mirror instanceof HTMLInputElement && mirror.dataset.sfLockMirror === "1") mirror.remove();
+    if (el.dataset.sfName) el.setAttribute("name", el.dataset.sfName);
+    delete el.dataset.sfName;
+    el.disabled = false;
+  } else {
+    el.readOnly = false;
+  }
+}
 var ADDRESS_FILL_EVENT_FLAG = "sfSynthetic";
 function isAddressFillEvent(event) {
   return event[ADDRESS_FILL_EVENT_FLAG] === true;
 }
 function AddressFields(props) {
-  const { defaults, names = {}, errors = {}, countryCode, provinces, postalCode, lookupPostalCode, lockProvinceOnFill, locale, messages, fieldMessages: fm, classNames: cx = {}, children } = props;
+  const { defaults, names = {}, errors = {}, countryCode, provinces, postalCode, lookupPostalCode, lockProvinceOnFill = true, locale, messages, fieldMessages: fm, classNames: cx = {}, children } = props;
   const showNeighborhood = props.neighborhood ?? true;
   const showReference = props.reference ?? true;
   const m = addressFieldsMessages(locale, messages);
@@ -98,6 +121,7 @@ function AddressFields(props) {
   const listId = useId();
   const [colonias, setColonias] = useState([]);
   const [filled, setFilled] = useState(false);
+  const [provinceLocked, setProvinceLocked] = useState(false);
   const [coloniaSelect, setColoniaSelect] = useState(false);
   const coloniaSelectRef = useRef(false);
   const coloniaCarry = useRef(null);
@@ -128,6 +152,31 @@ function AddressFields(props) {
       form.removeEventListener("change", mark, true);
     };
   }, []);
+  const releaseLookup = () => {
+    const form = zipRef.current?.closest("form");
+    if (!form) return;
+    const locked = form.querySelector('[data-sf-locked="1"]');
+    const touched = [];
+    if (locked) {
+      unlockField(locked);
+      touched.push(locked);
+    }
+    for (const key of ["province", "city", "neighborhood"]) {
+      const el = form.elements.namedItem(n(key));
+      if (el && !("length" in el && !(el instanceof HTMLSelectElement)) && !touched.includes(el)) touched.push(el);
+    }
+    for (const el of touched) {
+      if (el.dataset.sfAutofilled !== "1") continue;
+      el.value = "";
+      delete el.dataset.sfAutofilled;
+      const event = new Event("input", { bubbles: true });
+      Object.defineProperty(event, ADDRESS_FILL_EVENT_FLAG, { value: true });
+      el.dispatchEvent(event);
+    }
+    lastZip.current = null;
+    setProvinceLocked(false);
+    setFilled(false);
+  };
   const runLookup = (zip) => {
     const lookup = lookupRef.current;
     if (!lookup || !zip || zip === lastZip.current) return;
@@ -151,7 +200,11 @@ function AddressFields(props) {
             const event = new Event("input", { bubbles: true });
             Object.defineProperty(event, ADDRESS_FILL_EVENT_FLAG, { value: true });
             el2.dispatchEvent(event);
-            if (lock) lockField(el2);
+            if (lock) {
+              lockField(el2);
+              el2.title = m.provinceLocked;
+              setProvinceLocked(true);
+            }
             return true;
           };
           const a = fill2(n("province"), info.province, lockProvinceOnFill);
@@ -199,6 +252,22 @@ function AddressFields(props) {
     const zip = defaults?.zip;
     if (zip) runLookup(zip);
   }, []);
+  const hasLock = (root) => !!root?.closest("form")?.querySelector('[data-sf-locked="1"]');
+  const changeZip = () => {
+    releaseLookup();
+    const zipEl = zipRef.current?.querySelector("input");
+    zipEl?.focus();
+    zipEl?.select();
+  };
+  const provinceHint = provinceLocked ? /* @__PURE__ */ jsxs("span", { "data-sf-province-locked": "", title: m.provinceLocked, children: [
+    /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { display: "inline-block", verticalAlign: "-1px", marginRight: 4 }, children: [
+      /* @__PURE__ */ jsx("rect", { x: "4", y: "11", width: "16", height: "10", rx: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "M8 11V7a4 4 0 0 1 8 0v4" })
+    ] }),
+    m.provinceLocked,
+    " \xB7 ",
+    /* @__PURE__ */ jsx("button", { type: "button", "data-sf-change-zip": "", onClick: changeZip, style: { background: "none", border: 0, padding: 0, font: "inherit", color: "inherit", textDecoration: "underline", cursor: "pointer" }, children: m.changePostalCode })
+  ] }) : void 0;
   const numericZip = postalCode?.inputMode === "numeric";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { ref: zipRef, className: join(cx.half), "data-sf-zip": true, children: /* @__PURE__ */ jsx(
@@ -218,15 +287,16 @@ function AddressFields(props) {
         classNames: { ...cx, root: cx.root },
         onInput: (e) => {
           const v = e.currentTarget.value.trim();
+          if (v !== lastZip.current && hasLock(zipRef.current)) releaseLookup();
           if (postalCode?.maxLength && v.length === postalCode.maxLength) runLookup(v);
         },
         onBlur: (e) => runLookup(e.currentTarget.value.trim())
       }
     ) }),
-    provinces && provinces.length ? /* @__PURE__ */ jsxs(CheckoutField, { ...common, as: "select", name: n("province"), label: m.province, autoComplete: "address-level1", defaultValue: defaults?.province ?? "", error: errors[n("province")] ?? null, classNames: field(cx, "half"), children: [
+    provinces && provinces.length ? /* @__PURE__ */ jsxs(CheckoutField, { ...common, as: "select", name: n("province"), label: m.province, autoComplete: "address-level1", defaultValue: defaults?.province ?? "", error: errors[n("province")] ?? null, classNames: field(cx, "half"), hint: provinceHint, children: [
       /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: m.provincePlaceholder }),
       provinces.map((p) => /* @__PURE__ */ jsx("option", { value: p.name, children: p.name }, p.code ?? p.name))
-    ] }) : /* @__PURE__ */ jsx(CheckoutField, { ...common, name: n("province"), label: m.province, autoComplete: "address-level1", defaultValue: defaults?.province ?? "", error: errors[n("province")] ?? null, classNames: field(cx, "half") }),
+    ] }) : /* @__PURE__ */ jsx(CheckoutField, { ...common, name: n("province"), label: m.province, autoComplete: "address-level1", defaultValue: defaults?.province ?? "", error: errors[n("province")] ?? null, classNames: field(cx, "half"), hint: provinceHint }),
     /* @__PURE__ */ jsx(CheckoutField, { ...common, name: n("city"), label: m.city, autoComplete: "address-level2", defaultValue: defaults?.city ?? "", error: errors[n("city")] ?? null, classNames: field(cx, "half") }),
     showNeighborhood && coloniaSelect ? /* @__PURE__ */ jsxs(
       CheckoutField,
@@ -302,13 +372,18 @@ function orderSummaryMessages(locale, overrides) {
   const base = (locale ?? "es-MX").toLowerCase().startsWith("en") ? EN2 : ES2;
   return overrides ? { ...base, ...overrides } : base;
 }
+function defaultLineMedia(l) {
+  const img = l.merchandise.image ?? l.merchandise.product.featured_image ?? null;
+  return /* @__PURE__ */ jsx(ProductThumb, { image: img, name: l.merchandise.product.title, size: 56, decorative: true, zoom: false });
+}
 var isZero = (m) => !!m && Number(m.amount) === 0;
 var positive = (m) => !!m && Number(m.amount) > 0;
 function OrderSummary(props) {
-  const { lines, cost, updating = false, renderLineMedia, renderAmount, title, headingLevel = 2, classNames: cx = {}, children } = props;
+  const { lines, cost, updating = false, media = true, renderAmount, title, headingLevel = 2, classNames: cx = {}, children } = props;
   const locale = useResolvedLocale(props.locale);
   const m = orderSummaryMessages(locale, props.messages);
   const money = (v) => renderAmount ? renderAmount(v) : formatMoney(v, locale);
+  const renderLineMedia = props.renderLineMedia ?? (media ? defaultLineMedia : void 0);
   const H = headingLevel === 3 ? "h3" : "h2";
   const discounts = cost.discounts?.filter((d) => positive(d.amount)) ?? [];
   return /* @__PURE__ */ jsxs("div", { className: cx.root, "data-sf-summary": true, children: [