@ecomiq/storefront 2.1.3 → 3.0.0

package/dist/cart-form-y9P1r_EX.js

@@ -0,0 +1,81 @@
+import { CustomerCsrfField, useCustomerCsrfToken } from "./customer-csrf-C1oDX-Py.js";
+import { CUSTOMER_CSRF_FIELD } from "./form-contracts-BNpHaTGJ.js";
+import { Form, useFetcher } from "react-router";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/cart-form.tsx
+const CART_ACTION = "/cart";
+function Hidden({ name, value }) {
+	if (value === void 0) return null;
+	return /* @__PURE__ */ jsx("input", {
+		type: "hidden",
+		name,
+		value
+	});
+}
+function CartForm({ intent, itemId, variantId, product, quantity, next, fetcher, children, ...props }) {
+	const Component = fetcher ? fetcher.Form : Form;
+	return /* @__PURE__ */ jsxs(Component, {
+		method: "post",
+		action: CART_ACTION,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(CustomerCsrfField, {}),
+			/* @__PURE__ */ jsx(Hidden, {
+				name: "intent",
+				value: intent
+			}),
+			/* @__PURE__ */ jsx(Hidden, {
+				name: "itemId",
+				value: itemId
+			}),
+			/* @__PURE__ */ jsx(Hidden, {
+				name: "variantId",
+				value: variantId
+			}),
+			/* @__PURE__ */ jsx(Hidden, {
+				name: "product",
+				value: product
+			}),
+			/* @__PURE__ */ jsx(Hidden, {
+				name: "quantity",
+				value: quantity
+			}),
+			/* @__PURE__ */ jsx(Hidden, {
+				name: "next",
+				value: next
+			}),
+			children
+		]
+	});
+}
+function useCart() {
+	const fetcher = useFetcher();
+	const csrf = useCustomerCsrfToken();
+	function submit(intent, fields) {
+		const form = new FormData();
+		form.set("intent", intent);
+		for (const [name, value] of Object.entries(fields)) form.set(name, value);
+		if (csrf) form.set(CUSTOMER_CSRF_FIELD, csrf);
+		fetcher.submit(form, {
+			method: "post",
+			action: CART_ACTION
+		});
+	}
+	let error = null;
+	if (fetcher.state === "idle" && fetcher.data?.ok === false) error = fetcher.data.message;
+	return {
+		fetcher,
+		busy: fetcher.state !== "idle",
+		error,
+		add: (variantId, quantity = 1) => submit("add", {
+			variantId,
+			quantity: String(Math.max(1, quantity))
+		}),
+		update: (itemId, quantity) => submit("update", {
+			itemId,
+			quantity: String(Math.max(0, quantity))
+		}),
+		remove: (itemId) => submit("remove", { itemId })
+	};
+}
+export { CART_ACTION, CartForm, useCart };

package/dist/cart-form.d.ts

@@ -0,0 +1,24 @@
+import { CartActionData } from "./cart-actions.js";
+import { CartIntent } from "./form-contracts.js";
+import { FetcherFormProps, FetcherWithComponents } from "react-router";
+import { Ref } from "react";
+export type CartFormProps = Omit<FetcherFormProps, "action" | "method" | "encType"> & {
+  ref?: Ref<HTMLFormElement>;
+  intent?: CartIntent;
+  itemId?: string;
+  variantId?: string;
+  product?: string;
+  quantity?: number;
+  next?: string;
+  fetcher?: FetcherWithComponents<CartActionData>;
+};
+export type CartControls = {
+  fetcher: FetcherWithComponents<CartActionData>;
+  busy: boolean;
+  error: string | null;
+  add: (variantId: string, quantity?: number) => void;
+  update: (itemId: string, quantity: number) => void;
+  remove: (itemId: string) => void;
+};
+export declare function CartForm({ intent, itemId, variantId, product, quantity, next, fetcher, children, ...props }: CartFormProps): import("react").JSX.Element;
+export declare function useCart(): CartControls;

