Shipping Zones Settings Block for React

Edit SAVED: each zone has its countries (the Rest of world zone has none and means every other country), its bands (an end in kilograms and a price in whole pounds, as text), a free-shipping switch and a threshold. COUNTRIES is the list a chip can name. A band's start is never stored: it is the end of the band before it (0 for the first), so the bands cannot leave a gap.

A country that is not in the list or is already in another zone, a band that ends at or before its start, a band that costs less than the one before it, and a zone with no countries (Rest of world excepted). The pane shows the first band problem live, and Save names the zone and opens it with focus on its heading. Leaving a number field puts a whole number inside its range back in it.

For the chosen zone: if free shipping is on and the subtotal is at or over the threshold, it is Free; otherwise the band whose range holds the weight (over its start, up to and including its end) gives the price; a weight no band covers says the zone cannot ship it. The numbers are whole kilograms and pounds, and the basket is not saved.

Everything: no carrier is called and nothing is charged. Save keeps the zones in this page and says so. To make it real, store the zones with the shop, resolve a shipping address to its zone on the server with the same rules, and price the basket there rather than in the browser.

The window keeps its height and shows one pane at a time: the rail first, and choosing a zone opens its pane with focus on the zone's name, under a Back button that returns to the rail with focus on the row you left. The bands become cards, each field is named for its band, the chosen zone is marked as current, and the status line is a polite live region present from the start.