@ecomiq/storefront 2.1.4 → 3.0.1

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

package/dist/order-pages-Dm6l5m0m.js

@@ -0,0 +1,38 @@
+import { useFetcher } from "react-router";
+import { useEffect, useState } from "react";
+// src/order-pages.ts
+function useOrderPages(data) {
+	const fetcher = useFetcher();
+	const [pages, setPages] = useState(data);
+	useEffect(() => setPages(data), [data]);
+	useEffect(() => {
+		const loaded = fetcher.data;
+		if (loaded === void 0) return;
+		setPages((current) => {
+			const known = new Set(current.orders.map((order) => order.orderId));
+			return {
+				...current,
+				orders: [...current.orders, ...loaded.orders.filter((order) => !known.has(order.orderId))],
+				next: loaded.next
+			};
+		});
+	}, [fetcher.data]);
+	const next = pages.next;
+	if (next === null) return {
+		orders: pages.orders,
+		more: null
+	};
+	const loading = fetcher.state !== "idle";
+	return {
+		orders: pages.orders,
+		more: {
+			href: next,
+			loading,
+			load: (event) => {
+				event?.preventDefault();
+				if (!loading) fetcher.load(next);
+			}
+		}
+	};
+}
+export { useOrderPages };

package/dist/order-pages.d.ts

@@ -0,0 +1,12 @@
+import { OrdersData } from "./account.js";
+import { CustomerOrderList } from "@ecomiq/core";
+import { MouseEvent } from "react";
+export type MoreOrders = {
+  href: string;
+  loading: boolean;
+  load: (event?: MouseEvent) => void;
+};
+export declare function useOrderPages(data: OrdersData): {
+  orders: CustomerOrderList;
+  more: MoreOrders | null;
+};