Coupon Invalid Error Block for React

Everything. Choosing an offer changes the previewed total and applying it waits a moment and says, in a polite status line, that the offer was applied in this demo and nothing was sent. To make it real, send the chosen code with the cart to your checkout from apply and take the totals and the ranking back from your server.

By what each saves on this box, worked out from typed rules in OFFERS: a percentage of the items' total, or the delivery fee. The ones the box qualifies for come first, the biggest saving first; the ones it doesn't qualify for yet come last, nearest first, with how much more the box needs. The saving is never typed twice: the cell, the total and the status line all read the same helper.

The box is below its minimum, so its radio is disabled, and the cell says so in words at full contrast ("Add $8.00 to qualify") with a hairline meter of how close the box is. Nothing is faded out, so the cell stays readable in every theme.

From typed ISO dates and one fixed "today", worked out with UTC day numbers, so "Ended 31 Dec 2025" and the days since read the same on the server and in every time zone. Nothing reads the clock. In your app, take the end date from the code's record and the day from the server.

The three offers are native radio buttons in a labelled group: Tab reaches the group, the arrow keys move between the offers you can choose, and the chosen cell is a solid tint with a heavy edge and a filled dot. Remove offer is a real button that stays pressable and answers when there is nothing to remove, rather than disappearing.

The offers stack one above another, each with its saving as the largest figure, and the box's items and totals follow them. The failed code and its reason stay at the top.