Order Lookup Contact Block for React

From SAMPLES at the top of the file: PK-1042 (delivered), PK-1043 (on its way) and PK-1044 (packed). Type one in any form ("pk 1043" works), with any well-formed email. Replace the check in lookUp with a request to your orders service and build the Found object from its answer; the timeline only needs the four step dates and how many are done.

Each sample stores its steps as days from today (minus three, minus two, and so on) and the dates are worked out when the visitor looks the order up, never while the page renders. So a sample is always "shipped yesterday", whenever the page is read. Real orders would carry real dates.

It's a list named "Order progress" whose items are the four steps. Steps normally draws a wizard whose steps are buttons; here no step has a trigger, so each is a marker, a title and a date, and nothing in it can be pressed. The summary above it ("Status: on its way") is a polite live region and focus moves to the order's heading when a lookup succeeds.

It's inert until an order is found, so Tab skips it, and a line under the button says why. It's there from the start so the block never changes height, and it still shows the one primary button. A new lookup clears any message in progress.

The label above it names the select's button for screen readers, and focus can land on that button when the topic is missing. The select's trigger takes the id, and the label points to it with htmlFor.

The fields stack, the lookup button goes under them, and the timeline stays vertical at every width, so four steps with dates fit a narrow screen without scrolling sideways. The chips wrap onto a second line when they need to.