Shipping Update Notification Block for React

No. The choice is kept in the page, and the sentence says what you would hear from the moment the page treats as now. Nothing is sent. In your app save the choice per order in choose, and let the same list of messages (MESSAGES) drive both the sentence and what your server sends.

Each typed message says which choices send it and whether it has already gone. The sentence counts the ones still to come for the chosen option and names them ("2 messages still to come: out for delivery and delivered. The estimate is Fri 16 Oct."). "Delivered only" gives one, and "Off" says the steps above still update here.

It puts the tracking number on your clipboard and the status line says so ("Copied tracking number PLN 7710 2294 0856."). If the browser refuses, the button reports that it could not copy. The number is made up.

The four days are typed ISO dates and the page's now is fixed, so the parcel is in transit on Wed 14 Oct with delivery estimated for Fri 16 Oct. In your app fill them from your carrier's events and format them in the viewer's zone.

The steps are a list, and each one begins with a hidden word (Done, Now or Expected) so the stage is not colour or position alone. The tracking number has a named copy button, the Select has a name that includes the order, and one polite status line reports each change.

The four step cells wrap into two rows of two, the facts stack in one column, and the Select goes under its sentence at full width. The sentence reserves its lines, so choosing never moves the page.