@ecomiq/storefront 2.1.4 → 3.0.0

package/dist/links-kFxBZfdb.js

@@ -0,0 +1,96 @@
+import { Link, useRouteLoaderData } from "react-router";
+import { catalogLinkKey } from "@ecomiq/core";
+import { jsx } from "react/jsx-runtime";
+// src/links.tsx
+function linkKey(link) {
+	if (link.reference) return catalogLinkKey(link);
+	return link.url;
+}
+async function readStorefrontLayout({ client, links }) {
+	const layout = await client.getLayout(links);
+	return {
+		settings: layout.settings,
+		collections: layout.collections,
+		storefrontLinks: Object.fromEntries(links.map((link, index) => [linkKey(link), layout.links[index]?.url ?? link.url]))
+	};
+}
+async function readStorefrontLinks(client, links) {
+	if (links.length === 0) return {};
+	try {
+		const resolved = await client.getLinks(links);
+		return Object.fromEntries(links.map((link, index) => [linkKey(link), resolved[index]?.url ?? link.url]));
+	} catch {
+		return {};
+	}
+}
+function savedHref(links, key) {
+	if (Object.hasOwn(links, key)) return links[key];
+}
+function storefrontHref(value, links) {
+	if (typeof value !== "string" && value.reference) {
+		if (!links) return value.url;
+		return savedHref(links, catalogLinkKey(value)) ?? value.url;
+	}
+	let href;
+	if (typeof value === "string") href = value;
+	else href = value.url;
+	if (!links) return href;
+	const exact = savedHref(links, href);
+	if (exact !== void 0) return exact;
+	if (!href.startsWith("/") || href.startsWith("//")) return href;
+	const at = href.search(/[?#]/);
+	if (at < 0) return href;
+	const base = savedHref(links, href.slice(0, at));
+	if (base === void 0) return href;
+	return base.split(/[?#]/, 1)[0] + href.slice(at);
+}
+function destination(to, links) {
+	if (typeof to === "string") return storefrontHref(to, links);
+	if ("url" in to) return storefrontHref(to, links);
+	if (!to.pathname) return to;
+	const href = `${to.pathname}${to.search ?? ""}${to.hash ?? ""}`;
+	const resolved = storefrontHref(href, links);
+	if (resolved === href) return to;
+	return resolved;
+}
+function isUnpublishedPage(to, publishedPages) {
+	let href;
+	if (typeof to === "string") href = to;
+	else href = to.pathname;
+	if (href === void 0) return false;
+	let path = href;
+	const suffix = path.search(/[?#]/);
+	if (suffix >= 0) path = path.slice(0, suffix);
+	path = path.replace(/\/+$/, "");
+	if (!path.toLowerCase().startsWith("/pages/")) return false;
+	try {
+		const pagePath = decodeURIComponent(path).toLowerCase();
+		return publishedPages?.some((page) => page.toLowerCase() === pagePath) !== true;
+	} catch {
+		return true;
+	}
+}
+function useStorefrontLinkPublished(to) {
+	const data = useRouteLoaderData("root");
+	return !isUnpublishedPage(destination(to, data?.storefrontLinks), data?.publishedPages);
+}
+function StorefrontLink(props) {
+	const data = useRouteLoaderData("root");
+	const to = destination(props.to, data?.storefrontLinks);
+	if (isUnpublishedPage(to, data?.publishedPages)) return null;
+	return /* @__PURE__ */ jsx(Link, {
+		...props,
+		to
+	});
+}
+function StorefrontAnchor(props) {
+	const data = useRouteLoaderData("root");
+	let href;
+	if (props.href !== void 0) href = storefrontHref(props.href, data?.storefrontLinks);
+	if (href !== void 0 && isUnpublishedPage(href, data?.publishedPages)) return null;
+	return /* @__PURE__ */ jsx("a", {
+		...props,
+		href
+	});
+}
+export { StorefrontAnchor, StorefrontLink, readStorefrontLayout, readStorefrontLinks, storefrontHref, useStorefrontLinkPublished };

package/dist/links.d.ts

@@ -0,0 +1,21 @@
+import { Link, To } from "react-router";
+import { CatalogLink, StorefrontClient, StorefrontLayout } from "@ecomiq/core";
+import { ComponentPropsWithRef } from "react";
+export type StorefrontLinks = Record<string, string>;
+export declare function readStorefrontLayout({ client, links }: {
+  client: Pick<StorefrontClient, "getLayout">;
+  links: readonly CatalogLink[];
+}): Promise<Pick<StorefrontLayout, "settings" | "collections"> & {
+  storefrontLinks: StorefrontLinks;
+}>;
+export declare function readStorefrontLinks(client: Pick<StorefrontClient, "getLinks">, links: readonly CatalogLink[]): Promise<StorefrontLinks>;
+export declare function storefrontHref(value: string | CatalogLink, links: StorefrontLinks | undefined): string;
+export type StorefrontLinkProps = Omit<ComponentPropsWithRef<typeof Link>, "to"> & {
+  to: To | CatalogLink;
+};
+export type StorefrontAnchorProps = Omit<ComponentPropsWithRef<"a">, "href"> & {
+  href?: string | CatalogLink;
+};
+export declare function useStorefrontLinkPublished(to: To | CatalogLink): boolean;
+export declare function StorefrontLink(props: StorefrontLinkProps): import("react").JSX.Element | null;
+export declare function StorefrontAnchor(props: StorefrontAnchorProps): import("react").JSX.Element | null;

package/dist/mercadopago-checkout-DC7RXa8k.js

@@ -0,0 +1,27 @@
+// src/mercadopago-checkout.ts
+const MERCADOPAGO_CARD_METHODS = /* @__PURE__ */ new Set(["card"]);
+const MERCADOPAGO_YAPE_METHODS = /* @__PURE__ */ new Set(["yape"]);
+let loading;
+function loadMercadoPago() {
+	if (window.MercadoPago) return Promise.resolve(window.MercadoPago);
+	if (loading) return loading;
+	loading = new Promise((resolve, reject) => {
+		const script = document.createElement("script");
+		script.src = "https://sdk.mercadopago.com/js/v2";
+		script.async = true;
+		script.onload = () => {
+			if (window.MercadoPago) resolve(window.MercadoPago);
+			else reject(/* @__PURE__ */ new Error("No pudimos abrir el pago."));
+		};
+		script.onerror = () => {
+			script.remove();
+			reject(/* @__PURE__ */ new Error("No pudimos cargar el pago. Revisa tu conexión e intenta de nuevo."));
+		};
+		document.head.appendChild(script);
+	}).catch((error) => {
+		loading = void 0;
+		throw error;
+	});
+	return loading;
+}
+export { MERCADOPAGO_CARD_METHODS, MERCADOPAGO_YAPE_METHODS, loadMercadoPago };

package/dist/mercadopago-dialog-UTQev0MG.js

@@ -0,0 +1,180 @@
+import { useStorefrontLocale, useStorefrontText } from "./storefront-language-DrMjVbmk.js";
+import { loadMercadoPago } from "./mercadopago-checkout-DC7RXa8k.js";
+import { money } from "./money-DtGOtDri.js";
+import { PaymentLogo } from "./payment-logo-BoPaGJc_.js";
+import { PaymentDialogFrame } from "./payment-dialog-frame-B-Q_xQ94.js";
+import { useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/mercadopago-dialog.tsx
+const MERCADOPAGO_LOGO = /* @__PURE__ */ jsx(PaymentLogo, {
+	code: "mercadopago",
+	className: "h-8 w-auto"
+});
+function MercadoPagoDialog({ dialog }) {
+	if (dialog === null) return null;
+	if (dialog.kind === "card") return /* @__PURE__ */ jsx(CardDialog, { dialog });
+	return /* @__PURE__ */ jsx(YapeDialog, { dialog });
+}
+function CardDialog({ dialog }) {
+	const storefrontTranslate = useStorefrontText();
+	const { locale } = useStorefrontLocale();
+	const paymentLocale = locale.startsWith("en") ? "en-US" : locale.startsWith("pt") ? "pt-BR" : "es-PE";
+	const container = `mercadopago-card-${useId().replace(/[^\w-]/g, "")}`;
+	const latest = useRef(dialog);
+	latest.current = dialog;
+	const [ready, setReady] = useState(false);
+	const { publicKey, amount, email } = dialog;
+	useEffect(() => {
+		let active = true;
+		let controller = null;
+		async function mount() {
+			const MercadoPago = await loadMercadoPago();
+			if (!active) return;
+			let payer;
+			if (email !== null) payer = { email };
+			const created = await new MercadoPago(publicKey, { locale: paymentLocale }).bricks().create("cardPayment", container, {
+				initialization: {
+					amount,
+					payer
+				},
+				customization: { paymentMethods: { maxInstallments: 1 } },
+				callbacks: {
+					onReady: () => {
+						if (active) setReady(true);
+					},
+					onSubmit: async (data) => {
+						if (active) latest.current.onTokenized(data.token, data.payment_method_id);
+					},
+					onError: (error) => {
+						if (active && error.type === "critical") latest.current.onError("No pudimos abrir el pago con tarjeta. Intenta de nuevo.");
+					}
+				}
+			});
+			if (active) controller = created;
+			else created.unmount();
+		}
+		mount().catch((error) => {
+			if (!active) return;
+			if (error instanceof Error) latest.current.onError(error.message);
+			else latest.current.onError("No pudimos abrir el pago.");
+		});
+		return () => {
+			active = false;
+			controller?.unmount();
+		};
+	}, [
+		publicKey,
+		amount,
+		email,
+		container
+	]);
+	return /* @__PURE__ */ jsxs(PaymentDialogFrame, {
+		title: storefrontTranslate("Pagar con tarjeta"),
+		logo: MERCADOPAGO_LOGO,
+		onClose: () => latest.current.onClose(),
+		note: "Mercado Pago procesa los datos de tu tarjeta de forma segura.",
+		children: [ready ? null : /* @__PURE__ */ jsxs("p", {
+			role: "status",
+			className: "py-8 text-center text-sm text-muted-foreground",
+			children: [storefrontTranslate("Cargando el pago…"), " "]
+		}), /* @__PURE__ */ jsx("div", {
+			id: container,
+			className: "[&_h1]:font-sans [&_h1]:tracking-normal"
+		})]
+	});
+}
+const FIELD = "w-full rounded-md border border-input bg-background px-3 py-2 text-base outline-none md:text-sm focus:border-ring focus:ring-1 focus:ring-ring";
+function YapeDialog({ dialog }) {
+	const storefrontTranslate = useStorefrontText();
+	const { locale } = useStorefrontLocale();
+	const paymentLocale = locale.startsWith("en") ? "en-US" : locale.startsWith("pt") ? "pt-BR" : "es-PE";
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState(null);
+	const mounted = useRef(true);
+	useEffect(() => {
+		mounted.current = true;
+		return () => {
+			mounted.current = false;
+		};
+	}, []);
+	async function submit(event) {
+		event.preventDefault();
+		if (busy) return;
+		const data = new FormData(event.currentTarget);
+		const phoneNumber = String(data.get("phoneNumber") ?? "").trim();
+		const otp = String(data.get("otp") ?? "").trim();
+		setBusy(true);
+		setError(null);
+		try {
+			const token = await new (await (loadMercadoPago()))(dialog.publicKey, { locale: paymentLocale }).yape({
+				otp,
+				phoneNumber
+			}).create();
+			if (!mounted.current) return;
+			dialog.onTokenized(token.id);
+		} catch {
+			if (!mounted.current) return;
+			setError("No pudimos validar tu Yape. Revisa el celular y genera un nuevo código de aprobación.");
+		} finally {
+			if (mounted.current) setBusy(false);
+		}
+	}
+	return /* @__PURE__ */ jsx(PaymentDialogFrame, {
+		title: storefrontTranslate("Pagar con Yape"),
+		logo: MERCADOPAGO_LOGO,
+		onClose: dialog.onClose,
+		note: "Mercado Pago procesa tu pago con Yape de forma segura.",
+		children: /* @__PURE__ */ jsxs("form", {
+			onSubmit: submit,
+			className: "flex flex-col gap-3 py-2",
+			children: [
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1 text-sm",
+					children: [/* @__PURE__ */ jsx("span", { children: storefrontTranslate("Celular registrado en Yape") }), /* @__PURE__ */ jsx("input", {
+						name: "phoneNumber",
+						type: "tel",
+						inputMode: "numeric",
+						autoComplete: "tel-national",
+						pattern: "[0-9]{9}",
+						maxLength: 9,
+						required: true,
+						placeholder: "987654321",
+						className: FIELD
+					})]
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1 text-sm",
+					children: [
+						/* @__PURE__ */ jsx("span", { children: storefrontTranslate("Código de aprobación") }),
+						/* @__PURE__ */ jsx("input", {
+							name: "otp",
+							inputMode: "numeric",
+							autoComplete: "one-time-code",
+							pattern: "[0-9]{6}",
+							maxLength: 6,
+							required: true,
+							placeholder: "123456",
+							className: FIELD
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-xs text-muted-foreground",
+							children: storefrontTranslate("Lo encuentras en tu app de Yape, en el menú «Código de aprobación».")
+						})
+					]
+				}),
+				error ? /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					className: "text-sm text-destructive",
+					children: error
+				}) : null,
+				/* @__PURE__ */ jsx("button", {
+					type: "submit",
+					disabled: busy,
+					className: "rounded-md bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground disabled:opacity-60",
+					children: busy ? "Validando…" : storefrontTranslate("Pagar {value0}", { value0: money(dialog.amount, dialog.currency, locale) })
+				})
+			]
+		})
+	});
+}
+export { MercadoPagoDialog };

package/dist/mercadopago-dialog.d.ts

@@ -0,0 +1,21 @@
+export type MercadoPagoCardDialog = {
+  kind: "card";
+  publicKey: string;
+  amount: number;
+  email: string | null;
+  onTokenized: (token: string, paymentMethodId: string) => void;
+  onClose: () => void;
+  onError: (message: string) => void;
+};
+export type MercadoPagoYapeDialog = {
+  kind: "yape";
+  publicKey: string;
+  amount: number;
+  currency: string;
+  onTokenized: (token: string) => void;
+  onClose: () => void;
+};
+export type MercadoPagoDialogState = MercadoPagoCardDialog | MercadoPagoYapeDialog;
+export declare function MercadoPagoDialog({ dialog }: {
+  dialog: MercadoPagoDialogState | null;
+}): import("react").JSX.Element | null;

package/dist/money-DtGOtDri.js

@@ -0,0 +1,32 @@
+// src/money.ts
+const WHOLE = /* @__PURE__ */ new Set([
+	"CLP",
+	"COP",
+	"PYG",
+	"JPY",
+	"KRW",
+	"VND",
+	"ISK",
+	"UGX",
+	"XAF",
+	"XOF"
+]);
+function money(value, currency, language, display = "narrowSymbol") {
+	const locale = language;
+	const digits = WHOLE.has(currency.toUpperCase()) ? 0 : 2;
+	const options = {
+		style: "currency",
+		currency,
+		minimumFractionDigits: digits,
+		maximumFractionDigits: digits
+	};
+	try {
+		return new Intl.NumberFormat(locale, {
+			...options,
+			currencyDisplay: display
+		}).format(value);
+	} catch {
+		return new Intl.NumberFormat(language, options).format(value);
+	}
+}
+export { money };

package/dist/money.d.ts

@@ -0,0 +1 @@
+export declare function money(value: number, currency: string, language: string, display?: "narrowSymbol" | "code"): string;

package/dist/optimistic-cart-BveVOHuh.js

@@ -0,0 +1,53 @@
+import { CART_ACTION } from "./cart-form-y9P1r_EX.js";
+import { useFetchers, useNavigation } from "react-router";
+// src/optimistic-cart.ts
+function postsToCart(submission) {
+	if (submission.formData === void 0 || submission.formAction === void 0) return false;
+	return new URL(submission.formAction, "https://storefront.invalid").pathname === CART_ACTION;
+}
+function lineChange(form) {
+	const intent = form.get("intent");
+	const itemId = form.get("itemId");
+	if (typeof itemId !== "string" || itemId === "") return null;
+	if (intent === "remove") return [itemId, {
+		quantity: null,
+		removing: true
+	}];
+	if (intent !== "update") return null;
+	const quantity = Math.max(0, Math.floor(Number(form.get("quantity"))));
+	if (!Number.isFinite(quantity)) return null;
+	return [itemId, {
+		quantity,
+		removing: quantity === 0
+	}];
+}
+function useOptimisticCart(cart) {
+	const fetchers = useFetchers();
+	const navigation = useNavigation();
+	const changes = /* @__PURE__ */ new Map();
+	for (const submission of [...fetchers, navigation]) {
+		if (!postsToCart(submission)) continue;
+		const change = lineChange(submission.formData);
+		if (change) changes.set(change[0], change[1]);
+	}
+	const lines = (cart?.items ?? []).map((item) => {
+		const change = changes.get(item.id);
+		if (change === void 0) return {
+			...item,
+			pending: false,
+			removing: false
+		};
+		return {
+			...item,
+			quantity: change.quantity ?? item.quantity,
+			pending: true,
+			removing: change.removing
+		};
+	});
+	return {
+		lines,
+		count: lines.reduce((sum, line) => sum + (line.removing ? 0 : line.quantity), 0),
+		pending: lines.some((line) => line.pending)
+	};
+}
+export { useOptimisticCart };

package/dist/optimistic-cart.d.ts

@@ -0,0 +1,16 @@
+export type CartLineLike = {
+  id: string;
+  quantity: number;
+};
+export type OptimisticCartLine<T extends CartLineLike> = T & {
+  pending: boolean;
+  removing: boolean;
+};
+export type OptimisticCart<T extends CartLineLike> = {
+  lines: OptimisticCartLine<T>[];
+  count: number;
+  pending: boolean;
+};
+export declare function useOptimisticCart<T extends CartLineLike>(cart: {
+  items: readonly T[];
+} | null): OptimisticCart<T>;

package/dist/order-display-DTt5WBbc.js

@@ -0,0 +1,112 @@
+import { orderStepLabel, orderStepOf, paymentLabel } from "./order-view-9IlBg5AF.js";
+import { PaymentLogo, hasPaymentLogo } from "./payment-logo-BoPaGJc_.js";
+import { useStorefrontLocale, useStorefrontText } from "./storefront-language-DrMjVbmk.js";
+import { Form } from "react-router";
+import { formatOrderDate } from "@ecomiq/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@theme/ui/button";
+// src/order-display.tsx
+/** The payment's logo and its last digits; the method name only when there is no logo. */
+function PaymentPreview({ payment, className = "" }) {
+	const code = payment.cardBrand ?? payment.paymentCode;
+	const logo = hasPaymentLogo(code);
+	const last4 = payment.cardLast4?.trim() ?? "";
+	return /* @__PURE__ */ jsxs("span", {
+		className: `flex min-w-0 items-center gap-2 ${className}`,
+		children: [logo ? /* @__PURE__ */ jsx(PaymentLogo, {
+			code,
+			className: "h-5 w-8 shrink-0 object-contain"
+		}) : null, /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: logo && last4 !== "" ? `•••• ${last4}` : paymentLabel(payment)
+		})]
+	});
+}
+function latest(items, field) {
+	return items.reduce((last, item) => {
+		const value = item[field] ?? null;
+		return value !== null && (last === null || value > last) ? value : last;
+	}, null);
+}
+/** The line under a status: the date it happened, or what comes next. */
+function useOrderStepDetail() {
+	const storefrontTranslate = useStorefrontText();
+	const { locale, timeZone } = useStorefrontLocale();
+	return (step, items) => {
+		const delivered = latest(items, "deliveredAt");
+		const shipped = latest(items, "shippedAt");
+		if (step === "delivered") return delivered === null ? null : formatOrderDate(delivered, locale, timeZone);
+		if (step === "shipped" || step === "outForDelivery") return shipped === null ? storefrontTranslate("Va en camino") : formatOrderDate(shipped, locale, timeZone);
+		if (step === "confirmed") return storefrontTranslate("Lo estamos preparando");
+		if (step === "pending") return storefrontTranslate("Esperando confirmación");
+		return null;
+	};
+}
+/** «Entregado el 21 oct.»: the order's step with the day it got there. */
+function useOrderHeadline() {
+	const storefrontTranslate = useStorefrontText();
+	const { locale, timeZone } = useStorefrontLocale();
+	return (order) => {
+		const step = orderStepOf(order);
+		const label = storefrontTranslate(orderStepLabel(step));
+		const at = step === "delivered" ? latest(order.items, "deliveredAt") : step === "shipped" ? latest(order.items, "shippedAt") : step === "pending" || step === "confirmed" ? order.orderDate : null;
+		const date = at === null ? null : new Date(at);
+		if (date === null || Number.isNaN(date.getTime())) return label;
+		const year = date.getFullYear() === (/* @__PURE__ */ new Date()).getFullYear() ? void 0 : "numeric";
+		const day = new Intl.DateTimeFormat(locale, {
+			day: "numeric",
+			month: "short",
+			year,
+			timeZone
+		}).format(date);
+		return storefrontTranslate("{value0} el {value1}", {
+			value0: label,
+			value1: day
+		});
+	};
+}
+function ReorderButton({ items, variant = "default" }) {
+	const storefrontTranslate = useStorefrontText();
+	const lines = items.filter((item) => item.variantId !== null);
+	if (lines.length === 0) return null;
+	return /* @__PURE__ */ jsxs(Form, {
+		method: "post",
+		action: "/cart",
+		className: "relative",
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name: "intent",
+				value: "reorder"
+			}),
+			lines.map((item) => /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name: "variantId",
+				value: item.variantId ?? ""
+			}), /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name: "quantity",
+				value: item.quantity
+			})] }, item.id)),
+			/* @__PURE__ */ jsx(Button, {
+				type: "submit",
+				variant,
+				children: storefrontTranslate("Volver a comprar")
+			})
+		]
+	});
+}
+/** A theme button that opens `path`: a GET form, so it keeps the theme's button look without JavaScript. */
+function PayButton({ path, label, variant = "default" }) {
+	return /* @__PURE__ */ jsx(Form, {
+		method: "get",
+		action: path,
+		className: "relative",
+		children: /* @__PURE__ */ jsx(Button, {
+			type: "submit",
+			variant,
+			children: label
+		})
+	});
+}
+export { PayButton, PaymentPreview, ReorderButton, useOrderHeadline, useOrderStepDetail };

