jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #1242 from Safelite/feature/richardson/INSR-9658

Browse source 
Show All Fields and Skip Autocomplete if cannot reach google api
This commit is contained in:
brich1212safe 2026-05-27 14:22:35 -04:00 committed by GitHub
commit 8b48af4e5e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 106 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
public/index.html
View file

@ -1,9 +1,21 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-US"> <html lang="en-US">
<head> <head>
<script> <script>
window.dataLayer = [{}]; window.dataLayer = [{}];
</script> </script>
<script>
window.gm_authFailure = function () {
console.error("Google Maps failed to authenticate! Check your API key or billing.");
// Add your fallback logic here (e.g., show an error message, hide the map, or enable fallback inputs)
if (typeof window.handleGoogleMapsAuthFailure === "function") {
window.handleGoogleMapsAuthFailure();
} else {
console.warn("No custom auth failure handler defined.");
}
};
</script>
<script><%= process.env.VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY %></script> <script><%= process.env.VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY %></script>
<script><%= process.env.VUE_APP_GOOGLE_MAPS_API_SCRIPT %></script> <script><%= process.env.VUE_APP_GOOGLE_MAPS_API_SCRIPT %></script>
<meta charset="utf-8"> <meta charset="utf-8">
@ -12,21 +24,28 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet"> <link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
rel="stylesheet">
<title><%= htmlWebpackPlugin.options.title %></title> <title>
<%= htmlWebpackPlugin.options.title %>
</title>
</head> </head>
<body> <body>
<!-- Google Tag Manager --> <!-- Google Tag Manager -->
<noscript> <noscript>
<iframe src="<%= process.env.VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC %>" <iframe src="<%= process.env.VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC %>" height="0" width="0"
height="0" width="0" style="display:none;visibility:hidden"></iframe> style="display:none;visibility:hidden"></iframe>
</noscript> </noscript>
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>
</html> </html>

44
src/iss-components/address-questions/address-questions.vue
View file

@ -190,12 +190,36 @@ export default {
&& (this.addressModel.zipCode ?? '') !== ''; && (this.addressModel.zipCode ?? '') !== '';
if (!this.showAllFields) { 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(); this.setupAddressLookup();
} }
}, },
unmounted() {
delete window.handleGoogleMapsAuthFailure;
},
methods: { methods: {
initializeAutocomplete() { initializeAutocomplete() {
// Initialize the Google Places Autocomplete // Initialize the Google Places Autocomplete
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'), { this.autocomplete = new window.google.maps.places.Autocomplete(document.getElementById('autocomplete'), {
componentRestrictions: { country: ['us'] }, componentRestrictions: { country: ['us'] },
fields: ['address_components'], fields: ['address_components'],
@ -206,7 +230,19 @@ export default {
this.autocomplete.addListener('place_changed', this.onPlaceChanged); this.autocomplete.addListener('place_changed', this.onPlaceChanged);
// Set up the pressing tab inside address1 field (enter's are caught by Google Autocomplete) // Set up the pressing tab inside address1 field (enter's are caught by Google Autocomplete)
this.addressField1.addEventListener('keydown', (e) => { 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 a match has been previously attempted then do nothing
if (this.matchFound !== null) { if (this.matchFound !== null) {
return; return;
@ -215,7 +251,6 @@ export default {
if (this.addressField1.value?.length > 0 && e.code === 'Tab') { if (this.addressField1.value?.length > 0 && e.code === 'Tab') {
this.fillInAddressUsingFirstItem(); this.fillInAddressUsingFirstItem();
} }
});
}, },
onPlaceChanged() { onPlaceChanged() {
const place = this.autocomplete.getPlace(); 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`) this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places&callback=Function.prototype`)
.then(() => { .then(() => {
// Script is loaded, initialize the autocomplete textbox
this.initializeAutocomplete(); this.initializeAutocomplete();
}) })
.catch(() => { .catch(() => {
// Failed to fetch script // Failed to fetch script, likely due to network error
window.console.warn('Unable to load Google Places API script'); this.showAllFields = true;
}); });
}, },
resetAlerts() { resetAlerts() {

4
src/layouts/policy-holder-details/policy-holder-details.vue
View file

@ -97,6 +97,7 @@ import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import settleAllPromises from '@/helpers/layout-helper'; import settleAllPromises from '@/helpers/layout-helper';
import { Form } from 'vee-validate'; import { Form } from 'vee-validate';
import globalRules from '@/constants/global-rules'; import globalRules from '@/constants/global-rules';
import MaskaFormattedMasks from '@/constants/maska-masks';
import BaseFormMixin from '@/mixins/base-form-mixin.js'; import BaseFormMixin from '@/mixins/base-form-mixin.js';
import { useMainStore } from '@/store'; import { useMainStore } from '@/store';
@ -152,6 +153,9 @@ export default {
}, },
isPolicyVehicleSelected() { isPolicyVehicleSelected() {
return (this.mainStore.order.vehicle.policyVehicleId != null && this.mainStore.order.vehicle.policyVehicleId >= 0); return (this.mainStore.order.vehicle.policyVehicleId != null && this.mainStore.order.vehicle.policyVehicleId >= 0);
},
phoneMask() {
return MaskaFormattedMasks.PHONE_NUMBER;
} }
}, },
methods: { methods: {

2
src/layouts/schedule-page/schedule-page.vue
View file

@ -940,7 +940,7 @@ export default {
this.refreshDatePicker(); this.refreshDatePicker();
}) })
.catch(() => { .catch(() => {
console.warn('Error fetching bill to info...'); // Error fetching billTo info, close loading modal
showIssLoadingModal(false); showIssLoadingModal(false);
}); });
} }