Placement Fee Estimate 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 your own call: details holds the hire type, the rates, the weeks, the seats, the role family, the name and the email. Show the confirmation when the request succeeds, and an error line in the form when it doesn't. The fee is an example. Nothing is invoiced.

Permanent is 18% of the yearly salary, times the seats. Contract is 12% of the day rate times 5 days times the weeks, times the seats. Temporary is 10% of the weekly rate times the weeks, times the seats. The defaults are a $90,000 salary, a $640 day rate for 12 weeks, a $1,600 weekly rate for 8 weeks, and 1 seat, which come to $16,200, $4,608 and $1,280. The percents, the 5 days and those defaults live next to the arithmetic, and the sentence under the fee is built from the same numbers. The figure is a polite live region, so a change is announced. The role family is not part of the sum.

The large figure is plain text, not a live region. A separate status line speaks "Example fee" and the amount once, about 700 milliseconds after the last change, and stays silent until the fee first differs from its starting value. The hire, basis and formula lines for all three hire types sit in one grid cell with the unused two invisible and inert, so the panel keeps its height when you switch.

They stay in the document, in the same grid cell, invisible and inert. Switching hire type shows the matching set and hides the others without unmounting them, so a salary you typed is still there if you switch back. Only the visible set is checked on submit. The Segment Group is the same control on every base, and clearing it is ignored so one hire type stays selected.

Salary, day rate, weekly rate, weeks and seats are whole numbers. Grouping commas are stripped before the value is stored. Seats run from 1 to 40. The id sits on NumberInputInput. onValueChange still receives { value } on every base.

The label above it names the control, and focus can land on it when the family is missing. A line under it says the family does not change the example fee. The trigger takes the id, and the label points to it with htmlFor.

No. hello@staffwick.example uses the .example domain, which is reserved for examples, and +1 (415) 555-0193 is in the 555-0100 to 555-0199 range set aside for fiction. Replace EMAIL, PHONE, PHONE_HREF and HOURS at the top of the file. The phone number and the fee keep their order in a right-to-left layout.