@ecomiq/storefront 2.1.4 → 3.0.0

package/dist/urls.d.ts

@@ -0,0 +1,18 @@
+import { RouterContextProvider } from "react-router";
+import { CategoryDetail, ProductDetail, ProductsResponse, StorefrontSettings, UrlResolution } from "@ecomiq/core";
+export type ResolvedUrl = Exclude<UrlResolution, {
+  kind: "redirect";
+}>;
+export type CategoryData = {
+  category: CategoryDetail;
+  page: number;
+  result: ProductsResponse;
+};
+export declare function requireCanonical(request: Request, url: string): void;
+export type ResolveUrlOptions = {
+  redirect?: boolean;
+};
+export declare function resolveUrl(request: Request, context: Readonly<RouterContextProvider>, options?: ResolveUrlOptions): Promise<ResolvedUrl>;
+export declare function loadProduct(request: Request, context: Readonly<RouterContextProvider>, options?: ResolveUrlOptions): Promise<ProductDetail>;
+export declare function canonicalUrl(request: Request, context: Readonly<RouterContextProvider>, url: string): Promise<string>;
+export declare function loadCategory(request: Request, context: Readonly<RouterContextProvider>, category: CategoryDetail): Promise<CategoryData>;

package/dist/use-checkout-CZcxXJXi.js

@@ -0,0 +1,42 @@
+import { checkoutAddressDefaults, checkoutProgress, checkoutStep, defaultPaymentMethod, needsShipping } from "./checkout-DVWSXANi.js";
+import { useCustomerCsrfToken } from "./customer-csrf-C1oDX-Py.js";
+import { useFetcher, useNavigation, useSearchParams } from "react-router";
+// src/use-checkout.ts
+function useCheckout(checkout, result, layout = "steps") {
+	const [params] = useSearchParams();
+	const navigation = useNavigation();
+	const choice = useFetcher();
+	const csrf = useCustomerCsrfToken();
+	const busy = navigation.state !== "idle" || choice.state !== "idle";
+	let error = null;
+	let promoError = null;
+	let failed = null;
+	if (result && "error" in result) failed = result;
+	if (failed?.promo) promoError = failed.error;
+	else if (failed) error = failed.error;
+	else if (choice.data && "error" in choice.data) error = choice.data.error;
+	function choosePaymentMethod(code) {
+		const form = new FormData();
+		form.set("intent", "payment-method");
+		form.set("method", code);
+		if (csrf) form.set("__customer_csrf", csrf);
+		choice.submit(form, {
+			method: "post",
+			preventScrollReset: true
+		});
+	}
+	return {
+		...checkout,
+		step: checkoutStep(checkout.cart, params.get("edit")),
+		done: checkoutProgress(checkout.cart),
+		needsDelivery: needsShipping(checkout.cart),
+		defaults: checkoutAddressDefaults(checkout.cart, checkout.address, checkout.countryCode),
+		paymentMethod: defaultPaymentMethod(checkout.cart, checkout.methods),
+		choosePaymentMethod,
+		single: layout === "single",
+		error,
+		promoError,
+		busy
+	};
+}
+export { useCheckout };

package/dist/use-checkout-payment-9R-zacrJ.js

