Tax Details Billing Block for React

Edit COUNTRIES. Each country has its code and name, and two shapes, postal and tax, each with the label the field takes, an example shown in the hint and the error, and the pattern a valid value matches. SAVED holds what the account starts with and ISSUER the "From" block of the preview.

It checks the shape only: a 9-digit GST/HST number followed by RT and four digits, a UK VAT number with or without GB, and so on. It can't tell whether a number is registered. To verify, look the number up on your server, with the European VIES service for EU VAT numbers or a tax provider, before you rely on it to zero-rate an invoice. The field is optional; if it's filled, it has to match.

The legal name, address and city must be filled, the postal code must match the country, and a tax ID, if there is one, must match too. Each problem is written under its field and tied to it for screen readers, and focus goes to the first. Changing the country clears the postal and tax errors, because what's valid has changed. Saving a clean form shows a confirmation; connect it to the call that updates the customer.

The invoice header as it will print: your company as the issuer, the number and the "Bill to" block with the name, the address, the city and region, the postal code, the country, the tax ID with its country's label and the note. Empty fields show quiet placeholders, so you see what's missing. It's plain text on a small page, not an image, so it can be read and selected.

Every field has a visible label, the optional ones say so, and the hint under the tax ID is linked to the field. The country is a native select, so each platform's own picker opens, including the one on a phone. Autofill hints (organization, street-address, address-level2, address-level1, postal-code) let browsers fill in the text fields in one go.

The fields stack in one column and the preview sits under the form, so the save button comes straight after the last field. From the small breakpoint the fields pair into two columns, and from the medium one the preview moves beside the form.