Share Receipt Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Share receipt button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same Keepsake component and share the block's state, so what you did in the copy shows in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

From one typed constant, PAYMENT: the amount in whole cents, the payee, an ISO date and a reference. The paper slip, the five lines that are copied and saved (RECEIPT_TEXT) and the text that is printed are all built from it, so they cannot disagree. The date is formatted with Intl.DateTimeFormat in UTC, the amount with Intl.NumberFormat, and the torn lower edge is a CSS mask, not an image. Pass your own payment and the whole dialog follows.

Copy as text calls navigator.clipboard.writeText with the five lines and its button reads Copied for a moment. Save .txt gives the browser a plain-text file named receipt-SF-8841.txt to download. Print builds a hidden frame that holds only the five lines and opens the browser's print dialog for it, so the page behind the dialog is never printed; the frame is removed a moment later. The browser decides what happens next: where a download goes, which printer, whether you cancel. The message says what was asked of it, not that it finished.

Browsers only allow clipboard writes on a secure page, and some embedded views refuse them. When that happens the copy button keeps its label and a message with an icon appears in the slot under the three actions, which is always there, so nothing moves: the browser refused the copy, and the receipt text can be selected by hand instead. It speaks once, as an alert, and the other two actions keep working.

No. Nothing is posted, mailed or uploaded, and the payment is example data; the drawn page behind the dialog only notes which of the three you used. In your app build the receipt text, or a PDF, on your server so it is the record and not a copy of the screen, keep the three actions as they are, and add a mail link or a share link with your own address on the end if you want one. Do not build share links to social networks from a receipt: it holds a person's payment.

Yes. The real dialog is named by its title and described by its sentence, focus starts on Copy as text and stays inside until it closes, and Escape and the close button return focus to Share receipt. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The receipt is a list of terms and values a screen reader reads in order, the three actions are ordinary buttons, and one polite status message says what each did. The copy shown on load moves no focus; Escape inside it and its close button close it and put focus on the header button.