Illustrator Commission Builder Profile Block for React

Edit PIECES and the constants above the quote. A piece has a title, a one-line note, its price at A5 with one character and no background, and the drawing it uses. SIZES give each size's factor on that price, EXTRA_CHARACTER and BACKGROUND are the dollars for each extra character and for a painted background, and RUSH_PERCENT is what the two-week turnaround adds. The price, every line of the working and the day of delivery are worked out from these numbers, so nothing is typed twice. AS_OF is the day the page treats as today.

The piece costs its price at A5 times the size's factor, rounded to the dollar. Each character after the first adds a fixed amount and a painted background adds another. The total before any rush is the sum of those, and the two-week turnaround adds a share of it, rounded to the dollar. The delivery day is four or two weeks after AS_OF. Every line is shown, so a client can check the sum, and the figure is labelled "From" because the artist confirms the final quote.

Nothing leaves the page. The status line says "Noted in this demo. Nothing was sent." and goes back to the price as soon as you change anything, because the request no longer matches what is on screen. To make it real, send the piece, the size, the characters, the background and the turnaround to your own API in the handler and show its answer in the same line.

It takes a number from 1 to 4. You can type it or use the steppers, and a blank or an out-of-range number is held to the nearest allowed one when the price is worked out. The price follows as you type. Digits typed in an Arabic-Indic keyboard are read as numbers.

Each piece is a radio button named by its title, the drawings are hidden from assistive technology, and everything they stand for is written in the caption next to the large piece. The size group, the characters field, the switch and the turnaround menu are all named, the working is a description list so each figure is read with its label, and the status line is a polite live region present from the start. Prices keep their order in a right-to-left layout.

The large piece and its caption come first, then the eight pieces four across, then the builder in one column. The foot stays pinned to the bottom of the screen while the panel scrolls, so the request is always in reach, and settles at the panel's end from the medium breakpoint.