Shipping costs are recalculated when customer changes address in checkout

When a customer changes their shipping state from CA to NY in the checkout form and the displayed shipping cost stays frozen at the California rate, they proceed to payment believing one price and are charged another — a CWE-682 calculation error surfaced at the worst possible moment. ISO 25010:2011 functional correctness and user-experience taxons both apply: the checkout summary is a live contract between the store and the customer. Stale rates cause payment disputes and undermine trust in the exact moment checkout confidence is most fragile. Address-change handlers that call no recalculation function are dead code with real financial consequences.

Wire onChange handlers on state, zip, and country fields in components/ShippingAddressForm.tsx to invoke a shipping recalculation and update the summary without a reload:

// components/ShippingAddressForm.tsx
export function ShippingAddressForm({ onAddressChange }) {
  const [address, setAddress] = useState({})

  const handleAddressChange = async (field: string, value: string) => {
    const newAddress = { ...address, [field]: value }
    setAddress(newAddress)

    if (field === 'state' || field === 'zip' || field === 'country') {
      const newShipping = await calculateShippingCost(items, newAddress, selectedMethod)
      onAddressChange(newAddress, newShipping)
    }
  }

  return (
    <form>
      <input placeholder="State" onChange={(e) => handleAddressChange('state', e.target.value)} />
      <input placeholder="Zip" onChange={(e) => handleAddressChange('zip', e.target.value)} />
      <input placeholder="Country" onChange={(e) => handleAddressChange('country', e.target.value)} />
    </form>
  )
}

Debounce the async call by 300–500ms to avoid firing on every keystroke during zip entry.