Shipping and tax are recalculated on checkout address change

A checkout form that recalculates shipping but not tax when the customer changes their state leaves the tax line frozen at the California rate even after the customer moves to New York. This is a CWE-682 error in the address change flow — the system accepted new data but used it incompletely. ISO 25010:2011 time-behaviour applies as well: a debounced recalculation that updates both shipping and tax within 500ms of an address change is a correctness requirement, not a UX nicety. When the tax line doesn't update until form submission, the customer pays a different amount than shown — which produces payment disputes. Requiring an "Update" button click instead of automatic recalculation is equally broken: customers who don't click it proceed to payment with stale values.

Add a debounced handler in components/CheckoutForm.tsx that triggers all three calculations — shipping, tax, and total — on any address field change:

// components/CheckoutForm.tsx
export function CheckoutForm() {
  const [address, setAddress] = useState({})
  const [summary, setSummary] = useState({ shipping: 0, tax: 0, total: 0 })
  const recalcRef = useRef<ReturnType<typeof setTimeout>>()

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

    clearTimeout(recalcRef.current)
    recalcRef.current = setTimeout(async () => {
      const [shipping, tax] = await Promise.all([
        calculateShippingCost(items, newAddress, selectedMethod),
        getTaxAmount(items, newAddress, customer.is_tax_exempt),
      ])
      setSummary({ shipping, tax, total: subtotal - discount + shipping + tax })
    }, 500)
  }

  return (
    <form>
      <input placeholder="State" onChange={(e) => handleAddressChange('state', e.target.value)} />
      <input placeholder="Zip" onChange={(e) => handleAddressChange('zip', e.target.value)} />
      {/* checkout summary driven by `summary` state */}
    </form>
  )
}

Never require a manual "Update" button click for shipping/tax recalculation — the update must be automatic and reflected in the summary without a page reload.

• ID: ecommerce-shipping-tax.checkout-integration.recalc-on-all-changes

• Severity: high

• What to look for: List all address change handlers in the checkout form. For each handler, enumerate which calculations are triggered: (1) shipping recalculation, (2) tax recalculation, (3) total update. Count: X of 3 calculations triggered on address change. Verify both shipping AND tax update without a full page reload.

• Pass criteria: At least 1 address change handler triggers all 3 calculations (shipping, tax, and total) when the customer changes their state, zip, or country in the checkout form, and the checkout summary UI updates within the same page session (no full reload required).

• Fail criteria: Address change triggers fewer than 3 calculations (e.g., only shipping but not tax), or requires a full page reload, or no address change handler exists in the checkout form.

• Skip (N/A) when: Address is not changeable in checkout (pickup-only, or address is pre-filled from user profile with no edit option in the checkout flow).

• Detail on fail: "Address change triggers 1 of 3 calculations (shipping only). Tax and total do not update when state changes from CA to NY." or "Both shipping and tax recalculate but require clicking 'Update' button — not automatic."

• Remediation: Add debounced recalculation on address change in components/CheckoutForm.tsx:

  // components/CheckoutForm.tsx
  export function CheckoutForm() {
    const [address, setAddress] = useState({})
    const [summary, setSummary] = useState({})
    const recalcTimeout = useRef<NodeJS.Timeout>()
  
    const handleAddressChange = (field: string, value: string) => {
      const newAddress = { ...address, [field]: value }
      setAddress(newAddress)
  
      clearTimeout(recalcTimeout.current)
      recalcTimeout.current = setTimeout(async () => {
        const shipping = await calculateShippingCost(items, newAddress, method)
        const tax = await calculateTax(items, newAddress, customer)
        setSummary({ shipping, tax, total: subtotal + shipping + tax })
      }, 500)
    }
  
    return (
      <form>
        <input placeholder="State" onChange={(e) => handleAddressChange('state', e.target.value)} />
        <div className="checkout-summary">Shipping: ${(summary.shipping / 100).toFixed(2)}</div>
      </form>
    )
  }