Cancelación de suscripción.

<form class="ui-sample ui-service" data-cancellation-flow="true"><h3>Cancelar suscripción</h3><p>El acceso seguirá hasta el 25 de septiembre. No se elimina contenido.</p><label>Motivo opcional <select class="input"><option>Prefiero no responder</option><option>Ya no lo necesito</option></select></label><label class="ui-choice"><input type="checkbox" required=""/> Entiendo cuándo termina el acceso</label><div class="ui-actions"><button class="btn btn--primary" type="submit">Confirmar cancelación</button><a class="btn btn--secondary" href="#plan">Conservar plan</a></div></form>

<form class="ui-sample ui-service border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-cancellation-flow="true"><h3>Cancelar suscripción</h3><p>El acceso seguirá hasta el 25 de septiembre. No se elimina contenido.</p><label>Motivo opcional <select class="input border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2"><option>Prefiero no responder</option><option>Ya no lo necesito</option></select></label><label class="ui-choice"><input class="border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" type="checkbox" required=""/> Entiendo cuándo termina el acceso</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">Confirmar cancelación</button><a class="btn btn--secondary underline underline-offset-4" href="#plan">Conservar plan</a></div></form>

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

export interface CancellationFlowReason {
  /** Motivo tal como se muestra en el selector. */
  label: string;
  /** Valor enviado; si falta, se envía el texto. */
  value?: string;
}

export interface CancellationFlowProps {
  title?: string;
  /** Qué pasa al cancelar: hasta cuándo sigue el acceso y qué se conserva; vacío omite el párrafo. */
  description?: string;
  /** Etiqueta del selector de motivo. */
  reasonLabel?: string;
  reasonName?: string;
  /** Motivos posibles; el primero debería permitir no responder. Vacío oculta el selector. */
  reasons?: CancellationFlowReason[];
  /** Motivo elegido al inicio en un selector no controlado; sin valor queda el primero. */
  defaultReason?: string;
  /** Motivo de un selector controlado; va junto con `onReasonChange`. */
  reason?: string;
  /** Se llama al cambiar el motivo, también en un selector no controlado. */
  onReasonChange?: ChangeEventHandler<HTMLSelectElement>;
  /** Texto de la casilla obligatoria que confirma que la persona entiende las consecuencias; vacío la oculta. */
  acknowledgeLabel?: string;
  acknowledgeName?: string;
  /** Texto del botón que confirma la cancelación. */
  submitLabel?: string;
  /** Destino del enlace para conservar el plan; vacío oculta el enlace. */
  keepHref?: string;
  /** Texto del enlace para conservar el plan; vacío oculta el enlace. */
  keepLabel?: string;
  /** Se llama al elegir conservar el plan, por ejemplo para cerrar el diálogo que contiene el formulario. */
  onKeep?: MouseEventHandler<HTMLAnchorElement>;
  /** Destino del formulario; sin JavaScript, la cancelación se envía ahí. */
  action?: string;
  method?: "get" | "post";
  onSubmit?: FormEventHandler<HTMLFormElement>;
  className?: string;
}

const CANCELLATION_FLOW_REASONS: CancellationFlowReason[] = [{ label: "Prefiero no responder" }, { label: "Ya no lo necesito" }];

/**
 * Formulario para cancelar una suscripción que explica hasta cuándo sigue el acceso, pide un motivo opcional y una confirmación, y ofrece conservar el plan.
 *
 * La casilla de confirmación es `required`: el navegador impide enviar sin marcarla, también sin JavaScript.
 *
 * @example <CancellationFlow description="El acceso seguirá hasta el 25 de septiembre. No se elimina contenido." action="/cuenta/cancelar" method="post" reasonName="motivo" keepHref="/cuenta/plan" />
 * @example <CancellationFlow reasons={[{ label: "Prefiero no responder", value: "" }, { label: "Es muy caro", value: "precio" }]} onSubmit={cancelar} onKeep={cerrar} />
 */
export function CancellationFlow({
  title = "Cancelar suscripción",
  description = "El acceso seguirá hasta el 25 de septiembre. No se elimina contenido.",
  reasonLabel = "Motivo opcional",
  reasonName,
  reasons = CANCELLATION_FLOW_REASONS,
  defaultReason,
  reason,
  onReasonChange,
  acknowledgeLabel = "Entiendo cuándo termina el acceso",
  acknowledgeName,
  submitLabel = "Confirmar cancelación",
  keepHref = "#plan",
  keepLabel = "Conservar plan",
  onKeep,
  action,
  method,
  onSubmit,
  className,
}: CancellationFlowProps) {
  const motivo = reason !== undefined && onReasonChange !== undefined ? { value: reason } : { defaultValue: reason ?? defaultReason };
  return (
    <form className={["ui-service", className].filter(Boolean).join(" ")} data-cancellation-flow action={action} method={method} onSubmit={onSubmit}>
      <h3>{title}</h3>
      {description ? <p>{description}</p> : null}
      {reasons.length ? (
        <label>
          {`${reasonLabel} `}
          <select className="input" name={reasonName} onChange={onReasonChange} {...motivo}>
            {reasons.map((opcion, i) => (
              <option key={opcion.value ?? `${i}-${opcion.label}`} value={opcion.value}>
                {opcion.label}
              </option>
            ))}
          </select>
        </label>
      ) : null}
      {acknowledgeLabel ? (
        <label className="ui-choice">
          <input type="checkbox" name={acknowledgeName} required />
          {` ${acknowledgeLabel}`}
        </label>
      ) : null}
      <div className="ui-actions">
        <button className="btn btn--primary" type="submit">{submitLabel}</button>
        {keepHref && keepLabel ? <a className="btn btn--secondary" href={keepHref} onClick={onKeep}>{keepLabel}</a> : null}
      </div>
    </form>
  );
}