79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
import { validateInput } from '@repo/validate';
|
|
|
|
export class AddressComplete {
|
|
private primary?: HTMLInputElement;
|
|
address2?: HTMLInputElement;
|
|
city?: HTMLInputElement;
|
|
province?: HTMLInputElement;
|
|
postalCode?: HTMLInputElement;
|
|
country?: HTMLInputElement;
|
|
|
|
bind(primary: HTMLInputElement) {
|
|
this.primary = primary;
|
|
addListener(this.primary, this);
|
|
}
|
|
}
|
|
|
|
const addListener = (node: HTMLInputElement, completer: AddressComplete) => {
|
|
const googleOptions: google.maps.places.AutocompleteOptions = {
|
|
// componentRestrictions: { country: ['ca'] },
|
|
fields: ['address_components'],
|
|
strictBounds: false
|
|
};
|
|
|
|
const autocomplete = new google.maps.places.Autocomplete(node, googleOptions);
|
|
|
|
autocomplete.addListener('place_changed', () => {
|
|
let address1 = '';
|
|
let postalCode = '';
|
|
|
|
const place = autocomplete.getPlace();
|
|
// Sort each component
|
|
for (const component of place.address_components as google.maps.GeocoderAddressComponent[]) {
|
|
const componentType = component.types[0];
|
|
|
|
switch (componentType) {
|
|
case 'street_number': {
|
|
address1 = `${component.long_name} ${address1}`;
|
|
break;
|
|
}
|
|
case 'route': {
|
|
address1 += component.short_name;
|
|
break;
|
|
}
|
|
case 'postal_code': {
|
|
postalCode = `${component.long_name}${postalCode}`;
|
|
break;
|
|
}
|
|
case 'postal_code_suffix': {
|
|
postalCode = `${postalCode}-${component.long_name}`;
|
|
break;
|
|
}
|
|
case 'locality': {
|
|
if (completer.city) completer.city.value = component.long_name;
|
|
break;
|
|
}
|
|
case 'administrative_area_level_1': {
|
|
// completer.province?.setValStr(component.short_name);
|
|
if (completer.province) completer.province.value = component.short_name;
|
|
break;
|
|
}
|
|
case 'country': {
|
|
// completer.country?.setValStr(component.short_name);
|
|
if (completer.country) completer.country.value = component.short_name;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
node.value = address1;
|
|
if (completer.postalCode) completer.postalCode.value = postalCode;
|
|
completer.address2?.focus();
|
|
|
|
// Trigger rechecks on each field
|
|
validateInput(node);
|
|
if (completer.city !== undefined) validateInput(completer.city);
|
|
if (completer.postalCode !== undefined) validateInput(completer.postalCode);
|
|
});
|
|
};
|