Cupón de descuento

El código de descuento de la cesta. Empieza plegado detrás de «¿Tienes un código de descuento?» porque la mayoría no tiene código, y un campo vacío a la vista en el paso de pago manda a la gente a buscar uno a Google.

Cuándo usarlo

• En la cesta o en el paso de pago, con onApply preguntando al servidor: devuelve { valid: true, description } o { valid: false, reason }. Lo que devuelva es la verdad: el componente no decide si un cupón vale, solo lo pregunta y lo cuenta. Si vale, llama a onAccept con el cupón.
• Con el cupón ya aplicado (applied), en vez del campo sale el cupón con «Quitar», que llama a onRemove.
• collapsed={false} cuando el código es parte del flujo (una campaña que lo anuncia).

Cuándo no

• Dentro de otro <form>: el cupón lleva el suyo (por eso Intro lo envía a él), y un formulario dentro de otro no es HTML válido. Va al lado del formulario de pago, no dentro.
• Un código de verificación: CodeField.

Teclado: el botón de desplegar se pulsa con Intro o Espacio. El código se envía con Intro o con «Aplicar»; mientras se comprueba, el botón se queda en espera sin perder el foco. Al aplicar o al quitar, el bloque cambia entero y el foco se va con él, en vez de caerse a la página.

Accesibilidad: el desplegable dice si está abierto (aria-expanded). El motivo del rechazo lo pone el servidor y se enseña tal cual («ese código caducó el 31 de mayo» ayuda; «código no válido», no), y si ni siquiera se pudo preguntar se dice eso, que es otra cosa. Aplicar y quitar se anuncian («Código VERANO10 aplicado: 10 % de descuento»). Los códigos se comparan sin espacios y en mayúsculas.

Aspecto fino: sin variables propias: el campo usa --amset-field-* y el bloque se ajusta con las clases amset-coupon__form, amset-coupon__field, amset-coupon__brand, amset-coupon__code y amset-coupon__description.