Identidad tributaria.

<section class="ui-sample ui-service" data-tax-identity="true"><header><strong>Datos tributarios</strong><span class="badge badge--ok">Validados</span></header><dl><div><dt>Razón social</dt><dd>Compañía de Innovación de Santiago SpA</dd></div><div><dt>RUT</dt><dd>78.384.591-1</dd></div><div><dt>Giro</dt><dd>Servicios de tecnología</dd></div></dl><button class="btn btn--secondary" type="button">Editar datos</button></section>

<section class="ui-sample ui-service border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-tax-identity="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Datos tributarios</strong><span class="badge badge--ok">Validados</span></header><dl class="grid gap-2"><div><dt>Razón social</dt><dd>Compañía de Innovación de Santiago SpA</dd></div><div><dt>RUT</dt><dd>78.384.591-1</dd></div><div><dt>Giro</dt><dd>Servicios de tecnología</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">Editar datos</button></section>

import type { MouseEventHandler } from "react";

export interface TaxIdentityItem {
  /** Nombre del dato (`<dt>`): razón social, RUT, giro. */
  label: string;
  value: string;
}

/** Tono de la insignia de estado: `ok` datos validados, `warn` datos por revisar, `err` datos rechazados, `neutral` sin tono. */
export type TaxIdentityTone = "ok" | "warn" | "err" | "neutral";

export interface TaxIdentityProps {
  title?: string;
  /** Indica si los datos ya se validaron; cambia el estado por defecto a «Por revisar» cuando es `false`. */
  validated?: boolean;
  /** Texto del estado; por defecto «Validados» o «Por revisar» según `validated`; va en una insignia y vacío lo oculta. */
  status?: string;
  /** Tono de la insignia; sin valor se deduce de `status` («Validados» → `ok`, «Por revisar» → `warn`, «Rechazados» → `err`) y si no lo reconoce, de `validated`. */
  statusTone?: TaxIdentityTone;
  /** Datos tributarios como pares etiqueta y valor. */
  items?: TaxIdentityItem[];
  /** Texto del botón que abre la edición; vacío oculta el botón. */
  editLabel?: string;
  onEdit?: MouseEventHandler<HTMLButtonElement>;
  /** Peso del botón de edición; por defecto `secondary` con `validated` y `primary` sin él, porque corregir los datos es lo siguiente que hay que hacer. */
  editTone?: "primary" | "secondary";
  className?: string;
}

const TAX_IDENTITY_ITEMS: TaxIdentityItem[] = [
  { label: "Razón social", value: "Compañía de Innovación de Santiago SpA" },
  { label: "RUT", value: "78.384.591-1" },
  { label: "Giro", value: "Servicios de tecnología" },
];

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

const TAX_IDENTITY_TONES: [string, TaxIdentityTone][] = [
  ["validad", "ok"],
  ["revisar", "warn"],
  ["pendiente", "warn"],
  ["rechazad", "err"],
];

function taxIdentityTone(status: string, validated: boolean, tone?: TaxIdentityTone): TaxIdentityTone {
  const texto = status.toLowerCase();
  return tone ?? TAX_IDENTITY_TONES.find(([clave]) => texto.includes(clave))?.[1] ?? (validated ? "ok" : "warn");
}

/**
 * Ficha con los datos tributarios de una empresa o cuenta (razón social, RUT, giro) y su estado de validación; se usa en la facturación y antes de emitir documentos.
 *
 * El estado va en texto dentro de una insignia con tono. Con `validated={false}` el estado pasa a «Por revisar» y el botón de edición pasa a ser la acción principal, para que se corrijan los datos antes de emitir.
 *
 * @example <TaxIdentity items={[{ label: "Razón social", value: "Compañía de Innovación de Santiago SpA" }, { label: "RUT", value: "78.384.591-1" }]} onEdit={editar} />
 * @example <TaxIdentity validated={false} items={[{ label: "RUT", value: "78.384.591-1" }, { label: "Giro", value: "Sin giro informado" }]} editLabel="Corregir datos" onEdit={editar} />
 */
export function TaxIdentity({
  title = "Datos tributarios",
  validated = true,
  status,
  statusTone,
  items = TAX_IDENTITY_ITEMS,
  editLabel = "Editar datos",
  onEdit,
  editTone,
  className,
}: TaxIdentityProps) {
  const estado = status ?? (validated ? "Validados" : "Por revisar");
  const peso = editTone ?? (validated ? "secondary" : "primary");
  return (
    <section className={["ui-service", className].filter(Boolean).join(" ")} data-tax-identity>
      <header>
        <strong>{title}</strong>
        {estado ? <span className={TAX_IDENTITY_BADGE[taxIdentityTone(estado, validated, statusTone)]}>{estado}</span> : null}
      </header>
      {items.length ? (
        <dl>
          {items.map((item, i) => (
            <div key={`${item.label}-${i}`}>
              <dt>{item.label}</dt>
              <dd>{item.value}</dd>
            </div>
          ))}
        </dl>
      ) : null}
      {editLabel ? <button className={`btn btn--${peso}`} type="button" onClick={onEdit}>{editLabel}</button> : null}
    </section>
  );
}