Merge pull request #1242 from Safelite/feature/richardson/INSR-9658
Show All Fields and Skip Autocomplete if cannot reach google api
This commit is contained in:
brich1212safe
GitHub
commit
8b48af4e5e
4 changed files with 106 additions and 49 deletions
|
|
@ -1,32 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<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>
|
||||
<body>
|
||||
<!-- 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>
|
||||
<head>
|
||||
<script>
|
||||
window.dataLayer = [{}];
|
||||
</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_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>
|
||||
<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>
|
||||
<title>
|
||||
<%= htmlWebpackPlugin.options.title %>
|
||||
</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 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>
|
||||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue