@ecomiq/storefront 2.1.3 → 3.0.0

package/src/sections/complaint-book.tsx

@@ -0,0 +1,325 @@
+import { COMPLAINT_BOOK_ATTACHMENT_TYPES, formatOrderDate, type ComplaintBook as ComplaintBookConfiguration } from "@ecomiq/core";
+import { Fragment, useRef, useState, type ComponentProps } from "react";
+import { Form, useNavigation } from "react-router";
+import { Button } from "@theme/ui/button";
+import { Checkbox } from "@theme/ui/checkbox";
+import { Input } from "@theme/ui/input";
+import { Label } from "@theme/ui/label";
+import { RadioGroup, RadioGroupItem } from "@theme/ui/radio-group";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@theme/ui/select";
+import { Textarea } from "@theme/ui/textarea";
+import {
+  Captcha,
+  COMPLAINT_DOCUMENT_TYPES,
+  identityDocumentRule,
+  useStorefrontText,
+  complaintBookAttachmentError,
+  complaintBookNumber,
+  CustomerCsrfField,
+  money,
+  type ComplaintBookActionData,
+  type ComplaintBookData,
+  type SectionCatalog,
+  type SectionRoot,
+} from "../index";
+
+export const catalog: SectionCatalog = {
+  name: "Libro de Reclamaciones",
+  description: "Formulario de reclamos y quejas con la hoja para imprimir.",
+};
+
+type Filed = Extract<ComplaintBookActionData, { entry: unknown }>;
+type Row = readonly [string, string | null];
+
+const TYPES = [
+  { value: "claim", label: "Reclamo" },
+  { value: "complaint", label: "Queja" },
+] as const;
+const ITEMS = [
+  { value: "product", label: "Producto" },
+  { value: "service", label: "Servicio" },
+] as const;
+const LEGEND = "mb-3 text-lg font-medium";
+const ATTACHMENT_ACCEPT = [...COMPLAINT_BOOK_ATTACHMENT_TYPES, ".jpg", ".jpeg", ".png", ".webp", ".pdf"].join(",");
+
+function Rows({ title, rows }: { title: string; rows: readonly Row[] }) {
+  return (
+    <div className="flex flex-col gap-2">
+      <h3 className="font-medium">{title}</h3>
+      <dl className="grid gap-x-6 gap-y-1.5 text-sm sm:grid-cols-[11rem_minmax(0,1fr)]">
+        {rows.map(([label, value]) =>
+          value ? (
+            <Fragment key={label}>
+              <dt className="text-muted-foreground">{label}</dt>
+              <dd className="break-words whitespace-pre-line">{value}</dd>
+            </Fragment>
+          ) : null,
+        )}
+      </dl>
+    </div>
+  );
+}
+
+function providerRows(book: ComplaintBookConfiguration): Row[] {
+  return [
+    ["Razón social", book.providerName],
+    ["RUC", book.providerTaxId],
+    ["Dirección", book.providerAddress],
+  ];
+}
+
+function Field({ label, name, className, ...props }: ComponentProps<"input"> & { label: string; name: string }) {
+  return (
+    <div className={`flex flex-col gap-2 ${className ?? ""}`}>
+      <Label htmlFor={`complaint-${name}`}>{label}</Label>
+      <Input id={`complaint-${name}`} name={name} {...props} />
+    </div>
+  );
+}
+
+function Area({ label, name, maxLength }: { label: string; name: string; maxLength: number }) {
+  return (
+    <div className="flex flex-col gap-2">
+      <Label htmlFor={`complaint-${name}`}>{label}</Label>
+      <Textarea id={`complaint-${name}`} name={name} rows={4} maxLength={maxLength} required />
+    </div>
+  );
+}
+
+function Choices({ name, options }: { name: string; options: readonly { value: string; label: string }[] }) {
+  return (
+    <RadioGroup name={name} defaultValue={options[0]?.value} required className="flex flex-wrap gap-6">
+      {options.map((option) => (
+        <div key={option.value} className="flex items-center gap-2">
+          <RadioGroupItem id={`complaint-${name}-${option.value}`} value={option.value} />
+          <Label htmlFor={`complaint-${name}-${option.value}`}>{option.label}</Label>
+        </div>
+      ))}
+    </RadioGroup>
+  );
+}
+
+function Attachments() {
+  const storefrontTranslate = useStorefrontText();
+  const input = useRef<HTMLInputElement>(null);
+  const [files, setFiles] = useState<File[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  function attach(next: File[]) {
+    const transfer = new DataTransfer();
+    for (const file of next) transfer.items.add(file);
+    if (input.current) input.current.files = transfer.files;
+    setFiles(next);
+  }
+
+  function pick(picked: FileList | null) {
+    const next = [...files, ...Array.from(picked ?? [])];
+    const invalid = complaintBookAttachmentError(next);
+    setError(invalid);
+    attach(invalid ? files : next);
+  }
+
+  function remove(index: number) {
+    setError(null);
+    attach(files.filter((_, position) => position !== index));
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Field ref={input} label={storefrontTranslate("Adjuntos (opcional)")} name="files" type="file" multiple accept={ATTACHMENT_ACCEPT} aria-describedby="complaint-files-help" onChange={(event) => pick(event.currentTarget.files)} />
+      <p id="complaint-files-help" className="text-sm text-muted-foreground">
+        {storefrontTranslate("Hasta 3 fotos o PDF de 5 MB.")} </p>
+      {error ? (
+        <p role="alert" className="text-sm text-destructive">
+          {storefrontTranslate(error)}
+        </p>
+      ) : null}
+      {files.length > 0 ? (
+        <ul className="flex flex-col gap-1 text-sm">
+          {files.map((file, index) => (
+            <li key={`${index}-${file.name}`} className="flex items-center justify-between gap-3">
+              <span className="min-w-0 truncate">{file.name}</span>
+              <Button type="button" variant="ghost" size="sm" aria-label={storefrontTranslate("Quitar {value0}", { value0: file.name })} onClick={() => remove(index)}>
+                {storefrontTranslate("Quitar")}</Button>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  );
+}
+
+function ComplaintForm({ book, error, countries }: { book: ComplaintBookConfiguration; error: string | null; countries: ComplaintBookData["countries"] }) {
+  const storefrontTranslate = useStorefrontText();
+  const busy = useNavigation().state !== "idle";
+  const [kind, setKind] = useState<keyof typeof COMPLAINT_DOCUMENT_TYPES>("nationalId");
+  const [countryCode, setCountryCode] = useState("");
+  const [minor, setMinor] = useState(false);
+  const rule = identityDocumentRule(COMPLAINT_DOCUMENT_TYPES[kind]);
+  return (
+    <Form method="post" encType="multipart/form-data" className="flex flex-col gap-8">
+      <CustomerCsrfField />
+      <fieldset>
+        <legend className={LEGEND}>{storefrontTranslate("Tipo")}</legend>
+        <Choices name="type" options={TYPES} />
+      </fieldset>
+      <fieldset className="grid gap-4 sm:grid-cols-2">
+        <legend className={LEGEND}>{storefrontTranslate("Tus datos")}</legend>
+        <Field label={storefrontTranslate("Nombre completo")} name="consumerName" autoComplete="name" maxLength={200} required className="sm:col-span-2" />
+        <div className="flex flex-col gap-2">
+          <Label htmlFor="complaint-documentType">{storefrontTranslate("Tipo de documento")}</Label>
+          <Select name="documentType" value={kind} onValueChange={(value) => setKind(value === "taxId" || value === "foreignId" || value === "passport" ? value : "nationalId")}>
+            <SelectTrigger id="complaint-documentType" className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {Object.entries(COMPLAINT_DOCUMENT_TYPES).map(([item, type]) => (
+                <SelectItem key={item} value={item}>
+                  {identityDocumentRule(type).label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <label className="flex flex-col gap-2">{storefrontTranslate("País emisor del documento")} <select name="documentCountryCode" required value={countryCode} onChange={(event) => setCountryCode(event.currentTarget.value)} className="h-10 rounded-md border bg-background px-3 text-base md:text-sm">
+            <option value="">{storefrontTranslate("Elige…")}</option>
+            {countries.map((country) => <option key={country.code} value={country.code}>{country.name}</option>)}
+          </select>
+        </label>
+        <Field label={storefrontTranslate("Número de documento")} name="documentNumber" inputMode={rule.inputMode} maxLength={rule.maxLength} pattern={rule.pattern} title={storefrontTranslate(rule.error)} autoComplete="off" required />
+        <Field label={storefrontTranslate("Dirección")} name="consumerAddress" autoComplete="street-address" maxLength={300} required className="sm:col-span-2" />
+        <Field label={storefrontTranslate("Celular")} name="consumerPhone" type="tel" autoComplete="tel" maxLength={30} required />
+        <Field label={storefrontTranslate("Correo")} name="consumerEmail" type="email" autoComplete="email" maxLength={254} required />
+        <div className="flex items-center gap-2 sm:col-span-2">
+          <Checkbox id="complaint-minor" name="minor" checked={minor} onCheckedChange={(checked) => setMinor(checked === true)} />
+          <Label htmlFor="complaint-minor">{storefrontTranslate("Soy menor de edad")}</Label>
+        </div>
+      </fieldset>
+      {minor ? (
+        <fieldset className="grid gap-4 sm:grid-cols-2">
+          <legend className={LEGEND}>{storefrontTranslate("Padre, madre o apoderado")}</legend>
+          <Field label={storefrontTranslate("Nombre completo")} name="guardianName" maxLength={200} required className="sm:col-span-2" />
+          <Field label={storefrontTranslate("Dirección")} name="guardianAddress" maxLength={300} required className="sm:col-span-2" />
+          <Field label={storefrontTranslate("Celular")} name="guardianPhone" type="tel" maxLength={30} required />
+          <Field label={storefrontTranslate("Correo")} name="guardianEmail" type="email" maxLength={254} required />
+        </fieldset>
+      ) : null}
+      <fieldset className="grid gap-4 sm:grid-cols-2">
+        <legend className={LEGEND}>{storefrontTranslate("Producto o servicio")}</legend>
+        <div className="sm:col-span-2">
+          <Choices name="itemKind" options={ITEMS} />
+        </div>
+        <Field label={storefrontTranslate("Descripción")} name="itemDescription" maxLength={500} required className="sm:col-span-2" />
+        <Field label={storefrontTranslate("Monto reclamado en {value0} (opcional)", { value0: book.currency })} name="itemAmount" type="number" inputMode="decimal" min={0} step="0.01" />
+        <Field label={storefrontTranslate("N.° de pedido (opcional)")} name="orderNumber" maxLength={50} />
+      </fieldset>
+      <fieldset className="flex flex-col gap-4">
+        <legend className={LEGEND}>{storefrontTranslate("Detalle")}</legend>
+        <Area label={storefrontTranslate("Qué pasó")} name="detail" maxLength={4000} />
+        <Area label={storefrontTranslate("Qué solicitas")} name="request" maxLength={2000} />
+        <Attachments />
+      </fieldset>
+      <div className="flex items-center gap-2">
+        <Checkbox id="complaint-confirmed" name="confirmed" required />
+        <Label htmlFor="complaint-confirmed">{storefrontTranslate("Declaro que los datos son verdaderos.")}</Label>
+      </div>
+      <Captcha captcha={book.captcha} action="complaint_book" errorClass="text-sm text-destructive" busy={busy} />
+      {error ? (
+        <p role="alert" className="rounded-md bg-destructive/10 px-4 py-3 text-sm text-destructive">
+          {storefrontTranslate(error)}
+        </p>
+      ) : null}
+      <Button type="submit" disabled={busy || !book.captcha.isConfigured} className="sm:w-fit">
+        {busy ? "Enviando…" : "Enviar"}
+      </Button>
+    </Form>
+  );
+}
+
+function Sheet({ book, filed, language, timeZone }: { book: ComplaintBookConfiguration; filed: Filed; language: string; timeZone: string }) {
+  const storefrontTranslate = useStorefrontText();
+  const { entry, sheet, attachments } = filed;
+  const { consumer, guardian, item } = sheet;
+  const type = TYPES.find((option) => option.value === sheet.type)?.label ?? "";
+  const date = (iso: string) => formatOrderDate(iso, language, timeZone);
+  return (
+    <article className="flex flex-col gap-6 rounded-lg border bg-card p-6 text-card-foreground md:p-8">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="flex flex-col gap-1">
+          <p className="text-sm text-muted-foreground">{storefrontTranslate("Hoja de reclamación ·")} {type}</p>
+          <h2 className="font-heading text-3xl">{complaintBookNumber(entry.number)}</h2>
+        </div>
+        <Button type="button" variant="outline" onClick={() => window.print()} className="print:hidden">
+          {storefrontTranslate("Imprimir")} </Button>
+      </div>
+      <Rows
+        title={storefrontTranslate("Fechas")}
+        rows={[
+          ["Presentado", date(entry.filedOn)],
+          ["Respuesta hasta", date(entry.responseDueOn)],
+        ]}
+      />
+      <Rows title={storefrontTranslate("Proveedor")} rows={providerRows(book)} />
+      <Rows
+        title={storefrontTranslate("Consumidor")}
+        rows={[
+          [storefrontTranslate("Nombre"), consumer.name],
+          [identityDocumentRule(COMPLAINT_DOCUMENT_TYPES[consumer.documentType]).label, consumer.documentNumber],
+          [storefrontTranslate("Dirección"), consumer.address],
+          [storefrontTranslate("Celular"), consumer.phone],
+          [storefrontTranslate("Correo"), consumer.email],
+        ]}
+      />
+      {guardian ? (
+        <Rows
+          title={storefrontTranslate("Padre, madre o apoderado")}
+          rows={[
+            [storefrontTranslate("Nombre"), guardian.name],
+            [storefrontTranslate("Dirección"), guardian.address],
+            [storefrontTranslate("Celular"), guardian.phone],
+            [storefrontTranslate("Correo"), guardian.email],
+          ]}
+        />
+      ) : null}
+      <Rows
+        title={ITEMS.find((option) => option.value === item.kind)?.label ?? ""}
+        rows={[
+          [storefrontTranslate("Descripción"), item.description],
+          ["Monto reclamado", item.amount === null ? null : money(item.amount, book.currency, language)],
+          ["N.° de pedido", sheet.orderNumber],
+        ]}
+      />
+      <Rows
+        title={type}
+        rows={[
+          [storefrontTranslate("Qué pasó"), sheet.detail],
+          [storefrontTranslate("Qué solicitas"), sheet.request],
+          ["Adjuntos", attachments.join("\n")],
+        ]}
+      />
+    </article>
+  );
+}
+
+export function ComplaintBook({ loaderData, actionData, ...root }: { loaderData: ComplaintBookData; actionData?: ComplaintBookActionData } & SectionRoot) {
+  const storefrontTranslate = useStorefrontText();
+  const { book, language, timeZone } = loaderData;
+  const filed = actionData && "entry" in actionData ? actionData : null;
+  const error = actionData && "error" in actionData ? actionData.error : null;
+  return (
+    <section {...root} className="mx-auto flex w-full max-w-3xl flex-col gap-8 px-4 py-12 md:py-20">
+      <div className="flex flex-col gap-3">
+        <h1 className="text-4xl leading-tight md:text-5xl">{storefrontTranslate("Libro de Reclamaciones")}</h1>
+        <p className="text-muted-foreground">{storefrontTranslate("Reclamo: disconformidad con el producto o servicio. Queja: malestar con la atención.")}</p>
+      </div>
+      {filed ? (
+        <Sheet book={book} filed={filed} language={`${language}-${loaderData.countryCode}`} timeZone={timeZone} />
+      ) : (
+        <>
+          <Rows title={storefrontTranslate("Proveedor")} rows={providerRows(book)} />
+          <ComplaintForm countries={loaderData.countries} book={book} error={error} />
+        </>
+      )}
+    </section>
+  );
+}

package/src/sections/design-system.tsx

@@ -0,0 +1,146 @@
+import { useStorefrontText } from "../index";
+import type { ReactNode } from "react";
+import { Badge } from "@theme/ui/badge";
+import { Button } from "@theme/ui/button";
+import { Checkbox } from "@theme/ui/checkbox";
+import { Input } from "@theme/ui/input";
+import { Label } from "@theme/ui/label";
+import { Textarea } from "@theme/ui/textarea";
+
+const COLORS = [
+  { token: "primary", name: "Principal" },
+  { token: "primary-foreground", name: "Sobre principal" },
+  { token: "background", name: "Fondo" },
+  { token: "foreground", name: "Texto" },
+  { token: "secondary", name: "Secundario" },
+  { token: "muted", name: "Suave" },
+  { token: "muted-foreground", name: "Texto suave" },
+  { token: "accent", name: "Acento" },
+  { token: "border", name: "Borde" },
+  { token: "destructive", name: "Error" },
+] as const;
+
+const SCHEMES = [
+  { scheme: "claro", name: "Claro" },
+  { scheme: "oscuro", name: "Oscuro" },
+  { scheme: "marca", name: "Marca" },
+] as const;
+
+const CORNERS = [
+  { className: "rounded-none", name: "Sin redondeo" },
+  { className: "rounded-sm", name: "Pequeño" },
+  { className: "rounded-md", name: "Mediano" },
+  { className: "rounded-lg", name: "Grande" },
+  { className: "rounded-xl", name: "Muy grande" },
+  { className: "rounded-full", name: "Círculo" },
+] as const;
+
+function Group({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <section className="flex flex-col gap-4">
+      <h2 className="font-body text-xs font-medium uppercase tracking-wide text-muted-foreground">{title}</h2>
+      {children}
+    </section>
+  );
+}
+
+export function DesignSystem() {
+  const storefrontTranslate = useStorefrontText();
+  return (
+    <div data-ecomiq-design="" className="fixed inset-0 z-[100] overflow-y-auto bg-background text-foreground">
+      <div className="mx-auto flex max-w-5xl flex-col gap-12 px-6 py-10">
+        <header className="flex flex-col gap-1">
+          <h1 className="font-heading text-3xl">Sistema de diseño</h1>
+          <p className="text-sm text-muted-foreground">Colores, letras y piezas de tu tema. Los cambios del panel Tema se ven aquí al instante.</p>
+        </header>
+
+        <Group title="Colores">
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
+            {COLORS.map((color) => (
+              <div key={color.token} className="flex flex-col gap-2">
+                <div className="h-16 rounded-md border border-border" style={{ background: `var(--${color.token})` }} />
+                <div className="flex flex-col">
+                  <span className="text-sm font-medium">{color.name}</span>
+                  <code className="text-xs text-muted-foreground">--{color.token}</code>
+                </div>
+              </div>
+            ))}
+          </div>
+        </Group>
+
+        <Group title="Esquemas">
+          <div className="grid gap-3 md:grid-cols-3">
+            {SCHEMES.map((item) => (
+              <div key={item.scheme} data-scheme={item.scheme} className="flex flex-col gap-3 rounded-lg border border-border p-5">
+                <span className="text-xs text-muted-foreground">{item.name}</span>
+                <p className="font-heading text-xl">Nueva colección</p>
+                <p className="text-sm text-muted-foreground">Piezas hechas para durar.</p>
+                <Button size="sm" className="self-start">
+                  {storefrontTranslate("Comprar")}</Button>
+              </div>
+            ))}
+          </div>
+        </Group>
+
+        <Group title="Tipografía">
+          <div className="flex flex-col gap-3">
+            <p className="font-heading text-5xl leading-tight">Títulos que se recuerdan</p>
+            <p className="font-heading text-3xl">Subtítulo de sección</p>
+            <p className="font-heading text-xl">Título de tarjeta</p>
+            <p className="max-w-2xl text-base">Este es el texto de tu tienda: descripciones de productos, políticas y todo lo que lee tu cliente antes de comprar.</p>
+            <p className="text-sm text-muted-foreground">Texto pequeño para notas y ayudas.</p>
+          </div>
+        </Group>
+
+        <Group title="Botones">
+          <div className="flex flex-wrap items-center gap-3">
+            <Button>{storefrontTranslate("Principal")}</Button>
+            <Button variant="secondary">Secundario</Button>
+            <Button variant="outline">Con borde</Button>
+            <Button variant="ghost">Sin fondo</Button>
+            <Button variant="link">Enlace</Button>
+          </div>
+          <div className="flex flex-wrap items-center gap-3">
+            <Button size="sm">Pequeño</Button>
+            <Button>Normal</Button>
+            <Button size="lg">Grande</Button>
+          </div>
+        </Group>
+
+        <Group title="Campos">
+          <div className="grid max-w-2xl gap-4 sm:grid-cols-2">
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="ecomiq-design-email">{storefrontTranslate("Correo")}</Label>
+              <Input id="ecomiq-design-email" placeholder={storefrontTranslate("tu@correo.com")} />
+            </div>
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="ecomiq-design-note">Nota</Label>
+              <Textarea id="ecomiq-design-note" placeholder="Escribe aquí" rows={2} />
+            </div>
+            <div className="flex items-center gap-2">
+              <Checkbox id="ecomiq-design-news" defaultChecked />
+              <Label htmlFor="ecomiq-design-news">Quiero recibir novedades</Label>
+            </div>
+            <div className="flex flex-wrap items-center gap-2">
+              <Badge>Nuevo</Badge>
+              <Badge variant="secondary">Envío gratis</Badge>
+              <Badge variant="outline">{storefrontTranslate("Agotado")}</Badge>
+              <Badge variant="destructive">-20 %</Badge>
+            </div>
+          </div>
+        </Group>
+
+        <Group title="Esquinas">
+          <div className="flex flex-wrap gap-4">
+            {CORNERS.map((corner) => (
+              <div key={corner.className} className="flex flex-col items-center gap-2">
+                <div className={`size-16 border border-border bg-muted ${corner.className}`} />
+                <span className="text-xs text-muted-foreground">{corner.name}</span>
+              </div>
+            ))}
+          </div>
+        </Group>
+      </div>
+    </div>
+  );
+}

package/src/sections/draft-invoice.tsx

@@ -0,0 +1,105 @@
+import { Form, Link, useNavigation } from "react-router";
+import { Button } from "@theme/ui/button";
+import { useStorefrontText, CustomerCsrfField, money, setting, type SectionCatalog, type SectionRoot } from "../index";
+import { orderSummaryLines, type OrderDraftActionData, type OrderDraftData } from "../entries/order";
+
+export const catalog: SectionCatalog = {
+  name: "Pedido por pagar",
+  description: "Productos y totales de un pedido por pagar, con el botón para pagarlo.",
+};
+
+export const settings = {
+  invoice: {
+    eyebrow: setting.text("Factura", "Antetítulo"),
+    title: setting.text("Tu pedido", "Título"),
+    description: setting.text("Revisa los productos y paga cuando quieras.", "Descripción"),
+    pay: setting.text("Pagar pedido", "Botón"),
+    note: setting.text("Se respetarán los importes y el envío de este pedido.", "Nota"),
+    split: setting.text("Tu compra se dividió en varios pedidos. Revisa y paga cada uno.", "Pedidos separados"),
+    closed: setting.text("Este pedido ya no está disponible para pagar. Escríbenos si necesitas ayuda.", "Pedido cerrado"),
+  },
+};
+
+export function DraftInvoice({ loaderData, actionData, ...root }: { loaderData: OrderDraftData; actionData?: OrderDraftActionData } & SectionRoot) {
+  const storefrontTranslate = useStorefrontText();
+  const { draft, payable, language } = loaderData;
+  const orderPaths = actionData?.orderPaths ?? loaderData.orderPaths;
+  const busy = useNavigation().state !== "idle";
+  const price = (value: number) => money(value, draft.currencyCode, language);
+  return (
+    <section {...root} className="mx-auto flex w-full max-w-2xl flex-col gap-8 px-4 py-12 md:py-20">
+      <div className="flex flex-col gap-3">
+        <p className="text-xs font-medium tracking-widest text-muted-foreground uppercase">
+          {settings.invoice.eyebrow} {draft.draftNumber}
+        </p>
+        <h1 className="text-4xl leading-tight md:text-5xl">{settings.invoice.title}</h1>
+        <p className="text-muted-foreground">{settings.invoice.description}</p>
+      </div>
+      <ul className="divide-y rounded-lg border bg-card text-card-foreground">
+        {draft.items.map((item) => (
+          <li key={item.id} className="flex items-center gap-4 p-4">
+            <span className="block w-16 shrink-0 overflow-hidden rounded-md bg-muted">
+              {item.thumbnail ? (
+                <img src={item.thumbnail} alt="" width={64} height={80} loading="lazy" decoding="async" className="aspect-[4/5] w-full object-cover" />
+              ) : (
+                <span className="block aspect-[4/5]" />
+              )}
+            </span>
+            <span className="flex flex-1 flex-col gap-0.5">
+              <span className="font-medium">{item.title}</span>
+              {item.subtitle ? <span className="text-sm text-muted-foreground">{item.subtitle}</span> : null}
+              <span className="text-sm text-muted-foreground tabular-nums">×{item.quantity}</span>
+            </span>
+            <span className="font-medium tabular-nums">{price(item.total)}</span>
+          </li>
+        ))}
+      </ul>
+      <dl className="flex flex-col gap-2.5 rounded-lg border bg-card p-6 text-sm text-card-foreground">
+        {orderSummaryLines(draft, { discount: "Descuento" }).map((line) =>
+          line.key === "total" ? (
+            <div key={line.key} className="flex items-baseline justify-between border-t pt-3 font-medium">
+              <dt>{storefrontTranslate(line.label)}</dt>
+              <dd className="font-heading text-xl tabular-nums">{price(line.amount ?? 0)}</dd>
+            </div>
+          ) : (
+            <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 ?? "") : price(line.amount)}</dd>
+            </div>
+          ),
+        )}
+      </dl>
+      {orderPaths.length > 0 ? (
+        <nav aria-label={storefrontTranslate("Pedidos para pagar")} className="flex flex-col gap-3 rounded-lg border p-5">
+          <p>{settings.invoice.split}</p>
+          <ul className="flex flex-col gap-3">
+            {orderPaths.map((path, index) => (
+              <li key={path}>
+                <Link to={path} className="font-medium underline underline-offset-4">
+                  {storefrontTranslate("Ver y pagar pedido")} {index + 1}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      ) : payable ? (
+        <Form method="post" className="flex flex-col gap-3">
+          <CustomerCsrfField />
+          {actionData?.error ? (
+            <p role="alert" className="text-sm text-destructive">
+              {storefrontTranslate(actionData.error)}
+            </p>
+          ) : null}
+          <Button type="submit" size="lg" disabled={busy}>
+            {busy ? storefrontTranslate("Preparando…") : settings.invoice.pay}
+          </Button>
+          <p className="text-center text-xs text-muted-foreground">{settings.invoice.note}</p>
+        </Form>
+      ) : (
+        <p role="status" className="rounded-md bg-muted px-4 py-3 text-sm">
+          {settings.invoice.closed}
+        </p>
+      )}
+    </section>
+  );
+}

package/src/sections/order-tracking.tsx

@@ -0,0 +1,81 @@
+import { formatTrackingStatus } from "@ecomiq/core";
+import { Form } from "react-router";
+import { Button } from "@theme/ui/button";
+import { Input } from "@theme/ui/input";
+import { setting, type SectionCatalog, type SectionRoot, type TrackingData } from "../index";
+
+export const catalog: SectionCatalog = {
+  name: "Seguimiento",
+  description: "Buscador por código para seguir el envío de un pedido.",
+};
+
+export const settings = {
+  tracking: {
+    eyebrow: setting.text("Envíos", "Antetítulo"),
+    title: setting.text("Sigue tu pedido", "Título"),
+    description: setting.text("Ingresa el código de seguimiento que te enviamos por correo.", "Descripción"),
+    field: setting.text("Código de seguimiento", "Campo"),
+    button: setting.text("Buscar", "Botón"),
+    missing: setting.text("No encontramos ese código. Revísalo e intenta de nuevo.", "Código no encontrado"),
+    shipment: setting.text("Envío", "Envío sin courier"),
+    carrier: setting.text("Ver en el courier", "Enlace al courier"),
+  },
+};
+
+export function OrderTracking({ loaderData, ...root }: { loaderData: TrackingData } & SectionRoot) {
+  const { code, tracking, missing, language, timeZone } = loaderData;
+  const date = new Intl.DateTimeFormat(language, { day: "numeric", month: "short", hour: "2-digit", minute: "2-digit", timeZone });
+  return (
+    <section {...root} className="mx-auto flex w-full max-w-2xl flex-col gap-8 px-4 py-12 md:py-20">
+      <div className="flex flex-col gap-3">
+        <p className="text-xs font-medium tracking-widest text-muted-foreground uppercase">{settings.tracking.eyebrow}</p>
+        <h1 className="text-4xl leading-tight md:text-5xl">{settings.tracking.title}</h1>
+        <p className="text-muted-foreground">{settings.tracking.description}</p>
+      </div>
+      <Form method="get" action="/track" className="flex flex-col gap-2 sm:flex-row">
+        <Input name="code" defaultValue={code} placeholder={settings.tracking.field} aria-label={settings.tracking.field} required />
+        <Button type="submit">{settings.tracking.button}</Button>
+      </Form>
+      {missing ? (
+        <p role="alert" className="rounded-md bg-destructive/10 px-4 py-3 text-sm text-destructive">
+          {settings.tracking.missing}
+        </p>
+      ) : null}
+      {tracking ? (
+        <div className="flex flex-col gap-6 rounded-lg border bg-card p-6 text-card-foreground md:p-8">
+          <div className="flex flex-wrap items-start justify-between gap-3">
+            <div className="flex flex-col gap-1">
+              <p className="text-sm text-muted-foreground">
+                {tracking.carrierName ?? settings.tracking.shipment} · {tracking.trackingNumber}
+              </p>
+              <p className="font-heading text-3xl">{formatTrackingStatus(tracking.status)}</p>
+            </div>
+            {tracking.trackingLink ? (
+              <a href={tracking.trackingLink} target="_blank" rel="noopener noreferrer" className="text-sm font-medium underline underline-offset-4">
+                {settings.tracking.carrier}
+              </a>
+            ) : null}
+          </div>
+          {tracking.message ? <p className="text-sm text-muted-foreground">{tracking.message}</p> : null}
+          <ol className="flex flex-col">
+            {tracking.events.map((event, index) => (
+              <li key={`${event.name}-${index}`} className="relative flex gap-4 pb-6 text-sm last:pb-0">
+                {index < tracking.events.length - 1 ? <span aria-hidden="true" className="absolute top-4 left-[5px] h-full w-px bg-border" /> : null}
+                <span aria-hidden="true" className="relative mt-1.5 size-2.5 shrink-0 rounded-full bg-primary" />
+                <span className="flex flex-col gap-0.5">
+                  <span className="font-medium">{event.name}</span>
+                  {event.description ? <span className="text-muted-foreground">{event.description}</span> : null}
+                  {event.date ? (
+                    <time dateTime={event.date} className="text-xs text-muted-foreground">
+                      {date.format(new Date(event.date))}
+                    </time>
+                  ) : null}
+                </span>
+              </li>
+            ))}
+          </ol>
+        </div>
+      ) : null}
+    </section>
+  );
+}

package/src/vite-client.d.ts

@@ -0,0 +1,4 @@
+declare module "virtual:ecomiq-links" {
+  const links: readonly import("@ecomiq/core").CatalogLink[];
+  export default links;
+}