Bulk Calculator Gifting Contact Block for React

Nowhere yet. The submit handler waits 800 milliseconds, as a stand-in for a request, then shows the confirmation. Replace that timer in submit with a call to your gifting desk's inbox or CRM: details holds the number of people, the price of each gift, the occasion, the name and the email. Show the confirmation when the request succeeds, and an error line in the form when it doesn't.

billOf multiplies the people by the price, finds the discount step they reach in STEPS (5% from 25 gifts, 10% from 50, 15% from 100, 20% from 250) and takes it off, rounding to whole dollars. Money is formatted with a fixed Intl.NumberFormat and sits in a left-to-right run, so the digits never reorder in a right-to-left page. The total is labelled "Example only", and a quiet line says delivery and tax aren't included. Replace STEPS and PRICES with your own terms.

It lists the four steps, with a check on every step you have reached (screen readers hear "reached"). A polite line beside it says how many more gifts reach the next step ("5 more gifts for 15% off") or that you are at the top. The line keeps its height, so the form never jumps.

A whole number from 1 to 5,000, with thousands separators allowed. The plus and minus buttons and the arrow keys change it by one. An empty, zero or larger number shows "Enter from 1 to 5,000 people." under the field and moves focus there on submit; the bill reads zero until the number is valid.

The label above it names the select's button for screen readers. The select's trigger takes the id, and the label points to it with htmlFor.

The people stepper and the prices stack, the four prices stay in one row, the bill's first two cells sit side by side and the total takes a full row under them, the ladder goes two by two, and the name and email go one per row, so nothing scrolls sideways at 320 pixels.