Form fields accept international addresses

Hardcoding "State" and a 5-digit ZIP regex locks out every customer outside the United States. A Canadian shopper entering K1A 0B1 hits a validation error on a valid postal code; a British shopper doesn't recognize "State" as the field for their county. Both abandon. If the country selector offers fifteen countries but the form never adapts to them, you're advertising international shipping and then blocking it at the form layer — a worse failure than not offering the countries at all.

Drive address labels and validation from a country-keyed table in src/lib/addressFormats.ts, and re-render the form in src/components/AddressForm.tsx when the country changes. Swap "State" to "Province" for CA, "County" for GB, and swap the postal regex accordingly.

const ADDRESS_FORMATS = {
  US: { labels: { region: 'State', postal: 'ZIP' }, postalPattern: /^\d{5}(-\d{4})?$/ },
  CA: { labels: { region: 'Province', postal: 'Postal Code' }, postalPattern: /^[A-Z]\d[A-Z]\s?\d[A-Z]\d$/ },
}

• ID: ecommerce-cart-ux.address-forms.international-support

• Severity: low

• What to look for: Count the number of countries available in the country selector (if any). Check whether the form adapts when a non-US country is selected: (a) does the region label change (e.g., "State" to "Province"), (b) does the postal code validation pattern change, (c) does the postal code label change (e.g., "ZIP" to "Postal Code"). Count how many of these 3 adaptations occur. Quote the postal code validation regex if one exists — check if it rejects valid non-US formats.

• Pass criteria: Form includes a country field with at least 2 countries. At least 2 of 3 adaptations occur when switching countries: label change, validation pattern change, and postal label change. International postal codes (e.g., Canadian "K1A 0B1") are not rejected by validation. Report: "Country selector offers X countries. Y of 3 form adaptations occur on country change."

• Fail criteria: No country field exists, or form assumes US-only format regardless of country selection (hardcoded "State" label, 5-digit ZIP-only validation).

• Skip (N/A) when: Site explicitly ships only to one country (stated in shipping policy or country selector has exactly 1 option), or no address form exists.

• Detail on fail: Example: "Country field in src/components/AddressForm.tsx offers 15 countries but form is static — 'State' label and 5-digit ZIP regex for all countries. 0 of 3 adaptations occur. Canadian postal code 'K1A 0B1' is rejected."

• Cross-reference: For address autocomplete handling across countries, see the autocomplete check above. For currency display across regions, the Ecommerce Pricing Display audit covers multi-currency formatting.

• Remediation: Add country-responsive address formatting at src/components/AddressForm.tsx:

  // src/lib/addressFormats.ts
  const ADDRESS_FORMATS = {
    US: { labels: { region: 'State', postal: 'ZIP' }, postalPattern: /^\d{5}(-\d{4})?$/ },
    CA: { labels: { region: 'Province', postal: 'Postal Code' }, postalPattern: /^[A-Z]\d[A-Z]\s?\d[A-Z]\d$/ },
    GB: { labels: { region: 'County', postal: 'Postcode' }, postalPattern: /.+/ },
  }
  
  // src/components/AddressForm.tsx
  function InternationalAddressForm() {
    const [country, setCountry] = useState('US')
    const format = ADDRESS_FORMATS[country] || ADDRESS_FORMATS.US
  
    return (
      <>
        <select value={country} onChange={(e) => setCountry(e.target.value)}>
          <option value="US">United States</option>
          <option value="CA">Canada</option>
          <option value="GB">United Kingdom</option>
        </select>
        <label>{format.labels.region}<input /></label>
        <label>{format.labels.postal}<input /></label>
      </>
    )
  }