@asteby/storefront-react 0.1.2 → 0.3.0

package/dist/index.cjs

@@ -3,6 +3,7 @@
 var react = require('react');
 var storefront = require('@asteby/storefront');
 var jsxRuntime = require('react/jsx-runtime');
+var geo = require('@asteby/storefront/geo');
 
 // src/context.tsx
 var StorefrontContext = react.createContext(null);
@@ -552,8 +553,6 @@ function AddToCartButton({
     }
   );
 }
-
-// src/seo.ts
 var clean = (s, max) => {
   if (!s) return void 0;
   const text = s.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim();
@@ -687,6 +686,16 @@ function organizationJsonLd(shop, url) {
     contactPoint
   });
 }
+var SCHEMA_HOURS = /^(Mo|Tu|We|Th|Fr|Sa|Su)(-(Mo|Tu|We|Th|Fr|Sa|Su))?( \d{2}:\d{2}-\d{2}:\d{2})?$/;
+function openingHoursJsonLd(hours) {
+  if (!hours) return void 0;
+  if (typeof hours !== "string") {
+    const list = hours.weekly ? geo.toSchemaOpeningHours(hours) : [];
+    return list.length ? list : void 0;
+  }
+  const tokens = hours.split(",").map((t) => t.trim());
+  return tokens.length && tokens.every((t) => SCHEMA_HOURS.test(t)) ? tokens : void 0;
+}
 function localBusinessJsonLd(shop, options = {}) {
   const site = shopUrl(shop, options.url);
   return shop.branches.map(
@@ -700,8 +709,8 @@ function localBusinessJsonLd(shop, options = {}) {
       telephone: b.phone ?? shop.contact.phone ?? void 0,
       priceRange: options.priceRange,
       address: compact({ "@type": "PostalAddress", streetAddress: b.address, addressLocality: b.city, addressCountry: shop.country_code }),
-      geo: b.lat !== null && b.lng !== null ? { "@type": "GeoCoordinates", latitude: b.lat, longitude: b.lng } : void 0,
-      openingHours: b.hours ? b.hours.split(/\s*,\s*/).filter(Boolean) : void 0,
+      geo: geo.isValidPoint(b) ? { "@type": "GeoCoordinates", latitude: b.lat, longitude: b.lng } : void 0,
+      openingHours: openingHoursJsonLd(b.opening_hours ?? b.hours),
       parentOrganization: site ? { "@id": `${site}#organization` } : { "@type": "Organization", name: shop.name }
     })
   );
