diff --git a/public/index.html b/public/index.html index d3c8d677..5e2434b9 100644 --- a/public/index.html +++ b/public/index.html @@ -1,32 +1,51 @@ - - - - - - - - - - - - <%= htmlWebpackPlugin.options.title %> - - - - + + + + + + + + + + + + - -
- - - + + <%= htmlWebpackPlugin.options.title %> + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/src/iss-components/address-questions/address-questions.vue b/src/iss-components/address-questions/address-questions.vue index 1dd125ab..4b617085 100644 --- a/src/iss-components/address-questions/address-questions.vue +++ b/src/iss-components/address-questions/address-questions.vue @@ -190,32 +190,67 @@ export default { && (this.addressModel.zipCode ?? '') !== ''; if (!this.showAllFields) { + window.handleGoogleMapsAuthFailure = () => { + this.unloadAutocomplete(); // Clean up any initialized autocomplete functionality + if (this.addressField1) { + const el = this.addressField1; + if (el) { + el.disabled = false; // Re-enable the address field so the user can manually enter their address + el.style.removeProperty('background-image'); // Remove the Google Maps icon from the address field + el.placeholder = ''; // Optionally, update the placeholder to indicate manual entry + } + } + this.showAllFields = true; // Show the address fields so the user can manually enter their address if Google Maps fails to load + }; + this.setupAddressLookup(); } }, + unmounted() { + delete window.handleGoogleMapsAuthFailure; + }, methods: { initializeAutocomplete() { // Initialize the Google Places Autocomplete - this.autocomplete = new window.google.maps.places.Autocomplete(document.getElementById('autocomplete'), { - componentRestrictions: { country: ['us'] }, - fields: ['address_components'], - types: ['address'] - }); - - // Set up the Autocomplete place_changed event to call our method to fill in the address - 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) { + try { + if (!window.google || !window.google.maps || !window.google.maps.places) { + this.showAllFields = true; return; - } + } else { + const checkService = new window.google.maps.places.PlacesService(document.createElement('div')); + checkService.getDetails({ placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4', fields: ['name'] }, (place, status) => { + if (status === window.google.maps.places.PlacesServiceStatus.OK) { + this.autocomplete = new window.google.maps.places.Autocomplete(document.getElementById('autocomplete'), { + componentRestrictions: { country: ['us'] }, + fields: ['address_components'], + types: ['address'] + }); - if (this.addressField1.value?.length > 0 && e.code === 'Tab') { - this.fillInAddressUsingFirstItem(); + // Set up the Autocomplete place_changed event to call our method to fill in the address + 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', this.onAddressOneFieldKeydown); + } else { + this.showAllFields = true; + return; + } + }); } - }); + } catch { + this.showAllFields = true; + return; + } + }, + onAddressOneFieldKeydown(e) { + // If a match has been previously attempted then do nothing + if (this.matchFound !== null) { + return; + } + + if (this.addressField1.value?.length > 0 && e.code === 'Tab') { + this.fillInAddressUsingFirstItem(); + } }, onPlaceChanged() { const place = this.autocomplete.getPlace(); @@ -331,12 +366,11 @@ 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 this.initializeAutocomplete(); }) .catch(() => { - // Failed to fetch script - window.console.warn('Unable to load Google Places API script'); + // Failed to fetch script, likely due to network error + this.showAllFields = true; }); }, resetAlerts() { diff --git a/src/layouts/policy-holder-details/policy-holder-details.vue b/src/layouts/policy-holder-details/policy-holder-details.vue index 319be3dd..155f5de4 100644 --- a/src/layouts/policy-holder-details/policy-holder-details.vue +++ b/src/layouts/policy-holder-details/policy-holder-details.vue @@ -97,6 +97,7 @@ import { fetchCmsContentForPage } from '@/helpers/cms-content-helper'; import settleAllPromises from '@/helpers/layout-helper'; import { Form } from 'vee-validate'; import globalRules from '@/constants/global-rules'; +import MaskaFormattedMasks from '@/constants/maska-masks'; import BaseFormMixin from '@/mixins/base-form-mixin.js'; import { useMainStore } from '@/store'; @@ -152,6 +153,9 @@ export default { }, isPolicyVehicleSelected() { return (this.mainStore.order.vehicle.policyVehicleId != null && this.mainStore.order.vehicle.policyVehicleId >= 0); + }, + phoneMask() { + return MaskaFormattedMasks.PHONE_NUMBER; } }, methods: { diff --git a/src/layouts/schedule-page/schedule-page.vue b/src/layouts/schedule-page/schedule-page.vue index 0fae07bd..6c3af64c 100644 --- a/src/layouts/schedule-page/schedule-page.vue +++ b/src/layouts/schedule-page/schedule-page.vue @@ -940,7 +940,7 @@ export default { this.refreshDatePicker(); }) .catch(() => { - console.warn('Error fetching bill to info...'); + // Error fetching billTo info, close loading modal showIssLoadingModal(false); }); }