@asteby/storefront-react 0.3.0 → 0.5.0

package/dist/index.js

@@ -1,7 +1,9 @@
-import { useOptionalStorefront } from './chunk-C6QZNKRE.js';
-export { DEFAULT_IMAGE_WIDTHS, Image, Money, ProductPrice, StorefrontProvider, defaultImageLoader, useOptionalStorefront, useStorefront, useStorefrontClient } from './chunk-C6QZNKRE.js';
+export { DEFAULT_IMAGE_WIDTHS, Image, Money, ProductPrice, defaultImageLoader } from './chunk-6CVKW7F3.js';
+export { ThemeStyle, isSafeCssValue, themeFontsHref, themeToCss, themeToCssVariables, tokenName } from './chunk-672OTUM2.js';
+import { useOptionalStorefront } from './chunk-DQBL2DFJ.js';
+export { StorefrontProvider, useOptionalStorefront, useStorefront, useStorefrontClient } from './chunk-DQBL2DFJ.js';
 import { createContext, useRef, useState, useCallback, useEffect, useMemo, useContext, Fragment as Fragment$1, useId } from 'react';
-import { formatMoney, isStorefrontError } from '@asteby/storefront';
+import { resolveAvailability, productAvailability, availabilityView, availabilityMessages, formatAvailabilityMessage, cartLineProblemView, isStorefrontError, schemaAvailability, formatMoney } from '@asteby/storefront';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { toSchemaOpeningHours, isValidPoint, rankByDistance, openStatus, directionsUrl } from '@asteby/storefront/geo';
 
@@ -347,6 +349,7 @@ function useProductOptions(product, config = {}) {
           exists: exact ? true : loose.length > 0 && Object.keys(selectedOptions).length < product.options.length,
           available: exact ? exact.available_for_sale : Object.keys(selectedOptions).length < product.options.length && loose.some((v) => v.available_for_sale),
           variant: exact,
+          availability: exact ? resolveAvailability(exact) : loose.length ? productAvailability({ variants: loose, available_for_sale: loose.some((v) => v.available_for_sale) }) : null,
           search: `?${search.toString()}`
         };
       })