@@ -0,0 +1,80 @@
+import { findStripeWallet } from "./stripe-dialog-Ev9s3Z62.js";
+import { usePaymentToken } from "./use-payment-token-CErx-tN-.js";
+import { gathered } from "./checkout-form-CbOIdENC.js";
+import { useRef, useState } from "react";
+// src/use-checkout-payment.ts
+function useCheckoutPayment(methods, cart, title) {
+	const payment = usePaymentToken();
+	const token = useRef(null);
+	const providerPaymentMethodId = useRef(null);
+	const deviceSessionId = useRef(null);
+	const resubmitting = useRef(false);
+	const [stripeDialog, setStripeDialog] = useState(null);
+	function onSubmit(event) {
+		if (resubmitting.current) return;
+		const form = event.currentTarget;
+		const fields = gathered(form);
+		if (fields === null) {
+			event.preventDefault();
+			return;
+		}
+		const email = fields.get("email");
+		const method = methods.find((entry) => entry.code === fields.get("method"));
+		if (method === void 0) return;
+		const submitWith = (provided, methodId = "", deviceId = "") => {
+			const input = token.current;
+			if (input === null || !form.isConnected) return;
+			const methodInput = providerPaymentMethodId.current;
+			input.value = provided;
+			if (methodInput !== null) methodInput.value = methodId;
+			if (deviceSessionId.current !== null) deviceSessionId.current.value = deviceId;
+			resubmitting.current = true;
+			try {
+				form.requestSubmit();
+			} finally {
+				resubmitting.current = false;
+				input.value = "";
+				if (methodInput !== null) methodInput.value = "";
+				if (deviceSessionId.current !== null) deviceSessionId.current.value = "";
+			}
+		};
+		const publishableKey = method.publicConfiguration?.publishableKey;
+		if (method.checkoutMode === "embedded" && method.providerId === "stripe" && publishableKey !== void 0) {
+			event.preventDefault();
+			setStripeDialog({
+				publishableKey,
+				amount: cart.totals.total,
+				currency: cart.currencyCode,
+				wallet: findStripeWallet(method),
+				onTokenized: (paymentMethodId) => {
+					setStripeDialog(null);
+					submitWith("", paymentMethodId);
+				},
+				onClose: () => setStripeDialog(null)
+			});
+			return;
+		}
+		if (payment.open({
+			method,
+			charge: {
+				title,
+				currency: cart.currencyCode,
+				amount: cart.totals.total,
+				email: typeof email === "string" ? email : cart.email
+			},
+			onToken: submitWith
+		})) event.preventDefault();
+	}
+	return {
+		token,
+		providerPaymentMethodId,
+		deviceSessionId,
+		source: payment.source,
+		dialog: payment.dialog,
+		stripeDialog,
+		loading: payment.loading || stripeDialog !== null,
+		error: payment.error,
+		onSubmit
+	};
+}
+export { useCheckoutPayment };

package/dist/use-checkout-payment.d.ts

@@ -0,0 +1,18 @@
+import { CheckoutPaymentMethod } from "./checkout.js";
+import { MercadoPagoDialogState } from "./mercadopago-dialog.js";
+import { StripeDialogState } from "./stripe-dialog.js";
+import { CulqiPaymentSource } from "./culqi-three-ds.js";
+import { StorefrontCart } from "@ecomiq/core";
+import { FormEvent, RefObject } from "react";
+export type CheckoutPaymentControls = {
+  token: RefObject<HTMLInputElement | null>;
+  providerPaymentMethodId: RefObject<HTMLInputElement | null>;
+  deviceSessionId: RefObject<HTMLInputElement | null>;
+  source: RefObject<CulqiPaymentSource | null>;
+  dialog: MercadoPagoDialogState | null;
+  stripeDialog: StripeDialogState | null;
+  loading: boolean;
+  error: string | null;
+  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+};
+export declare function useCheckoutPayment(methods: CheckoutPaymentMethod[], cart: StorefrontCart, title: string): CheckoutPaymentControls;

package/dist/use-checkout.d.ts

@@ -0,0 +1,36 @@
+import { CheckoutActionData, CheckoutData, CheckoutPaymentMethod, CheckoutShippingGroup, CheckoutStep } from "./checkout.js";
+import { readCountries } from "./store.js";
+import { PageAnalytics } from "./analytics/events.js";
+import { AddressDefaults } from "./address-defaults.js";
+export type CheckoutLayout = "steps" | "single";
+export declare function useCheckout(checkout: CheckoutData, result?: CheckoutActionData | null, layout?: CheckoutLayout): {
+  countryCode: string;
+  documentCountries: {
+    code: string;
+    name: string;
+  }[];
+  language: string;
+  cart: import("@ecomiq/core").StorefrontCart;
+  methods: CheckoutPaymentMethod[];
+  bumps: import("@ecomiq/core").CartCheckoutReadResponse["orderBumps"];
+  signedIn: boolean;
+  me: import("@ecomiq/core").CustomerMe | null;
+  address: import("@ecomiq/core").CustomerAddress | null;
+  countries: Awaited<ReturnType<typeof readCountries>>;
+  shipping: CheckoutShippingGroup[];
+  analytics: PageAnalytics;
+  step: CheckoutStep;
+  done: {
+    contact: boolean;
+    delivery: boolean;
+    shipping: boolean;
+  };
+  needsDelivery: boolean;
+  defaults: AddressDefaults;
+  paymentMethod: string | undefined;
+  choosePaymentMethod: (code: string) => void;
+  single: boolean;
+  error: string | null;
+  promoError: string | null;
+  busy: boolean;
+};

