Order Tracking Dialog Block for React

So you can see it without a click. On load the sheet is a copy drawn in place at the end of the frame: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Track order button opens the real Sheet, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same TrackBody and TrackFoot components and share the block's state, so the step you pressed in the copy is pressed in the real one. In your app keep the Sheet and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

From the end of the page's reading direction: the right in a left-to-right page and the left in a right-to-left one. The sheet's own sides are physical, so sideOf reads the page's direction when the sheet opens and passes the matching one. The copy shown on load uses logical positions, so it is already on the right side in either direction. On a phone the copy docks to the foot of the frame as a bottom sheet, and the real sheet is full width.

From one fixed date, AS_OF, and the offsets in STEPS: Confirmed is four days back, Delivered is today. Each stamp is built from typed weekday and month names, so the page reads the same on the server and in every browser and never changes when you reload it on another day. Nothing ticks and no courier is asked: in your app load the steps and their scans from your carrier's API in the same shape, and compute "Today" from the person's clock.

The track is the window from 2 to 5 pm; the lighter stretch is where the estimate is likely to fall (20 minutes either side) and the tick is the estimate itself. Positions come from minutes after midnight, so changing ETA, SLACK or the window moves the drawing and the sentence under it together, "Estimated 3:40 pm, most likely between 3:20 pm and 4:00 pm." The track is an image with that sentence as its label, and it stays left to right in a right-to-left page, because time does.

Yes. The real sheet is named by its title and described by its sentence, focus starts on the step being shown and stays inside until the sheet closes, and Escape, Close and Cancel return focus to Track order 4821. The steps are buttons that control the scans region, the step in force is marked as the current one, and what changed is said in a polite message. The trigger is passed to SheetTrigger through render, and the sheet is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it and its close button close it and put focus on the button.

Everything but the clipboard. The order, its steps and its scans are typed in this file, the estimate is a constant, and no courier is contacted. Copy tracking link really writes the link to the clipboard and says so, or says it could not if the browser refuses. In your app fetch the steps from your tracking API, show the real link, and refresh the data when the sheet opens rather than on a timer.