@ecomiq/storefront 2.1.4 → 3.0.1

package/dist/catalog-hooks-B7ZP4wYY.js

@@ -0,0 +1,312 @@
+import { useStorefrontText } from "./storefront-language-DrMjVbmk.js";
+import { useFetcher, useLocation, useNavigation, useSearchParams, useSubmit } from "react-router";
+import { useEffect, useRef, useState } from "react";
+// src/catalog-hooks.ts
+const SEARCH_DELAY_MS = 180;
+const SEARCH_MIN_LENGTH = 2;
+const RELEVANCE = "relevance";
+const SORT_OPTIONS = [
+	{
+		value: RELEVANCE,
+		label: "Relevancia"
+	},
+	{
+		value: "newest",
+		label: "Más nuevos"
+	},
+	{
+		value: "price_asc",
+		label: "Precio: menor a mayor"
+	},
+	{
+		value: "price_desc",
+		label: "Precio: mayor a menor"
+	},
+	{
+		value: "name_asc",
+		label: "Nombre: A–Z"
+	}
+];
+const FILTER_LABELS = /* @__PURE__ */ new Map([
+	["availability", "Disponibilidad"],
+	["price", "Precio"],
+	["category", "Categoría"],
+	["brand", "Marca"],
+	["collection", "Colección"],
+	["productType", "Tipo"],
+	["tag", "Etiqueta"],
+	["seller", "Vendedor"]
+]);
+const FILTER_VALUE_LABELS = /* @__PURE__ */ new Map([
+	["in_stock", "Disponible"],
+	["out_of_stock", "Agotado"],
+	["product", "Producto"],
+	["bundle", "Pack"],
+	["service", "Servicio"],
+	["digital", "Digital"],
+	["gift_card", "Tarjeta de regalo"]
+]);
+function filterLabel(filter, labels, translate = (source) => source) {
+	const label = labels?.filters?.get(filter.id) ?? FILTER_LABELS.get(filter.id);
+	return label === void 0 ? filter.label : translate(label);
+}
+function filterValueLabel(value, label, labels, translate = (source) => source) {
+	const known = labels?.values?.get(value) ?? FILTER_VALUE_LABELS.get(value);
+	return known === void 0 ? label ?? value : translate(known);
+}
+function isSingleChoiceFilter(filter) {
+	return filter.id === "availability" || filter.id.startsWith("option:");
+}
+function selectedFacetCount(filters) {
+	return filters.reduce((sum, filter) => sum + filter.values.filter((value) => value.selected).length, 0);
+}
+function activeFilterCount(filters, params) {
+	let count = selectedFacetCount(filters);
+	if (params.get("minPrice")) count += 1;
+	if (params.get("maxPrice")) count += 1;
+	return count;
+}
+function clearedFiltersHref(params) {
+	const next = new URLSearchParams();
+	for (const name of ["q", "sort"]) {
+		const current = params.get(name);
+		if (current) next.set(name, current);
+	}
+	return `?${next.toString()}`;
+}
+function activeFilterChips(filters, params, text = {}) {
+	const chips = [];
+	for (const filter of filters) for (const facet of filter.values) if (facet.selected) chips.push({
+		key: filter.id,
+		value: facet.value,
+		text: `${filterLabel(filter, text.labels, text.translate)}: ${filterValueLabel(facet.value, facet.label, text.labels, text.translate)}`
+	});
+	const minPrice = params.get("minPrice");
+	const maxPrice = params.get("maxPrice");
+	const price = text.price ?? ((amount) => amount);
+	if (minPrice) chips.push({
+		key: "minPrice",
+		value: minPrice,
+		text: text.translate?.("Desde {value0}", { value0: price(minPrice) }) ?? `Desde ${price(minPrice)}`
+	});
+	if (maxPrice) chips.push({
+		key: "maxPrice",
+		value: maxPrice,
+		text: text.translate?.("Hasta {value0}", { value0: price(maxPrice) }) ?? `Hasta ${price(maxPrice)}`
+	});
+	return chips.map((chip) => {
+		const next = new URLSearchParams();
+		for (const [name, current] of params.entries()) if (name !== "page" && !(name === chip.key && current === chip.value)) next.append(name, current);
+		return {
+			...chip,
+			href: `?${next.toString()}`
+		};
+	});
+}
+function pageItems(page, pages) {
+	const wanted = /* @__PURE__ */ new Set([
+		1,
+		pages,
+		page - 1,
+		page,
+		page + 1
+	]);
+	const items = [];
+	for (let current = 1; current <= pages; current += 1) {
+		if (!wanted.has(current)) continue;
+		const previous = items[items.length - 1];
+		if (typeof previous === "number" && current - previous > 1) items.push("gap");
+		items.push(current);
+	}
+	return items;
+}
+function useCatalogNavigation() {
+	const [params] = useSearchParams();
+	const location = useLocation();
+	const navigation = useNavigation();
+	const submit = useSubmit();
+	const pending = useRef(null);
+	useEffect(() => {
+		if (navigation.state === "idle") pending.current = null;
+	}, [location.key, navigation.state]);
+	const navigate = (change) => {
+		const sameCatalog = navigation.location?.pathname === location.pathname;
+		const previous = pending.current;
+		const intended = previous?.locationKey === location.key && previous.navigationKey === navigation.location?.key ? previous.params : new URLSearchParams(sameCatalog ? navigation.location.search : params);
+		const next = new URLSearchParams(intended);
+		next.delete("page");
+		change(next);
+		if (next.toString() === intended.toString()) return;
+		pending.current = {
+			locationKey: location.key,
+			navigationKey: navigation.location?.key,
+			params: next
+		};
+		submit(next, {
+			method: "get",
+			preventScrollReset: true
+		});
+	};
+	return {
+		params,
+		navigate
+	};
+}
+function useFacets() {
+	const { params, navigate } = useCatalogNavigation();
+	const toggle = (filterId, value, checked) => navigate((next) => {
+		const kept = next.getAll(filterId).filter((current) => current !== value);
+		next.delete(filterId);
+		for (const current of kept) next.append(filterId, current);
+		if (checked) next.append(filterId, value);
+	});
+	const choose = (filterId, value) => navigate((next) => {
+		next.delete(filterId);
+		if (value) next.set(filterId, value);
+	});
+	const setPrice = (from, to, low, high) => navigate((next) => {
+		if (from !== void 0 && from > low) next.set("minPrice", String(from));
+		else next.delete("minPrice");
+		if (to !== void 0 && to < high) next.set("maxPrice", String(to));
+		else next.delete("maxPrice");
+	});
+	return {
+		params,
+		navigate,
+		toggle,
+		choose,
+		setPrice,
+		clearedHref: clearedFiltersHref(params)
+	};
+}
+function useSort(labels = {}) {
+	const t = useStorefrontText();
+	const { params, navigate } = useCatalogNavigation();
+	const value = params.get("sort") ?? RELEVANCE;
+	const change = (next) => navigate((query) => {
+		if (next === RELEVANCE) query.delete("sort");
+		else query.set("sort", next);
+	});
+	const options = SORT_OPTIONS.map((option) => ({
+		value: option.value,
+		label: t(labels[option.value] ?? option.label)
+	}));
+	return {
+		value,
+		label: (options.find((option) => option.value === value) ?? options[0]).label,
+		options,
+		change
+	};
+}
+function usePagination(page, pages) {
+	const [params] = useSearchParams();
+	const href = (target) => {
+		const next = new URLSearchParams(params);
+		next.set("page", String(target));
+		return `?${next.toString()}`;
+	};
+	return {
+		items: pageItems(page, pages),
+		href,
+		hasPrevious: page > 1,
+		hasNext: page < pages
+	};
+}
+function useSearchSuggestions(initial = "") {
+	const [q, setQ] = useState(initial);
+	const fetcher = useFetcher();
+	const trimmed = q.trim();
+	const searching = trimmed.length >= SEARCH_MIN_LENGTH;
+	useEffect(() => {
+		if (!searching) return;
+		const timer = setTimeout(() => fetcher.load(`/search/suggest?q=${encodeURIComponent(trimmed)}`), SEARCH_DELAY_MS);
+		return () => clearTimeout(timer);
+	}, [trimmed]);
+	let products = [];
+	if (searching) products = fetcher.data?.products ?? [];
+	const missing = searching && fetcher.state === "idle" && fetcher.data !== void 0 && products.length === 0;
+	return {
+		q,
+		setQ,
+		trimmed,
+		searching,
+		products,
+		missing,
+		loading: fetcher.state !== "idle",
+		loaded: fetcher.data !== void 0,
+		current: fetcher.data?.q === trimmed
+	};
+}
+function matchPlace(items, name) {
+	const wanted = name?.trim().toLowerCase();
+	if (!wanted) return null;
+	return items.find((item) => item.name.toLowerCase() === wanted) ?? null;
+}
+function placeValue(place) {
+	return place ? `${place.code}|${place.name}` : "";
+}
+function placeByValue(items, value) {
+	return items.find((item) => placeValue(item) === value) ?? null;
+}
+function useGeoCascade(defaults) {
+	const [country, setCountryState] = useState(defaults.country ?? "");
+	const [department, setDepartmentState] = useState(null);
+	const [province, setProvinceState] = useState(null);
+	const [district, setDistrict] = useState(null);
+	const geo = useFetcher();
+	useEffect(() => {
+		const query = new URLSearchParams({ country });
+		if (department) query.set("department", department.code);
+		if (province) query.set("province", province.code);
+		geo.load(`/geo?${query.toString()}`);
+	}, [
+		country,
+		department?.code,
+		province?.code
+	]);
+	const data = geo.data ?? {
+		departments: [],
+		provinces: [],
+		districts: []
+	};
+	useEffect(() => {
+		if (department === null) setDepartmentState(matchPlace(data.departments, defaults.department));
+	}, [data.departments]);
+	useEffect(() => {
+		if (province === null) setProvinceState(matchPlace(data.provinces, defaults.province));
+	}, [data.provinces]);
+	useEffect(() => {
+		if (district === null) setDistrict(matchPlace(data.districts, defaults.district));
+	}, [data.districts]);
+	const setCountry = (next) => {
+		setCountryState(next);
+		setDepartmentState(null);
+		setProvinceState(null);
+		setDistrict(null);
+	};
+	const setDepartment = (next) => {
+		setDepartmentState(next);
+		setProvinceState(null);
+		setDistrict(null);
+	};
+	const setProvince = (next) => {
+		setProvinceState(next);
+		setDistrict(null);
+	};
+	return {
+		country,
+		setCountry,
+		department,
+		setDepartment,
+		province,
+		setProvince,
+		district,
+		setDistrict,
+		setDepartmentValue: (value) => setDepartment(placeByValue(data.departments, value)),
+		setProvinceValue: (value) => setProvince(placeByValue(data.provinces, value)),
+		setDistrictValue: (value) => setDistrict(placeByValue(data.districts, value)),
+		places: data,
+		structured: data.departments.length > 0
+	};
+}
+export { SORT_OPTIONS, activeFilterChips, activeFilterCount, clearedFiltersHref, filterLabel, filterValueLabel, isSingleChoiceFilter, pageItems, placeValue, selectedFacetCount, useFacets, useGeoCascade, usePagination, useSearchSuggestions, useSort };