@@ -365,21 +368,32 @@ function toMerchandise(product, variant) {
 function AddToCartButton({
   variantId,
   quantity = 1,
+  availability,
+  availabilitySource,
+  lowStockThreshold,
+  locale,
   merchandise,
   onAdded,
   onClick,
   disabled,
-  children = "Agregar al carrito",
+  children,
   type = "button",
   ...rest
 }) {
   const cart = useCart();
+  const sf = useOptionalStorefront();
+  const resolved = availability ?? (availabilitySource ? resolveAvailability(availabilitySource, { lowStockThreshold: lowStockThreshold ?? null }) : null);
+  const view = resolved ? availabilityView(resolved, locale ?? sf?.locale ?? "es-MX") : null;
+  const blocked = view ? !view.ctaEnabled : false;
+  const qty = view?.maxPerOrder != null ? Math.min(quantity, view.maxPerOrder) : quantity;
+  const label = children ?? view?.ctaLabel ?? "Agregar al carrito";
   const [adding, setAdding] = useState(false);
   return /* @__PURE__ */ jsx(
     "button",
     {
       type,
-      disabled: disabled || !variantId || adding,
+      disabled: disabled || !variantId || adding || blocked,
+      "data-availability": view?.status,
       "aria-busy": adding || void 0,
       "data-adding": adding || void 0,
       onClick: async (event) => {
@@ -387,17 +401,247 @@ function AddToCartButton({
         if (event.defaultPrevented || !variantId) return;
         setAdding(true);
         try {
-          const result = await cart.addLines([{ variant_id: variantId, quantity, ...merchandise ? { merchandise } : {} }]);
+          const result = await cart.addLines([{ variant_id: variantId, quantity: qty, ...merchandise ? { merchandise } : {} }]);
           if (result) onAdded?.();
         } finally {
           setAdding(false);
         }
       },
       ...rest,
-      children
+      children: label
     }
   );
 }
+var SR_ONLY = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  margin: -1,
+  padding: 0,
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+function SrOnly({ children }) {
+  return /* @__PURE__ */ jsx("span", { style: SR_ONLY, children });
+}
+function useLocale(locale) {
+  const sf = useOptionalStorefront();
+  return locale ?? sf?.locale ?? "es-MX";
+}
+function pickAvailability({ availability, source, lowStockThreshold }) {
+  const opts = { lowStockThreshold: lowStockThreshold ?? null };
+  if (availability) return availability;
+  return source ? resolveAvailability(source, opts) : null;
+}
+function useAvailability(input) {
+  const locale = useLocale(input.locale);
+  const a = pickAvailability(input);
+  return useMemo(
+    () => a ? availabilityView(a, locale, { messages: input.messages ?? null }) : null,
+    // `a` is rebuilt from props each render; key by its content
+    [JSON.stringify(a), locale, input.messages]
+  );
+}
+function AvailabilityBadge({
+  availability,
+  source,
+  lowStockThreshold,
+  locale,
+  messages,
+  placement = "detail",
+  live,
+  ...rest
+}) {
+  const view = useAvailability({ availability, source, lowStockThreshold, locale, messages });
+  const loc = useLocale(locale);
+  if (!view) return null;
+  if (placement === "card" && !view.showOnCard) return null;
+  const m = availabilityMessages(loc, messages);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-availability": view.status,
+      "data-tone": view.tone,
+      "data-placement": placement,
+      ...live ? { role: "status" } : {},
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": view.srText !== view.label ? true : void 0, children: view.label }),
+        view.srText !== view.label && /* @__PURE__ */ jsx(SrOnly, { children: view.srText }),
+        placement === "detail" && view.sublabel && /* @__PURE__ */ jsxs(Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsx("span", { "data-availability-note": "eta", children: view.sublabel })
+        ] }),
+        placement === "detail" && view.maxPerOrder !== null && view.status !== "out_of_stock" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsx("span", { "data-availability-note": "max", children: formatAvailabilityMessage(m.max_per_order, { n: view.maxPerOrder }) })
+        ] })
+      ]
+    }
+  );
+}
+function VariantOptionState({ children, availability, source, lowStockThreshold, locale, messages, ...rest }) {
+  const a = pickAvailability({ availability, source, lowStockThreshold });
+  const loc = useLocale(locale);
+  if (!a) return /* @__PURE__ */ jsx("span", { ...rest, children });
+  const m = availabilityMessages(loc, messages);
+  const status = availabilityView(a, loc, { messages: messages ?? null }).status;
+  if (status === "out_of_stock") {
+    return /* @__PURE__ */ jsxs("span", { "data-availability": status, ...rest, children: [
+      /* @__PURE__ */ jsx("s", { children }),
+      /* @__PURE__ */ jsxs(SrOnly, { children: [
+        " (",
+        m["option.sold_out"],
+        ")"
+      ] })
+    ] });
+  }
+  if (status === "backorder" || status === "preorder") {
+    return /* @__PURE__ */ jsxs("span", { "data-availability": status, ...rest, children: [
+      children,
+      " ",
+      /* @__PURE__ */ jsxs("span", { "data-availability-tag": true, children: [
+        "(",
+        m[status === "backorder" ? "option.backorder" : "option.preorder"],
+        ")"
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("span", { "data-availability": status, ...rest, children });
+}
+function RestockNotifyForm({
+  sku,
+  market,
+  allowPhone = false,
+  action,
+  client: clientProp,
+  enhance = true,
+  onSubscribed,
+  onError,
+  availability,
+  source,
+  lowStockThreshold,
+  locale,
+  messages,
+  ...rest
+}) {
+  const sf = useOptionalStorefront();
+  const view = useAvailability({ availability, source, lowStockThreshold, locale, messages });
+  const loc = useLocale(locale);
+  const id = useId();
+  const [state, setState] = useState("idle");
+  if (!view?.showNotify) return null;
+  const m = availabilityMessages(loc, messages);
+  const client = clientProp ?? sf?.client ?? null;
+  if (state === "done") {
+    return /* @__PURE__ */ jsx("p", { role: "status", "data-restock": "done", children: m["notify.done"] });
+  }
+  const submit = enhance && client ? (e) => {
+    e.preventDefault();
+    const form = new FormData(e.currentTarget);
+    const email = String(form.get("email") ?? "").trim();
+    const phone = String(form.get("phone") ?? "").trim();
+    if (!email && !phone) {
+      setState("error");
+      return;
+    }
+    setState("sending");
+    client.restock.subscribe({ sku, locale: loc, consent: true, ...email ? { email } : {}, ...phone ? { phone } : {}, ...market ? { market } : {} }).then(() => {
+      setState("done");
+      onSubscribed?.();
+    }).catch((err) => {
+      setState("error");
+      onError?.(err);
+    });
+  } : void 0;
+  return /* @__PURE__ */ jsx("form", { method: "post", ...action !== void 0 ? { action } : {}, ...rest, onSubmit: submit, "data-restock": state, children: /* @__PURE__ */ jsxs("fieldset", { children: [
+    /* @__PURE__ */ jsx("legend", { children: m["notify.title"] }),
+    /* @__PURE__ */ jsx("input", { type: "hidden", name: "sku", value: sku }),
+    /* @__PURE__ */ jsx("input", { type: "hidden", name: "locale", value: loc }),
+    market && /* @__PURE__ */ jsx("input", { type: "hidden", name: "market", value: market }),
+    /* @__PURE__ */ jsxs("p", { children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: `${id}-email`, children: m["notify.email"] }),
+      " ",
+      /* @__PURE__ */ jsx("input", { id: `${id}-email`, name: "email", type: "email", autoComplete: "email", required: !allowPhone })
+    ] }),
+    allowPhone && /* @__PURE__ */ jsxs("p", { children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: `${id}-phone`, children: m["notify.phone"] }),
+      " ",
+      /* @__PURE__ */ jsx("input", { id: `${id}-phone`, name: "phone", type: "tel", autoComplete: "tel" })
+    ] }),
+    /* @__PURE__ */ jsxs("p", { children: [
+      /* @__PURE__ */ jsx("input", { id: `${id}-consent`, name: "consent", type: "checkbox", value: "true", required: true }),
+      " ",
+      /* @__PURE__ */ jsx("label", { htmlFor: `${id}-consent`, children: m["notify.consent"] })
+    ] }),
+    /* @__PURE__ */ jsx("button", { type: "submit", disabled: state === "sending", "aria-busy": state === "sending" || void 0, children: m["notify.submit"] }),
+    state === "error" && /* @__PURE__ */ jsx("p", { role: "alert", children: m["notify.error"] })
+  ] }) });
+}
+function CartLineProblem({ line, locale, messages, onAdjust, onRemove, ...rest }) {
+  const cart = useOptionalCart();
+  const loc = useLocale(locale);
+  if (!line.problem) return null;
+  const view = cartLineProblemView(line.problem, loc, { messages: messages ?? null, lineQuantity: line.quantity });
+  const adjust = onAdjust ?? (cart ? (id, q) => cart.updateLines([{ id, quantity: q }]) : void 0);
+  const remove = onRemove ?? (cart ? (id) => cart.removeLines([id]) : void 0);
+  return /* @__PURE__ */ jsxs("div", { "data-cart-line-problem": view.code, ...rest, children: [
+    /* @__PURE__ */ jsx("p", { children: view.message }),
+    view.adjustTo !== null && adjust && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void adjust(line.id, view.adjustTo), children: view.adjustLabel }),
+    remove && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void remove(line.id), children: view.removeLabel })
+  ] });
+}
+function StockConflictAlert({
+  error: errorProp,
+  cart: cartProp,
+  locale,
+  messages,
+  onAdjust,
+  onRemove,
+  onDismiss,
+  autoFocus = true,
+  ...rest
+}) {
+  const cartCtx = useOptionalCart();
+  const loc = useLocale(locale);
+  const ref = useRef(null);
+  const error = errorProp !== void 0 ? errorProp : cartCtx?.error ?? null;
+  const cart = cartProp !== void 0 ? cartProp : cartCtx?.cart ?? null;
+  const active = isStorefrontError(error) && error.code === "insufficient_stock";
+  useEffect(() => {
+    if (active && autoFocus) ref.current?.focus({ preventScroll: true });
+  }, [active, error, autoFocus]);
+  if (!active) return null;
+  const m = availabilityMessages(loc, messages);
+  const lines = error.stockLines;
+  const adjust = onAdjust ?? (cartCtx ? (id, q) => cartCtx.updateLines([{ id, quantity: q }]) : void 0);
+  const remove = onRemove ?? (cartCtx ? (id) => cartCtx.removeLines([id]) : void 0);
+  return /* @__PURE__ */ jsxs("div", { ref, role: "alert", tabIndex: -1, "data-stock-conflict": true, ...rest, children: [
+    /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("strong", { children: m["conflict.title"] }) }),
+    /* @__PURE__ */ jsx("p", { children: m["conflict.body"] }),
+    lines.length > 0 && /* @__PURE__ */ jsx("ul", { children: lines.map((l) => {
+      const cartLine = cart?.lines.find((x) => l.line_id ? x.id === l.line_id : x.merchandise.sku === l.sku);
+      const lineId = l.line_id ?? cartLine?.id ?? null;
+      const view = cartLineProblemView(l, loc, { messages: messages ?? null, ...cartLine ? { lineQuantity: cartLine.quantity } : {} });
+      return /* @__PURE__ */ jsxs("li", { "data-cart-line-problem": view.code, children: [
+        /* @__PURE__ */ jsx("span", { children: cartLine ? `${cartLine.merchandise.product.title}${cartLine.merchandise.title ? ` (${cartLine.merchandise.title})` : ""}` : l.sku }),
+        ": ",
+        /* @__PURE__ */ jsx("span", { children: view.message }),
+        lineId && view.adjustTo !== null && adjust && /* @__PURE__ */ jsxs(Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void adjust(lineId, view.adjustTo), children: view.adjustLabel })
+        ] }),
+        lineId && remove && /* @__PURE__ */ jsxs(Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void remove(lineId), children: view.removeLabel })
+        ] })
+      ] }, `${l.sku}:${l.line_id ?? ""}`);
+    }) }),
+    onDismiss && /* @__PURE__ */ jsx("button", { type: "button", onClick: onDismiss, children: m["conflict.dismiss"] })
+  ] });
+}
 var clean = (s, max) => {
   if (!s) return void 0;
   const text = s.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim();
@@ -431,7 +675,8 @@ function seoMeta(input) {
 function seoOf(seo, fallbackTitle, fallbackDescription) {
   return { title: seo.title ?? fallbackTitle, description: seo.description ?? fallbackDescription ?? null };
 }
-function productMeta(product, shop, url) {
+var OG_AVAILABILITY = { in_stock: "in stock", low_stock: "in stock", out_of_stock: "out of stock", backorder: "backorder", preorder: "preorder" };
+function productMeta(product, shop, url, options = {}) {
   const { title, description } = seoOf(product.seo, product.title, product.description);
   const meta = seoMeta({
     title,
@@ -446,7 +691,7 @@ function productMeta(product, shop, url) {
   meta.push(
     { property: "product:price:amount", content: product.price_range.min.amount },
     { property: "product:price:currency", content: product.price_range.min.currency_code },
-    { property: "product:availability", content: product.available_for_sale ? "in stock" : "out of stock" }
+    { property: "product:availability", content: OG_AVAILABILITY[productAvailability(product, options).status] ?? "out of stock" }
   );
   if (product.vendor) meta.push({ property: "product:brand", content: product.vendor });
   return meta;
@@ -483,22 +728,24 @@ function withVariant(url, variantId) {
     return `${url}${url.includes("?") ? "&" : "?"}variant=${encodeURIComponent(variantId)}`;
   }
 }
-function productJsonLd(product, shop, url) {
+function productJsonLd(product, shop, url, options = {}) {
   const images = product.images.length ? product.images.map((i) => i.url) : product.featured_image ? [product.featured_image.url] : [];
-  const offers = product.variants.map(
-    (v) => compact({
+  const offers = product.variants.map((v) => {
+    const availability = resolveAvailability(v, options);
+    return compact({
       "@type": "Offer",
       sku: v.sku,
       gtin: v.barcode ?? void 0,
       name: product.variants.length > 1 ? `${product.title} - ${v.title}` : void 0,
       price: v.price.amount,
       priceCurrency: v.price.currency_code,
-      availability: v.available_for_sale ? "https://schema.org/InStock" : "https://schema.org/OutOfStock",
+      availability: schemaAvailability(availability.status),
+      availabilityStarts: availability.status === "preorder" ? availability.preorder_release_at ?? void 0 : void 0,
       itemCondition: "https://schema.org/NewCondition",
       url: product.variants.length > 1 ? withVariant(url, v.id) : url,
       seller: shop ? { "@type": "Organization", name: shop.name } : void 0
-    })
-  );
+    });
+  });
   const additionalProperty = Object.entries(product.attributes).map(([name, value]) => ({ "@type": "PropertyValue", name, value }));
   return compact({
     "@context": CONTEXT,
@@ -783,59 +1030,6 @@ function Sections({ sections, registry, context, renderUnknown, onInvalid }) {
     return /* @__PURE__ */ jsx(Component, { ...props, section: { id: section.id, type: section.type }, context }, key);
   }) });
 }
-var DEFAULT_FONT_FALLBACK = 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif';
-var MONO_FALLBACK = "ui-monospace, SFMono-Regular, Menlo, monospace";
-function tokenName(key) {
-  return key.trim().replace(/^-+/, "").replace(/^color-/, "").replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[\s_.]+/g, "-").toLowerCase().replace(/[^a-z0-9-]/g, "").replace(/-+/g, "-").replace(/^-|-$/g, "");
-}
-function isSafeCssValue(value) {
-  if (!value || value.length > 200) return false;
-  if (/[;{}<>\\]/.test(value)) return false;
-  if (/url\s*\(|expression\s*\(|@import/i.test(value)) return false;
-  return true;
-}
-function fontStack(family, role, fallback) {
-  const name = family.replace(/["']/g, "").trim();
-  if (!name || !isSafeCssValue(name)) return null;
-  return `"${name}", ${role === "mono" ? MONO_FALLBACK : fallback}`;
-}
-function themeToCssVariables(theme, options = {}) {
-  const naming = options.naming ?? "both";
-  const vars = {};
-  for (const [key, raw] of Object.entries(theme?.tokens ?? {})) {
-    const name = tokenName(key);
-    const value = String(raw).trim();
-    if (!name || !isSafeCssValue(value)) continue;
-    if (naming !== "metacore") vars[`--color-${name}`] = value;
-    if (naming !== "color") vars[`--${name}`] = value;
-  }
-  const fallback = options.fontFallback ?? DEFAULT_FONT_FALLBACK;
-  for (const [role, family] of Object.entries(theme?.fonts ?? {})) {
-    const name = tokenName(role);
-    const stack = typeof family === "string" ? fontStack(family, name, fallback) : null;
-    if (name && stack) vars[`--font-${name}`] = stack;
-  }
-  if (theme?.radius && isSafeCssValue(theme.radius.trim())) vars["--radius"] = theme.radius.trim();
-  return vars;
-}
-function themeToCss(theme, options = {}) {
-  const vars = themeToCssVariables(theme, options);
-  const body = Object.entries(vars).map(([k, v]) => `${k}:${v}`).join(";");
-  if (!body) return "";
-  const selector = (options.selector ?? ":root").replace(/[{}<>]/g, "");
-  return `${selector}{${body}}`;
-}
-function themeFontsHref(theme, weights = [400, 500, 600, 700]) {
-  const families = [...new Set(Object.values(theme?.fonts ?? {}).map((f) => String(f).replace(/["']/g, "").trim()).filter((f) => f && isSafeCssValue(f)))];
-  if (!families.length) return null;
-  const params = families.map((f) => `family=${encodeURIComponent(f).replace(/%20/g, "+")}:wght@${weights.join(";")}`).join("&");
-  return `https://fonts.googleapis.com/css2?${params}&display=swap`;
-}
-function ThemeStyle({ theme, nonce, id = "storefront-theme", ...options }) {
-  const css = themeToCss(theme, options);
-  if (!css) return null;
-  return /* @__PURE__ */ jsx("style", { id, nonce, "data-storefront-theme": "", dangerouslySetInnerHTML: { __html: css } });
-}
 var MESSAGES = {
   unsupported: "Tu navegador no permite obtener tu ubicaci\xF3n.",
   insecure: "La ubicaci\xF3n solo est\xE1 disponible en conexiones seguras (HTTPS).",
@@ -1183,6 +1377,6 @@ function NearestLocationForm({
   );
 }
 
-export { AddToCartButton, CART_COOKIE_NAME, CartProvider, DirectionsLink, JsonLd, LocationList, LocationPicker, NearestLocationForm, OpenStatus, PickupOption, SELECTED_LOCATION_PARAM, SELECTED_LOCATION_STORAGE_KEY, SectionRegistry, Sections, ThemeStyle, VariantSelector, breadcrumbJsonLd, collectionJsonLd, collectionMeta, createSectionRegistry, defineSection, faqJsonLd, getCartIdFromCookie, isSafeCssValue, localBusinessJsonLd, openingHoursJsonLd, optimisticCart, organizationJsonLd, productJsonLd, productMeta, readCartCookie, readSelectedLocationId, resolveSectionProps, sectionJsonSchema, seoMeta, serializeCartCookie, serializeJsonLd, themeFontsHref, themeToCss, themeToCssVariables, toMerchandise, tokenName, useCart, useGeolocation, useNearestLocations, useOptionalCart, useProductOptions, useSelectedLocation, writeCartCookie };
+export { AddToCartButton, AvailabilityBadge, CART_COOKIE_NAME, CartLineProblem, CartProvider, DirectionsLink, JsonLd, LocationList, LocationPicker, NearestLocationForm, OpenStatus, PickupOption, RestockNotifyForm, SELECTED_LOCATION_PARAM, SELECTED_LOCATION_STORAGE_KEY, SectionRegistry, Sections, SrOnly, StockConflictAlert, VariantOptionState, VariantSelector, breadcrumbJsonLd, collectionJsonLd, collectionMeta, createSectionRegistry, defineSection, faqJsonLd, getCartIdFromCookie, localBusinessJsonLd, openingHoursJsonLd, optimisticCart, organizationJsonLd, productJsonLd, productMeta, readCartCookie, readSelectedLocationId, resolveSectionProps, sectionJsonSchema, seoMeta, serializeCartCookie, serializeJsonLd, toMerchandise, useAvailability, useCart, useGeolocation, useNearestLocations, useOptionalCart, useProductOptions, useSelectedLocation, writeCartCookie };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map