Shipping Options at Checkout

A shopper is one step from buying. The last screen of checkout lets them pick how fast the parcel should arrive, and it has to get three things right: the price of each speed, the total they will pay, and placing the order exactly once.

Build the delivery step of the checkout. The cart's subtotal is fixed at $42.50 (SUBTOTAL_CENTS in src/App.jsx).

Requirements

• On load, fetch GET /api/shipping-options. It answers { "options": [{ "id", "label", "price", "days" }] }, with price in cents.
• While it loads, show the text Loading delivery options.
• Then show a fieldset whose legend is Delivery speed, with one radio button per option. Each radio's label starts with the option's label (Standard, Express, Next day) and also shows:
  • its price: Free when it costs nothing, otherwise dollars with two decimals, like $7.99;
  • its arrival: Arrives in 5 business days, or Arrives in 1 business day for one day.
• The cheapest option is selected when the options arrive, wherever it is in the list.
• A summary shows Subtotal ($42.50), then the shipping cost in an <output> labelled Shipping cost (Free or the price) and the total in an <output> labelled Order total (subtotal plus shipping, always as dollars).
• A Place order button is disabled until the options have loaded. Clicking it sends POST /api/orders with the JSON body { "shippingOptionId": "<id of the selected option>" }.
  • On success the server answers { "orderId": "112-4410" }: show Order 112-4410 placed. The order must be sent only once, even on a double click.
  • On failure show an alert, We couldn't place your order. Please try again., and enable the button again so the shopper can retry.