Implementing Country & State Dropdown in Subscription Manager Themes

1
const countriesPromise = fetch(
2
  'https://static.ordergroove.com/@ordergroove/i18n-data/latest/i18n_country_data.json'
3
).then(res => res.json());
4
5
async function render_countries_options(enabled_countries, localized_countries) {
6
  const html = ((window.og || {}).smi || {}).html;
7
  const countriesByCode = await countriesPromise;
8
  const enabledCountries = Object.entries(countriesByCode).filter(([code]) => enabled_countries.includes(code));
9
  const countriesHtml = enabledCountries
10
    .sort((a, b) => (a[1].name > b[1].name ? 1 : -1))
11
    .reduce((acc, [code, { name }]) => {
12
      const label = localized_countries[code] || name;
13
      acc.push(html`
14
        <option value="${code}">${label}</option>
15
      `);
16
      return acc;
17
    }, []);
18
  return countriesHtml;
19
}
20
21
function toggleStateSelect(stateSelectElement, show) {
22
  const stateSelectLabelElement = stateSelectElement.parentNode.querySelector('label');
23
  stateSelectElement.style.display = show ? 'block' : 'none';
24
  stateSelectElement.required = show;
25
  stateSelectLabelElement.style.display = show ? 'inline' : 'none';
26
}
27
28
async function handle_country_change(ev) {
29
  const countriesByCode = await countriesPromise;
30
  const selectedCountry = countriesByCode[ev.target.value];
31
  const states = selectedCountry ? selectedCountry.regions : null;
32
  const stateSelectElement = ev.target.closest('form').querySelector('[name="state_province_code"]');
33
  const selectLabel = stateSelectElement.querySelector('option').innerText;
34
35
  stateSelectElement.innerHTML = '';
36
  const nullOption = document.createElement('option');
37
  nullOption.value = '';
38
  nullOption.innerText = selectLabel;
39
  stateSelectElement.appendChild(nullOption);
40
41
  if (selectedCountry) {
42
    // Valid country selected
43
    if (states) {
44
      // Country has list of states/regions
45
46
      // Show state select field
47
      toggleStateSelect(stateSelectElement, true);
48
49
      // Append all states to select
50
      states.forEach(({ code, name }) => {
51
        const option = document.createElement('option');
52
        option.value = code;
53
        option.innerText = name;
54
        stateSelectElement.appendChild(option);
55
      });
56
    } else {
57
      // Country has no array of states/regions, e.g. France
58
      // Hide state select field
59
      toggleStateSelect(stateSelectElement, false);
60
    }
61
  } else {
62
    // Country un-selected
63
    // Show state select field
64
    toggleStateSelect(stateSelectElement, true);
65
  }
66
}
67
68
function reset_state_options(element) {
69
  element.innerHTML = '';
70
  const option = document.createElement('option');
71
  option.value = '';
72
  option.innerText = 'Select a State/Province';
73
  element.appendChild(option);
74
  element.parentNode.querySelector('label').innerText = 'State/Province/Region ';
75
}
76
77
function close_address_modal(ev) {
78
  close_closest_modal(ev);
79
  const $stateSelect = ev.target.querySelector('[name="state_province_code"]');
80
  reset_state_options($stateSelect);
81
}