No Coupons Empty State Block for React

Nothing leaves the page. The coupon is a row kept in the page's state, the 50.00 order is a typed example and the status line says "in this demo. Nothing is applied." To wire it for real, create the coupon with your store's API where the code says so, list what it returns, and apply discounts on the server at checkout, never from a code typed in the browser.

In whole cents. A percentage takes its share of the 5000 cents of the sample order and rounds to the nearest cent; a fixed amount is read as cents too, and never takes more than the order. The line says what comes off and what is left to pay, and a percentage goes from 1 to 100 while a fixed amount goes up to 500.00. One number formatter writes every figure, in a left-to-right span, so the digits stay Western digits in a right-to-left page, and a keyboard that types Arabic-Indic digits is read as ordinary digits.

It is made upper case, anything that is not a letter or a digit is dropped, and it stops at 12 characters, so SPRING-20! becomes SPRING20. The ticket prints the same text, in a left-to-right box in any language. A code needs at least 3 characters before the button turns on.

A button that is simply disabled can't explain itself, so this one stays in the tab order and keeps its reason in the line above it: "Code: 3 to 12 letters or digits." or what the value needs. Pressing it anyway, or Enter in a field, says the same in the status message, marks the field invalid and moves focus to it. Once both are right the line goes away and the button turns on.

No. The form stays where it is and is only locked until you press Start over, the list row is the same height empty or filled, and the button keeps its place with a new label. The ticket's outline is one drawing with two layers: the dashed one fades out while a solid one fades in. On a phone the ticket moves above the heading, 140 px tall, and the button is pinned to the bottom of the screen.

Tab runs through the code, the Percent and Fixed choice (arrow keys move between them), the value, Create coupon and Start over. The choice is a labelled radio group, the line under the button is tied to both fields, and one polite status message says what happened. After creating, focus moves to the new row in the list, and the drawing is hidden from assistive technology because the form and the list say the same things.