@ecomiq/storefront 2.1.4 → 3.0.0

package/src/sections/account-addresses.tsx

@@ -0,0 +1,215 @@
+import type { CustomerAddress } from "@ecomiq/core";
+import { useState, type ReactNode } from "react";
+import { useNavigation } from "react-router";
+import { Badge } from "@theme/ui/badge";
+import { Button } from "@theme/ui/button";
+import { Input } from "@theme/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@theme/ui/select";
+import { useStorefrontText, type SectionCatalog } from "../index";
+import { AddressForm, addressDefaults, placeValue, useGeoCascade, type AddressActionData, type AddressDefaults } from "../entries/account";
+
+export const catalog: SectionCatalog = {
+  name: "Mis direcciones",
+  description: "Lista, agrega y edita las direcciones del cliente.",
+};
+
+type Country = { code: string; name: string };
+type Place = { code: string; name: string };
+
+function Labeled({ label, className = "", children }: { label: string; className?: string; children: ReactNode }) {
+  return (
+    <div className={`flex flex-col gap-1.5 text-sm ${className}`}>
+      <span className="font-medium">{label}</span>
+      {children}
+    </div>
+  );
+}
+
+function Choice({ name, label, value, items, disabled, required, onChange }: { name: string; label: string; value: string; items: { value: string; name: string }[]; disabled?: boolean; required?: boolean; onChange: (value: string) => void }) {
+  const storefrontTranslate = useStorefrontText();
+  return (
+    <Labeled label={label}>
+      <Select name={name} required={required} disabled={disabled} value={value} onValueChange={onChange}>
+        <SelectTrigger aria-label={label} className="h-11 w-full data-[size=default]:h-11">
+          <SelectValue placeholder={storefrontTranslate("Elige…")}>{items.find((item) => item.value === value)?.name}</SelectValue>
+        </SelectTrigger>
+        <SelectContent className="max-h-72">
+          {items.map((item) => (
+            <SelectItem key={item.value} value={item.value}>
+              {item.name}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </Labeled>
+  );
+}
+
+function PlaceSelect({ name, label, items, value, disabled, onChange }: { name: string; label: string; items: Place[]; value: Place | null; disabled?: boolean; onChange: (value: string) => void }) {
+  return (
+    <Choice
+      name={name}
+      label={label}
+      required
+      disabled={disabled}
+      value={placeValue(value)}
+      items={items.map((item) => ({ value: placeValue(item), name: item.name }))}
+      onChange={onChange}
+    />
+  );
+}
+
+function AddressFields({ countries, defaults, label }: { countries: Country[]; defaults: AddressDefaults; label: string }) {
+  const storefrontTranslate = useStorefrontText();
+  const geo = useGeoCascade({ ...defaults, country: defaults.country ?? countries[0]?.code });
+  return (
+    <div className="grid gap-4 sm:grid-cols-2">
+      <Labeled label={storefrontTranslate("Nombre de la dirección")} className="sm:col-span-2">
+        <Input name="label" defaultValue={label} placeholder={storefrontTranslate("Casa, oficina…")} maxLength={50} />
+      </Labeled>
+      {countries.length > 1 ? (
+        <div className="sm:col-span-2">
+          <Choice name="country" label={storefrontTranslate("País")} value={geo.country} items={countries.map((item) => ({ value: item.code, name: item.name }))} onChange={geo.setCountry} />
+        </div>
+      ) : (
+        <input type="hidden" name="country" value={geo.country} />
+      )}
+      {geo.structured ? (
+        <>
+          <PlaceSelect name="department" label={storefrontTranslate("Departamento")} items={geo.places.departments} value={geo.department} onChange={geo.setDepartmentValue} />
+          <PlaceSelect name="province" label={storefrontTranslate("Provincia")} items={geo.places.provinces} value={geo.province} disabled={geo.department === null} onChange={geo.setProvinceValue} />
+          <PlaceSelect name="district" label={storefrontTranslate("Distrito")} items={geo.places.districts} value={geo.district} disabled={geo.province === null} onChange={geo.setDistrictValue} />
+        </>
+      ) : (
+        <>
+          <Labeled label={storefrontTranslate("Región")}>
+            <Input name="department" defaultValue={defaults.department ?? ""} required />
+          </Labeled>
+          <Labeled label={storefrontTranslate("Ciudad")}>
+            <Input name="district" defaultValue={defaults.district ?? ""} required />
+          </Labeled>
+        </>
+      )}
+      <Labeled label={storefrontTranslate("Dirección")} className="sm:col-span-2">
+        <Input name="line" autoComplete="street-address" defaultValue={defaults.line ?? ""} required />
+      </Labeled>
+      <Labeled label={storefrontTranslate("Referencia (opcional)")}>
+        <Input name="reference" defaultValue={defaults.reference ?? ""} />
+      </Labeled>
+      <Labeled label={storefrontTranslate("Celular")}>
+        <Input name="phone" type="tel" autoComplete="tel" defaultValue={defaults.phone ?? ""} />
+      </Labeled>
+    </div>
+  );
+}
+
+function AddressEditor({ address, countries, primary, onDone }: { address: CustomerAddress | null; countries: Country[]; primary: boolean; onDone: () => void }) {
+  const storefrontTranslate = useStorefrontText();
+  const busy = useNavigation().state !== "idle";
+  return (
+    <AddressForm addressId={address?.id} className="flex flex-col gap-5 rounded-lg border bg-card p-5 text-card-foreground md:col-span-2 md:p-6" onSubmit={onDone}>
+      <h3 className="font-heading text-lg">{address ? storefrontTranslate("Editar dirección") : storefrontTranslate("Nueva dirección")}</h3>
+      <AddressFields countries={countries} defaults={addressDefaults(address)} label={address?.addressKey ?? ""} />
+      <label className="flex items-center gap-3 text-sm">
+        <input type="checkbox" name="default" defaultChecked={address?.isDefault ?? primary} className="size-4 accent-primary" />
+        {storefrontTranslate("Usar como dirección principal")}
+      </label>
+      <div className="flex flex-wrap gap-2">
+        <Button type="submit" disabled={busy}>{busy ? storefrontTranslate("Guardando…") : storefrontTranslate("Guardar dirección")}</Button>
+        <Button type="button" variant="ghost" onClick={onDone}>{storefrontTranslate("Cancelar")}</Button>
+      </div>
+    </AddressForm>
+  );
+}
+
+function AddressCard({ address, onEdit }: { address: CustomerAddress; onEdit: () => void }) {
+  const storefrontTranslate = useStorefrontText();
+  const [confirming, setConfirming] = useState(false);
+  const locality = [address.district, address.province, address.department].filter(Boolean).join(", ");
+  const phone = address.cellPhone ?? address.phone;
+  return (
+    <div className="flex h-full flex-col gap-4 rounded-lg border bg-card p-5 text-sm text-card-foreground md:p-6">
+      <div className="flex items-center justify-between gap-3">
+        <p className="font-heading text-lg capitalize">{address.addressKey}</p>
+        {address.isDefault ? <Badge variant="secondary">{storefrontTranslate("Principal")}</Badge> : null}
+      </div>
+      <div className="flex flex-col gap-1">
+        <p>{address.addressLine}</p>
+        {address.reference ? <p className="text-muted-foreground">{address.reference}</p> : null}
+        {locality !== "" ? <p className="text-muted-foreground">{locality}</p> : null}
+        {phone ? <p className="text-muted-foreground">{phone}</p> : null}
+      </div>
+      {confirming ? (
+        <div className="mt-auto flex flex-wrap items-center gap-3 border-t pt-4">
+          <span>{storefrontTranslate("¿Eliminar esta dirección?")}</span>
+          <AddressForm intent="delete" addressId={address.id}>
+            <button type="submit" className="font-medium text-destructive underline underline-offset-4">{storefrontTranslate("Eliminar")}</button>
+          </AddressForm>
+          <button type="button" className="text-muted-foreground underline underline-offset-4" onClick={() => setConfirming(false)}>{storefrontTranslate("Cancelar")}</button>
+        </div>
+      ) : (
+        <div className="mt-auto flex flex-wrap gap-x-4 gap-y-2 border-t pt-4">
+          <button type="button" className="font-medium underline underline-offset-4" onClick={onEdit}>{storefrontTranslate("Editar")}</button>
+          {!address.isDefault ? (
+            <AddressForm intent="default" addressId={address.id}>
+              <button type="submit" className="underline underline-offset-4">{storefrontTranslate("Hacer principal")}</button>
+            </AddressForm>
+          ) : null}
+          <button type="button" className="text-muted-foreground underline underline-offset-4 hover:text-destructive" onClick={() => setConfirming(true)}>{storefrontTranslate("Eliminar")}</button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function AccountAddresses({ loaderData, actionData }: { loaderData: { addresses: CustomerAddress[]; countries: Country[] }; actionData?: AddressActionData }) {
+  const storefrontTranslate = useStorefrontText();
+  const { addresses, countries } = loaderData;
+  const [editing, setEditing] = useState<string | null>(null);
+  const navigation = useNavigation();
+  const error = actionData?.error ?? null;
+  const sorted = [...addresses].sort((a, b) => Number(b.isDefault) - Number(a.isDefault));
+  const adding = editing === "new";
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-wrap items-baseline justify-between gap-4">
+        <h2 className="text-3xl">{storefrontTranslate("Direcciones")}</h2>
+        {adding ? null : (
+          <Button type="button" variant="outline" onClick={() => setEditing("new")} disabled={navigation.state !== "idle"}>
+            {storefrontTranslate("Agregar dirección")}
+          </Button>
+        )}
+      </div>
+      {error ? (
+        <p role="alert" className="rounded-md bg-destructive/10 px-4 py-3 text-sm text-destructive">
+          {storefrontTranslate(error)}
+        </p>
+      ) : null}
+      {addresses.length === 0 && !adding ? (
+        <div className="flex flex-col items-start gap-3 rounded-lg border bg-card p-8 text-card-foreground">
+          <p className="font-heading text-xl">{storefrontTranslate("Aún no guardas direcciones")}</p>
+          <p className="text-sm text-muted-foreground">{storefrontTranslate("Guarda una dirección para comprar más rápido.")}</p>
+          <Button type="button" onClick={() => setEditing("new")}>{storefrontTranslate("Agregar dirección")}</Button>
+        </div>
+      ) : null}
+      <ul className="grid gap-4 md:grid-cols-2">
+        {adding ? (
+          <li className="md:col-span-2">
+            <AddressEditor address={null} countries={countries} primary={addresses.length === 0} onDone={() => setEditing(null)} />
+          </li>
+        ) : null}
+        {sorted.map((address) =>
+          editing === address.id ? (
+            <li key={address.id} className="md:col-span-2">
+              <AddressEditor address={address} countries={countries} primary={false} onDone={() => setEditing(null)} />
+            </li>
+          ) : (
+            <li key={address.id}>
+              <AddressCard address={address} onEdit={() => setEditing(address.id)} />
+            </li>
+          ),
+        )}
+      </ul>
+    </div>
+  );
+}

package/src/sections/account-order.tsx

@@ -0,0 +1,424 @@
+import { formatOrderDate, type CustomerOrderDetail, type CustomerOrderLineItem, type OrderStep } from "@ecomiq/core";
+import { useEffect, useState } from "react";
+import { Form, Link, useNavigation } from "react-router";
+import { Button } from "@theme/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@theme/ui/select";
+import { Textarea } from "@theme/ui/textarea";
+import { CustomerCsrfField, money, orderProgress, useStorefrontLocale, useStorefrontText, type SectionCatalog } from "../index";
+import {
+  PayButton,
+  PaymentPreview,
+  ReorderButton,
+  orderStepLabel,
+  orderStepOf,
+  orderSummaryLines,
+  paymentStatusLabel,
+  useOrderStepDetail,
+  type OrderRequestActionData,
+} from "../entries/account";
+
+export const catalog: SectionCatalog = {
+  name: "Detalle del pedido",
+  description: "Estado de cada producto, seguimiento, pago y totales de un pedido del cliente.",
+};
+
+const STEP_ORDER: Record<OrderStep, number> = {
+  outForDelivery: 0,
+  shipped: 1,
+  confirmed: 2,
+  pending: 3,
+  delivered: 4,
+  cancelled: 5,
+};
+
+type Shipment = {
+  key: string;
+  step: OrderStep;
+  carrierName: string | null;
+  trackingNumber: string | null;
+  trackingLink: string | null;
+  items: CustomerOrderLineItem[];
+};
+
+function shipments(items: CustomerOrderLineItem[]): Shipment[] {
+  const groups = new Map<string, Shipment>();
+  for (const item of items) {
+    const step = orderStepOf(item);
+    const key = `${step}|${item.trackingNumber ?? ""}|${item.trackingLink ?? ""}`;
+    const group = groups.get(key);
+    if (group) {
+      group.items.push(item);
+      continue;
+    }
+    groups.set(key, {
+      key,
+      step,
+      carrierName: item.carrierName ?? null,
+      trackingNumber: item.trackingNumber ?? null,
+      trackingLink: item.trackingLink ?? null,
+      items: [item],
+    });
+  }
+  return [...groups.values()].sort((a, b) => STEP_ORDER[a.step] - STEP_ORDER[b.step]);
+}
+
+function Progress({ step }: { step: OrderStep }) {
+  const storefrontTranslate = useStorefrontText();
+  return (
+    <ol className="grid grid-cols-4 gap-1.5">
+      {orderProgress(step).map((item) => (
+        <li key={item.key} className="flex flex-col gap-1.5">
+          <span className={`h-1 rounded-full ${item.done ? "bg-primary" : "bg-muted"}`} />
+          <span className={`text-xs ${item.current ? "font-medium text-foreground" : "text-muted-foreground"}`}>{storefrontTranslate(item.label)}</span>
+        </li>
+      ))}
+    </ol>
+  );
+}
+
+function ShipmentCard({ shipment, currency }: { shipment: Shipment; currency: string }) {
+  const storefrontTranslate = useStorefrontText();
+  const { locale } = useStorefrontLocale();
+  const stepDetail = useOrderStepDetail();
+  const tracking = [shipment.carrierName, shipment.trackingNumber].filter(Boolean).join(" · ");
+  const cancelled = shipment.step === "cancelled";
+  const detail = stepDetail(shipment.step, shipment.items);
+  return (
+    <section className="flex flex-col gap-5 rounded-lg border bg-card p-5 text-card-foreground md:p-6">
+      <div className="flex flex-col gap-1">
+        <h3 className={`font-heading text-2xl ${cancelled ? "text-muted-foreground" : ""}`}>{storefrontTranslate(orderStepLabel(shipment.step))}</h3>
+        {detail === null ? null : <p className="text-sm text-muted-foreground">{detail}</p>}
+      </div>
+      {cancelled ? null : <Progress step={shipment.step} />}
+      {tracking !== "" || shipment.trackingLink ? (
+        <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 rounded-md bg-muted/60 px-4 py-3 text-sm">
+          <span>
+            <span className="text-muted-foreground">{storefrontTranslate("Seguimiento")}</span> {tracking}
+          </span>
+          {shipment.trackingLink ? (
+            <a href={shipment.trackingLink} target="_blank" rel="noopener noreferrer" className="font-medium underline underline-offset-4">
+              {storefrontTranslate("Seguir envío")}
+            </a>
+          ) : null}
+        </div>
+      ) : null}
+      <ul className="flex flex-col divide-y">
+        {shipment.items.map((item) => (
+          <li key={item.id} className={`flex gap-4 py-4 first:pt-0 last:pb-0 ${cancelled ? "opacity-60" : ""}`}>
+            <span className="w-16 shrink-0 overflow-hidden rounded-sm bg-muted">
+              {item.thumbnail ? (
+                <img src={item.thumbnail} alt="" width={64} height={80} loading="lazy" decoding="async" className="aspect-[4/5] size-full object-cover" />
+              ) : (
+                <span className="block aspect-[4/5]" />
+              )}
+            </span>
+            <div className="flex min-w-0 flex-1 flex-col gap-1">
+              {item.productUrl ? (
+                <Link to={item.productUrl} className="font-medium hover:underline">{item.title}</Link>
+              ) : (
+                <p className="font-medium">{item.title}</p>
+              )}
+              {item.variantTitle ? <p className="text-sm text-muted-foreground">{item.variantTitle}</p> : null}
+              <p className="text-sm text-muted-foreground">
+                {money(item.unitPrice, currency, locale)} × {item.quantity}
+              </p>
+            </div>
+            <p className="text-sm font-medium">{money(item.total, currency, locale)}</p>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+function Payments({ order }: { order: CustomerOrderDetail }) {
+  const storefrontTranslate = useStorefrontText();
+  const { locale, timeZone } = useStorefrontLocale();
+  const format = (value: number) => money(value, order.currencyCode, locale);
+  const lines = orderSummaryLines(order, {
+    subtotal: storefrontTranslate("Subtotal"),
+    discount: storefrontTranslate("Descuentos"),
+    shipping: storefrontTranslate("Envío"),
+    tax: storefrontTranslate("Impuestos"),
+    total: storefrontTranslate("Total"),
+    free: storefrontTranslate("Gratis"),
+    pending: storefrontTranslate("Por calcular"),
+  });
+  const due = Math.max(0, order.total - order.totalPaid);
+  return (
+    <section className="flex flex-col gap-4 rounded-lg border bg-card p-5 text-card-foreground">
+      <h3 className="font-heading text-lg">{storefrontTranslate("Pago")}</h3>
+      {order.payments.length === 0 ? <p className="text-sm text-muted-foreground">{storefrontTranslate("Sin pagos registrados")}</p> : null}
+      {order.payments.map((payment) => {
+        const status = paymentStatusLabel(payment);
+        const installments = payment.installments ?? 0;
+        return (
+          <div key={payment.id} className="flex flex-col gap-1">
+            <div className="flex items-start justify-between gap-3 text-sm">
+              <PaymentPreview payment={payment} className="font-medium" />
+              <span className="font-medium">{format(payment.amount)}</span>
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {[
+                formatOrderDate(payment.createdOn, locale, timeZone),
+                installments > 1 ? storefrontTranslate("{value0} cuotas", { value0: installments }) : null,
+                status ? storefrontTranslate(status) : null,
+              ]
+                .filter(Boolean)
+                .join(" · ")}
+            </p>
+            {payment.receiptUrl ? (
+              <a href={payment.receiptUrl} target="_blank" rel="noopener noreferrer" className="w-fit text-xs font-medium underline underline-offset-4">
+                {storefrontTranslate("Ver comprobante")}
+              </a>
+            ) : null}
+          </div>
+        );
+      })}
+      <dl className="flex flex-col gap-2 border-t pt-4 text-sm">
+        {lines.map((line) => (
+          <div key={line.key} className={`flex justify-between gap-4 ${line.key === "total" ? "font-semibold" : "text-muted-foreground"}`}>
+            <dt>{line.label}</dt>
+            <dd>{line.amount === null ? line.text : format(line.amount)}</dd>
+          </div>
+        ))}
+        <div className="flex justify-between gap-4 text-muted-foreground">
+          <dt>{storefrontTranslate("Pagado")}</dt>
+          <dd>{format(order.totalPaid)}</dd>
+        </div>
+        {due > 0 ? (
+          <div className="flex justify-between gap-4 font-medium text-destructive">
+            <dt>{storefrontTranslate("Por pagar")}</dt>
+            <dd>{format(due)}</dd>
+          </div>
+        ) : null}
+      </dl>
+    </section>
+  );
+}
+
+function History({ order }: { order: CustomerOrderDetail }) {
+  const storefrontTranslate = useStorefrontText();
+  const { locale, timeZone } = useStorefrontLocale();
+  const events = [...order.statusTimeline].reverse();
+  return (
+    <section className="flex flex-col gap-4 rounded-lg border bg-card p-5 text-card-foreground">
+      <h3 className="font-heading text-lg">{storefrontTranslate("Historial")}</h3>
+      <ol className="flex flex-col">
+        {events.map((event, index) => (
+          <li key={`${event.key}-${event.occurredAt}`} className="relative flex gap-3 pb-4 text-sm last:pb-0">
+            {index < events.length - 1 ? <span aria-hidden="true" className="absolute left-[3px] top-3 h-full w-px bg-border" /> : null}
+            <span aria-hidden="true" className={`relative mt-1.5 size-[7px] shrink-0 rounded-full ${index === 0 ? "bg-foreground" : "bg-foreground/25"}`} />
+            <div className="flex flex-1 flex-wrap justify-between gap-x-4 gap-y-0.5">
+              <span className={index === 0 ? "font-medium" : ""}>
+                {storefrontTranslate(event.label)}
+                {event.description ? <span className="block text-xs font-normal text-muted-foreground">{event.description}</span> : null}
+              </span>
+              <span className="text-muted-foreground">{formatOrderDate(event.occurredAt, locale, timeZone)}</span>
+            </div>
+          </li>
+        ))}
+      </ol>
+    </section>
+  );
+}
+
+const RETURN_REASONS = ["La talla o medida no me quedó", "Llegó dañado o con fallas", "No es lo que pedí", "No es como en las fotos", "Ya no lo quiero", "Otro motivo"];
+const CANCEL_REASONS = ["Me equivoqué al hacer el pedido", "Encontré un mejor precio", "Demora mucho en llegar", "Ya no lo necesito", "Otro motivo"];
+
+const RETURN_STATES: Record<string, { title: string; detail: string }> = {
+  requested: { title: "Devolución solicitada", detail: "La tienda está revisando tu solicitud. Te escribiremos por correo." },
+  inProgress: { title: "Devolución aprobada", detail: "Te enviamos por correo los pasos para devolver los productos." },
+  inspected: { title: "Devolución en revisión", detail: "La tienda recibió los productos y los está revisando." },
+  returned: { title: "Devolución completada", detail: "La tienda recibió los productos." },
+  rejected: { title: "Devolución no aprobada", detail: "Te escribimos por correo con el motivo." },
+};
+
+type Request = "return" | "cancel";
+
+function RequestStatus({ order }: { order: CustomerOrderDetail }) {
+  const storefrontTranslate = useStorefrontText();
+  const state = order.cancellationRequestedAt
+    ? { title: "Cancelación solicitada", detail: "La tienda está revisando tu solicitud. Te escribiremos por correo." }
+    : RETURN_STATES[order.returnStatus ?? ""];
+  if (!state) return null;
+  return (
+    <section role="status" className="flex flex-col gap-1 rounded-lg border bg-card p-5 text-card-foreground">
+      <h3 className="font-heading text-lg">{storefrontTranslate(state.title)}</h3>
+      <p className="text-sm text-muted-foreground">{storefrontTranslate(state.detail)}</p>
+    </section>
+  );
+}
+
+function ReasonField({ reasons }: { reasons: string[] }) {
+  const storefrontTranslate = useStorefrontText();
+  return (
+    <div className="flex flex-col gap-1.5 text-sm">
+      <span className="font-medium">{storefrontTranslate("Motivo")}</span>
+      <Select name="reason" required>
+        <SelectTrigger aria-label={storefrontTranslate("Motivo")} className="h-11 w-full data-[size=default]:h-11">
+          <SelectValue placeholder={storefrontTranslate("Elige un motivo")} />
+        </SelectTrigger>
+        <SelectContent>
+          {reasons.map((reason) => (
+            <SelectItem key={reason} value={reason}>
+              {storefrontTranslate(reason)}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}
+
+function RequestForm({ request, order, error, onClose }: { request: Request; order: CustomerOrderDetail; error: string | null; onClose: () => void }) {
+  const storefrontTranslate = useStorefrontText();
+  const { locale, timeZone } = useStorefrontLocale();
+  const busy = useNavigation().state === "submitting";
+  const returnable = order.items.filter((item) => item.returnableQuantity > 0);
+  const [quantities, setQuantities] = useState<Record<string, string>>(() =>
+    Object.fromEntries(returnable.map((item) => [item.id, returnable.length === 1 ? String(item.returnableQuantity) : "0"])),
+  );
+  return (
+    <Form method="post" encType="multipart/form-data" className="flex flex-col gap-5 rounded-lg border bg-card p-5 text-card-foreground md:p-6">
+      <CustomerCsrfField />
+      <input type="hidden" name="intent" value={request} />
+      <div className="flex flex-col gap-1">
+        <h3 className="font-heading text-2xl">{storefrontTranslate(request === "return" ? "Solicitar devolución" : "Solicitar cancelación")}</h3>
+        <p className="text-sm text-muted-foreground">
+          {request === "return" && order.returnDeadline
+            ? storefrontTranslate("Puedes pedirla hasta el {value0}. La tienda la revisa y te escribe por correo.", { value0: formatOrderDate(order.returnDeadline, locale, timeZone) })
+            : storefrontTranslate("La tienda la revisa antes de enviar tu pedido y te escribe por correo.")}
+        </p>
+      </div>
+      {error ? (
+        <p role="alert" className="rounded-md bg-destructive/10 px-4 py-3 text-sm text-destructive">
+          {storefrontTranslate(error)}
+        </p>
+      ) : null}
+      {request === "return" ? (
+        <ul className="flex flex-col divide-y">
+          <li className="flex justify-end pb-2 text-xs text-muted-foreground">{storefrontTranslate("Cantidad")}</li>
+          {returnable.map((item) => (
+            <li key={item.id} className="flex items-center gap-4 py-3 first:pt-0">
+              <span className="w-12 shrink-0 overflow-hidden rounded-sm bg-muted">
+                {item.thumbnail ? <img src={item.thumbnail} alt="" width={48} height={60} loading="lazy" decoding="async" className="aspect-[4/5] size-full object-cover" /> : <span className="block aspect-[4/5]" />}
+              </span>
+              <div className="flex min-w-0 flex-1 flex-col text-sm">
+                <span className="font-medium">{item.title}</span>
+                {item.variantTitle ? <span className="text-muted-foreground">{item.variantTitle}</span> : null}
+              </div>
+              <input type="hidden" name="itemId" value={item.id} />
+              <Select name="quantity" value={quantities[item.id] ?? "0"} onValueChange={(value) => setQuantities((current) => ({ ...current, [item.id]: value }))}>
+                <SelectTrigger aria-label={storefrontTranslate("Cantidad a devolver de {value0}", { value0: item.title })} className="w-20 shrink-0">
+                  <SelectValue>{quantities[item.id] ?? "0"}</SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  {Array.from({ length: item.returnableQuantity + 1 }, (_, quantity) => (
+                    <SelectItem key={quantity} value={String(quantity)}>
+                      {quantity}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+      <ReasonField reasons={request === "return" ? RETURN_REASONS : CANCEL_REASONS} />
+      <label className="flex flex-col gap-1.5 text-sm">
+        <span className="font-medium">{storefrontTranslate("Comentario (opcional)")}</span>
+        <Textarea name="comment" rows={3} maxLength={1000} />
+      </label>
+      {request === "return" ? (
+        <label className="flex flex-col gap-1.5 text-sm">
+          <span className="font-medium">{storefrontTranslate("Fotos (opcional)")}</span>
+          <input type="file" name="photos" accept="image/jpeg,image/png,image/webp" multiple className="text-sm file:mr-3 file:rounded-md file:border file:bg-background file:px-3 file:py-1.5 file:text-sm" />
+          <span className="text-xs text-muted-foreground">{storefrontTranslate("Hasta 3 fotos JPG, PNG o WebP de hasta 5 MB.")}</span>
+        </label>
+      ) : null}
+      <div className="flex flex-wrap gap-2">
+        <Button type="submit" disabled={busy}>
+          {busy ? storefrontTranslate("Enviando…") : storefrontTranslate("Enviar solicitud")}
+        </Button>
+        <Button type="button" variant="ghost" onClick={onClose}>
+          {storefrontTranslate("Cancelar")}
+        </Button>
+      </div>
+    </Form>
+  );
+}
+
+export function AccountOrder({ loaderData, actionData }: { loaderData: { order: CustomerOrderDetail }; actionData?: OrderRequestActionData }) {
+  const storefrontTranslate = useStorefrontText();
+  const { locale, timeZone } = useStorefrontLocale();
+  const { order } = loaderData;
+  const [request, setRequest] = useState<Request | null>(null);
+  const sent = actionData?.sent ?? null;
+  useEffect(() => {
+    if (sent) setRequest(null);
+  }, [sent]);
+  const units = order.items.reduce((sum, item) => sum + item.quantity, 0);
+  const address = order.shippingAddress;
+  const contact = [order.email, order.phone].filter(Boolean);
+  return (
+    <div className="flex flex-col gap-8">
+      <div className="flex flex-col gap-4">
+        <Link to="/account" className="w-fit text-sm text-muted-foreground hover:text-foreground">
+          ← {storefrontTranslate("Mis pedidos")}
+        </Link>
+        <div className="flex flex-wrap items-end justify-between gap-4">
+          <div className="flex flex-col gap-1">
+            <h2 className="text-3xl md:text-4xl">{storefrontTranslate("Pedido {value0}", { value0: order.orderNumber })}</h2>
+            <p className="text-sm text-muted-foreground">
+              {storefrontTranslate("Realizado el {value0}", { value0: formatOrderDate(order.orderDate, locale, timeZone) })} ·{" "}
+              {units === 1 ? storefrontTranslate("1 producto") : storefrontTranslate("{value0} productos", { value0: units })}
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            {order.paymentPath ? (
+              <PayButton path={order.paymentPath} label={storefrontTranslate("Pagar {value0}", { value0: money(order.total - order.totalPaid, order.currencyCode, locale) })} />
+            ) : null}
+            <ReorderButton items={order.items} variant={order.paymentPath ? "outline" : "default"} />
+            {order.canRequestReturn && request !== "return" ? (
+              <Button type="button" variant="outline" onClick={() => setRequest("return")}>
+                {storefrontTranslate("Solicitar devolución")}
+              </Button>
+            ) : null}
+            {order.canRequestCancellation && request !== "cancel" ? (
+              <Button type="button" variant="outline" onClick={() => setRequest("cancel")}>
+                {storefrontTranslate("Solicitar cancelación")}
+              </Button>
+            ) : null}
+          </div>
+        </div>
+      </div>
+      <div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_20rem]">
+        <div className="flex flex-col gap-4">
+          <RequestStatus order={order} />
+          {request ? <RequestForm request={request} order={order} error={actionData?.error ?? null} onClose={() => setRequest(null)} /> : null}
+          {shipments(order.items).map((shipment) => (
+            <ShipmentCard key={shipment.key} shipment={shipment} currency={order.currencyCode} />
+          ))}
+          {order.statusTimeline.length > 0 ? <History order={order} /> : null}
+        </div>
+        <aside className="flex flex-col gap-4">
+          <Payments order={order} />
+          <section className="flex flex-col gap-3 rounded-lg border bg-card p-5 text-sm text-card-foreground">
+            <h3 className="font-heading text-lg">{storefrontTranslate("Entrega")}</h3>
+            {address.name ? <p className="font-medium">{address.name}</p> : null}
+            <p className="text-muted-foreground">{order.shippingAddressSummary ?? address.address1}</p>
+            {contact.length > 0 ? (
+              <>
+                <h3 className="pt-2 font-heading text-lg">{storefrontTranslate("Contacto")}</h3>
+                {contact.map((value) => (
+                  <p key={value} className="text-muted-foreground">{value}</p>
+                ))}
+              </>
+            ) : null}
+          </section>
+        </aside>
+      </div>
+    </div>
+  );
+}