Promo Code Popover Success Block for React

So you can see the maths without a click. On load the popover is a copy drawn in place under the chip: a native dialog element that isn't modal, so nothing is trapped or focused and the page around it keeps working. The chip opens the real Popover, with its own positioning, Escape and focus return, and the copy stays closed until a reload. Both show the same PromoMaths component and share the block's state. In your app keep the Popover and drop the copy: the "in-place" state, its dialog and the Escape effect.

From the items, in whole cents. The eligible subtotal adds the items marked promo, the code only applies when that comes to MINIMUM or more, the discount is PERCENT of it rounded to a cent, and the new total is the subtotal minus the discount. The popover, the discount row and the total all read the same numbers, and the label "20% of $104.00" shows the figure the percentage was taken from. Edit ITEMS, PERCENT, MINIMUM and VALID_UNTIL; your server must apply the same rules, since this page only shows them.

Everything: no order exists and nothing is charged. Remove code and Apply code change the page's state, close the popover, return focus to the chip and say in a polite status line what the total is ("SAVE20 removed in this demo"). To wire it for real, validate the code on your server in toggleCode, take the discount and the total from its response, and show its reason in the popover when it refuses a code.

Yes. The chip is a named button that opens the popover; Escape closes the popover and focus goes back to the chip, as it does after Remove code or Apply code. The table has a caption, column headers and row headers, eligibility is written in words with an icon (never colour alone), and the discount keeps its minus sign inside a left-to-right span with "Minus" in text for screen readers. The chip is passed to PopoverTrigger through render; the popover is controlled with open and onOpenChange.

Amounts go through Intl.NumberFormat in a fixed en-US locale, each in a single left-to-right span so signs and digits keep their order on a right-to-left page. The end date is a fixed ISO string written with Intl.DateTimeFormat in UTC in a time element, never compared with the visitor's clock here: your server decides whether a code is still valid.

The basket drawing goes and the summary takes the width. The copy shown on load keeps to the stage, its end edge under the chip, and the real popover stays inside the screen; the table keeps all three columns, so nothing scrolls sideways at 320 pixels.