Entrega de webhook.

<section class="ui-sample ui-service" data-webhook-delivery="true"><header><strong>document.signed</strong><span class="badge badge--ok">Entregado</span></header><dl><div><dt>Destino</dt><dd><code>https://cliente.example/webhooks</code></dd></div><div><dt>HTTP</dt><dd>204</dd></div><div><dt>Firma</dt><dd>Verificada</dd></div></dl><button class="btn btn--secondary" type="button">Ver payload</button></section>

<section class="ui-sample ui-service border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-webhook-delivery="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>document.signed</strong><span class="badge badge--ok">Entregado</span></header><dl class="grid gap-2"><div><dt>Destino</dt><dd><code>https://cliente.example/webhooks</code></dd></div><div><dt>HTTP</dt><dd>204</dd></div><div><dt>Firma</dt><dd>Verificada</dd></div></dl><button class="btn btn--secondary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Ver payload</button></section>

import type { MouseEventHandler } from "react";

export interface WebhookDeliveryItem {
  /** Nombre del dato (`<dt>`). */
  label: string;
  value: string;
  /** Muestra el valor en `<code>`, para URL o identificadores que se copian tal cual. */
  monospace?: boolean;
}

/** Tono de la insignia de estado: `ok` entregado, `warn` reintento en curso, `err` fallido, `neutral` sin tono. */
export type WebhookDeliveryTone = "ok" | "warn" | "err" | "neutral";

export interface WebhookDeliveryProps {
  /** Nombre del evento entregado (`document.signed`). */
  title?: string;
  /** Estado de la entrega: entregado, reintento en curso o fallido; va en una insignia y vacío lo oculta. */
  status?: string;
  /** Tono de la insignia; sin valor se deduce de `status` («Entregado» → `ok`, «Reintento 2 de 5» → `warn`, «Fallido» → `err`) y si no lo reconoce es `neutral`. */
  statusTone?: WebhookDeliveryTone;
  /** Datos de la entrega: destino, código HTTP y verificación de la firma; en un reintento, la hora del próximo intento. */
  items?: WebhookDeliveryItem[];
  /** Texto del botón; según el estado, ver el payload o reintentar. Vacío lo oculta. */
  actionLabel?: string;
  onAction?: MouseEventHandler<HTMLButtonElement>;
  /** Peso del botón: `secondary` para ver el payload, `primary` cuando la entrega falló y reintentar es lo siguiente que hay que hacer. */
  actionTone?: "primary" | "secondary";
  className?: string;
}

const ITEMS: WebhookDeliveryItem[] = [
  { label: "Destino", value: "https://cliente.example/webhooks", monospace: true },
  { label: "HTTP", value: "204" },
  { label: "Firma", value: "Verificada" },
];

const WEBHOOK_DELIVERY_BADGE: Record<WebhookDeliveryTone, string> = {
  ok: "badge badge--ok",
  warn: "badge badge--warn",
  err: "badge badge--err",
  neutral: "badge",
};

const WEBHOOK_DELIVERY_TONES: [string, WebhookDeliveryTone][] = [
  ["entregado", "ok"],
  ["reintento", "warn"],
  ["pendiente", "warn"],
  ["fallid", "err"],
  ["falló", "err"],
  ["rechazad", "err"],
];

function webhookDeliveryTone(status: string, tone?: WebhookDeliveryTone): WebhookDeliveryTone {
  const texto = status.toLowerCase();
  return tone ?? WEBHOOK_DELIVERY_TONES.find(([clave]) => texto.includes(clave))?.[1] ?? "neutral";
}

/**
 * Estado de la entrega de un webhook a un destino externo, con evento, estado, destino, código HTTP, firma y una acción; se usa en paneles de integración para revisar o reintentar envíos.
 *
 * El estado va en texto dentro de una insignia con tono. Cuando la entrega falla, pasa el intento en `status` («Reintento 2 de 5») y la acción de reintento en `actionLabel`, `onAction` y `actionTone="primary"`.
 *
 * @example <WebhookDelivery title="document.signed" status="Reintento 2 de 5" items={[{ label: "Destino", value: "https://cliente.example/webhooks", monospace: true }, { label: "HTTP", value: "503" }, { label: "Próximo intento", value: "25 ago 2026 · 18:32 CLT" }]} actionLabel="Reintentar ahora" actionTone="primary" onAction={reintentar} />
 */
export function WebhookDelivery({
  title = "document.signed",
  status = "Entregado",
  statusTone,
  items = ITEMS,
  actionLabel = "Ver payload",
  onAction,
  actionTone = "secondary",
  className,
}: WebhookDeliveryProps) {
  return (
    <section className={["ui-service", className].filter(Boolean).join(" ")} data-webhook-delivery>
      <header>
        <strong>{title}</strong>
        {status ? <span className={WEBHOOK_DELIVERY_BADGE[webhookDeliveryTone(status, statusTone)]}>{status}</span> : null}
      </header>
      {items.length ? (
        <dl>
          {items.map((item, i) => (
            <div key={`${item.label}-${i}`}>
              <dt>{item.label}</dt>
              <dd>{item.monospace ? <code>{item.value}</code> : item.value}</dd>
            </div>
          ))}
        </dl>
      ) : null}
      {actionLabel ? <button className={`btn btn--${actionTone}`} type="button" onClick={onAction}>{actionLabel}</button> : null}
    </section>
  );
}