Solicitud de soporte.

<form class="ui-sample ui-service" data-support-request="true"><h3>Solicitar ayuda</h3><label>Asunto <input class="input" value="No puedo abrir un documento"/></label><label>Detalle <textarea class="input" rows="3"></textarea></label><label>Prioridad <select class="input"><option>Normal</option><option selected="">Bloquea mi trabajo</option></select></label><div class="ui-actions"><button class="btn btn--primary" type="submit">Enviar solicitud</button><small>No incluyas contraseñas ni secretos.</small></div></form>

<form class="ui-sample ui-service border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-support-request="true"><h3>Solicitar ayuda</h3><label>Asunto <input class="input border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" value="No puedo abrir un documento"/></label><label>Detalle <textarea class="input border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" rows="3"></textarea></label><label>Prioridad <select class="input border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2"><option>Normal</option><option selected="">Bloquea mi trabajo</option></select></label><div class="ui-actions"><button class="btn btn--primary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="submit">Enviar solicitud</button><small class="text-sm text-slate-600">No incluyas contraseñas ni secretos.</small></div></form>

import type { ChangeEventHandler, FormEventHandler } from "react";

export interface SupportRequestPriority {
  /** Prioridad descrita por su efecto («Bloquea mi trabajo»). */
  label: string;
  /** Valor enviado; si falta, se envía el texto. */
  value?: string;
}

export interface SupportRequestProps {
  title?: string;
  /** Etiqueta del campo de asunto. */
  subjectLabel?: string;
  subjectName?: string;
  /** Asunto inicial de un campo no controlado. */
  defaultSubject?: string;
  /** Asunto de un campo controlado; va junto con `onSubjectChange`. */
  subject?: string;
  onSubjectChange?: ChangeEventHandler<HTMLInputElement>;
  /** Etiqueta del área de detalle. */
  detailLabel?: string;
  detailName?: string;
  /** Alto visible del detalle en líneas. */
  detailRows?: number;
  /** Detalle inicial de un campo no controlado. */
  defaultDetail?: string;
  /** Detalle de un campo controlado; va junto con `onDetailChange`. */
  detail?: string;
  onDetailChange?: ChangeEventHandler<HTMLTextAreaElement>;
  /** Etiqueta del selector de prioridad. */
  priorityLabel?: string;
  priorityName?: string;
  /** Prioridades posibles; vacío oculta el selector. */
  priorities?: SupportRequestPriority[];
  /** Prioridad elegida al inicio en un selector no controlado (el `value` de la opción o su texto). */
  defaultPriority?: string;
  /** Prioridad de un selector controlado; va junto con `onPriorityChange`. */
  priority?: string;
  onPriorityChange?: ChangeEventHandler<HTMLSelectElement>;
  /** Texto del botón que envía la solicitud. */
  submitLabel?: string;
  /** Nota junto al botón sobre qué no incluir; vacía se omite. */
  help?: string;
  /** Destino del formulario; sin JavaScript, la solicitud se envía ahí. */
  action?: string;
  method?: "get" | "post";
  onSubmit?: FormEventHandler<HTMLFormElement>;
  className?: string;
}

const SUPPORT_REQUEST_PRIORITIES: SupportRequestPriority[] = [{ label: "Normal" }, { label: "Bloquea mi trabajo" }];

/**
 * Formulario para pedir ayuda al equipo de soporte, con asunto, detalle, prioridad y una advertencia sobre datos que no se deben enviar.
 *
 * Cada campo es controlado sólo si llegan su valor y su `onChange` (`subject` + `onSubjectChange`, `detail` + `onDetailChange`, `priority` + `onPriorityChange`). Si sólo llega el `onChange`, el campo queda no controlado y el `onChange` igual se llama.
 *
 * @example <SupportRequest action="/soporte" method="post" subjectName="asunto" detailName="detalle" priorityName="prioridad" defaultSubject="" defaultPriority="Normal" />
 * @example <SupportRequest defaultSubject="No puedo abrir un documento" defaultPriority="Bloquea mi trabajo" onSubmit={enviar} />
 */
export function SupportRequest({
  title = "Solicitar ayuda",
  subjectLabel = "Asunto",
  subjectName,
  defaultSubject = "No puedo abrir un documento",
  subject,
  onSubjectChange,
  detailLabel = "Detalle",
  detailName,
  detailRows = 3,
  defaultDetail,
  detail,
  onDetailChange,
  priorityLabel = "Prioridad",
  priorityName,
  priorities = SUPPORT_REQUEST_PRIORITIES,
  defaultPriority = "Bloquea mi trabajo",
  priority,
  onPriorityChange,
  submitLabel = "Enviar solicitud",
  help = "No incluyas contraseñas ni secretos.",
  action,
  method,
  onSubmit,
  className,
}: SupportRequestProps) {
  const asunto = subject !== undefined && onSubjectChange !== undefined ? { value: subject } : { defaultValue: subject ?? defaultSubject };
  const detalle = detail !== undefined && onDetailChange !== undefined ? { value: detail } : { defaultValue: detail ?? defaultDetail };
  const prioridad = priority !== undefined && onPriorityChange !== undefined ? { value: priority } : { defaultValue: priority ?? defaultPriority };
  return (
    <form className={["ui-service", className].filter(Boolean).join(" ")} data-support-request action={action} method={method} onSubmit={onSubmit}>
      <h3>{title}</h3>
      <label>
        {`${subjectLabel} `}
        <input className="input" name={subjectName} onChange={onSubjectChange} {...asunto} />
      </label>
      <label>
        {`${detailLabel} `}
        <textarea className="input" name={detailName} rows={detailRows} onChange={onDetailChange} {...detalle} />
      </label>
      {priorities.length ? (
        <label>
          {`${priorityLabel} `}
          <select className="input" name={priorityName} onChange={onPriorityChange} {...prioridad}>
            {priorities.map((opcion, i) => (
              <option key={opcion.value ?? `${i}-${opcion.label}`} value={opcion.value}>
                {opcion.label}
              </option>
            ))}
          </select>
        </label>
      ) : null}
      <div className="ui-actions">
        <button className="btn btn--primary" type="submit">{submitLabel}</button>
        {help ? <small>{help}</small> : null}
      </div>
    </form>
  );
}