343 lines
14 KiB
Vue
343 lines
14 KiB
Vue
<template>
|
|
<div role="application">
|
|
<alert
|
|
ref="alertVerificationWarning"
|
|
v-if="displayVerificationWarning"
|
|
class="mb-4"
|
|
cmsWidgetName="AlertVerificationWarningWidget"
|
|
alertClass="alert-warning"
|
|
v-bind:isDismissible="false" />
|
|
<alert
|
|
ref="alertNoMatchWarning"
|
|
v-if="displayNoMatchWarning"
|
|
class="mb-4"
|
|
cmsWidgetName="AlertNoMatchWarningWidget"
|
|
alertClass="alert-warning"
|
|
v-bind:isDismissible="false" />
|
|
|
|
<div class="row mt-2 mb-4">
|
|
<div class="col">
|
|
<textboxQuestion
|
|
id="streetAddressField"
|
|
cmsWidgetName="StreetAddressQuestionWidget"
|
|
v-model="addressModel.streetAddress"
|
|
ref="autocomplete"
|
|
inputId="autocomplete"
|
|
placeholderText="Search"
|
|
aria-haspopup=""
|
|
hasIcon
|
|
disableAutoFill
|
|
validationRules="street-address-required"
|
|
@keydown.enter.prevent />
|
|
</div>
|
|
</div>
|
|
<transition name="fade" mode="out-in">
|
|
<div class="row mb-4" aria-live="polite">
|
|
<div class="col">
|
|
<textboxQuestion
|
|
cmsWidgetName="CityQuestionWidget"
|
|
v-model="addressModel.city"
|
|
ref="city"
|
|
inputId="cbf28188fdf2436688fd735915f7ee56"
|
|
disableAutoFill
|
|
validationRules="city-required" />
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
<transition name="fade" mode="out-in">
|
|
<div class="row mb-4" aria-live="polite">
|
|
<div class="col">
|
|
<dropdownQuestion
|
|
cmsWidgetName="StateQuestionWidget"
|
|
v-model="addressModel.state"
|
|
ref="state"
|
|
inputId="8fdf9dc2e13e430eb57529499dceb3eb"
|
|
:options="stateOptions"
|
|
disableAutoFill
|
|
validationRules="state-required" />
|
|
</div>
|
|
<div class="col">
|
|
<textboxQuestion
|
|
cmsWidgetName="ZipQuestionWidget"
|
|
v-model="addressModel.zipCode"
|
|
ref="zipCode"
|
|
inputId="01a9a1c2de0b4c9da8e023c9ae3be498"
|
|
mask="#####"
|
|
disableAutoFill
|
|
validationRules="zip-code-required|zip-code-format" />
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
|
|
import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
|
|
import alert from "@/ux-components/alert/alert";
|
|
import { applicationConfig } from "@/constants/application-config.js";
|
|
import { defineRule } from "vee-validate";
|
|
import { required, regex } from "@/helpers/validation-rules";
|
|
import { errorMessages } from "@/constants/error-messages";
|
|
import { states } from "@/constants/states";
|
|
import { endpoints } from '@/constants/endpoints';
|
|
|
|
// DEFINE VALIDATION RULES
|
|
defineRule("street-address-required", required(errorMessages.STREET_ADDRESS_REQUIRED));
|
|
defineRule("city-required", required(errorMessages.CITY_REQUIRED));
|
|
defineRule("state-required", required(errorMessages.STATE_REQUIRED));
|
|
defineRule("zip-code-required", required(errorMessages.ZIP_REQUIRED));
|
|
defineRule("zip-code-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_FORMAT));
|
|
|
|
export default {
|
|
name: "address-questions",
|
|
emits: ["update:modelValue"], // The component emits an event
|
|
props: {
|
|
modelValue: {
|
|
type: Object,
|
|
default: () => ({
|
|
streetAddress: "",
|
|
city: "",
|
|
state: "",
|
|
zipCode: "",
|
|
}),
|
|
},
|
|
validationRules: String,
|
|
},
|
|
data() {
|
|
return {
|
|
displayVerificationWarning: false,
|
|
displayNoMatchWarning: false,
|
|
alertHeadlineVerificationWarning: "",
|
|
alertCopyVerificationWarning: "",
|
|
alertHeadlineNoMatchWarning: "",
|
|
alertCopyNoMatchWarning: "",
|
|
matchingIndirectly: false,
|
|
matchFound: null, // null = no attempted match, true = match was found, false = match was not found
|
|
enterPressed: false,
|
|
isAddressWatchActive: false, // Only deep watch the address model when a match was not found
|
|
};
|
|
},
|
|
computed: {
|
|
stateOptions: {
|
|
get: function () {
|
|
return states;
|
|
},
|
|
},
|
|
addressModel: {
|
|
get: function () {
|
|
return this.modelValue;
|
|
},
|
|
set: function (newValue) {
|
|
this.$emit("update:modelValue", newValue);
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
setupAddressLookup() {
|
|
|
|
const addressField1 = document.getElementById("autocomplete");
|
|
const self = this;
|
|
|
|
const url = endpoints.GooglePlaces.url.replace("{apiKey}", applicationConfig.GOOGLE_PLACES_API_KEY)
|
|
|
|
this.$loadScript(
|
|
url
|
|
)
|
|
.then(() => {
|
|
// Script is loaded, initialize the autocomplete textbox
|
|
const autocomplete = new window.google.maps.places.Autocomplete(addressField1, {
|
|
componentRestrictions: { country: ["us"] },
|
|
fields: ["address_components"],
|
|
types: ["geocode"],
|
|
});
|
|
|
|
// Standard place_changed event handling
|
|
const autocompleteListener = window.google.maps.event.addListener(
|
|
autocomplete,
|
|
"place_changed",
|
|
fillInAddress
|
|
);
|
|
|
|
addressField1.addEventListener("focus", () => {
|
|
// Wrapping the addressField1 element in the Google Address Autocomplete object
|
|
// will cause "autocomplete='off'" which Chrome completely ignores. This event
|
|
// handler will set the value to something arbitrary so autofill doesn't work.
|
|
// https://stackoverflow.com/a/30976223
|
|
addressField1.setAttribute("autocomplete", "do-not-autofill");
|
|
|
|
// Make place results box stick to the input on scroll
|
|
const streetAddressField = document.getElementById("streetAddressField");
|
|
const autocompleteResultsContainer =
|
|
document.getElementsByClassName("pac-container")[0];
|
|
if (autocompleteResultsContainer) {
|
|
streetAddressField.appendChild(autocompleteResultsContainer);
|
|
}
|
|
});
|
|
|
|
addressField1.addEventListener("keydown", (e) => {
|
|
if (e.code === "Enter" || e.code === "NumpadEnter" || e.code === "Tab") {
|
|
if (e.code === "Tab") {
|
|
self.matchingIndirectly = true;
|
|
} else {
|
|
self.enterPressed = true;
|
|
}
|
|
|
|
addressField1.blur();
|
|
} else {
|
|
return;
|
|
}
|
|
});
|
|
|
|
addressField1.addEventListener("change", () => {
|
|
// NOTE: The "place_changed" event of the autocomplete fires after this and will use either the address the user had chosen
|
|
// using either the down / up arrows or the address the user was hovering over when they pressed "Enter."
|
|
|
|
// If a match has been previously found then do nothing
|
|
// OR
|
|
// If the user pressed "Enter" then do nothing
|
|
if (self.matchFound || self.enterPressed) {
|
|
return;
|
|
}
|
|
|
|
// Get the address that the user clicked on (if any)
|
|
const clickedAddress = document.querySelector(
|
|
".pac-container .pac-item:hover"
|
|
);
|
|
|
|
// If the Street Address field changed without clicking (i.e. by pressing Tab, or clicking outside the field)
|
|
if (clickedAddress === null) {
|
|
// Fill-in the address using first item in the list.
|
|
const item = document.querySelector(".pac-container .pac-item");
|
|
if (item != null) {
|
|
self.matchingIndirectly = true;
|
|
|
|
const firstResult = item.textContent;
|
|
const geocoder = new window.google.maps.Geocoder();
|
|
geocoder.geocode(
|
|
{
|
|
address: firstResult,
|
|
},
|
|
function (results, status) {
|
|
if (status === window.google.maps.GeocoderStatus.OK) {
|
|
fillInAddress(results[0]);
|
|
}
|
|
}
|
|
);
|
|
} else {
|
|
// No addresses found for the input
|
|
self.matchFound = false;
|
|
}
|
|
}
|
|
});
|
|
|
|
function fillInAddress(place) {
|
|
if (!place) {
|
|
place = autocomplete.getPlace();
|
|
}
|
|
|
|
if (place && place.address_components) {
|
|
self.matchFound = true;
|
|
self.addressModel.streetAddress = "";
|
|
self.$nextTick(function () {
|
|
|
|
for (const component of place.address_components) {
|
|
const componentType = component.types[0];
|
|
|
|
switch (componentType) {
|
|
case "street_number": {
|
|
self.addressModel.streetAddress = component.long_name;
|
|
break;
|
|
}
|
|
case "route": {
|
|
self.addressModel.streetAddress +=
|
|
" " + component.short_name;
|
|
break;
|
|
}
|
|
case "locality": {
|
|
self.addressModel.city = component.long_name;
|
|
break;
|
|
}
|
|
case "administrative_area_level_1": {
|
|
self.addressModel.state = component.short_name;
|
|
break;
|
|
}
|
|
case "postal_code": {
|
|
self.addressModel.zipCode = component.long_name;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
self.displayVerificationWarning = self.matchingIndirectly;
|
|
|
|
// after showing the address fields, disable the address autocomplete
|
|
window.google.maps.event.removeListener(autocompleteListener);
|
|
window.google.maps.event.clearInstanceListeners(autocomplete);
|
|
addressField1.onchange = null;
|
|
const pacContainer = document.querySelector(".pac-container");
|
|
if (pacContainer) {
|
|
pacContainer.remove();
|
|
}
|
|
});
|
|
} else {
|
|
self.displayVerificationWarning = true;
|
|
}
|
|
}
|
|
})
|
|
.catch(() => {
|
|
// Failed to fetch script
|
|
console.log("Unable to load Google Places API script");
|
|
});
|
|
},
|
|
},
|
|
mounted() {
|
|
this.setupAddressLookup();
|
|
},
|
|
watch: {
|
|
matchFound: {
|
|
handler(newValue) {
|
|
if (!newValue) {
|
|
this.displayNoMatchWarning = true;
|
|
|
|
this.addressModel.city = "";
|
|
this.addressModel.state = "";
|
|
this.addressModel.zipCode = "";
|
|
this.displayVerificationWarning = false;
|
|
|
|
this.$nextTick(function () {
|
|
// Only deep watch the Address Model after a failed match
|
|
this.isAddressWatchActive = true;
|
|
});
|
|
}
|
|
},
|
|
},
|
|
addressModel: {
|
|
handler() {
|
|
if (this.isAddressWatchActive) {
|
|
this.displayNoMatchWarning = false;
|
|
this.isAddressWatchActive = false;
|
|
}
|
|
},
|
|
deep: true,
|
|
},
|
|
},
|
|
components: {
|
|
textboxQuestion,
|
|
dropdownQuestion,
|
|
alert,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
#streetAddressField {
|
|
position: relative;
|
|
|
|
.pac-container {
|
|
top: 76px !important; // Height of #streetAddressField
|
|
left: 0 !important;
|
|
}
|
|
}
|
|
</style>
|