package/dist/order-display.d.ts

@@ -0,0 +1,20 @@
+import { CustomerOrderLineItem, CustomerOrderListItem, CustomerOrderPayment, OrderStep } from "@ecomiq/core";
+/** The payment's logo and its last digits; the method name only when there is no logo. */
+export declare function PaymentPreview({ payment, className }: {
+  payment: CustomerOrderPayment;
+  className?: string;
+}): import("react").JSX.Element;
+/** The line under a status: the date it happened, or what comes next. */
+export declare function useOrderStepDetail(): (step: OrderStep, items: CustomerOrderLineItem[]) => string | null;
+/** «Entregado el 21 oct.»: the order's step with the day it got there. */
+export declare function useOrderHeadline(): (order: CustomerOrderListItem) => string;
+export declare function ReorderButton({ items, variant }: {
+  items: CustomerOrderLineItem[];
+  variant?: "default" | "outline";
+}): import("react").JSX.Element | null;
+/** A theme button that opens `path`: a GET form, so it keeps the theme's button look without JavaScript. */
+export declare function PayButton({ path, label, variant }: {
+  path: string;
+  label: string;
+  variant?: "default" | "outline";
+}): import("react").JSX.Element;

package/dist/order-draft-DxV1Uhm3.js

@@ -0,0 +1,38 @@
+import { found, store } from "./store-8Q-_LFrQ.js";
+import { data, redirect } from "react-router";
+import { ApiError } from "@ecomiq/core";
+// src/order-draft.ts
+function isOrderDraftPayable(draft) {
+	return draft.items.length > 0 && draft.orderPaths === null && [
+		"draft",
+		"sent",
+		"viewed",
+		"accepted"
+	].includes(draft.status);
+}
+async function loadOrderDraft(context, token) {
+	const client = store(context);
+	const [draft, settings] = await Promise.all([found(client.getOrderDraft(token), (code) => code < 500), client.getSettings()]);
+	const orderPaths = draft.orderPaths ?? [];
+	if (orderPaths.length === 1) throw redirect(orderPaths[0]);
+	return {
+		token,
+		draft,
+		payable: isOrderDraftPayable(draft),
+		orderPaths,
+		language: `${settings.store.language}-${settings.store.countryCode}`
+	};
+}
+async function orderDraftAction(context, token) {
+	try {
+		const result = await store(context).checkoutOrderDraft(token);
+		if (result.orderPaths.length === 1) return redirect(result.orderPaths[0]);
+		return { orderPaths: result.orderPaths };
+	} catch (error) {
+		if (error instanceof ApiError && error.status === 404) throw data(null, { status: 404 });
+		let message = "No pudimos preparar el pago. Intenta de nuevo.";
+		if (error instanceof ApiError && error.status >= 400 && error.status < 500) message = error.message;
+		return data({ error: message }, { status: 400 });
+	}
+}
+export { isOrderDraftPayable, loadOrderDraft, orderDraftAction };

package/dist/order-draft.d.ts

@@ -0,0 +1,16 @@
+import { RouterContextProvider } from "react-router";
+import { OrderDraft } from "@ecomiq/core";
+export type OrderDraftData = {
+  token: string;
+  draft: OrderDraft;
+  payable: boolean;
+  orderPaths: string[];
+  language: string;
+};
+export type OrderDraftActionData = {
+  error?: string;
+  orderPaths?: string[];
+};
+export declare function isOrderDraftPayable(draft: OrderDraft): boolean;
+export declare function loadOrderDraft(context: Readonly<RouterContextProvider>, token: string): Promise<OrderDraftData>;
+export declare function orderDraftAction(context: Readonly<RouterContextProvider>, token: string): Promise<import("react-router").UNSAFE_DataWithResponseInit<OrderDraftActionData> | OrderDraftActionData | Response>;