@ecomiq/storefront 2.1.4 → 3.0.0

package/src/sections/checkout.tsx

@@ -0,0 +1,586 @@
+import type { ComponentProps, CSSProperties, ReactNode, SelectHTMLAttributes } from "react";
+import { Link, useRouteLoaderData } from "react-router";
+import { Button } from "@theme/ui/button";
+import { BankAccountList, useStorefrontText, PaymentLogo, money, section, setting, type SectionCatalog, type SectionProps, type SectionRoot } from "../index";
+import { placeValue, useGeoCascade } from "../entries/account";
+import {
+  CheckoutForm,
+  CulqiAuthentication,
+  InvoiceFields,
+  MercadoPagoDialog,
+  OrderBumpForm,
+  PaymentMethods,
+  PromoCodeForm,
+  StripeAuthentication,
+  StripeDialog,
+  findStripeWallet,
+  summaryLines,
+  useAvailableStripeWallets,
+  useCheckout,
+  useCheckoutPayment,
+  type CheckoutActionData,
+  type CheckoutAddressDefaults,
+  type CheckoutData,
+  type CheckoutStep,
+} from "../entries/checkout";
+
+export const catalog: SectionCatalog = {
+  name: "Finalizar compra",
+  description: "Checkout de la tienda: contacto, entrega, envío y pago, con el resumen del pedido.",
+};
+
+export 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" }),
+  },
+};
+
+type Corners = (typeof settings.checkout)["corners"];
+type Shop = { name: string; logo: string | null; language: string };
+
+const RADIUS: { [corner in Corners]: string } = { 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: readonly { step: CheckoutStep; label: string }[] = [
+  { step: "contact", label: "Contacto" },
+  { step: "delivery", label: "Entrega" },
+  { step: "shipping", label: "Envío" },
+  { step: "payment", label: "Pago" },
+];
+
+function shopOf(data: unknown): Shop {
+  const shop = typeof data === "object" && data !== null ? (data as { shop?: Partial<Shop> }).shop : undefined;
+  return { name: shop?.name ?? "", logo: shop?.logo ?? null, language: shop?.language ?? "es" };
+}
+
+function Lock() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth={1.8}>
+      <rect x="5" y="11" width="14" height="9" rx="2" />
+      <path d="M8 11V8a4 4 0 0 1 8 0v3" />
+    </svg>
+  );
+}
+
+function Bag() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 24 24" className="size-5" fill="none" stroke="currentColor" strokeWidth={1.6}>
+      <path d="M6 8h12l-1 12H7L6 8Z" />
+      <path d="M9 8a3 3 0 0 1 6 0" />
+    </svg>
+  );
+}
+
+function Field({ label, className, ...props }: ComponentProps<"input"> & { label: string; name: string }) {
+  return (
+    <label className={`relative block ${className ?? ""}`}>
+      <input id={props.id ?? props.name} placeholder={label} className={FIELD} {...props} />
+      <span className={FLOAT}>{label}</span>
+    </label>
+  );
+}
+
+function Choice({ label, className, children, ...props }: SelectHTMLAttributes<HTMLSelectElement> & { label: string; name: string }) {
+  return (
+    <label className={`relative block ${className ?? ""}`}>
+      <select id={props.id ?? props.name} className={`${FIELD} appearance-none pr-9`} {...props}>
+        {children}
+      </select>
+      <span className="pointer-events-none absolute top-3 left-3.5 -translate-y-1/2 text-[11px] text-muted-foreground">{label}</span>
+      <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}>
+        <path d="m6 9 6 6 6-6" />
+      </svg>
+    </label>
+  );
+}
+
+function Address({ countries, defaults }: { countries: { code: string; name: string }[]; defaults: CheckoutAddressDefaults }) {
+  const storefrontTranslate = useStorefrontText();
+  const geo = useGeoCascade({ ...defaults, country: countries[0]?.code });
+  const { country, department, province, district } = geo;
+  return (
+    <div className="grid gap-3 sm:grid-cols-2">
+      <Choice label={storefrontTranslate("País")} name="country" value={country} onChange={(event) => geo.setCountry(event.target.value)} className="sm:col-span-2">
+        {countries.map((item) => (
+          <option key={item.code} value={item.code}>
+            {item.name}
+          </option>
+        ))}
+      </Choice>
+      {geo.structured ? (
+        <>
+          <Choice label={storefrontTranslate("Departamento")} name="department" required value={placeValue(department)} onChange={(event) => geo.setDepartmentValue(event.target.value)}>
+            <option value="">{storefrontTranslate("Elige…")}</option>
+            {geo.places.departments.map((item) => (
+              <option key={item.code} value={placeValue(item)}>
+                {item.name}
+              </option>
+            ))}
+          </Choice>
+          <Choice label={storefrontTranslate("Provincia")} name="province" required disabled={department === null} value={placeValue(province)} onChange={(event) => geo.setProvinceValue(event.target.value)}>
+            <option value="">{storefrontTranslate("Elige…")}</option>
+            {geo.places.provinces.map((item) => (
+              <option key={item.code} value={placeValue(item)}>
+                {item.name}
+              </option>
+            ))}
+          </Choice>
+          <Choice
+            label={storefrontTranslate("Distrito")}
+            name="district"
+            required
+            disabled={province === null}
+            value={placeValue(district)}
+            onChange={(event) => geo.setDistrictValue(event.target.value)}
+            className="sm:col-span-2"
+          >
+            <option value="">{storefrontTranslate("Elige…")}</option>
+            {geo.places.districts.map((item) => (
+              <option key={item.code} value={placeValue(item)}>
+                {item.name}
+              </option>
+            ))}
+          </Choice>
+        </>
+      ) : (
+        <>
+          <Field label={storefrontTranslate("Región")} name="department" defaultValue={defaults.department ?? ""} required />
+          <Field label={storefrontTranslate("Ciudad")} name="district" defaultValue={defaults.district ?? ""} required />
+        </>
+      )}
+      <Field label={storefrontTranslate("Dirección")} name="line" autoComplete="street-address" defaultValue={defaults.line ?? ""} required className="sm:col-span-2" />
+      <Field label={storefrontTranslate("Referencia (opcional)")} name="reference" defaultValue={defaults.reference ?? ""} />
+      <Field label={storefrontTranslate("Celular")} name="phone" type="tel" autoComplete="tel" defaultValue={defaults.phone ?? ""} required />
+    </div>
+  );
+}
+
+function Heading({ children, aside }: { children: ReactNode; aside?: ReactNode }) {
+  return (
+    <div className="mb-3 flex items-baseline justify-between gap-3">
+      <h2 className="text-lg font-semibold">{children}</h2>
+      {aside}
+    </div>
+  );
+}
+
+function Review({ rows }: { rows: { step: CheckoutStep; label: string; value: string }[] }) {
+  const storefrontTranslate = useStorefrontText();
+  if (rows.length === 0) return null;
+  return (
+    <dl className={`${GROUP} divide-y divide-input text-sm`}>
+      {rows.map((row) => (
+        <div key={row.step} className="flex items-start gap-4 px-4 py-3">
+          <dt className="w-24 shrink-0 text-muted-foreground">{storefrontTranslate(row.label)}</dt>
+          <dd className="min-w-0 flex-1 truncate">{row.value}</dd>
+          <Link to={`?edit=${row.step}`} className="shrink-0 text-xs underline underline-offset-4">
+            {storefrontTranslate("Cambiar")}</Link>
+        </div>
+      ))}
+    </dl>
+  );
+}
+
+const MOBILE_LOGOS = 3;
+
+export function Checkout({ data, result, ...root }: { data: CheckoutData; result?: CheckoutActionData } & SectionProps<typeof settings.checkout> & SectionRoot) {
+  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 <StripeAuthentication {...result.authentication} />;
+    return <CulqiAuthentication {...result.authentication} email={cart.email} source={payment.source.current} />;
+  }
+  const alert = payment.error ?? error;
+  const paying = busy || payment.loading;
+  const format = (value: number) => 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] } as CSSProperties;
+  const total = summaryLines(cart).find((line) => line.key === "total")?.amount ?? cart.totals.total;
+  const open = (current: CheckoutStep) => single || step === current;
+  const saved = cart.shippingAddress;
+  const current = STEPS.findIndex((item) => item.step === step);
+  const rows: { step: CheckoutStep; label: string; value: string }[] = [];
+  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 = (
+    <ul className="flex flex-col gap-4">
+      {cart.items.map((item) => (
+        <li key={item.id} className="flex items-center gap-4 text-sm">
+          <span className="relative size-16 shrink-0 rounded-md border border-input bg-background">
+            <span className="block size-full overflow-hidden rounded-md">
+              {item.thumbnail ? <img src={item.thumbnail} alt="" width={64} height={64} loading="lazy" decoding="async" className="size-full object-cover" /> : null}
+            </span>
+            <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">{item.quantity}</span>
+          </span>
+          <span className="flex min-w-0 flex-1 flex-col">
+            <span className="font-medium">{item.title}</span>
+            {item.variantLabel && item.variantLabel !== item.title ? <span className="text-xs text-muted-foreground">{item.variantLabel}</span> : null}
+            {item.sellerName ? <span className="text-xs text-muted-foreground">{storefrontTranslate("Vendido por")} {item.sellerName}</span> : null}
+          </span>
+          <span className="tabular-nums">{format(item.unitPrice * item.quantity)}</span>
+        </li>
+      ))}
+    </ul>
+  );
+  const totals = (
+    <>
+      <PromoCodeForm className="flex gap-2">
+        <Field label={storefrontTranslate("Código de descuento")} name="code" className="flex-1" />
+        <Button type="submit" disabled={busy}>
+          {storefrontTranslate("Aplicar")}</Button>
+      </PromoCodeForm>
+      {promoError ? <p className="-mt-3 text-sm text-destructive">{storefrontTranslate(promoError)}</p> : null}
+      {cart.promotionCodes.map((code) => (
+        <PromoCodeForm key={code} remove={code} className="flex items-center justify-between text-sm">
+          <span className="rounded-md bg-muted px-2 py-1 font-medium">{code}</span>
+          <button type="submit" className="text-xs underline underline-offset-4">
+            {storefrontTranslate("Quitar")}</button>
+        </PromoCodeForm>
+      ))}
+      <dl className="flex flex-col gap-2 text-sm">
+        {summaryLines(cart).map((line) => {
+          if (line.key === "total")
+            return (
+              <div key={line.key} className="flex items-baseline justify-between pt-2">
+                <dt className="text-base font-semibold">{storefrontTranslate(line.label)}</dt>
+                <dd className="flex items-baseline gap-2">
+                  <span className="text-xs text-muted-foreground">{cart.currencyCode}</span>
+                  <span className="text-xl font-semibold tabular-nums">{format(line.amount ?? 0)}</span>
+                </dd>
+              </div>
+            );
+          return (
+            <div key={line.key} className="flex justify-between">
+              <dt className="text-muted-foreground">{storefrontTranslate(line.label)}</dt>
+              <dd className="tabular-nums">{line.amount === null ? storefrontTranslate(line.text ?? "") : format(line.amount)}</dd>
+            </div>
+          );
+        })}
+      </dl>
+    </>
+  );
+  return (
+    <div
+      {...attributes}
+      data-layout={checkout.layout}
+      data-fields={checkout.fields}
+      data-summary={checkout.summary}
+      style={style}
+      className="group/checkout flex min-h-screen flex-col bg-background text-foreground"
+    >
+      <header className="border-b border-input" data-scheme={checkout.main}>
+        <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"}`}>
+          <Link to="/" className="flex items-center">
+            {shop.logo ? <img src={shop.logo} alt={shop.name} width={144} height={36} decoding="async" className="h-9 w-auto max-w-40 object-contain" /> : <span className="font-heading text-xl">{shop.name}</span>}
+          </Link>
+          {checkout.logo === "center" ? null : (
+            <div className="flex items-center gap-4 text-sm">
+              {checkout.secure ? (
+                <span className="flex items-center gap-1.5 text-muted-foreground">
+                  <Lock />
+                  {storefrontTranslate("Compra segura")}</span>
+              ) : null}
+              <Link to="/cart" aria-label={storefrontTranslate("Volver al carrito")} className="text-foreground">
+                <Bag />
+              </Link>
+            </div>
+          )}
+        </div>
+      </header>
+      <details className="group/summary border-b border-input bg-muted/50 lg:hidden" data-scheme={checkout.aside}>
+        <summary className="flex cursor-pointer list-none items-center justify-between px-4 py-4 text-sm">
+          <span className="flex items-center gap-1.5 font-medium">
+            <span className="group-open/summary:hidden">{storefrontTranslate("Mostrar resumen del pedido")}</span>
+            <span className="hidden group-open/summary:inline">{storefrontTranslate("Ocultar resumen del pedido")}</span>
+            <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}>
+              <path d="m6 9 6 6 6-6" />
+            </svg>
+          </span>
+          <span className="text-base font-semibold tabular-nums">{format(total)}</span>
+        </summary>
+        <div className="flex flex-col gap-5 px-4 pb-6">
+          {lines}
+          {totals}
+        </div>
+      </details>
+      <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)]">
+        <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}>
+          {single ? null : (
+            <nav aria-label={storefrontTranslate("Pasos")} className="flex flex-wrap items-center gap-2 text-xs">
+              <Link to="/cart" className="underline-offset-4 hover:underline">
+                {storefrontTranslate("Carrito")}</Link>
+              {STEPS.filter((item) => needsDelivery || (item.step !== "delivery" && item.step !== "shipping")).map((item) => (
+                <span key={item.step} className="flex items-center gap-2">
+                  <span aria-hidden="true" className="text-muted-foreground">
+                    ›
+                  </span>
+                  <span className={item.step === step ? "font-semibold" : "text-muted-foreground"} aria-current={item.step === step ? "step" : undefined}>
+                    {storefrontTranslate(item.label)}
+                  </span>
+                </span>
+              ))}
+            </nav>
+          )}
+          {alert ? (
+            <p role="alert" className="rounded-md bg-destructive/10 px-4 py-3 text-sm text-destructive">
+              {storefrontTranslate(alert)}
+            </p>
+          ) : null}
+          <Review rows={rows} />
+          {open("contact") ? (
+            <section>
+              <Heading
+                aside={
+                  signedIn ? null : (
+                    <Link to="/account/login?next=/checkout" className="text-sm underline underline-offset-4">
+                      {storefrontTranslate("Iniciar sesión")}</Link>
+                  )
+                }
+              >
+                {storefrontTranslate("Contacto")}</Heading>
+              <CheckoutForm single={single} intent="contact" className="grid gap-3 sm:grid-cols-2">
+                <Field label={storefrontTranslate("Correo")} name="email" type="email" autoComplete="email" defaultValue={cart.email ?? me?.email ?? ""} required className="sm:col-span-2" />
+                <Field label={storefrontTranslate("Nombre")} name="firstName" autoComplete="given-name" defaultValue={cart.firstName ?? me?.firstName ?? ""} required />
+                <Field label={storefrontTranslate("Apellidos")} name="lastName" autoComplete="family-name" defaultValue={cart.lastName ?? me?.lastName ?? ""} required />
+                <Field label={storefrontTranslate("Celular")} name="phone" type="tel" autoComplete="tel" defaultValue={cart.phone ?? me?.phone ?? ""} required className="sm:col-span-2" />
+                <InvoiceFields cart={cart}>
+                  {(invoice) => (
+                    <div className="flex flex-col gap-3 sm:col-span-2">
+                      <div role="radiogroup" aria-label={storefrontTranslate("Comprobante")} className={`${GROUP} grid grid-cols-2 divide-x divide-input`}>
+                        {invoice.options.map((option) => (
+                          <label key={option.value} className={ROW}>
+                            <input type="radio" name="invoiceType" value={option.value} checked={invoice.type === option.value} onChange={() => invoice.setType(option.value)} className="accent-primary" />
+                            {storefrontTranslate(option.label)}
+                          </label>
+                        ))}
+                      </div>
+                      <Choice label={storefrontTranslate("País emisor del documento")} {...invoice.documentCountry}>
+                        <option value="">{storefrontTranslate("Elige…")}</option>
+                        {data.documentCountries.map((country) => <option key={country.code} value={country.code}>{country.name}</option>)}
+                      </Choice>
+                      {invoice.type === "invoice" ? (
+                        <div className="grid gap-3 sm:grid-cols-2">
+                          <Field label={storefrontTranslate("Identificación fiscal")} {...invoice.taxId} />
+                          <Field label={storefrontTranslate("Razón social")} {...invoice.entityName} />
+                          {invoice.taxIdError ? <p className="text-sm text-destructive sm:col-span-2">{storefrontTranslate(invoice.taxIdError)}</p> : null}
+                        </div>
+                      ) : (
+                        <div className="grid gap-3 sm:grid-cols-2">
+                          <Choice label={storefrontTranslate("Tipo de documento")} {...invoice.documentType}>
+                            {invoice.documentTypes.map((option) => (
+                              <option key={option.value} value={option.value}>
+                                {storefrontTranslate(option.label)}
+                              </option>
+                            ))}
+                          </Choice>
+                          <Field label={storefrontTranslate(invoice.documentLabel)} {...invoice.document} />
+                          {invoice.documentError ? <p className="text-sm text-destructive sm:col-span-2">{storefrontTranslate(invoice.documentError)}</p> : null}
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </InvoiceFields>
+                {single ? null : (
+                  <Button type="submit" size="lg" disabled={busy} className="mt-2 sm:col-span-2 sm:w-fit">
+                    {needsDelivery ? storefrontTranslate("Continuar con la entrega") : storefrontTranslate("Continuar con el pago")}
+                  </Button>
+                )}
+              </CheckoutForm>
+            </section>
+          ) : null}
+          {needsDelivery && open("delivery") ? (
+            <section>
+              <Heading>{storefrontTranslate("Entrega")}</Heading>
+              <CheckoutForm single={single} intent="delivery" className="flex flex-col gap-3">
+                <Address countries={countries} defaults={defaults} />
+                {single ? null : (
+                  <Button type="submit" size="lg" disabled={busy} className="mt-2 sm:w-fit">
+                    {storefrontTranslate("Continuar con el envío")}</Button>
+                )}
+              </CheckoutForm>
+            </section>
+          ) : null}
+          {needsDelivery && open("shipping") ? (
+            <section>
+              <Heading>{storefrontTranslate("Método de envío")}</Heading>
+              {shipping.length === 0 ? (
+                <p className="rounded-md bg-muted/60 px-4 py-3 text-sm text-muted-foreground">
+                  {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.")}
+                </p>
+              ) : (
+                <CheckoutForm single={single} intent="shipping" className="flex flex-col gap-4">
+                  {shipping.map((group, index) => (
+                    <fieldset key={`${group.sellerId ?? "store"}-${index}`} className="flex flex-col gap-2">
+                      {shipping.length > 1 ? <legend className="mb-2 text-sm font-medium">{group.sellerName ? `${storefrontTranslate("Paquete de")} ${group.sellerName}` : `${storefrontTranslate("Paquete")} ${index + 1}`}</legend> : null}
+                      <div className={`${GROUP} divide-y divide-input`}>
+                        {group.rates.map((rate, position) => (
+                          <label key={rate.value} className={ROW}>
+                            <input type="radio" name={group.field} value={rate.value} defaultChecked={position === 0} required className="accent-primary" />
+                            <span className="flex flex-1 flex-col">
+                              <span>{rate.displayName}</span>
+                              {rate.estimatedDeliveryDays != null ? (
+                                <span className="text-xs text-muted-foreground">
+                                  {storefrontTranslate("Llega en")} {rate.estimatedDeliveryDays} {rate.estimatedDeliveryDays === 1 ? storefrontTranslate("día") : storefrontTranslate("días")}
+                                </span>
+                              ) : null}
+                              {rate.estimatedDeliveryDays == null && rate.description ? <span className="text-xs text-muted-foreground">{rate.description}</span> : null}
+                            </span>
+                            <span className="font-medium tabular-nums">{rate.price === 0 ? storefrontTranslate("Gratis") : format(rate.price)}</span>
+                          </label>
+                        ))}
+                      </div>
+                    </fieldset>
+                  ))}
+                  {single ? null : (
+                    <Button type="submit" size="lg" disabled={busy} className="mt-2 sm:w-fit">
+                      {storefrontTranslate("Continuar con el pago")}</Button>
+                  )}
+                </CheckoutForm>
+              )}
+            </section>
+          ) : null}
+          {open("payment") ? (
+            <section>
+              <Heading>{storefrontTranslate("Pago")}</Heading>
+              {checkout.encrypted ? <p className="-mt-2 mb-3 text-sm text-muted-foreground">{storefrontTranslate("Todas las transacciones son seguras y están cifradas.")}</p> : null}
+              {bumps.length > 0 ? (
+                <div className="mb-4 flex flex-col gap-2">
+                  {bumps.map((bump) => (
+                    <OrderBumpForm key={bump.id} bump={bump} className={`${GROUP} flex items-center gap-3 p-3`}>
+                      <span className="size-12 shrink-0 overflow-hidden rounded-md bg-muted">
+                        {bump.imageUrl ? <img src={bump.imageUrl} alt="" width={48} height={48} loading="lazy" decoding="async" className="size-full object-cover" /> : null}
+                      </span>
+                      <span className="flex flex-1 flex-col text-sm">
+                        <span className="font-medium">{bump.productName}</span>
+                        <span className="text-xs text-muted-foreground">{format(bump.offerPrice)}</span>
+                      </span>
+                      <Button type="submit" size="sm" disabled={busy}>
+                        {bump.callToAction || storefrontTranslate("Agregar")}
+                      </Button>
+                    </OrderBumpForm>
+                  ))}
+                </div>
+              ) : null}
+              {methods.length === 0 ? (
+                <p className="rounded-md bg-muted/60 px-4 py-3 text-sm text-muted-foreground">{storefrontTranslate("La tienda todavía no tiene medios de pago activos.")}</p>
+              ) : (
+                <CheckoutForm single={single} intent="pay" onSubmit={payment.onSubmit} className="flex flex-col gap-5">
+                  <input ref={payment.token} type="hidden" name="token" defaultValue="" />
+                  <input ref={payment.deviceSessionId} type="hidden" name="deviceSessionId" defaultValue="" />
+                  <input ref={payment.providerPaymentMethodId} type="hidden" name="providerPaymentMethodId" defaultValue="" />
+                  <div role="radiogroup" aria-label={storefrontTranslate("Medio de pago")} className={`${GROUP} divide-y divide-input`}>
+                    <PaymentMethods methods={offeredMethods} cart={cart} language={`${data.language}-${data.countryCode}`}>
+                      {({ method, logos, saving, identification, manual, receipt, charge }) => (
+                        <div className="group/method">
+                          <label className={ROW}>
+                            <input
+                              type="radio"
+                              name="method"
+                              value={method.code}
+                              defaultChecked={method.code === paymentMethod}
+                              onChange={() => choosePaymentMethod(method.code)}
+                              required
+                              className="accent-primary"
+                            />
+                            <span className="flex min-w-0 flex-1 flex-col">
+                              <span>{method.name}</span>
+                              {method.description ? <span className="hidden text-xs text-muted-foreground group-has-[:checked]/method:block">{method.description}</span> : null}
+                              {saving ? <span className="text-xs text-muted-foreground">{saving.label}</span> : null}
+                              {charge ? (
+                                <span className="hidden text-xs text-muted-foreground group-has-[:checked]/method:block">
+                                  {storefrontTranslate("Se te cobrará {value0} con un tipo de cambio de {value1} por {value2}.", {
+                                    value0: charge.amount,
+                                    value1: charge.rate,
+                                    value2: charge.unit,
+                                  })}
+                                </span>
+                              ) : null}
+                            </span>
+                            {checkout.marks ? (
+                              <span className="flex flex-wrap justify-end gap-1 max-sm:[&>img:nth-of-type(n+4)]:hidden">
+                                {logos.map((code) => (
+                                  <PaymentLogo key={code} code={code} className="h-5 w-auto" />
+                                ))}
+                                {logos.length > MOBILE_LOGOS ? (
+                                  <span className="rounded border border-input px-1 text-xs leading-[1.125rem] text-muted-foreground sm:hidden">+{logos.length - MOBILE_LOGOS}</span>
+                                ) : null}
+                              </span>
+                            ) : null}
+                          </label>
+                          {identification || manual || receipt ? (
+                            <div className="hidden flex-col gap-3 bg-muted/40 px-4 py-3 text-sm group-has-[:checked]/method:flex">
+                              {identification ? <Field label="DNI" {...identification} /> : null}
+                              {manual?.qrImageUrl ? (
+                                <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 ? (
+                                <span>
+                                  {storefrontTranslate("Número:")} <span className="font-medium">{manual.phoneNumber}</span>
+                                </span>
+                              ) : null}
+                              {manual?.accountHolder ? (
+                                <span>
+                                  {storefrontTranslate("Titular:")} <span className="font-medium">{manual.accountHolder}</span>
+                                </span>
+                              ) : null}
+                              {manual ? <BankAccountList accounts={manual.bankAccounts} /> : null}
+                              {receipt ? (
+                                <span className="flex flex-col gap-2">
+                                  <span className="text-xs text-muted-foreground">{storefrontTranslate("Sube la captura de tu pago (opcional).")}</span>
+                                  <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" />
+                                </span>
+                              ) : null}
+                            </div>
+                          ) : null}
+                        </div>
+                      )}
+                    </PaymentMethods>
+                  </div>
+                  <Button type="submit" size="lg" disabled={paying} className={checkout.button === "fit" ? "h-12 w-fit text-base" : "h-12 w-full text-base"}>
+                    {paying ? storefrontTranslate("Procesando…") : `${storefrontTranslate("Pagar ahora")} · ${format(cart.totals.total)}`}
+                  </Button>
+                </CheckoutForm>
+              )}
+            </section>
+          ) : null}
+          <MercadoPagoDialog dialog={payment.dialog} />
+          <StripeDialog dialog={payment.stripeDialog} />
+        </main>
+        <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}
+        >
+          <div className="sticky top-8 flex flex-col gap-6">
+            {lines}
+            {totals}
+          </div>
+        </aside>
+      </div>
+    </div>
+  );
+}