Invoice Delivery Settings Block for React

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.

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.

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.

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.

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.