sutty-base-jekyll-theme/_packs/controllers/state_controller.js

import { CartBaseController } from './cart_base_controller'

/*
 * Populates a state field where users can type to filter and select
 * from a predefined list.  It waits for an `cart:country:update` event
 * to become populated.
 */
export default class extends CartBaseController {
  // All are required!
  static targets = [ 'id', 'list', 'name' ]

  connect () {
    window.addEventListener('cart:country:update', async event => {
      if (this.data.get('group') !== event.detail.group) return

      this.idTarget.value = ''
      this.nameTarget.value = ''
      this.listTarget.innerHTML = ''

      const statesRequired = event.detail.data.statesRequired == 'true'

      this.nameTarget.disabled = !statesRequired
      this.nameTarget.required = statesRequired

      if (!statesRequired) return

      const states = await this.states(event.detail.iso)
      const site = window.site

      states.forEach(state => {
        let option = document.createElement('option')
        option.value = state.attributes.name
        option.dataset.id = state.id

        this.listTarget.appendChild(option)
      })

      this.nameTarget.pattern = states.map(x => x.attributes.name).join('|')
      this.nameTarget.addEventListener('input', event => this.nameTarget.setCustomValidity(''))
      this.nameTarget.addEventListener('invalid', event => this.nameTarget.setCustomValidity(site.i18n.states.validation))

      if (event.detail.selectedState) {
        this.nameTarget.value = event.detail.selectedState
        this.nameTarget.dispatchEvent(new Event('change'))
      }
    })

    // When the input changes we update the actual value and also the
    // state list via an Event
    this.nameTarget.addEventListener('change', event => {
      const options = Array.from(this.listTarget.options)
      const option = options.find(x => x.value == this.nameTarget.value)

      // TODO: If no option is found, mark the field as invalid
      if (!option) return

      this.idTarget.value = option.dataset.id
      this.idTarget.dispatchEvent(new Event('change'))
    })
  }

  /*
   * Fetch the state list from storage or from API using a country ISO
   * code
   */
  async states (countryIso) {
    const stateId = `states:${countryIso}`
    let states = JSON.parse(this.storageTemp.getItem(stateId))

    if (states) return states

    // There's no state query, but we can fetch the country and include
    // its states.
    const response = await this.spree.countries.show(countryIso, { include: 'states' })

    // TODO: Show error message
    if (response.isFail()) {
      this.handleFailure(response)
      return {}
    }

    states = response.success().included

    // Order alphabetically by name
    states.sort((x, y) => x.attributes.name > y.attributes.name)

    this.storageTemp.setItem(stateId, JSON.stringify(states))

    return states
  }
}