package/dist/use-culqi-checkout-CrjLAipU.js

@@ -0,0 +1,109 @@
+import { CULQI_ORDER_METHODS, CULQI_TOKEN_METHODS, loadCulqiCheckout } from "./culqi-checkout-CTXpKgp_.js";
+import { useEffect, useRef, useState } from "react";
+// src/use-culqi-checkout.ts
+const UNAVAILABLE = "Este medio de pago no está disponible. Elige otro medio de pago.";
+function useCulqiCheckout() {
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState(null);
+	const checkout = useRef(null);
+	const mounted = useRef(true);
+	useEffect(() => {
+		mounted.current = true;
+		return () => {
+			mounted.current = false;
+			checkout.current?.close();
+		};
+	}, []);
+	async function launch({ publicKey, charge, orderId, paymentMethods, onCallback, onClose = () => {} }) {
+		setError(null);
+		setLoading(true);
+		try {
+			const Checkout = await loadCulqiCheckout();
+			if (!mounted.current) return;
+			checkout.current?.close();
+			const instance = new Checkout(publicKey, {
+				settings: {
+					title: charge.title,
+					currency: charge.currency,
+					amount: Math.round(charge.amount * 100),
+					order: orderId
+				},
+				client: { email: charge.email ?? void 0 },
+				options: {
+					lang: "es",
+					installments: false,
+					modal: true,
+					paymentMethods
+				}
+			});
+			instance.culqi = () => {
+				if (!mounted.current || checkout.current !== instance) return;
+				onCallback(instance);
+			};
+			instance.closeCheckout = () => {
+				if (!mounted.current || checkout.current !== instance) return;
+				onClose();
+			};
+			checkout.current = instance;
+			instance.open();
+		} catch (error) {
+			if (!mounted.current) return;
+			if (error instanceof Error) setError(error.message);
+			else setError("No pudimos abrir el pago.");
+		} finally {
+			if (mounted.current) setLoading(false);
+		}
+	}
+	async function open(charge, onToken) {
+		const paymentMethods = CULQI_TOKEN_METHODS.get(charge.methodCode);
+		if (!charge.publicKey || paymentMethods === void 0) {
+			setError(UNAVAILABLE);
+			return;
+		}
+		let tokenized = false;
+		await launch({
+			publicKey: charge.publicKey,
+			charge,
+			orderId: void 0,
+			paymentMethods,
+			onCallback: (instance) => {
+				if (tokenized) return;
+				const token = instance.token?.id;
+				if (token === void 0) {
+					setError(instance.error?.user_message ?? "No pudimos validar el pago. Intenta de nuevo.");
+					return;
+				}
+				tokenized = true;
+				instance.close();
+				onToken(token);
+			}
+		});
+	}
+	async function openOrder(charge, onChanged) {
+		const paymentMethods = CULQI_ORDER_METHODS.get(charge.methodCode);
+		if (!charge.publicKey || paymentMethods === void 0) {
+			setError(UNAVAILABLE);
+			return;
+		}
+		await launch({
+			publicKey: charge.publicKey,
+			charge,
+			orderId: charge.orderId,
+			paymentMethods,
+			onCallback: (instance) => {
+				if (instance.order) {
+					onChanged();
+					return;
+				}
+				setError(instance.error?.user_message ?? "No pudimos generar el código de pago. Intenta de nuevo.");
+			}
+		});
+	}
+	return {
+		loading,
+		error,
+		open,
+		openOrder
+	};
+}
+export { useCulqiCheckout };

package/dist/use-order-payment-BKIz_IO0.js

