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

75
public/index.html
View file

@ -1,32 +1,51 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-US"> <html lang="en-US">
<head>
<script>
window.dataLayer = [{}];
</script>
<script><%= process.env.VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY %></script>
<script><%= process.env.VUE_APP_GOOGLE_MAPS_API_SCRIPT %></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<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">
<title><%= htmlWebpackPlugin.options.title %></title> <head>
</head> <script>
<body> window.dataLayer = [{}];
<!-- Google Tag Manager --> </script>
<noscript> <script>
<iframe src="<%= process.env.VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC %>" window.gm_authFailure = function () {
height="0" width="0" style="display:none;visibility:hidden"></iframe> console.error("Google Maps failed to authenticate! Check your API key or billing.");
</noscript> // 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_MAPS_API_SCRIPT %></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<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">
<noscript> <title>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <%= htmlWebpackPlugin.options.title %>
</noscript> </title>
<div id="app"></div> </head>
<!-- built files will be auto injected -->
</body> <body>
</html> <!-- Google Tag Manager -->
<noscript>
<iframe src="<%= process.env.VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC %>" height="0" width="0"
style="display:none;visibility:hidden"></iframe>
</noscript>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

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

@ -190,32 +190,67 @@ 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
this.autocomplete = new window.google.maps.places.Autocomplete(document.getElementById('autocomplete'), { try {
componentRestrictions: { country: ['us'] }, if (!window.google || !window.google.maps || !window.google.maps.places) {
fields: ['address_components'], this.showAllFields = true;
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) {
return; 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') { // Set up the Autocomplete place_changed event to call our method to fill in the address
this.fillInAddressUsingFirstItem(); 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() { 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);
}); });
} }