shadcn.io is not affiliated with official shadcn/ui
Invoice Delivery Settings Block for React Aria
An invoice delivery panel with recipients as email chips, a choice of when each invoice is sent, an attached-PDF switch, a language and a PO number rule, over a drawn email whose subject and preview follow every choice.
Installation
Overview
Decide who gets each invoice, when and in what words, with this invoice delivery panel for React with React Aria. Inside a hairline frame with a plus mark on each corner, the first band holds the recipients as email chips (Tags Input, up to four, added with Enter or a comma, with a reserved line that says why an address was turned down). The second holds a Native Select for when the email goes out (when it is issued, three days before it is due, or when it is paid), another for the language, a Switch that attaches the PDF or sends a link instead, and a Switch that requires a PO number, with a sentence on how many clients it would hold back. The third is a drawn email: its subject, its preview line, the attachment and the PO line are worked out from the choices, with the day it goes out for a sample invoice. The last band counts unsaved changes in a status line beside a Shine Button to save them and an outline Button to discard them. On a phone the bands stack and the action foot stays pinned to the bottom of the screen. It's built from Tags Input, Native Select, Switch, Button, Shine Button and Guides, with a CSS entrance only. For invoicing tools, accounting products and any account that sends bills by email.
FAQ
How do I change the sample invoice, the timings or the languages?
Edit the constants at the top of the file. INVOICE holds the number, amount, issue, due and paid dates and the PO number the preview draws, TIMINGS lists when an email can go out, and LANGS gives each language the words its subject needs (invoice, from, due, reminder, receipt, paid) and its decimal mark. The subject, the preview line and the sentence about the day it goes out are all built from those, with fixed ISO dates and no clock.
Which addresses does it accept?
A well-formed address that is not already a recipient, up to four. Pasting a list adds each valid address, and leaving the field with text in it adds it. A refused address says why on the reserved line under the chips (not an address, already there, or the limit) and in the status line. Saving with no recipient left is refused and focus goes back to the field.
What does requiring a PO number do?
In the demo it only changes what the panel says: with the switch on, the sentence next to it says how many of the account's clients have no PO number on file and that their invoices would wait, and the drawn email shows the PO line. To make it real, check the client's PO number on the server before an invoice is sent and hold the ones that lack it.
What stays local, and how do I wire it for real?
Everything. Save keeps the settings in this page's state and says so, Discard puts the saved state back, and no email is sent. To make it real, save the settings with the account, render the email on your server with the same subject rules and send it through your mail service, attaching the PDF when the switch is on.
How is it labelled, and what about right-to-left?
Every control has a name, the chips are real buttons that delete with the keyboard, and the status line is a polite live region present from the start. Save and Discard stay focusable while nothing changed, marked aria-disabled, and say so when pressed. The drawn email is decorative with its subject and preview read once in text, and addresses read left to right inside a right-to-left page.