@@ -0,0 +1,45 @@
+import { paymentReceiptInput } from "./payment-methods-B8ocTgFZ.js";
+import { usePaymentToken } from "./use-payment-token-CErx-tN-.js";
+import { useSubmit } from "react-router";
+import { useState } from "react";
+// src/use-order-payment.ts
+function useOrderPayment(order) {
+	const submit = useSubmit();
+	const payment = usePaymentToken();
+	const [methodCode, setMethodCode] = useState((order.methods.find((method) => method.isDefault) ?? order.methods[0])?.code ?? "");
+	const method = order.methods.find((entry) => entry.code === methodCode);
+	async function onSubmit(event) {
+		if (method === void 0) return;
+		const form = new FormData(event.currentTarget);
+		if (payment.open({
+			method,
+			charge: {
+				title: `Pedido ${order.order.orderNumber}`,
+				currency: order.order.currencyCode,
+				amount: order.balanceDue,
+				email: order.order.email
+			},
+			onToken: (token, providerPaymentMethodId, deviceSessionId) => {
+				form.set("token", token);
+				if (providerPaymentMethodId !== void 0) form.set("providerPaymentMethodId", providerPaymentMethodId);
+				if (deviceSessionId !== void 0) form.set("deviceSessionId", deviceSessionId);
+				submit(form, {
+					method: "post",
+					encType: "multipart/form-data"
+				});
+			}
+		})) event.preventDefault();
+	}
+	return {
+		method,
+		methodCode,
+		setMethodCode,
+		loading: payment.loading,
+		error: payment.error,
+		dialog: payment.dialog,
+		source: payment.source,
+		receipt: paymentReceiptInput(method, "order"),
+		onSubmit
+	};
+}
+export { useOrderPayment };

package/dist/use-order-payment.d.ts

@@ -0,0 +1,18 @@
+import { OrderStatusData } from "./order-status.js";
+import { PaymentInputProps } from "./payment-methods.js";
+import { MercadoPagoDialogState } from "./mercadopago-dialog.js";
+import { CulqiPaymentSource } from "./culqi-three-ds.js";
+import { OrderPaymentMethod } from "@ecomiq/core";
+import { FormEvent, RefObject } from "react";
+export type OrderPaymentControls = {
+  method: OrderPaymentMethod | undefined;
+  methodCode: string;
+  setMethodCode: (code: string) => void;
+  loading: boolean;
+  error: string | null;
+  receipt: PaymentInputProps | null;
+  dialog: MercadoPagoDialogState | null;
+  source: RefObject<CulqiPaymentSource | null>;
+  onSubmit: (event: FormEvent<HTMLFormElement>) => Promise<void>;
+};
+export declare function useOrderPayment(order: OrderStatusData): OrderPaymentControls;

package/dist/use-payment-token-CErx-tN-.js