package/dist/cart-summary-ur2VWKr-.js

@@ -0,0 +1,89 @@
+// src/cart-summary.ts
+const LABELS = {
+	subtotal: "Subtotal",
+	discount: "Descuentos",
+	shipping: "Envío",
+	tax: "Impuestos",
+	total: "Total",
+	free: "Gratis",
+	pending: "Por calcular"
+};
+function lineSubtotal(items) {
+	return items.reduce((sum, item) => sum + item.unitPrice * item.quantity, 0);
+}
+function groupBySeller(items, marketplace) {
+	if (!marketplace) return [{
+		seller: null,
+		items: [...items],
+		subtotal: lineSubtotal(items)
+	}];
+	const groups = /* @__PURE__ */ new Map();
+	for (const item of items) groups.set(item.sellerName, [...groups.get(item.sellerName) ?? [], item]);
+	return [...groups.entries()].map(([seller, list]) => ({
+		seller,
+		items: list,
+		subtotal: lineSubtotal(list)
+	}));
+}
+function amountLine(key, label, amount) {
+	return {
+		key,
+		label,
+		amount,
+		text: null,
+		pending: false
+	};
+}
+function lines(totals, shipping, labels) {
+	const result = [amountLine("subtotal", labels.subtotal, totals.subtotal)];
+	if (totals.discount > 0) result.push(amountLine("discount", labels.discount, -totals.discount));
+	if (shipping) result.push(shipping);
+	if (totals.tax > 0) result.push(amountLine("tax", labels.tax, totals.tax));
+	result.push(amountLine("total", labels.total, totals.total));
+	return result;
+}
+function shippingLine(amount, labels) {
+	if (amount === null) return {
+		key: "shipping",
+		label: labels.shipping,
+		amount: null,
+		text: labels.pending,
+		pending: true
+	};
+	if (amount === 0) return {
+		key: "shipping",
+		label: labels.shipping,
+		amount: null,
+		text: labels.free,
+		pending: false
+	};
+	return amountLine("shipping", labels.shipping, amount);
+}
+function summaryLines(cart, labels = {}) {
+	const text = {
+		...LABELS,
+		...labels
+	};
+	let shipping = null;
+	if (cart.items.some((item) => item.requiresShipping)) shipping = shippingLine(cart.shippingMethods.length > 0 ? cart.totals.shippingTotal : null, text);
+	const { subtotal, discountTotal, taxTotal, total } = cart.totals;
+	return lines({
+		subtotal,
+		discount: discountTotal,
+		tax: taxTotal,
+		total
+	}, shipping, text);
+}
+function orderSummaryLines(order, labels = {}) {
+	const text = {
+		...LABELS,
+		...labels
+	};
+	return lines({
+		subtotal: order.subTotal,
+		discount: order.discount,
+		tax: order.tax,
+		total: order.total
+	}, shippingLine(order.shipping, text), text);
+}
+export { groupBySeller, orderSummaryLines, summaryLines };

package/dist/cart-summary.d.ts

@@ -0,0 +1,31 @@
+import { StorefrontCart } from "@ecomiq/core";
+export type SellerLine = {
+  sellerName: string | null;
+  unitPrice: number;
+  quantity: number;
+};
+export type SellerGroup<T extends SellerLine> = {
+  seller: string | null;
+  items: T[];
+  subtotal: number;
+};
+export type SummaryLineKey = "subtotal" | "discount" | "shipping" | "tax" | "total";
+export type SummaryLine = {
+  key: SummaryLineKey;
+  label: string;
+  amount: number | null;
+  text: string | null;
+  pending: boolean;
+};
+export type SummaryLabels = Partial<Record<SummaryLineKey | "free" | "pending", string>>;
+export type SummaryCart = Pick<StorefrontCart, "items" | "totals" | "shippingMethods">;
+export type SummaryOrder = {
+  subTotal: number;
+  discount: number;
+  shipping: number;
+  tax: number;
+  total: number;
+};
+export declare function groupBySeller<T extends SellerLine>(items: readonly T[], marketplace: boolean): SellerGroup<T>[];
+export declare function summaryLines(cart: SummaryCart, labels?: SummaryLabels): SummaryLine[];
+export declare function orderSummaryLines(order: SummaryOrder, labels?: SummaryLabels): SummaryLine[];

