@asteby/storefront-react 0.4.0 → 0.5.0

package/dist/index.cjs

@@ -502,6 +502,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 ? storefront.resolveAvailability(exact) : loose.length ? storefront.productAvailability({ variants: loose, available_for_sale: loose.some((v) => v.available_for_sale) }) : null,
           search: `?${search.toString()}`
         };
       })
@@ -520,21 +521,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 ? storefront.resolveAvailability(availabilitySource, { lowStockThreshold: lowStockThreshold ?? null }) : null);
+  const view = resolved ? storefront.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] = react.useState(false);
   return /* @__PURE__ */ jsxRuntime.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) => {
@@ -542,17 +554,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__ */ jsxRuntime.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 ? storefront.resolveAvailability(source, opts) : null;
+}
+function useAvailability(input) {
+  const locale = useLocale(input.locale);
+  const a = pickAvailability(input);
+  return react.useMemo(
+    () => a ? storefront.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 = storefront.availabilityMessages(loc, messages);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      "data-availability": view.status,
+      "data-tone": view.tone,
+      "data-placement": placement,
+      ...live ? { role: "status" } : {},
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": view.srText !== view.label ? true : void 0, children: view.label }),
+        view.srText !== view.label && /* @__PURE__ */ jsxRuntime.jsx(SrOnly, { children: view.srText }),
+        placement === "detail" && view.sublabel && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "data-availability-note": "eta", children: view.sublabel })
+        ] }),
+        placement === "detail" && view.maxPerOrder !== null && view.status !== "out_of_stock" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "data-availability-note": "max", children: storefront.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__ */ jsxRuntime.jsx("span", { ...rest, children });
+  const m = storefront.availabilityMessages(loc, messages);
+  const status = storefront.availabilityView(a, loc, { messages: messages ?? null }).status;
+  if (status === "out_of_stock") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-availability": status, ...rest, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("s", { children }),
+      /* @__PURE__ */ jsxRuntime.jsxs(SrOnly, { children: [
+        " (",
+        m["option.sold_out"],
+        ")"
+      ] })
+    ] });
+  }
+  if (status === "backorder" || status === "preorder") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-availability": status, ...rest, children: [
+      children,
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-availability-tag": true, children: [
+        "(",
+        m[status === "backorder" ? "option.backorder" : "option.preorder"],
+        ")"
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.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 = react.useId();
+  const [state, setState] = react.useState("idle");
+  if (!view?.showNotify) return null;
+  const m = storefront.availabilityMessages(loc, messages);
+  const client = clientProp ?? sf?.client ?? null;
+  if (state === "done") {
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("form", { method: "post", ...action !== void 0 ? { action } : {}, ...rest, onSubmit: submit, "data-restock": state, children: /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("legend", { children: m["notify.title"] }),
+    /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name: "sku", value: sku }),
+    /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name: "locale", value: loc }),
+    market && /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name: "market", value: market }),
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: `${id}-email`, children: m["notify.email"] }),
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx("input", { id: `${id}-email`, name: "email", type: "email", autoComplete: "email", required: !allowPhone })
+    ] }),
+    allowPhone && /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: `${id}-phone`, children: m["notify.phone"] }),
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx("input", { id: `${id}-phone`, name: "phone", type: "tel", autoComplete: "tel" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("input", { id: `${id}-consent`, name: "consent", type: "checkbox", value: "true", required: true }),
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: `${id}-consent`, children: m["notify.consent"] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", disabled: state === "sending", "aria-busy": state === "sending" || void 0, children: m["notify.submit"] }),
+    state === "error" && /* @__PURE__ */ jsxRuntime.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 = storefront.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__ */ jsxRuntime.jsxs("div", { "data-cart-line-problem": view.code, ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { children: view.message }),
+    view.adjustTo !== null && adjust && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => void adjust(line.id, view.adjustTo), children: view.adjustLabel }),
+    remove && /* @__PURE__ */ jsxRuntime.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 = react.useRef(null);
+  const error = errorProp !== void 0 ? errorProp : cartCtx?.error ?? null;
+  const cart = cartProp !== void 0 ? cartProp : cartCtx?.cart ?? null;
+  const active = storefront.isStorefrontError(error) && error.code === "insufficient_stock";
+  react.useEffect(() => {
+    if (active && autoFocus) ref.current?.focus({ preventScroll: true });
+  }, [active, error, autoFocus]);
+  if (!active) return null;
+  const m = storefront.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__ */ jsxRuntime.jsxs("div", { ref, role: "alert", tabIndex: -1, "data-stock-conflict": true, ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: m["conflict.title"] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { children: m["conflict.body"] }),
+    lines.length > 0 && /* @__PURE__ */ jsxRuntime.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 = storefront.cartLineProblemView(l, loc, { messages: messages ?? null, ...cartLine ? { lineQuantity: cartLine.quantity } : {} });
+      return /* @__PURE__ */ jsxRuntime.jsxs("li", { "data-cart-line-problem": view.code, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: cartLine ? `${cartLine.merchandise.product.title}${cartLine.merchandise.title ? ` (${cartLine.merchandise.title})` : ""}` : l.sku }),
+        ": ",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: view.message }),
+        lineId && view.adjustTo !== null && adjust && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => void adjust(lineId, view.adjustTo), children: view.adjustLabel })
+        ] }),
+        lineId && remove && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => void remove(lineId), children: view.removeLabel })
+        ] })
+      ] }, `${l.sku}:${l.line_id ?? ""}`);
+    }) }),
+    onDismiss && /* @__PURE__ */ jsxRuntime.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();
@@ -586,7 +828,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,
@@ -601,7 +844,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[storefront.productAvailability(product, options).status] ?? "out of stock" }
   );
   if (product.vendor) meta.push({ property: "product:brand", content: product.vendor });
   return meta;