@@ -0,0 +1,105 @@
+import { CULQI_TOKEN_METHODS } from "./culqi-checkout-CTXpKgp_.js";
+import { MERCADOPAGO_CARD_METHODS, MERCADOPAGO_YAPE_METHODS } from "./mercadopago-checkout-DC7RXa8k.js";
+import { useCulqiCheckout } from "./use-culqi-checkout-CrjLAipU.js";
+import { loadCulqiThreeDS } from "./culqi-three-ds-HP3mfrvV.js";
+import { useEffect, useRef, useState } from "react";
+// src/use-payment-token.ts
+function usePaymentToken() {
+	const culqi = useCulqiCheckout();
+	const [dialog, setDialog] = useState(null);
+	const [error, setError] = useState(null);
+	const [fingerprinting, setFingerprinting] = useState(false);
+	const source = useRef(null);
+	const mounted = useRef(true);
+	useEffect(() => {
+		mounted.current = true;
+		return () => {
+			mounted.current = false;
+		};
+	}, []);
+	function open({ method, charge, onToken }) {
+		if (method.checkoutMode !== "embedded") return false;
+		if (method.providerId === "culqi" && CULQI_TOKEN_METHODS.has(method.code)) {
+			setError(null);
+			culqi.open({
+				...charge,
+				methodCode: method.code,
+				publicKey: method.publicConfiguration?.publicKey
+			}, (token) => {
+				if (method.code !== "card") {
+					onToken(token);
+					return;
+				}
+				setFingerprinting(true);
+				loadCulqiThreeDS().then(async (sdk) => {
+					sdk.reset();
+					sdk.publicKey = method.publicConfiguration?.publicKey ?? "";
+					sdk.settings = {
+						charge: {
+							totalAmount: Math.round(charge.amount * 100),
+							currency: charge.currency,
+							returnUrl: window.location.href
+						},
+						card: { email: charge.email ?? "" }
+					};
+					const deviceSessionId = await sdk.generateDevice();
+					if (!mounted.current) return;
+					if (!deviceSessionId) throw new Error("No pudimos validar este dispositivo. Intenta nuevamente.");
+					source.current = {
+						token,
+						deviceSessionId
+					};
+					onToken(token, void 0, deviceSessionId);
+				}).catch((error) => {
+					if (mounted.current) setError(error instanceof Error ? error.message : "No pudimos validar este dispositivo.");
+				}).finally(() => {
+					if (mounted.current) setFingerprinting(false);
+				});
+			});
+			return true;
+		}
+		if (method.providerId !== "mercadopago" || !MERCADOPAGO_CARD_METHODS.has(method.code) && !MERCADOPAGO_YAPE_METHODS.has(method.code)) return false;
+		setError(null);
+		const publicKey = method.publicConfiguration?.publicKey;
+		if (!publicKey) {
+			setError("Este medio de pago no está disponible. Elige otro medio de pago.");
+			return true;
+		}
+		let tokenized = false;
+		const onTokenized = (token, paymentMethodId) => {
+			if (tokenized) return;
+			tokenized = true;
+			setDialog(null);
+			onToken(token, paymentMethodId);
+		};
+		if (MERCADOPAGO_YAPE_METHODS.has(method.code)) setDialog({
+			kind: "yape",
+			publicKey,
+			amount: charge.amount,
+			currency: charge.currency,
+			onTokenized,
+			onClose: () => setDialog(null)
+		});
+		else setDialog({
+			kind: "card",
+			publicKey,
+			amount: charge.amount,
+			email: charge.email,
+			onTokenized,
+			onClose: () => setDialog(null),
+			onError: (message) => {
+				setDialog(null);
+				setError(message);
+			}
+		});
+		return true;
+	}
+	return {
+		open,
+		dialog,
+		source,
+		loading: culqi.loading || fingerprinting || dialog !== null,
+		error: error ?? culqi.error
+	};
+}
+export { usePaymentToken };

package/dist/vite-payment-logos-kziu7wKb.js

@@ -0,0 +1,27 @@
+import { paymentLogoSvgs } from "./payment-logo-svgs-By9lDTLK.js";
+import { paymentLogoPath } from "./payment-logos-BYvdwYyJ.js";
+// src/vite-payment-logos.ts
+const files = new Map([...paymentLogoSvgs].map(([code, svg]) => [paymentLogoPath(code), svg]));
+function paymentLogos() {
+	return {
+		name: "ecomiq:payment-logos",
+		configureServer(server) {
+			server.middlewares.use((request, response, next) => {
+				const svg = files.get(new URL(request.url ?? "/", "http://localhost").pathname);
+				if (svg === void 0) return next();
+				response.setHeader("Content-Type", "image/svg+xml");
+				response.setHeader("Cache-Control", "no-cache");
+				response.end(svg);
+			});
+		},
+		generateBundle() {
+			if (this.environment?.config?.consumer !== "client") return;
+			for (const [path, svg] of files) this.emitFile({
+				type: "asset",
+				fileName: path.slice(1),
+				source: svg
+			});
+		}
+	};
+}
+export { paymentLogos };

package/dist/vite-payment-logos.d.ts

@@ -0,0 +1,24 @@
+import { IncomingMessage, ServerResponse } from "node:http";
+type Middleware = (request: IncomingMessage, response: ServerResponse, next: () => void) => void;
+type EmittedAsset = {
+  type: "asset";
+  fileName: string;
+  source: string;
+};
+export declare function paymentLogos(): {
+  name: string;
+  configureServer(server: {
+    middlewares: {
+      use(middleware: Middleware): unknown;
+    };
+  }): void;
+  generateBundle(this: {
+    emitFile(file: EmittedAsset): string;
+    environment?: {
+      config?: {
+        consumer?: string;
+      };
+    };
+  }): void;
+};
+export {};