@@ -770,7 +779,7 @@ function resolveSectionProps(schema, raw, path = "") {
   for (const [name, spec] of Object.entries(schema)) {
     const key = path ? `${path}.${name}` : name;
     let value = input[name];
-    const fail = (message) => {
+    const fail2 = (message) => {
       errors.push({ prop: key, message });
       if ("default" in spec) props[name] = cloneDefault(spec.default);
     };
@@ -781,37 +790,37 @@ function resolveSectionProps(schema, raw, path = "") {
     }
     if (STRING_KINDS.has(spec.kind)) {
       if (typeof value !== "string") {
-        fail("must be a string");
+        fail2("must be a string");
         continue;
       }
     } else if (spec.kind === "number") {
       if (typeof value === "string" && value.trim() !== "" && Number.isFinite(Number(value))) value = Number(value);
       if (typeof value !== "number" || !Number.isFinite(value)) {
-        fail("must be a number");
+        fail2("must be a number");
         continue;
       }
       if (spec.min !== void 0 && value < spec.min || spec.max !== void 0 && value > spec.max) {
-        fail(`must be between ${spec.min ?? "-\u221E"} and ${spec.max ?? "\u221E"}`);
+        fail2(`must be between ${spec.min ?? "-\u221E"} and ${spec.max ?? "\u221E"}`);
         continue;
       }
     } else if (spec.kind === "boolean") {
       if (typeof value !== "boolean") {
-        fail("must be a boolean");
+        fail2("must be a boolean");
         continue;
       }
     } else if (spec.kind === "select") {
       if (typeof value !== "string" || spec.options && !spec.options.some((o) => o.value === value)) {
-        fail(`must be one of ${(spec.options ?? []).map((o) => o.value).join(", ")}`);
+        fail2(`must be one of ${(spec.options ?? []).map((o) => o.value).join(", ")}`);
         continue;
       }
     } else if (spec.kind === "products") {
       if (!Array.isArray(value) || value.some((v) => typeof v !== "string")) {
-        fail("must be a list of product handles");
+        fail2("must be a list of product handles");
         continue;
       }
     } else if (spec.kind === "list") {
       if (!Array.isArray(value)) {
-        fail("must be a list");
+        fail2("must be a list");
         continue;
       }
       const items = [];
@@ -982,15 +991,369 @@ function ThemeStyle({ theme, nonce, id = "storefront-theme", ...options }) {
   if (!css) return null;
   return /* @__PURE__ */ jsxRuntime.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).",
+  denied: "No tenemos permiso para usar tu ubicaci\xF3n. Puedes activarlo en el navegador o escribir tu c\xF3digo postal.",
+  unavailable: "No pudimos determinar tu ubicaci\xF3n. Escribe tu c\xF3digo postal.",
+  timeout: "Tard\xF3 demasiado en obtener tu ubicaci\xF3n. Intenta de nuevo o escribe tu c\xF3digo postal."
+};
+var fail = (code) => ({ code, message: MESSAGES[code] });
+var hasGeolocation = () => typeof navigator !== "undefined" && !!navigator.geolocation;
+function useGeolocation(options = {}) {
+  const { enableHighAccuracy = false, timeoutMs = 1e4, maximumAge = 3e5 } = options;
+  const [supported, setSupported] = react.useState(false);
+  const [permission, setPermission] = react.useState("unknown");
+  const [status, setStatus] = react.useState("idle");
+  const [position, setPosition] = react.useState(null);
+  const [error, setError] = react.useState(null);
+  const alive = react.useRef(true);
+  react.useEffect(() => {
+    alive.current = true;
+    setSupported(hasGeolocation());
+    let off = () => {
+    };
+    try {
+      const perms = typeof navigator !== "undefined" ? navigator.permissions : void 0;
+      void perms?.query({ name: "geolocation" }).then((p) => {
+        if (!alive.current) return;
+        const sync = () => setPermission(p.state);
+        sync();
+        p.addEventListener?.("change", sync);
+        off = () => p.removeEventListener?.("change", sync);
+      }, () => {
+      });
+    } catch {
+    }
+    return () => {
+      alive.current = false;
+      off();
+    };
+  }, []);
+  const request = react.useCallback(() => {
+    const failWith = (code) => {
+      if (alive.current) {
+        setStatus("error");
+        setError(fail(code));
+      }
+      return null;
+    };
+    if (!hasGeolocation()) return Promise.resolve(failWith("unsupported"));
+    if (typeof window !== "undefined" && window.isSecureContext === false) return Promise.resolve(failWith("insecure"));
+    setStatus("locating");
+    setError(null);
+    return new Promise((resolve) => {
+      navigator.geolocation.getCurrentPosition(
+        (pos) => {
+          const point = { lat: pos.coords.latitude, lng: pos.coords.longitude };
+          if (alive.current) {
+            setPosition(point);
+            setStatus("success");
+            setPermission("granted");
+          }
+          resolve(point);
+        },
+        (err) => resolve(failWith(err.code === 1 ? "denied" : err.code === 3 ? "timeout" : "unavailable")),
+        { enableHighAccuracy, timeout: timeoutMs, maximumAge }
+      );
+    });
+  }, [enableHighAccuracy, timeoutMs, maximumAge]);
+  const reset = react.useCallback(() => {
+    setStatus("idle");
+    setPosition(null);
+    setError(null);
+  }, []);
+  return { supported, permission, status, position, error, request, reset };
+}
+var EMPTY = [];
+var IDLE = { locations: [], status: "idle", error: null, source: null };
+function useNearestLocations(options = {}) {
+  const { origin = null, postalCode = null, limit, radiusKm, remote = false } = options;
+  const sf = useOptionalStorefront();
+  const client = options.client ?? sf?.client ?? null;
+  const branches = options.locations ?? sf?.shop?.branches ?? EMPTY;
+  const lat = origin?.lat;
+  const lng = origin?.lng;
+  const hasOrigin = lat !== void 0 && lng !== void 0;
+  const cp = postalCode?.trim() || null;
+  const mode = react.useMemo(() => {
+    if (cp) return client ? "remote" : null;
+    if (!hasOrigin) return null;
+    if (remote) return client ? "remote" : null;
+    return branches.length ? "local" : null;
+  }, [cp, hasOrigin, remote, client, branches.length]);
+  const local = react.useMemo(() => {
+    if (mode !== "local" || !hasOrigin) return [];
+    return geo.rankByDistance(branches, { lat, lng }, { ...radiusKm !== void 0 ? { radiusKm } : {}, ...limit !== void 0 ? { limit } : {} }).map(({ item, distanceKm }) => ({ ...item, distance_km: distanceKm }));
+  }, [mode, branches, lat, lng, radiusKm, limit, hasOrigin]);
+  const [remoteState, setRemoteState] = react.useState(null);
+  const key = mode === "remote" ? cp ? `cp:${cp}` : `ll:${lat},${lng}` : "";
+  react.useEffect(() => {
+    if (mode !== "remote" || !client) return;
+    const ctrl = new AbortController();
+    const req = cp ? client.locations.list({ postal_code: cp }, { signal: ctrl.signal }) : client.locations.nearest({ lat, lng }, { signal: ctrl.signal });
+    req.then(
+      (res) => !ctrl.signal.aborted && setRemoteState({ key, nodes: res.nodes }),
+      (err) => !ctrl.signal.aborted && setRemoteState({ key, error: err instanceof Error ? err : new Error(String(err)) })
+    );
+    return () => ctrl.abort();
+  }, [mode, client, key, cp, lat, lng]);
+  return react.useMemo(() => {
+    if (mode === "local") return { locations: local, status: "success", error: null, source: "local" };
+    if (mode !== "remote") return IDLE;
+    if (!remoteState || remoteState.key !== key) return { locations: [], status: "loading", error: null, source: "remote" };
+    if ("error" in remoteState) return { locations: [], status: "error", error: remoteState.error, source: "remote" };
+    let nodes = remoteState.nodes;
+    if (radiusKm !== void 0) nodes = nodes.filter((n) => n.distance_km == null || n.distance_km <= radiusKm);
+    if (limit !== void 0) nodes = nodes.slice(0, Math.max(0, limit));
+    return { locations: nodes, status: "success", error: null, source: "remote" };
+  }, [mode, local, remoteState, key, radiusKm, limit]);
+}
+var SELECTED_LOCATION_PARAM = "sucursal";
+var SELECTED_LOCATION_STORAGE_KEY = "sf_sucursal";
+var CHANGE_EVENT = "storefront:selected-location";
+var storage = () => {
+  try {
+    return typeof localStorage === "undefined" ? null : localStorage;
+  } catch {
+    return null;
+  }
+};
+function readSelectedLocationId({ search = typeof location === "undefined" ? "" : location.search, store = storage(), param = SELECTED_LOCATION_PARAM, storageKey = SELECTED_LOCATION_STORAGE_KEY } = {}) {
+  const fromUrl = new URLSearchParams(search).get(param);
+  if (fromUrl) return fromUrl;
+  try {
+    return store?.getItem(storageKey) || null;
+  } catch {
+    return null;
+  }
+}
+var EMPTY2 = [];
+function useSelectedLocation(options = {}) {
+  const { initialId = null, param = SELECTED_LOCATION_PARAM, storageKey = SELECTED_LOCATION_STORAGE_KEY, syncUrl = true } = options;
+  const sf = useOptionalStorefront();
+  const locations = options.locations ?? sf?.shop?.branches ?? EMPTY2;
+  const [raw, setRaw] = react.useState(initialId);
+  const [ready, setReady] = react.useState(false);
+  react.useEffect(() => {
+    const read = () => setRaw(readSelectedLocationId({ param, storageKey }));
+    read();
+    setReady(true);
+    window.addEventListener(CHANGE_EVENT, read);
+    window.addEventListener("storage", read);
+    window.addEventListener("popstate", read);
+    return () => {
+      window.removeEventListener(CHANGE_EVENT, read);
+      window.removeEventListener("storage", read);
+      window.removeEventListener("popstate", read);
+    };
+  }, [param, storageKey]);
+  const location2 = react.useMemo(() => raw ? locations.find((l) => l.id === raw) ?? null : null, [raw, locations]);
+  const id = location2?.id ?? null;
+  react.useEffect(() => {
+    if (!ready || !raw || !locations.length) return;
+    try {
+      if (location2) storage()?.setItem(storageKey, raw);
+      else storage()?.removeItem(storageKey);
+    } catch {
+    }
+  }, [ready, raw, locations, location2, storageKey]);
+  const write = react.useCallback(
+    (next) => {
+      try {
+        if (next) storage()?.setItem(storageKey, next);
+        else storage()?.removeItem(storageKey);
+      } catch {
+      }
+      if (syncUrl && typeof history !== "undefined") {
+        const url = new URL(window.location.href);
+        if (next) url.searchParams.set(param, next);
+        else url.searchParams.delete(param);
+        history.replaceState(history.state, "", url);
+      }
+      setRaw(next);
+      window.dispatchEvent(new Event(CHANGE_EVENT));
+    },
+    [param, storageKey, syncUrl]
+  );
+  const select = react.useCallback((next) => write(next), [write]);
+  const clear = react.useCallback(() => write(null), [write]);
+  return { id, location: location2, ready, select, clear };
+}
+var EMPTY3 = [];
+function useLocationsOrShop(locations) {
+  const sf = useOptionalStorefront();
+  return locations ?? (sf?.shop?.branches ?? EMPTY3);
+}
+function LocationList({ locations, selectedId, children, ...rest }) {
+  const list = useLocationsOrShop(locations);
+  if (!list.length) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { ...rest, children: list.map((loc, index) => {
+    const selected = loc.id === selectedId;
+    return /* @__PURE__ */ jsxRuntime.jsx("li", { "data-selected": selected || void 0, "aria-current": selected || void 0, children: children ? children(loc, { index, selected }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: loc.name }),
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: loc.address })
+    ] }) }, loc.id);
+  }) });
+}
+function LocationPicker({
+  legend,
+  locations,
+  value,
+  defaultValue = null,
+  onChange,
+  name = SELECTED_LOCATION_PARAM,
+  children,
+  ...rest
+}) {
+  const list = useLocationsOrShop(locations);
+  const [inner, setInner] = react.useState(defaultValue);
+  if (!list.length) return null;
+  const current = value !== void 0 ? value : inner;
+  return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("legend", { children: legend }),
+    list.map((loc) => {
+      const checked = loc.id === current;
+      return /* @__PURE__ */ jsxRuntime.jsxs("label", { "data-checked": checked || void 0, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "radio",
+            name,
+            value: loc.id,
+            checked,
+            onChange: () => {
+              if (value === void 0) setInner(loc.id);
+              onChange?.(loc.id, loc);
+            }
+          }
+        ),
+        " ",
+        children ? children(loc, { checked }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: loc.name }),
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: loc.address })
+        ] })
+      ] }, loc.id);
+    })
+  ] });
+}
+var DEFAULT_TZ = "America/Mexico_City";
+function OpenStatus({ location: location2, hours, timezone, now, labels, children, ...rest }) {
+  const h = hours ?? location2?.opening_hours;
+  const tz = timezone ?? location2?.timezone ?? DEFAULT_TZ;
+  const [tick, setTick] = react.useState(null);
+  react.useEffect(() => {
+    if (now) return;
+    setTick(/* @__PURE__ */ new Date());
+    const t = setInterval(() => setTick(/* @__PURE__ */ new Date()), 6e4);
+    return () => clearInterval(t);
+  }, [now]);
+  const at = now ?? tick;
+  if (!h || !at) return null;
+  let status;
+  try {
+    status = geo.openStatus(h, tz, at);
+  } catch {
+    return null;
+  }
+  const text = { open: "Abierto", closed: "Cerrado", ...labels };
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { "data-state": status.open ? "open" : "closed", ...rest, children: children ? children(status) : status.open ? text.open : text.closed });
+}
+function DirectionsLink({ location: location2, provider, children = "C\xF3mo llegar", ...rest }) {
+  const href = geo.directionsUrl(location2, provider ? { provider } : {});
+  if (!href) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("a", { target: "_blank", rel: "noopener noreferrer", ...rest, href, children });
+}
+var readyText = (days) => days <= 0 ? "listo hoy" : days === 1 ? "listo en 1 d\xEDa" : `listo en ${days} d\xEDas`;
+function PickupOption({ location: location2, locale, children, ...rest }) {
+  const sf = useOptionalStorefront();
+  const p = location2.pickup;
+  if (!p?.enabled) return null;
+  const free = !p.fee || Number(p.fee.amount) === 0;
+  const feeText = free ? null : storefront.formatMoney(p.fee, locale ?? sf?.locale);
+  const info = { location: location2, fee: free ? null : p.fee, free, feeText, prepDays: p.prep_days };
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...rest, children: children ? children(info) : `Recoge en sucursal \xB7 ${free ? "gratis" : feeText} \xB7 ${readyText(p.prep_days)}` });
+}
+function NearestLocationForm({
+  locations,
+  action,
+  name = "cp",
+  defaultValue,
+  onSubmitPostalCode,
+  onLocate,
+  labels,
+  children,
+  ...rest
+}) {
+  const list = useLocationsOrShop(locations);
+  const id = react.useId();
+  const geo = useGeolocation();
+  if (!list.length) return null;
+  const text = { postalCode: "C\xF3digo postal", submit: "Buscar sucursales", locate: "Usar mi ubicaci\xF3n", locating: "Buscando\u2026", ...labels };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "form",
+    {
+      method: "get",
+      ...action !== void 0 ? { action } : {},
+      ...rest,
+      onSubmit: onSubmitPostalCode ? (e) => {
+        e.preventDefault();
+        const value = new FormData(e.currentTarget).get(name);
+        onSubmitPostalCode(typeof value === "string" ? value.trim() : "", e);
+      } : void 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, children: text.postalCode }),
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            id,
+            name,
+            type: "text",
+            inputMode: "numeric",
+            autoComplete: "postal-code",
+            pattern: "[0-9]{5}",
+            maxLength: 5,
+            required: true,
+            ...defaultValue !== void 0 ? { defaultValue } : {}
+          }
+        ),
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", children: text.submit }),
+        onLocate && geo.supported && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            disabled: geo.status === "locating",
+            onClick: () => void geo.request().then((p) => p && onLocate(p)),
+            children: geo.status === "locating" ? text.locating : text.locate
+          }
+        ),
+        geo.error && /* @__PURE__ */ jsxRuntime.jsx("span", { role: "alert", children: geo.error.message }),
+        children
+      ]
+    }
+  );
+}
 
 exports.AddToCartButton = AddToCartButton;
 exports.CART_COOKIE_NAME = CART_COOKIE_NAME;
 exports.CartProvider = CartProvider;
 exports.DEFAULT_IMAGE_WIDTHS = DEFAULT_IMAGE_WIDTHS;