@@ -638,22 +881,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 = storefront.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: storefront.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,
@@ -1339,7 +1584,9 @@ function NearestLocationForm({
 }
 
 exports.AddToCartButton = AddToCartButton;
+exports.AvailabilityBadge = AvailabilityBadge;
 exports.CART_COOKIE_NAME = CART_COOKIE_NAME;
+exports.CartLineProblem = CartLineProblem;
 exports.CartProvider = CartProvider;
 exports.DEFAULT_IMAGE_WIDTHS = DEFAULT_IMAGE_WIDTHS;
 exports.DirectionsLink = DirectionsLink;
@@ -1352,12 +1599,16 @@ exports.NearestLocationForm = NearestLocationForm;
 exports.OpenStatus = OpenStatus;
 exports.PickupOption = PickupOption;
 exports.ProductPrice = ProductPrice;
+exports.RestockNotifyForm = RestockNotifyForm;
 exports.SELECTED_LOCATION_PARAM = SELECTED_LOCATION_PARAM;
 exports.SELECTED_LOCATION_STORAGE_KEY = SELECTED_LOCATION_STORAGE_KEY;
 exports.SectionRegistry = SectionRegistry;
 exports.Sections = Sections;
+exports.SrOnly = SrOnly;
+exports.StockConflictAlert = StockConflictAlert;
 exports.StorefrontProvider = StorefrontProvider;
 exports.ThemeStyle = ThemeStyle;
+exports.VariantOptionState = VariantOptionState;
 exports.VariantSelector = VariantSelector;
 exports.breadcrumbJsonLd = breadcrumbJsonLd;
 exports.collectionJsonLd = collectionJsonLd;
@@ -1386,6 +1637,7 @@ exports.themeToCss = themeToCss;
 exports.themeToCssVariables = themeToCssVariables;
 exports.toMerchandise = toMerchandise;
 exports.tokenName = tokenName;
+exports.useAvailability = useAvailability;
 exports.useCart = useCart;
 exports.useGeolocation = useGeolocation;
 exports.useNearestLocations = useNearestLocations;