Discount coupon

The discount code of the cart. It starts collapsed behind "Have a discount code?" because most people do not have a code, and an empty field in plain view at the payment step sends people off to look for one on Google.

When to use it

• In the cart or at the payment step, with onApply asking the server: it returns { valid: true, description } or { valid: false, reason }. Whatever it returns is the truth: the component does not decide whether a coupon is valid, it only asks and reports. If it is valid, it calls onAccept with the coupon.
• With the coupon already applied (applied), instead of the field the coupon appears with "Remove", which calls onRemove.
• collapsed={false} when the code is part of the flow (a campaign that announces it).

When not to

• Inside another <form>: the coupon carries its own (that is why Enter submits it, not the outer one), and a form inside another is not valid HTML. It goes next to the payment form, not inside it.
• A verification code: CodeField.

Keyboard: the expand button is pressed with Enter or Space. The code is submitted with Enter or with "Apply"; while it is being checked, the button stays in a waiting state without losing focus. On applying or removing, the whole block changes and focus goes with it, instead of falling to the page.

Accessibility: the disclosure says whether it is open (aria-expanded). The reason for the rejection is provided by the server and shown as is ("that code expired on May 31" helps; "invalid code" does not), and if it could not even be checked, that is what is said, which is something else. Applying and removing are announced ("Code VERANO10 applied: 10% discount"). Codes are compared without spaces and in uppercase.

Fine-tuning: no variables of its own: the field uses --amset-field-* and the block is adjusted with the classes amset-coupon__form, amset-coupon__field, amset-coupon__brand, amset-coupon__code and amset-coupon__description.