package/dist/catalog-hooks.d.ts

@@ -0,0 +1,111 @@
+import { GeoPlace } from "./public-pages.js";
+import { SearchFilter } from "@ecomiq/core";
+export declare const SORT_OPTIONS: readonly [{
+  readonly value: "relevance";
+  readonly label: "Relevancia";
+}, {
+  readonly value: "newest";
+  readonly label: "Más nuevos";
+}, {
+  readonly value: "price_asc";
+  readonly label: "Precio: menor a mayor";
+}, {
+  readonly value: "price_desc";
+  readonly label: "Precio: mayor a menor";
+}, {
+  readonly value: "name_asc";
+  readonly label: "Nombre: A–Z";
+}];
+export type PageItem = number | "gap";
+export type SortValue = (typeof SORT_OPTIONS)[number]["value"];
+export type SortLabels = Partial<Record<SortValue, string>>;
+export type FilterLabels = {
+  filters?: Map<string, string>;
+  values?: Map<string, string>;
+};
+type FilterTranslate = (source: string, values?: Readonly<Record<string, string>>) => string;
+export type FilterChipText = {
+  labels?: FilterLabels;
+  price?: (amount: string) => string;
+  translate?: FilterTranslate;
+};
+export declare function filterLabel(filter: SearchFilter, labels?: FilterLabels, translate?: FilterTranslate): string;
+export declare function filterValueLabel(value: string, label: string | null | undefined, labels?: FilterLabels, translate?: FilterTranslate): string;
+export declare function isSingleChoiceFilter(filter: SearchFilter): boolean;
+export declare function selectedFacetCount(filters: SearchFilter[]): number;
+export declare function activeFilterCount(filters: SearchFilter[], params: URLSearchParams): number;
+export declare function clearedFiltersHref(params: URLSearchParams): string;
+export type ActiveFilterChip = {
+  key: string;
+  value: string;
+  text: string;
+  href: string;
+};
+export declare function activeFilterChips(filters: SearchFilter[], params: URLSearchParams, text?: FilterChipText): ActiveFilterChip[];
+export declare function pageItems(page: number, pages: number): PageItem[];
+export declare function useFacets(): {
+  params: URLSearchParams;
+  navigate: (change: (next: URLSearchParams) => void) => void;
+  toggle: (filterId: string, value: string, checked: boolean) => void;
+  choose: (filterId: string, value: string) => void;
+  setPrice: (from: number | undefined, to: number | undefined, low: number, high: number) => void;
+  clearedHref: string;
+};
+export declare function useSort(labels?: SortLabels): {
+  value: string;
+  label: string;
+  options: {
+    value: "name_asc" | "newest" | "price_asc" | "price_desc" | "relevance";
+    label: string;
+  }[];
+  change: (next: string) => void;
+};
+export declare function usePagination(page: number, pages: number): {
+  items: PageItem[];
+  href: (target: number) => string;
+  hasPrevious: boolean;
+  hasNext: boolean;
+};
+export declare function useSearchSuggestions(initial?: string): {
+  q: string;
+  setQ: import("react").Dispatch<import("react").SetStateAction<string>>;
+  trimmed: string;
+  searching: boolean;
+  products: never[] | {
+    id: string;
+    name: string;
+    slug: string;
+    url: string;
+    imageUrl: string;
+  }[];
+  missing: boolean;
+  loading: boolean;
+  loaded: boolean;
+  current: boolean;
+};
+export declare function placeValue(place: GeoPlace | null): string;
+export declare function useGeoCascade(defaults: {
+  country?: string | null;
+  department?: string | null;
+  province?: string | null;
+  district?: string | null;
+}): {
+  country: string;
+  setCountry: (next: string) => void;
+  department: GeoPlace | null;
+  setDepartment: (next: GeoPlace | null) => void;
+  province: GeoPlace | null;
+  setProvince: (next: GeoPlace | null) => void;
+  district: GeoPlace | null;
+  setDistrict: import("react").Dispatch<import("react").SetStateAction<GeoPlace | null>>;
+  setDepartmentValue: (value: string) => void;
+  setProvinceValue: (value: string) => void;
+  setDistrictValue: (value: string) => void;
+  places: {
+    departments: GeoPlace[];
+    provinces: GeoPlace[];
+    districts: GeoPlace[];
+  };
+  structured: boolean;
+};
+export {};

package/dist/catalog.d.ts

@@ -0,0 +1,5 @@
+import { ShouldRevalidateFunctionArgs } from "react-router";
+import { ProductsParamsInput } from "@ecomiq/core";
+/** Menus, customer and cart data do not depend on filters in the current catalog. */
+export declare function shouldRevalidateCatalogRoot(args: ShouldRevalidateFunctionArgs): boolean;
+export declare function readCatalog(url: URL, base?: ProductsParamsInput): ProductsParamsInput;