Delivery Estimator Footer Block for React

estimateOf trims the field and tests it against POSTCODE. A match always returns the same sentence, “2 to 4 working days.”, whatever the code was. An empty field returns “Enter a postcode.” Anything that fails the pattern returns “Check the postcode and try again.” There is no depot lookup. Replace estimateOf with a call to your shipping API and keep the three outcomes, so the status line still has one of those jobs.

The line under the field is a role="status" paragraph, present while the form is idle with “For delivery in the home islands.” Submitting replaces that text, which is the change a screen reader announces. The input points at the line with aria-describedby, and aria-invalid is set only for the two errors. Typing does not re-check; Check does.

The row is four generic drawings, Card, Wallet, Bank transfer and Pay later, with the name in text. The glyph is aria-hidden. Swap the SVG in Mark if you have rights to a scheme’s mark, and keep the visible name. They are not links.

Edit GROUPS. Each group is a title and four links. Four groups fill the grid: two columns below md, four from md. The policy links live in the Legal group. The foot of the page is the copyright and the payment marks, not a second copy of those policies.

The brand row, the estimate band (label, field, Check at full width, then the status line), the four groups two by two, and the legal row stack. The payment marks wrap. Nothing scrolls sideways at 320 pixels.

It is the current year, read when the footer renders. The postcode field is the only state, and it does not affect the year.