shadcn.io is not affiliated with official shadcn/ui
Receipt Email Checkout Block for React Aria
A sewing-kit shop's receipt as one open email in two widths and two formats, HTML or 60-column plain text built from the same typed lines, with a real Blob download of the format on show and a Send me a copy field that says nothing is sent.
Installation
Overview
Let people see exactly what their receipt looks like before it is sent, with this receipt email for React with React Aria. A compact header from Nettle and Needle, a sewing-kit shop, sits over a hairline frame with a plus mark on each corner. A toolbar holds two Toggle Groups: the width of the email (Desktop 600 px or Phone 320 px) and its format (HTML or Plain text). Under it a stage of a fixed height holds one open email, with From, To, Subject and Date, then the four items, the subtotal, shipping, tax at a typed 8.00% example rate and the total, all worked out in whole cents from one typed receipt. The HTML shape is a native table; the plain-text shape is the same lines in a pre, wrapped at 60 columns with the prices pushed to the last column. Below the stage, a Send me a copy Field checks the address and says "Not sent in this demo". The foot has a polite status line and Download receipt, the only Shine Button, which really builds the file you are looking at. For order emails, invoices and anywhere the plain-text part matters as much as the pretty one.
FAQ
What does Download receipt really do?
It builds the file in the browser and saves it. In the HTML format it writes a small standalone document (receipt-nn-20931.html); in Plain text it writes the 60-column text (receipt-nn-20931.txt). The code makes a Blob with the right type, points an anchor at URL.createObjectURL, clicks it and revokes the URL. Nothing is uploaded, and the status line names the file it saved.
How is the plain text wrapped at 60 columns?
plainOf builds an array of lines from the same typed items and totals that the HTML table uses. rowOf pads a label so its price ends in the last of 60 columns, or puts the price on its own line if the label is too long, and wrapOf breaks the footnote at word boundaries without cutting a word. The text is shown in a pre with a fixed layout and scrolls sideways on a narrow screen rather than reflowing.
What do the width buttons do on a small screen?
They change the width of the email inside the stage: 600 px or 320 px. The stage itself keeps one height and scrolls inside itself, in both directions, so a 600 px email on a phone is reached by scrolling the stage, and the page does not jump when you change shape. The stage is a keyboard-reachable scroll region.
How do the two toggle groups behave?
Each is a single choice and cannot be emptied: pressing the one already on does nothing. Changing either one updates the status line ("Showing the plain-text email at 320 px."). The pressed item is a foreground fill, not the primary colour.
What does Send me a copy do?
It checks that the text looks like an address, with a problem line that always reserves its space, and then says "Not sent in this demo. A real shop would email" the address. It sends nothing. In your app, post the address with the order number to your mail service, and keep the Download button for people who want the file.
What stays local in the demo, and how do I wire it up?
Everything except the download, which is a real file made on your device. The receipt is typed in ITEMS, the tax rate and shipping are constants, and no email exists. In your app render the receipt your API returns, build the HTML and the plain-text parts of the real email from the same data on the server, and escape names the way escapeOf does.