@asteby/storefront-react 0.1.1 → 0.2.0

package/dist/index.js

@@ -1,6 +1,7 @@
-import { createContext, useMemo, useContext, useRef, useState, useCallback, useEffect, createElement, Fragment as Fragment$1 } from 'react';
+import { createContext, useMemo, useContext, useRef, useState, useCallback, useEffect, createElement, Fragment as Fragment$1, useId } from 'react';
 import { createStorefrontClient, formatMoney, parseMoney, isStorefrontError } from '@asteby/storefront';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { toSchemaOpeningHours, isValidPoint, rankByDistance, openStatus, directionsUrl } from '@asteby/storefront/geo';
 
 // src/context.tsx
 var StorefrontContext = createContext(null);
@@ -550,8 +551,6 @@ function AddToCartButton({
     }
   );
 }
-
-// src/seo.ts
 var clean = (s, max) => {
   if (!s) return void 0;
   const text = s.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim();
@@ -685,6 +684,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 ? 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(
@@ -698,8 +707,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: 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 }
     })
   );
@@ -768,7 +777,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);
     };
@@ -779,37 +788,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 = [];
@@ -980,7 +989,353 @@ function ThemeStyle({ theme, nonce, id = "storefront-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).",
+  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] = useState(false);
+  const [permission, setPermission] = useState("unknown");
+  const [status, setStatus] = useState("idle");
+  const [position, setPosition] = useState(null);
+  const [error, setError] = useState(null);
+  const alive = useRef(true);
+  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 = 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 = 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 = 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 = useMemo(() => {
+    if (mode !== "local" || !hasOrigin) return [];
+    return 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] = useState(null);
+  const key = mode === "remote" ? cp ? `cp:${cp}` : `ll:${lat},${lng}` : "";
+  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 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] = useState(initialId);
+  const [ready, setReady] = useState(false);
+  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 = useMemo(() => raw ? locations.find((l) => l.id === raw) ?? null : null, [raw, locations]);
+  const id = location2?.id ?? null;
+  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 = 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 = useCallback((next) => write(next), [write]);
+  const clear = 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__ */ jsx("ul", { ...rest, children: list.map((loc, index) => {
+    const selected = loc.id === selectedId;
+    return /* @__PURE__ */ jsx("li", { "data-selected": selected || void 0, "aria-current": selected || void 0, children: children ? children(loc, { index, selected }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { children: loc.name }),
+      " ",
+      /* @__PURE__ */ 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] = useState(defaultValue);
+  if (!list.length) return null;
+  const current = value !== void 0 ? value : inner;
+  return /* @__PURE__ */ jsxs("fieldset", { ...rest, children: [
+    /* @__PURE__ */ jsx("legend", { children: legend }),
+    list.map((loc) => {
+      const checked = loc.id === current;
+      return /* @__PURE__ */ jsxs("label", { "data-checked": checked || void 0, children: [
+        /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { children: loc.name }),
+          " ",
+          /* @__PURE__ */ 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] = useState(null);
+  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 = openStatus(h, tz, at);
+  } catch {
+    return null;
+  }
+  const text = { open: "Abierto", closed: "Cerrado", ...labels };
+  return /* @__PURE__ */ 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 = directionsUrl(location2, provider ? { provider } : {});
+  if (!href) return null;
+  return /* @__PURE__ */ 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 : formatMoney(p.fee, locale ?? sf?.locale);
+  const info = { location: location2, fee: free ? null : p.fee, free, feeText, prepDays: p.prep_days };
+  return /* @__PURE__ */ 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 = 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__ */ 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__ */ jsx("label", { htmlFor: id, children: text.postalCode }),
+        " ",
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id,
+            name,
+            type: "text",
+            inputMode: "numeric",
+            autoComplete: "postal-code",
+            pattern: "[0-9]{5}",
+            maxLength: 5,
+            required: true,
+            ...defaultValue !== void 0 ? { defaultValue } : {}
+          }
+        ),
+        " ",
+        /* @__PURE__ */ jsx("button", { type: "submit", children: text.submit }),
+        onLocate && geo.supported && /* @__PURE__ */ 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__ */ jsx("span", { role: "alert", children: geo.error.message }),
+        children
+      ]
+    }
+  );
+}
 
-export { AddToCartButton, CART_COOKIE_NAME, CartProvider, DEFAULT_IMAGE_WIDTHS, Image, JsonLd, Money, ProductPrice, SectionRegistry, Sections, StorefrontProvider, ThemeStyle, VariantSelector, breadcrumbJsonLd, collectionJsonLd, collectionMeta, createSectionRegistry, defaultImageLoader, defineSection, faqJsonLd, getCartIdFromCookie, isSafeCssValue, localBusinessJsonLd, optimisticCart, organizationJsonLd, productJsonLd, productMeta, readCartCookie, resolveSectionProps, sectionJsonSchema, seoMeta, serializeCartCookie, serializeJsonLd, themeFontsHref, themeToCss, themeToCssVariables, toMerchandise, tokenName, useCart, useOptionalCart, useOptionalStorefront, useProductOptions, useStorefront, useStorefrontClient, writeCartCookie };
+export { AddToCartButton, CART_COOKIE_NAME, CartProvider, DEFAULT_IMAGE_WIDTHS, DirectionsLink, Image, JsonLd, LocationList, LocationPicker, Money, NearestLocationForm, OpenStatus, PickupOption, ProductPrice, SELECTED_LOCATION_PARAM, SELECTED_LOCATION_STORAGE_KEY, SectionRegistry, Sections, StorefrontProvider, ThemeStyle, VariantSelector, breadcrumbJsonLd, collectionJsonLd, collectionMeta, createSectionRegistry, defaultImageLoader, 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, useOptionalStorefront, useProductOptions, useSelectedLocation, useStorefront, useStorefrontClient, writeCartCookie };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map