Invoice Email Delivery Billing Block for Vue

Edit START: each recipient has an id, a role, an address, a state of delivered, bounced or queued, the date of the last delivery in on and the bounce reason your provider returned. Map your provider's delivery events to those states. Replace resend with a call to your server that re-sends the invoice and returns each recipient's new status.

Everything. Resending changes the rows and says so ("Resent in this demo."), and no email leaves the page: a recipient whose address was fixed or added becomes delivered, and one whose mailbox is still full bounces again and says "Bounced again", so fixing the address is the way out. No address is ever shown as a mail link; show it as text, or add a copy button, so a stray click doesn't open a mail window.

No. The list always holds four rows. A filter that hides some leaves the space, with a short line ("No bounced recipients.") when nothing matches, and the first free row says how many more recipients can be added. Adding one past the first three fills a free row instead of growing the panel.

Pressing Fix address moves focus to the field in the same row; Save and Cancel are next in the tab order, and either returns focus to that row's Fix address button. Save checks the shape of the address and refuses one that another recipient already has, answering in the status line. The Enter key in the field does not submit anything else.

Status is words first (delivered, bounced, ready to send) with a coloured dot only beside them. The row buttons say which recipient they act on for a screen reader, the fields have names, and one polite status line announces every result. The resend button stays in the page and answers when there's nothing to resend.

Each row is three lines: the role, the address and the status, with Fix address beside the role. The Add recipient field and button share a row, and the foot with the resend button is pinned to the bottom of the screen.