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

import { CartBaseController } from './cart_base_controller'

/*
 * Populates a country field where users can type to filter and select
 * from a predefined list.
 */
export default class extends CartBaseController {
  // All are required!
  static targets = [ 'id', 'iso', 'list', 'name' ]

  async connect () {
    const countries = await this.countries()

    countries.forEach(country => {
      const option = document.createElement('option')

      option.value = country.attributes.name
      option.dataset.id = country.id
      option.dataset.iso = country.attributes.iso
      option.dataset.statesRequired = country.attributes.states_required
      option.dataset.zipcodeRequired = country.attributes.zipcode_required

      this.listTarget.appendChild(option)
    })

    const site = window.site

    // Only allow names on this list
    this.nameTarget.pattern = countries.map(x => x.attributes.name).join('|')
    this.nameTarget.addEventListener('input', event => this.nameTarget.setCustomValidity(''))
    this.nameTarget.addEventListener('invalid', event => this.nameTarget.setCustomValidity(site.i18n.countries.validation))

    // When the input changes we update the actual value and also the
    // state list via an Event
    this.nameTarget.addEventListener('change', event => {
      const value = this.nameTarget.value.trim()

      if (value === '') return

      const options = Array.from(this.nameTarget.list.options)
      const option = options.find(x => x.value == value)

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

      this.idTarget.value = option.dataset.id
      this.isoTarget.value = option.dataset.iso

      this.idTarget.dispatchEvent(new Event('change'))
      this.isoTarget.dispatchEvent(new Event('change'))

      this.dispatchChangedEvent(option.dataset)

      // XXX: Prevent mixing data
      delete this.nameTarget.dataset.selectedState
      delete this.nameTarget.dataset.selectedZipcode
    })

    // The input is disabled at this point
    this.nameTarget.disabled = false
    // Load data if the input is autocompleted
    if (this.nameTarget.value.trim() !== '') this.nameTarget.dispatchEvent(new CustomEvent('change'))
  }

  /*
   * Sends a `cart:country:update` event so other controllers can
   * subscribe to changes.
   */
  dispatchChangedEvent (data = {}) {
    const event = new CustomEvent('cart:country:update', {
      detail: {
        id: this.idTarget.value,
        iso: this.isoTarget.value,
        group: this.data.get('group'),
        selectedState: this.nameTarget.dataset.selectedState,
        selectedZipcode: this.nameTarget.dataset.selectedZipcode,
        data
      }
    })

    window.dispatchEvent(event)
  }

  /*
   * Fetch the country list from storage or from API
   */
  async countries () {
    const countries = JSON.parse(this.storageTemp.getItem('countries'))

    if (countries) return countries

    const response = await this.spree.countries.list()

    // TODO: Show error message
    if (!response.success()) return

    this.storageTemp.setItem('countries', JSON.stringify(response.success().data))

    return response.success().data
  }
}