diff --git a/src/iss-components/address-questions/address-questions.vue b/src/iss-components/address-questions/address-questions.vue index 14900e9b..d012876a 100644 --- a/src/iss-components/address-questions/address-questions.vue +++ b/src/iss-components/address-questions/address-questions.vue @@ -97,7 +97,6 @@ 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)); @@ -134,7 +133,6 @@ export default { data() { return { autocomplete: null, - autocompleteListener: null, alertCopyNoMatchWarning: '', alertCopyVerificationWarning: '', alertHeadlineNoMatchWarning: '', @@ -142,7 +140,6 @@ export default { displayVerificationWarning: false, displayNoMatchWarning: false, enterPressed: false, - isAddressWatchActive: false, // Only deep watch the address model when a match was not found matchingIndirectly: false, matchFound: null, // null = no attempted match, true = match was found, false = match was not found showAllFields: false @@ -171,18 +168,12 @@ export default { watch: { matchFound: { handler(newValue) { + this.displayNoMatchWarning = !newValue; if (!newValue) { - this.displayNoMatchWarning = true; - this.addressModel.city = ''; this.addressModel.state = ''; this.addressModel.zipCode = ''; this.displayVerificationWarning = false; - - this.$nextTick(() => { - // Only deep watch the Address Model after a failed match - this.isAddressWatchActive = true; - }); } } } @@ -202,170 +193,116 @@ export default { methods: { initializeAutocomplete() { // Initialize the Google Places Autocomplete - this.autocomplete = new window.google.maps.places.Autocomplete(this.addressField1, { + this.autocomplete = new window.google.maps.places.Autocomplete(document.getElementById('autocomplete'), { componentRestrictions: { country: ['us'] }, fields: ['address_components'], types: ['geocode'] }); // Set up the Autocomplete place_changed event to call our method to fill in the address - this.autocompleteListener = window.google.maps.event.addListener( - this.autocomplete, - 'place_changed', - this.fillInAddress - ); - - // When the Street Address textbox receives focus, - // append the search results list container to the bottom of the textbox - // and disable browser autofill - this.addressField1.addEventListener('focus', () => { - // 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); - } - - // Unfortunately this is the only place we can set the autocomplete attribute without the - // Google Places object resetting it to "off" which does nothing to prevent browser autofill - this.addressField1.setAttribute('autocomplete', 'do-not-autofill'); - }); + this.autocomplete.addListener('place_changed', this.onPlaceChanged); + // Set up the pressing tab inside address1 field (enter's are caught by Google Autocomplete) this.addressField1.addEventListener('keydown', (e) => { - // If a match has been previously attempted then do nothing - if (this.matchFound !== null) { - return; - } - - const event = new Event('place_changed'); - - // When either of the two enter keys or the tab key are pressed - if (e.code === 'Enter' || e.code === 'NumpadEnter' || e.code === 'Tab') { - if (e.code === 'Tab') { - this.matchingIndirectly = true; - } else { - this.enterPressed = true; - } - - // Grab the selected item - const selectedItem = document.querySelector('.pac-container .pac-item-selected'); - - if (selectedItem !== null) { - // If an item was selected then fill in the address with the selected item - // by triggering the "place_changed" event of the Autocomplete object - console.log('keydown: found selected item...'); - console.log(selectedItem); - this.autocomplete.dispatchEvent(event); - } else { - // Otherwise fill-in the address using first item from the list. - console.log('keydown: did NOT find selected item...'); - console.log('keydown: use fillInAddressUsingFirstItem...'); - this.fillInAddressUsingFirstItem(); - } - } - }); - - this.addressField1.addEventListener('change', () => { - console.log('addr1 changed'); - // If a match has been previously attempted then do nothing - if (this.matchFound || this.enterPressed) { - return; - } - - // Get the address that the user clicked on (if any) - const clickedAddress = document.querySelector('.pac-container .pac-item:hover'); - console.log('clicked addr'); - console.log(clickedAddress); - - // 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. + if (this.addressField1.value?.length > 0 && e.code === 'Tab') { this.fillInAddressUsingFirstItem(); } }); }, - fillInAddress(place) { - console.log('fillInAddress...'); - let fnPlace = place; - - console.log(place); - if (!fnPlace) { - fnPlace = this.autocomplete.getPlace(); - } - + onPlaceChanged() { + const place = this.autocomplete.getPlace(); if (place && place.address_components) { - this.matchFound = true; - - const self = this; - this.$nextTick(() => { - this.showAllFields = true; - // eslint-disable-next-line no-restricted-syntax - 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; - } - default: - } - } - - // After filling in the address fields, disable the address autocomplete - this.unloadAutocomplete(); - // Restore focus to the first address field - this.addressField1.focus(); - - console.log(`displayVerificationWarningDynamic: ${self.matchingIndirectly}`); - self.displayVerificationWarning = self.matchingIndirectly; - }); + this.matchingIndirectly = false; + this.fillInAddress(place); } else { - console.log('displayVerificationWarning: true'); - this.displayVerificationWarning = true; + this.fillInAddressUsingFirstItem(); } }, - fillInAddressUsingFirstItem() { - console.log('fillInWithFirstItem...'); - const item = document.querySelector('.pac-container .pac-item'); - if (item != null) { - this.matchingIndirectly = true; + fillInAddress(googlePlace) { + this.matchFound = true; - const firstResult = item.textContent; - const self = this; - const geocoder = new window.google.maps.Geocoder(); - geocoder.geocode( + const self = this; + this.$nextTick(() => { + this.showAllFields = true; + // eslint-disable-next-line no-restricted-syntax + for (const component of googlePlace.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; + } + default: + } + } + + // After filling in the address fields, disable the address autocomplete + this.unloadAutocomplete(); + // Restore focus to the first address field + this.addressField1.focus(); + + self.displayVerificationWarning = self.matchingIndirectly; + }); + }, + fillInAddressUsingFirstItem() { + const addressValue = this.addressField1.value; + if (addressValue && addressValue.length > 0) { + // Get Autocomplete Service + const acService = new window.google.maps.places.AutocompleteService(); + // Get Places Service, needs psuedo element (or a map) + const placeService = new window.google.maps.places.PlacesService(document.createElement('div')); + // Create Autocomplete Session token, multiple requests one pricing hit + const acSessionToken = new window.google.maps.places.AutocompleteSessionToken(); + + acService.getPlacePredictions( { - address: firstResult + input: addressValue, + type: ['geocode'], + componentRestrictions: { country: ['us'] }, + sessionToken: acSessionToken }, - (results, status) => { - console.log('geoCoder geocode function...'); - if (status === window.google.maps.GeocoderStatus.OK) { - self.fillInAddress(results[0]); - self.displayVerificationWarning = true; + (predictions) => { + if (predictions && predictions.length > 0) { + const firstPrediction = predictions[0]; + if (firstPrediction.place_id) { + placeService.getDetails( + { + placeId: firstPrediction.place_id, + fields: ['address_components'], + sessionToken: acSessionToken + }, + (details) => { + this.matchingIndirectly = true; + this.fillInAddress(details); + } + ); + } else { + // No place_id found for the prediction + this.matchFound = false; + } + } else { + // No prediction found for the input + this.matchFound = false; } } ); - } else { - // No addresses found for the input - this.matchFound = false; } }, setupAddressLookup() { @@ -373,7 +310,7 @@ export default { this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places&callback=Function.prototype`) .then(() => { - // Script is loaded, initialize the autocomplete textbox + // Script is loaded, initialize the autocomplete textbox this.initializeAutocomplete(); }) .catch(() => { @@ -385,15 +322,10 @@ export default { this.displayVerificationWarning = false; }, unloadAutocomplete() { - if (this.autocompleteListener && this.autocomplete) { - window.google.maps.event.removeListener(this.autocompleteListener); - this.autocompleteListener = null; - + if (this.autocomplete) { window.google.maps.event.clearInstanceListeners(this.autocomplete); this.autocomplete = null; - this.addressField1.onchange = null; - const pacContainer = document.querySelector('.pac-container'); if (pacContainer) { pacContainer.remove(); @@ -403,14 +335,3 @@ export default { } }; - - diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue index f9ea85b2..71155a3c 100644 --- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue +++ b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue @@ -50,7 +50,7 @@ v-model="internalModel.addressQuestions" captureApartmentNumberOrBusinessName="true" preserveCityAndStateOnReset="true" - includeStreetAddress2="true" /> + :includeStreetAddress2="true" />