Tappable device repair Contact Block for React

Nowhere yet. The submit handler waits 800 milliseconds, then shows the confirmation. Replace that timer in submit with your own call. The request is the model id, the chosen part ids, the name and the email. Prices are examples in MODELS; they are not a quote a server has accepted.

The drawing is decorative. The four buttons are a multi-select Toggle Group, so each part can be on or off, and a chosen part uses the foreground colour. The same choice fills that part of the drawing and marks its row in the price list. The example total adds the chosen prices and is a status line, so a change can be announced. At least one part is required; the message sits under the buttons and focus moves there.

The label above it names the select, and the prices follow the model that is showing. Pocket S is selected to start. The select's trigger takes the id, and the label points to it with htmlFor.

The form has noValidate. On submit, problems checks that a part is chosen, that a name is present, and that the email has an @ and a domain. Each problem appears under its field with an icon, and focus moves to the first one. Choosing a part, or typing, clears that message. The model is always one of the four.

It thanks the visitor by first name and repeats the model, the chosen part names and the example total. It's a status region that takes focus, and "Repair another phone" clears the parts and the fields and puts focus on the form heading. The line under the button is where the one-business-day reply lives.

The drawing is placed first, then the form. The phone drawing is short, and the four parts sit in a two-by-two grid under it instead of over the drawing. Name and email go one per row below sm, and the submit button goes full width. Under 360 pixels the contact labels shrink to their icons. The header fades up once; with reduced motion it simply appears. desk@screenwright.example and +1 (555) 010-0162 are fictional, and every price is an example.