+exports.DirectionsLink = DirectionsLink;
 exports.Image = Image;
 exports.JsonLd = JsonLd;
+exports.LocationList = LocationList;
+exports.LocationPicker = LocationPicker;
 exports.Money = Money;
+exports.NearestLocationForm = NearestLocationForm;
+exports.OpenStatus = OpenStatus;
+exports.PickupOption = PickupOption;
 exports.ProductPrice = ProductPrice;
+exports.SELECTED_LOCATION_PARAM = SELECTED_LOCATION_PARAM;
+exports.SELECTED_LOCATION_STORAGE_KEY = SELECTED_LOCATION_STORAGE_KEY;
 exports.SectionRegistry = SectionRegistry;
 exports.Sections = Sections;
 exports.StorefrontProvider = StorefrontProvider;
@@ -1006,11 +1369,13 @@ exports.faqJsonLd = faqJsonLd;
 exports.getCartIdFromCookie = getCartIdFromCookie;
 exports.isSafeCssValue = isSafeCssValue;
 exports.localBusinessJsonLd = localBusinessJsonLd;
+exports.openingHoursJsonLd = openingHoursJsonLd;
 exports.optimisticCart = optimisticCart;
 exports.organizationJsonLd = organizationJsonLd;
 exports.productJsonLd = productJsonLd;
 exports.productMeta = productMeta;
 exports.readCartCookie = readCartCookie;
+exports.readSelectedLocationId = readSelectedLocationId;
 exports.resolveSectionProps = resolveSectionProps;
 exports.sectionJsonSchema = sectionJsonSchema;
 exports.seoMeta = seoMeta;
@@ -1022,9 +1387,12 @@ exports.themeToCssVariables = themeToCssVariables;
 exports.toMerchandise = toMerchandise;
 exports.tokenName = tokenName;
 exports.useCart = useCart;
+exports.useGeolocation = useGeolocation;
+exports.useNearestLocations = useNearestLocations;
 exports.useOptionalCart = useOptionalCart;
 exports.useOptionalStorefront = useOptionalStorefront;
 exports.useProductOptions = useProductOptions;
+exports.useSelectedLocation = useSelectedLocation;
 exports.useStorefront = useStorefront;
 exports.useStorefrontClient = useStorefrontClient;
 exports.writeCartCookie = writeCartCookie;