Shipping Locations

import dash from "@/lib/dash"

const { countries } = await dash.checkout.getShippingLocations()

// countries = [
//   {
//     id: "loc_us",
//     name: "United States",
//     code: "US",
//     states: [
//       { id: "st_tx", name: "Texas", code: "TX" },
//       { id: "st_ca", name: "California", code: "CA" },
//       // ...
//     ]
//   }
// ]

"use client"
import { useState, useEffect } from "react"
import dash from "@/lib/dash"

export function AddressForm() {
  const [locations, setLocations] = useState([])
  const [selectedCountry, setSelectedCountry] = useState("")
  const [states, setStates] = useState([])

  useEffect(() => {
    dash.checkout.getShippingLocations().then(({ countries }) => {
      setLocations(countries)
      if (countries.length === 1) {
        setSelectedCountry(countries[0].code)
        setStates(countries[0].states)
      }
    })
  }, [])

  function handleCountryChange(code) {
    setSelectedCountry(code)
    const country = locations.find(c => c.code === code)
    setStates(country?.states || [])
  }

  return (
    <div>
      <select value={selectedCountry} onChange={e => handleCountryChange(e.target.value)}>
        <option value="">Select country</option>
        {locations.map(c => <option key={c.code} value={c.code}>{c.name}</option>)}
      </select>

      <select>
        <option value="">Select state</option>
        {states.map(s => <option key={s.code} value={s.code}>{s.name}</option>)}
      </select>
    </div>
  )
}

GET /storefront/shipping-locations
X-API-Key: pk_live_your_key