Differential D11221 Diff 37475 subscriptions/static/subscriptions/scripts/country_regions_select.js

Changeset View

Standalone View

subscriptions/static/subscriptions/scripts/country_regions_select.js

This file was added.

				document.addEventListener('DOMContentLoaded', () => {
				const regionsPerCountryEl = document.getElementById('country-regions');
				if (!regionsPerCountryEl) {
				// Nothing to do: no country selector on the page (e.g. not logged in yet)
				return;
				}
				const regionsPerCountry = JSON.parse(regionsPerCountryEl.textContent);
				const countrySelect = document.getElementById('id_country');
				const regionSelect = document.getElementById('id_region');
				const regionSelectContainer = regionSelect.parentElement;
				const regionLabel = document.querySelector('label[for="id_region"] span');

				function templateRegionSelect(regions) {
				return `
				<option value="" selected="">Select ${regions.type}</option>
				${regions.choices.map((region, index) =>
				`<option value="${region[0]}">${region[1]}</option>`
				).join("")}
				`;
				}

				function updateRegionSelect() {
				const selectedCountryCode = countrySelect.value;

				if (regionsPerCountry[selectedCountryCode]) {
				const regions = regionsPerCountry[selectedCountryCode];
				if (regions.used_in_address) {
				regionSelect.required = true;
				// Update region choices accordindly
				regionSelect.innerHTML = templateRegionSelect(regions);
				regionLabel.innerText = regions.type;
				// Show the updated select
				regionSelectContainer.classList.remove('d-none');
				return;
				}
				}
				// Reset and hide the region select
				regionSelect.innerHTML = '';
				regionLabel.innerText = 'Region';
				regionSelect.required = false;
				regionSelectContainer.classList.add('d-none');
				}

				if (!!countrySelect && !!regionSelect && !!regionLabel) {
				// Update region select with choices appropriated for the selected country
				countrySelect.addEventListener('change', updateRegionSelect);
				}
				});