package/dist/cart.d.ts

@@ -0,0 +1,4 @@
+import { StorefrontCart, StorefrontClient } from "@ecomiq/core";
+export declare const cartCookie: import("react-router").Cookie;
+export declare function cartToken(request: Request): Promise<string | null>;
+export declare function readCart(request: Request, client: StorefrontClient): Promise<StorefrontCart | null>;

package/dist/catalog-7gJ-l5hW.js

@@ -0,0 +1,67 @@
+// src/catalog.ts
+const LISTS = {
+	category: "categories",
+	brand: "brands",
+	collection: "collections",
+	productType: "productTypes",
+	tag: "tags",
+	seller: "sellers"
+};
+const SORTS = [
+	"newest",
+	"price_asc",
+	"price_desc",
+	"name_asc",
+	"name_desc"
+];
+const CATALOG_PARAMETERS = /* @__PURE__ */ new Set([
+	"q",
+	"sort",
+	"page",
+	"availability",
+	"minPrice",
+	"maxPrice",
+	...Object.keys(LISTS)
+]);
+/** Menus, customer and cart data do not depend on filters in the current catalog. */
+function shouldRevalidateCatalogRoot(args) {
+	const { currentUrl, nextUrl, defaultShouldRevalidate, formMethod, actionResult, actionStatus } = args;
+	if (!defaultShouldRevalidate || formMethod !== void 0 && formMethod.toUpperCase() !== "GET" || actionResult !== void 0 || actionStatus !== void 0 || currentUrl.origin !== nextUrl.origin || currentUrl.pathname !== nextUrl.pathname || currentUrl.search === nextUrl.search) return defaultShouldRevalidate;
+	for (const params of [currentUrl.searchParams, nextUrl.searchParams]) for (const name of params.keys()) if (!CATALOG_PARAMETERS.has(name) && !/^(?:option|attribute):.+$/.test(name)) return defaultShouldRevalidate;
+	return false;
+}
+function isSort(value) {
+	return SORTS.some((sort) => sort === value);
+}
+function price(value) {
+	if (value === null || value.trim() === "") return void 0;
+	const number = Number(value);
+	return Number.isFinite(number) && number >= 0 ? number : void 0;
+}
+function readCatalog(url, base = {}) {
+	const params = url.searchParams;
+	const query = {
+		...base,
+		pageSize: 24,
+		page: Math.max(1, Number(params.get("page") ?? "1") || 1)
+	};
+	const q = params.get("q")?.trim();
+	if (q) query.search = q;
+	const sort = params.get("sort");
+	if (isSort(sort)) query.sort = sort;
+	for (const [id, key] of Object.entries(LISTS)) {
+		const values = params.getAll(id).filter((value) => value !== "");
+		if (values.length > 0) query[key] = values;
+	}
+	const filters = [...params.entries()].filter(([key]) => key.startsWith("option:") || key.startsWith("attribute:")).map(([key, value]) => `${key}:${value}`);
+	if (filters.length > 0) query.filters = filters;
+	const availability = params.get("availability");
+	if (availability === "in_stock") query.inStock = true;
+	if (availability === "out_of_stock") query.inStock = false;
+	const minPrice = price(params.get("minPrice"));
+	const maxPrice = price(params.get("maxPrice"));
+	if (minPrice !== void 0) query.minPrice = minPrice;
+	if (maxPrice !== void 0) query.maxPrice = maxPrice;
+	return query;
+}
+export { readCatalog, shouldRevalidateCatalogRoot };

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 };