@ecomiq/storefront 2.1.4 → 3.0.0

package/dist/sections/checkout.js

@@ -0,0 +1,963 @@
+import { BankAccountList } from "../bank-accounts-DlEczQQ5.js";
+import { useStorefrontText } from "../storefront-language-DrMjVbmk.js";
+import { PaymentLogo } from "../payment-logo-BoPaGJc_.js";
+import { money } from "../money-DtGOtDri.js";
+import { section, setting } from "../settings-B0NO2A6Y.js";
+import { placeValue, useGeoCascade } from "../catalog-hooks-B7ZP4wYY.js";
+import { CheckoutForm, OrderBumpForm, PromoCodeForm } from "../checkout-form-CbOIdENC.js";
+import { CulqiAuthentication } from "../culqi-authentication-BGr20vAJ.js";
+import { InvoiceFields } from "../invoice-fields-BG0HjL6T.js";
+import { MercadoPagoDialog } from "../mercadopago-dialog-UTQev0MG.js";
+import { PaymentMethods } from "../payment-methods-B8ocTgFZ.js";
+import { StripeAuthentication, StripeDialog, findStripeWallet, useAvailableStripeWallets } from "../stripe-dialog-Ev9s3Z62.js";
+import { summaryLines } from "../cart-summary-ur2VWKr-.js";
+import { useCheckout } from "../use-checkout-CZcxXJXi.js";
+import { useCheckoutPayment } from "../use-checkout-payment-9R-zacrJ.js";
+import { Link, useRouteLoaderData } from "react-router";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@theme/ui/button";
+// src/sections/checkout.tsx
+const catalog = {
+	name: "Finalizar compra",
+	description: "Checkout de la tienda: contacto, entrega, envío y pago, con el resumen del pedido."
+};
+const settings = { checkout: {
+	layout: setting.select("steps", "Tipo de checkout", {
+		steps: "Por pasos",
+		single: "Una página"
+	}),
+	summary: setting.select("right", "Resumen del pedido", {
+		right: "A la derecha",
+		left: "A la izquierda"
+	}),
+	main: setting.scheme("claro", "Esquema del formulario"),
+	aside: setting.scheme("claro", "Esquema del resumen"),
+	logo: setting.select("left", "Logo", {
+		left: "A la izquierda",
+		center: "Centrado"
+	}),
+	secure: setting.toggle(true, "«Compra segura» en la cabecera"),
+	marks: setting.toggle(true, "Logos de medios de pago"),
+	encrypted: setting.toggle(true, "Aviso de datos cifrados"),
+	fields: setting.select("outline", "Campos", {
+		outline: "Con borde",
+		filled: "Con fondo"
+	}),
+	corners: setting.select("soft", "Esquinas", {
+		square: "Rectas",
+		soft: "Suaves",
+		round: "Redondeadas"
+	}),
+	button: setting.select("full", "Botón de pagar", {
+		full: "A todo el ancho",
+		fit: "Al contenido"
+	})
+} };
+const RADIUS = {
+	square: "0px",
+	soft: "0.5rem",
+	round: "1rem"
+};
+const FIELD = "peer w-full rounded-md border border-input bg-background px-3.5 pt-5 pb-1.5 text-base text-foreground md:text-sm outline-none transition-colors placeholder:text-transparent focus:border-ring focus:ring-1 focus:ring-ring disabled:opacity-60 group-data-[fields=filled]/checkout:border-transparent group-data-[fields=filled]/checkout:bg-muted";
+const FLOAT = "pointer-events-none absolute top-1/2 left-3.5 -translate-y-1/2 text-sm text-muted-foreground transition-all peer-focus:top-3 peer-focus:text-[11px] peer-[:not(:placeholder-shown)]:top-3 peer-[:not(:placeholder-shown)]:text-[11px]";
+const GROUP = "overflow-hidden rounded-md border border-input bg-background";
+const ROW = "flex cursor-pointer items-center gap-3 px-4 py-3.5 text-sm has-[:checked]:bg-muted/60";
+const STEPS = [
+	{
+		step: "contact",
+		label: "Contacto"
+	},
+	{
+		step: "delivery",
+		label: "Entrega"
+	},
+	{
+		step: "shipping",
+		label: "Envío"
+	},
+	{
+		step: "payment",
+		label: "Pago"
+	}
+];
+function shopOf(data) {
+	const shop = typeof data === "object" && data !== null ? data.shop : void 0;
+	return {
+		name: shop?.name ?? "",
+		logo: shop?.logo ?? null,
+		language: shop?.language ?? "es"
+	};
+}
+function Lock() {
+	return /* @__PURE__ */ jsxs("svg", {
+		"aria-hidden": "true",
+		viewBox: "0 0 24 24",
+		className: "size-4",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.8,
+		children: [/* @__PURE__ */ jsx("rect", {
+			x: "5",
+			y: "11",
+			width: "14",
+			height: "9",
+			rx: "2"
+		}), /* @__PURE__ */ jsx("path", { d: "M8 11V8a4 4 0 0 1 8 0v3" })]
+	});
+}
+function Bag() {
+	return /* @__PURE__ */ jsxs("svg", {
+		"aria-hidden": "true",
+		viewBox: "0 0 24 24",
+		className: "size-5",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.6,
+		children: [/* @__PURE__ */ jsx("path", { d: "M6 8h12l-1 12H7L6 8Z" }), /* @__PURE__ */ jsx("path", { d: "M9 8a3 3 0 0 1 6 0" })]
+	});
+}
+function Field({ label, className, ...props }) {
+	return /* @__PURE__ */ jsxs("label", {
+		className: `relative block ${className ?? ""}`,
+		children: [/* @__PURE__ */ jsx("input", {
+			id: props.id ?? props.name,
+			placeholder: label,
+			className: FIELD,
+			...props
+		}), /* @__PURE__ */ jsx("span", {
+			className: FLOAT,
+			children: label
+		})]
+	});
+}
+function Choice({ label, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("label", {
+		className: `relative block ${className ?? ""}`,
+		children: [
+			/* @__PURE__ */ jsx("select", {
+				id: props.id ?? props.name,
+				className: `${FIELD} appearance-none pr-9`,
+				...props,
+				children
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "pointer-events-none absolute top-3 left-3.5 -translate-y-1/2 text-[11px] text-muted-foreground",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("svg", {
+				"aria-hidden": "true",
+				viewBox: "0 0 24 24",
+				className: "pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 text-muted-foreground",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 2,
+				children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+			})
+		]
+	});
+}
+function Address({ countries, defaults }) {
+	const storefrontTranslate = useStorefrontText();
+	const geo = useGeoCascade({
+		...defaults,
+		country: countries[0]?.code
+	});
+	const { country, department, province, district } = geo;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid gap-3 sm:grid-cols-2",
+		children: [
+			/* @__PURE__ */ jsx(Choice, {
+				label: storefrontTranslate("País"),
+				name: "country",
+				value: country,
+				onChange: (event) => geo.setCountry(event.target.value),
+				className: "sm:col-span-2",
+				children: countries.map((item) => /* @__PURE__ */ jsx("option", {
+					value: item.code,
+					children: item.name
+				}, item.code))
+			}),
+			geo.structured ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsxs(Choice, {
+					label: storefrontTranslate("Departamento"),
+					name: "department",
+					required: true,
+					value: placeValue(department),
+					onChange: (event) => geo.setDepartmentValue(event.target.value),
+					children: [/* @__PURE__ */ jsx("option", {
+						value: "",
+						children: storefrontTranslate("Elige…")
+					}), geo.places.departments.map((item) => /* @__PURE__ */ jsx("option", {
+						value: placeValue(item),
+						children: item.name
+					}, item.code))]
+				}),
+				/* @__PURE__ */ jsxs(Choice, {
+					label: storefrontTranslate("Provincia"),
+					name: "province",
+					required: true,
+					disabled: department === null,
+					value: placeValue(province),
+					onChange: (event) => geo.setProvinceValue(event.target.value),
+					children: [/* @__PURE__ */ jsx("option", {
+						value: "",
+						children: storefrontTranslate("Elige…")
+					}), geo.places.provinces.map((item) => /* @__PURE__ */ jsx("option", {
+						value: placeValue(item),
+						children: item.name
+					}, item.code))]
+				}),
+				/* @__PURE__ */ jsxs(Choice, {
+					label: storefrontTranslate("Distrito"),
+					name: "district",
+					required: true,
+					disabled: province === null,
+					value: placeValue(district),
+					onChange: (event) => geo.setDistrictValue(event.target.value),
+					className: "sm:col-span-2",
+					children: [/* @__PURE__ */ jsx("option", {
+						value: "",
+						children: storefrontTranslate("Elige…")
+					}), geo.places.districts.map((item) => /* @__PURE__ */ jsx("option", {
+						value: placeValue(item),
+						children: item.name
+					}, item.code))]
+				})
+			] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Field, {
+				label: storefrontTranslate("Región"),
+				name: "department",
+				defaultValue: defaults.department ?? "",
+				required: true
+			}), /* @__PURE__ */ jsx(Field, {
+				label: storefrontTranslate("Ciudad"),
+				name: "district",
+				defaultValue: defaults.district ?? "",
+				required: true
+			})] }),
+			/* @__PURE__ */ jsx(Field, {
+				label: storefrontTranslate("Dirección"),
+				name: "line",
+				autoComplete: "street-address",
+				defaultValue: defaults.line ?? "",
+				required: true,
+				className: "sm:col-span-2"
+			}),
+			/* @__PURE__ */ jsx(Field, {
+				label: storefrontTranslate("Referencia (opcional)"),
+				name: "reference",
+				defaultValue: defaults.reference ?? ""
+			}),
+			/* @__PURE__ */ jsx(Field, {
+				label: storefrontTranslate("Celular"),
+				name: "phone",
+				type: "tel",
+				autoComplete: "tel",
+				defaultValue: defaults.phone ?? "",
+				required: true
+			})
+		]
+	});
+}
+function Heading({ children, aside }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mb-3 flex items-baseline justify-between gap-3",
+		children: [/* @__PURE__ */ jsx("h2", {
+			className: "text-lg font-semibold",
+			children
+		}), aside]
+	});
+}
+function Review({ rows }) {
+	const storefrontTranslate = useStorefrontText();
+	if (rows.length === 0) return null;
+	return /* @__PURE__ */ jsx("dl", {
+		className: `${GROUP} divide-y divide-input text-sm`,
+		children: rows.map((row) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-4 px-4 py-3",
+			children: [
+				/* @__PURE__ */ jsx("dt", {
+					className: "w-24 shrink-0 text-muted-foreground",
+					children: storefrontTranslate(row.label)
+				}),
+				/* @__PURE__ */ jsx("dd", {
+					className: "min-w-0 flex-1 truncate",
+					children: row.value
+				}),
+				/* @__PURE__ */ jsx(Link, {
+					to: `?edit=${row.step}`,
+					className: "shrink-0 text-xs underline underline-offset-4",
+					children: storefrontTranslate("Cambiar")
+				})
+			]
+		}, row.step))
+	});
+}
+const MOBILE_LOGOS = 3;
+function Checkout({ data, result, ...root }) {
+	const storefrontTranslate = useStorefrontText();
+	const checkout = section(settings.checkout, root);
+	const shop = shopOf(useRouteLoaderData("root"));
+	const { cart, methods, bumps, me, signedIn, countries, shipping, step, done, needsDelivery, defaults, paymentMethod, choosePaymentMethod, error, promoError, busy, single } = useCheckout(data, result, checkout.layout);
+	const payment = useCheckoutPayment(methods, cart, shop.name);
+	const wallets = useAvailableStripeWallets(methods, cart.totals.total, cart.currencyCode);
+	const offeredMethods = methods.filter((method) => {
+		const wallet = findStripeWallet(method);
+		return wallet === null || wallets.has(wallet);
+	});
+	if (result && "authentication" in result) {
+		if (result.authentication.payment.providerId === "stripe") return /* @__PURE__ */ jsx(StripeAuthentication, { ...result.authentication });
+		return /* @__PURE__ */ jsx(CulqiAuthentication, {
+			...result.authentication,
+			email: cart.email,
+			source: payment.source.current
+		});
+	}
+	const alert = payment.error ?? error;
+	const paying = busy || payment.loading;
+	const format = (value) => money(value, cart.currencyCode, `${data.language}-${data.countryCode}`);
+	const attributes = Object.fromEntries(Object.entries(root).filter(([key]) => key.startsWith("data-")));
+	const style = { "--radius": RADIUS[checkout.corners] };
+	const total = summaryLines(cart).find((line) => line.key === "total")?.amount ?? cart.totals.total;
+	const open = (current) => single || step === current;
+	const saved = cart.shippingAddress;
+	const current = STEPS.findIndex((item) => item.step === step);
+	const rows = [];
+	if (!single && current > 0 && done.contact) rows.push({
+		step: "contact",
+		label: storefrontTranslate("Contacto"),
+		value: `${cart.email ?? ""} · ${cart.phone ?? ""}`
+	});
+	if (!single && current > 1 && saved) rows.push({
+		step: "delivery",
+		label: storefrontTranslate("Enviar a"),
+		value: [
+			saved.address1,
+			saved.district,
+			saved.province
+		].filter(Boolean).join(", ")
+	});
+	if (!single && current > 2 && done.shipping) rows.push({
+		step: "shipping",
+		label: storefrontTranslate("Envío"),
+		value: cart.shippingMethods.map((method) => `${method.name} · ${method.total === 0 ? storefrontTranslate("Gratis") : format(method.total)}`).join(" · ")
+	});
+	const lines = /* @__PURE__ */ jsx("ul", {
+		className: "flex flex-col gap-4",
+		children: cart.items.map((item) => /* @__PURE__ */ jsxs("li", {
+			className: "flex items-center gap-4 text-sm",
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "relative size-16 shrink-0 rounded-md border border-input bg-background",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "block size-full overflow-hidden rounded-md",
+						children: item.thumbnail ? /* @__PURE__ */ jsx("img", {
+							src: item.thumbnail,
+							alt: "",
+							width: 64,
+							height: 64,
+							loading: "lazy",
+							decoding: "async",
+							className: "size-full object-cover"
+						}) : null
+					}), /* @__PURE__ */ jsx("span", {
+						className: "absolute -top-2 -right-2 flex size-5 items-center justify-center rounded-full bg-muted-foreground text-[11px] font-medium text-background",
+						children: item.quantity
+					})]
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "flex min-w-0 flex-1 flex-col",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "font-medium",
+							children: item.title
+						}),
+						item.variantLabel && item.variantLabel !== item.title ? /* @__PURE__ */ jsx("span", {
+							className: "text-xs text-muted-foreground",
+							children: item.variantLabel
+						}) : null,
+						item.sellerName ? /* @__PURE__ */ jsxs("span", {
+							className: "text-xs text-muted-foreground",
+							children: [
+								storefrontTranslate("Vendido por"),
+								" ",
+								item.sellerName
+							]
+						}) : null
+					]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "tabular-nums",
+					children: format(item.unitPrice * item.quantity)
+				})
+			]
+		}, item.id))
+	});
+	const totals = /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs(PromoCodeForm, {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ jsx(Field, {
+				label: storefrontTranslate("Código de descuento"),
+				name: "code",
+				className: "flex-1"
+			}), /* @__PURE__ */ jsx(Button, {
+				type: "submit",
+				disabled: busy,
+				children: storefrontTranslate("Aplicar")
+			})]
+		}),
+		promoError ? /* @__PURE__ */ jsx("p", {
+			className: "-mt-3 text-sm text-destructive",
+			children: storefrontTranslate(promoError)
+		}) : null,
+		cart.promotionCodes.map((code) => /* @__PURE__ */ jsxs(PromoCodeForm, {
+			remove: code,
+			className: "flex items-center justify-between text-sm",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "rounded-md bg-muted px-2 py-1 font-medium",
+				children: code
+			}), /* @__PURE__ */ jsx("button", {
+				type: "submit",
+				className: "text-xs underline underline-offset-4",
+				children: storefrontTranslate("Quitar")
+			})]
+		}, code)),
+		/* @__PURE__ */ jsx("dl", {
+			className: "flex flex-col gap-2 text-sm",
+			children: summaryLines(cart).map((line) => {
+				if (line.key === "total") return /* @__PURE__ */ jsxs("div", {
+					className: "flex items-baseline justify-between pt-2",
+					children: [/* @__PURE__ */ jsx("dt", {
+						className: "text-base font-semibold",
+						children: storefrontTranslate(line.label)
+					}), /* @__PURE__ */ jsxs("dd", {
+						className: "flex items-baseline gap-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-xs text-muted-foreground",
+							children: cart.currencyCode
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-xl font-semibold tabular-nums",
+							children: format(line.amount ?? 0)
+						})]
+					})]
+				}, line.key);
+				return /* @__PURE__ */ jsxs("div", {
+					className: "flex justify-between",
+					children: [/* @__PURE__ */ jsx("dt", {
+						className: "text-muted-foreground",
+						children: storefrontTranslate(line.label)
+					}), /* @__PURE__ */ jsx("dd", {
+						className: "tabular-nums",
+						children: line.amount === null ? storefrontTranslate(line.text ?? "") : format(line.amount)
+					})]
+				}, line.key);
+			})
+		})
+	] });
+	return /* @__PURE__ */ jsxs("div", {
+		...attributes,
+		"data-layout": checkout.layout,
+		"data-fields": checkout.fields,
+		"data-summary": checkout.summary,
+		style,
+		className: "group/checkout flex min-h-screen flex-col bg-background text-foreground",
+		children: [
+			/* @__PURE__ */ jsx("header", {
+				className: "border-b border-input",
+				"data-scheme": checkout.main,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: `mx-auto flex h-16 w-full max-w-6xl items-center gap-4 px-4 lg:px-8 ${checkout.logo === "center" ? "justify-center" : "justify-between"}`,
+					children: [/* @__PURE__ */ jsx(Link, {
+						to: "/",
+						className: "flex items-center",
+						children: shop.logo ? /* @__PURE__ */ jsx("img", {
+							src: shop.logo,
+							alt: shop.name,
+							width: 144,
+							height: 36,
+							decoding: "async",
+							className: "h-9 w-auto max-w-40 object-contain"
+						}) : /* @__PURE__ */ jsx("span", {
+							className: "font-heading text-xl",
+							children: shop.name
+						})
+					}), checkout.logo === "center" ? null : /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-4 text-sm",
+						children: [checkout.secure ? /* @__PURE__ */ jsxs("span", {
+							className: "flex items-center gap-1.5 text-muted-foreground",
+							children: [/* @__PURE__ */ jsx(Lock, {}), storefrontTranslate("Compra segura")]
+						}) : null, /* @__PURE__ */ jsx(Link, {
+							to: "/cart",
+							"aria-label": storefrontTranslate("Volver al carrito"),
+							className: "text-foreground",
+							children: /* @__PURE__ */ jsx(Bag, {})
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsxs("details", {
+				className: "group/summary border-b border-input bg-muted/50 lg:hidden",
+				"data-scheme": checkout.aside,
+				children: [/* @__PURE__ */ jsxs("summary", {
+					className: "flex cursor-pointer list-none items-center justify-between px-4 py-4 text-sm",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "flex items-center gap-1.5 font-medium",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "group-open/summary:hidden",
+								children: storefrontTranslate("Mostrar resumen del pedido")
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "hidden group-open/summary:inline",
+								children: storefrontTranslate("Ocultar resumen del pedido")
+							}),
+							/* @__PURE__ */ jsx("svg", {
+								"aria-hidden": "true",
+								viewBox: "0 0 24 24",
+								className: "size-4 transition-transform group-open/summary:rotate-180",
+								fill: "none",
+								stroke: "currentColor",
+								strokeWidth: 2,
+								children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+							})
+						]
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-base font-semibold tabular-nums",
+						children: format(total)
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-5 px-4 pb-6",
+					children: [lines, totals]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mx-auto grid w-full max-w-6xl flex-1 grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(0,26rem)] group-data-[summary=left]/checkout:lg:grid-cols-[minmax(0,26rem)_minmax(0,1fr)]",
+				children: [/* @__PURE__ */ jsxs("main", {
+					className: "flex flex-col gap-8 px-4 py-8 lg:px-10 lg:py-10 group-data-[summary=left]/checkout:lg:order-2",
+					"data-scheme": checkout.main,
+					children: [
+						single ? null : /* @__PURE__ */ jsxs("nav", {
+							"aria-label": storefrontTranslate("Pasos"),
+							className: "flex flex-wrap items-center gap-2 text-xs",
+							children: [/* @__PURE__ */ jsx(Link, {
+								to: "/cart",
+								className: "underline-offset-4 hover:underline",
+								children: storefrontTranslate("Carrito")
+							}), STEPS.filter((item) => needsDelivery || item.step !== "delivery" && item.step !== "shipping").map((item) => /* @__PURE__ */ jsxs("span", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ jsx("span", {
+									"aria-hidden": "true",
+									className: "text-muted-foreground",
+									children: "›"
+								}), /* @__PURE__ */ jsx("span", {
+									className: item.step === step ? "font-semibold" : "text-muted-foreground",
+									"aria-current": item.step === step ? "step" : void 0,
+									children: storefrontTranslate(item.label)
+								})]
+							}, item.step))]
+						}),
+						alert ? /* @__PURE__ */ jsx("p", {
+							role: "alert",
+							className: "rounded-md bg-destructive/10 px-4 py-3 text-sm text-destructive",
+							children: storefrontTranslate(alert)
+						}) : null,
+						/* @__PURE__ */ jsx(Review, { rows }),
+						open("contact") ? /* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsx(Heading, {
+							aside: signedIn ? null : /* @__PURE__ */ jsx(Link, {
+								to: "/account/login?next=/checkout",
+								className: "text-sm underline underline-offset-4",
+								children: storefrontTranslate("Iniciar sesión")
+							}),
+							children: storefrontTranslate("Contacto")
+						}), /* @__PURE__ */ jsxs(CheckoutForm, {
+							single,
+							intent: "contact",
+							className: "grid gap-3 sm:grid-cols-2",
+							children: [
+								/* @__PURE__ */ jsx(Field, {
+									label: storefrontTranslate("Correo"),
+									name: "email",
+									type: "email",
+									autoComplete: "email",
+									defaultValue: cart.email ?? me?.email ?? "",
+									required: true,
+									className: "sm:col-span-2"
+								}),
+								/* @__PURE__ */ jsx(Field, {
+									label: storefrontTranslate("Nombre"),
+									name: "firstName",
+									autoComplete: "given-name",
+									defaultValue: cart.firstName ?? me?.firstName ?? "",
+									required: true
+								}),
+								/* @__PURE__ */ jsx(Field, {
+									label: storefrontTranslate("Apellidos"),
+									name: "lastName",
+									autoComplete: "family-name",
+									defaultValue: cart.lastName ?? me?.lastName ?? "",
+									required: true
+								}),
+								/* @__PURE__ */ jsx(Field, {
+									label: storefrontTranslate("Celular"),
+									name: "phone",
+									type: "tel",
+									autoComplete: "tel",
+									defaultValue: cart.phone ?? me?.phone ?? "",
+									required: true,
+									className: "sm:col-span-2"
+								}),
+								/* @__PURE__ */ jsx(InvoiceFields, {
+									cart,
+									children: (invoice) => /* @__PURE__ */ jsxs("div", {
+										className: "flex flex-col gap-3 sm:col-span-2",
+										children: [
+											/* @__PURE__ */ jsx("div", {
+												role: "radiogroup",
+												"aria-label": storefrontTranslate("Comprobante"),
+												className: `${GROUP} grid grid-cols-2 divide-x divide-input`,
+												children: invoice.options.map((option) => /* @__PURE__ */ jsxs("label", {
+													className: ROW,
+													children: [/* @__PURE__ */ jsx("input", {
+														type: "radio",
+														name: "invoiceType",
+														value: option.value,
+														checked: invoice.type === option.value,
+														onChange: () => invoice.setType(option.value),
+														className: "accent-primary"
+													}), storefrontTranslate(option.label)]
+												}, option.value))
+											}),
+											/* @__PURE__ */ jsxs(Choice, {
+												label: storefrontTranslate("País emisor del documento"),
+												...invoice.documentCountry,
+												children: [/* @__PURE__ */ jsx("option", {
+													value: "",
+													children: storefrontTranslate("Elige…")
+												}), data.documentCountries.map((country) => /* @__PURE__ */ jsx("option", {
+													value: country.code,
+													children: country.name
+												}, country.code))]
+											}),
+											invoice.type === "invoice" ? /* @__PURE__ */ jsxs("div", {
+												className: "grid gap-3 sm:grid-cols-2",
+												children: [
+													/* @__PURE__ */ jsx(Field, {
+														label: storefrontTranslate("Identificación fiscal"),
+														...invoice.taxId
+													}),
+													/* @__PURE__ */ jsx(Field, {
+														label: storefrontTranslate("Razón social"),
+														...invoice.entityName
+													}),
+													invoice.taxIdError ? /* @__PURE__ */ jsx("p", {
+														className: "text-sm text-destructive sm:col-span-2",
+														children: storefrontTranslate(invoice.taxIdError)
+													}) : null
+												]
+											}) : /* @__PURE__ */ jsxs("div", {
+												className: "grid gap-3 sm:grid-cols-2",
+												children: [
+													/* @__PURE__ */ jsx(Choice, {
+														label: storefrontTranslate("Tipo de documento"),
+														...invoice.documentType,
+														children: invoice.documentTypes.map((option) => /* @__PURE__ */ jsx("option", {
+															value: option.value,
+															children: storefrontTranslate(option.label)
+														}, option.value))
+													}),
+													/* @__PURE__ */ jsx(Field, {
+														label: storefrontTranslate(invoice.documentLabel),
+														...invoice.document
+													}),
+													invoice.documentError ? /* @__PURE__ */ jsx("p", {
+														className: "text-sm text-destructive sm:col-span-2",
+														children: storefrontTranslate(invoice.documentError)
+													}) : null
+												]
+											})
+										]
+									})
+								}),
+								single ? null : /* @__PURE__ */ jsx(Button, {
+									type: "submit",
+									size: "lg",
+									disabled: busy,
+									className: "mt-2 sm:col-span-2 sm:w-fit",
+									children: needsDelivery ? storefrontTranslate("Continuar con la entrega") : storefrontTranslate("Continuar con el pago")
+								})
+							]
+						})] }) : null,
+						needsDelivery && open("delivery") ? /* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsx(Heading, { children: storefrontTranslate("Entrega") }), /* @__PURE__ */ jsxs(CheckoutForm, {
+							single,
+							intent: "delivery",
+							className: "flex flex-col gap-3",
+							children: [/* @__PURE__ */ jsx(Address, {
+								countries,
+								defaults
+							}), single ? null : /* @__PURE__ */ jsx(Button, {
+								type: "submit",
+								size: "lg",
+								disabled: busy,
+								className: "mt-2 sm:w-fit",
+								children: storefrontTranslate("Continuar con el envío")
+							})]
+						})] }) : null,
+						needsDelivery && open("shipping") ? /* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsx(Heading, { children: storefrontTranslate("Método de envío") }), shipping.length === 0 ? /* @__PURE__ */ jsx("p", {
+							className: "rounded-md bg-muted/60 px-4 py-3 text-sm text-muted-foreground",
+							children: done.delivery ? storefrontTranslate("No hay métodos de envío para esta dirección. Prueba con otra dirección.") : storefrontTranslate("Completa la dirección para ver las opciones de envío.")
+						}) : /* @__PURE__ */ jsxs(CheckoutForm, {
+							single,
+							intent: "shipping",
+							className: "flex flex-col gap-4",
+							children: [shipping.map((group, index) => /* @__PURE__ */ jsxs("fieldset", {
+								className: "flex flex-col gap-2",
+								children: [shipping.length > 1 ? /* @__PURE__ */ jsx("legend", {
+									className: "mb-2 text-sm font-medium",
+									children: group.sellerName ? `${storefrontTranslate("Paquete de")} ${group.sellerName}` : `${storefrontTranslate("Paquete")} ${index + 1}`
+								}) : null, /* @__PURE__ */ jsx("div", {
+									className: `${GROUP} divide-y divide-input`,
+									children: group.rates.map((rate, position) => /* @__PURE__ */ jsxs("label", {
+										className: ROW,
+										children: [
+											/* @__PURE__ */ jsx("input", {
+												type: "radio",
+												name: group.field,
+												value: rate.value,
+												defaultChecked: position === 0,
+												required: true,
+												className: "accent-primary"
+											}),
+											/* @__PURE__ */ jsxs("span", {
+												className: "flex flex-1 flex-col",
+												children: [
+													/* @__PURE__ */ jsx("span", { children: rate.displayName }),
+													rate.estimatedDeliveryDays != null ? /* @__PURE__ */ jsxs("span", {
+														className: "text-xs text-muted-foreground",
+														children: [
+															storefrontTranslate("Llega en"),
+															" ",
+															rate.estimatedDeliveryDays,
+															" ",
+															rate.estimatedDeliveryDays === 1 ? storefrontTranslate("día") : storefrontTranslate("días")
+														]
+													}) : null,
+													rate.estimatedDeliveryDays == null && rate.description ? /* @__PURE__ */ jsx("span", {
+														className: "text-xs text-muted-foreground",
+														children: rate.description
+													}) : null
+												]
+											}),
+											/* @__PURE__ */ jsx("span", {
+												className: "font-medium tabular-nums",
+												children: rate.price === 0 ? storefrontTranslate("Gratis") : format(rate.price)
+											})
+										]
+									}, rate.value))
+								})]
+							}, `${group.sellerId ?? "store"}-${index}`)), single ? null : /* @__PURE__ */ jsx(Button, {
+								type: "submit",
+								size: "lg",
+								disabled: busy,
+								className: "mt-2 sm:w-fit",
+								children: storefrontTranslate("Continuar con el pago")
+							})]
+						})] }) : null,
+						open("payment") ? /* @__PURE__ */ jsxs("section", { children: [
+							/* @__PURE__ */ jsx(Heading, { children: storefrontTranslate("Pago") }),
+							checkout.encrypted ? /* @__PURE__ */ jsx("p", {
+								className: "-mt-2 mb-3 text-sm text-muted-foreground",
+								children: storefrontTranslate("Todas las transacciones son seguras y están cifradas.")
+							}) : null,
+							bumps.length > 0 ? /* @__PURE__ */ jsx("div", {
+								className: "mb-4 flex flex-col gap-2",
+								children: bumps.map((bump) => /* @__PURE__ */ jsxs(OrderBumpForm, {
+									bump,
+									className: `${GROUP} flex items-center gap-3 p-3`,
+									children: [
+										/* @__PURE__ */ jsx("span", {
+											className: "size-12 shrink-0 overflow-hidden rounded-md bg-muted",
+											children: bump.imageUrl ? /* @__PURE__ */ jsx("img", {
+												src: bump.imageUrl,
+												alt: "",
+												width: 48,
+												height: 48,
+												loading: "lazy",
+												decoding: "async",
+												className: "size-full object-cover"
+											}) : null
+										}),
+										/* @__PURE__ */ jsxs("span", {
+											className: "flex flex-1 flex-col text-sm",
+											children: [/* @__PURE__ */ jsx("span", {
+												className: "font-medium",
+												children: bump.productName
+											}), /* @__PURE__ */ jsx("span", {
+												className: "text-xs text-muted-foreground",
+												children: format(bump.offerPrice)
+											})]
+										}),
+										/* @__PURE__ */ jsx(Button, {
+											type: "submit",
+											size: "sm",
+											disabled: busy,
+											children: bump.callToAction || storefrontTranslate("Agregar")
+										})
+									]
+								}, bump.id))
+							}) : null,
+							methods.length === 0 ? /* @__PURE__ */ jsx("p", {
+								className: "rounded-md bg-muted/60 px-4 py-3 text-sm text-muted-foreground",
+								children: storefrontTranslate("La tienda todavía no tiene medios de pago activos.")
+							}) : /* @__PURE__ */ jsxs(CheckoutForm, {
+								single,
+								intent: "pay",
+								onSubmit: payment.onSubmit,
+								className: "flex flex-col gap-5",
+								children: [
+									/* @__PURE__ */ jsx("input", {
+										ref: payment.token,
+										type: "hidden",
+										name: "token",
+										defaultValue: ""
+									}),
+									/* @__PURE__ */ jsx("input", {
+										ref: payment.deviceSessionId,
+										type: "hidden",
+										name: "deviceSessionId",
+										defaultValue: ""
+									}),
+									/* @__PURE__ */ jsx("input", {
+										ref: payment.providerPaymentMethodId,
+										type: "hidden",
+										name: "providerPaymentMethodId",
+										defaultValue: ""
+									}),
+									/* @__PURE__ */ jsx("div", {
+										role: "radiogroup",
+										"aria-label": storefrontTranslate("Medio de pago"),
+										className: `${GROUP} divide-y divide-input`,
+										children: /* @__PURE__ */ jsx(PaymentMethods, {
+											methods: offeredMethods,
+											cart,
+											language: `${data.language}-${data.countryCode}`,
+											children: ({ method, logos, saving, identification, manual, receipt, charge }) => /* @__PURE__ */ jsxs("div", {
+												className: "group/method",
+												children: [/* @__PURE__ */ jsxs("label", {
+													className: ROW,
+													children: [
+														/* @__PURE__ */ jsx("input", {
+															type: "radio",
+															name: "method",
+															value: method.code,
+															defaultChecked: method.code === paymentMethod,
+															onChange: () => choosePaymentMethod(method.code),
+															required: true,
+															className: "accent-primary"
+														}),
+														/* @__PURE__ */ jsxs("span", {
+															className: "flex min-w-0 flex-1 flex-col",
+															children: [
+																/* @__PURE__ */ jsx("span", { children: method.name }),
+																method.description ? /* @__PURE__ */ jsx("span", {
+																	className: "hidden text-xs text-muted-foreground group-has-[:checked]/method:block",
+																	children: method.description
+																}) : null,
+																saving ? /* @__PURE__ */ jsx("span", {
+																	className: "text-xs text-muted-foreground",
+																	children: saving.label
+																}) : null,
+																charge ? /* @__PURE__ */ jsx("span", {
+																	className: "hidden text-xs text-muted-foreground group-has-[:checked]/method:block",
+																	children: storefrontTranslate("Se te cobrará {value0} con un tipo de cambio de {value1} por {value2}.", {
+																		value0: charge.amount,
+																		value1: charge.rate,
+																		value2: charge.unit
+																	})
+																}) : null
+															]
+														}),
+														checkout.marks ? /* @__PURE__ */ jsxs("span", {
+															className: "flex flex-wrap justify-end gap-1 max-sm:[&>img:nth-of-type(n+4)]:hidden",
+															children: [logos.map((code) => /* @__PURE__ */ jsx(PaymentLogo, {
+																code,
+																className: "h-5 w-auto"
+															}, code)), logos.length > MOBILE_LOGOS ? /* @__PURE__ */ jsxs("span", {
+																className: "rounded border border-input px-1 text-xs leading-[1.125rem] text-muted-foreground sm:hidden",
+																children: ["+", logos.length - MOBILE_LOGOS]
+															}) : null]
+														}) : null
+													]
+												}), identification || manual || receipt ? /* @__PURE__ */ jsxs("div", {
+													className: "hidden flex-col gap-3 bg-muted/40 px-4 py-3 text-sm group-has-[:checked]/method:flex",
+													children: [
+														identification ? /* @__PURE__ */ jsx(Field, {
+															label: "DNI",
+															...identification
+														}) : null,
+														manual?.qrImageUrl ? /* @__PURE__ */ jsx("img", {
+															src: manual.qrImageUrl,
+															alt: storefrontTranslate("QR de {value0}", { value0: method.name }),
+															width: 160,
+															height: 160,
+															loading: "lazy",
+															decoding: "async",
+															className: "size-40 rounded-md border border-input bg-background object-contain"
+														}) : null,
+														manual?.phoneNumber ? /* @__PURE__ */ jsxs("span", { children: [
+															storefrontTranslate("Número:"),
+															" ",
+															/* @__PURE__ */ jsx("span", {
+																className: "font-medium",
+																children: manual.phoneNumber
+															})
+														] }) : null,
+														manual?.accountHolder ? /* @__PURE__ */ jsxs("span", { children: [
+															storefrontTranslate("Titular:"),
+															" ",
+															/* @__PURE__ */ jsx("span", {
+																className: "font-medium",
+																children: manual.accountHolder
+															})
+														] }) : null,
+														manual ? /* @__PURE__ */ jsx(BankAccountList, { accounts: manual.bankAccounts }) : null,
+														receipt ? /* @__PURE__ */ jsxs("span", {
+															className: "flex flex-col gap-2",
+															children: [/* @__PURE__ */ jsx("span", {
+																className: "text-xs text-muted-foreground",
+																children: storefrontTranslate("Sube la captura de tu pago (opcional).")
+															}), /* @__PURE__ */ jsx("input", {
+																...receipt,
+																"aria-label": storefrontTranslate("Captura del pago"),
+																className: "text-xs file:mr-3 file:rounded-md file:border-0 file:bg-muted file:px-3 file:py-1.5 file:text-xs file:font-medium"
+															})]
+														}) : null
+													]
+												}) : null]
+											})
+										})
+									}),
+									/* @__PURE__ */ jsx(Button, {
+										type: "submit",
+										size: "lg",
+										disabled: paying,
+										className: checkout.button === "fit" ? "h-12 w-fit text-base" : "h-12 w-full text-base",
+										children: paying ? storefrontTranslate("Procesando…") : `${storefrontTranslate("Pagar ahora")} · ${format(cart.totals.total)}`
+									})
+								]
+							})
+						] }) : null,
+						/* @__PURE__ */ jsx(MercadoPagoDialog, { dialog: payment.dialog }),
+						/* @__PURE__ */ jsx(StripeDialog, { dialog: payment.stripeDialog })
+					]
+				}), /* @__PURE__ */ jsx("aside", {
+					className: "hidden border-input bg-muted/50 px-10 py-10 lg:block lg:border-l group-data-[summary=left]/checkout:lg:order-1 group-data-[summary=left]/checkout:lg:border-r group-data-[summary=left]/checkout:lg:border-l-0",
+					"data-scheme": checkout.aside,
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "sticky top-8 flex flex-col gap-6",
+						children: [lines, totals]
+					})
+				})]
+			})
+		]
+	});
+}
+export { Checkout, catalog, settings };