diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index e1f3fb462..bdec465e2 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -90,10 +90,12 @@ export default {
openModal() {
const modal = Modal.getOrCreateInstance(document.getElementById(this.modalId));
modal.show();
+ this.$emit("modalOpened", true);
},
closeModal() {
const modal = Modal.getInstance(document.getElementById(this.modalId));
modal.hide();
+ this.$emit("modalOpened", false);
},
},
computed: {
diff --git a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
index 148baca8f..0c2598b4e 100644
--- a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
+++ b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
@@ -122,6 +122,7 @@ export default {
},
data() {
return {
+ componentKey: 0,
displayVerificationWarning: false,
displayNoMatchWarning: false,
alertHeadlineVerificationWarning: "",
@@ -202,12 +203,14 @@ export default {
},
},
showAddressFields: {
- get: function() {
- return this.addressModel.streetAddress &&
- this.addressModel.city &&
- this.addressModel.state &&
- this.addressModel.zipCode
- }
+ get: function () {
+ return (
+ this.addressModel.streetAddress &&
+ this.addressModel.city &&
+ this.addressModel.state &&
+ this.addressModel.zipCode
+ );
+ },
},
showApartmentNumberOrBusinessNameField: {
get: function () {
@@ -218,14 +221,15 @@ export default {
methods: {
initializeAutocomplete() {
this.addressField1 = document.getElementById("autocomplete");
-
+
+ // initialize the Google Places Autocomplete
this.autocomplete = new window.google.maps.places.Autocomplete(this.addressField1, {
componentRestrictions: { country: ["us"] },
fields: ["address_components"],
types: ["geocode"],
});
- // Standard place_changed event handling
+ // 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",
@@ -233,16 +237,30 @@ export default {
);
this.addressField1.addEventListener("focus", (e) => {
+ // 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");
+
+ // Make place results box stick to the input on scroll
+ // Due to the different ways we're using this component it is necessary to do this here instead of ahead of time
+ const streetAddressField = document.getElementById("streetAddressField");
+ const autocompleteResultsContainer = document.getElementsByClassName("pac-container")[0];
+ if (autocompleteResultsContainer) {
+ streetAddressField.appendChild(autocompleteResultsContainer);
+ }
});
this.addressField1.addEventListener("keydown", (e) => {
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") {
+ // Grab the selected item
const selectedItem = document.querySelector(
".pac-container .pac-item-selected"
);
+
+ // If an item was selected then fill in the address with the selected item
if (selectedItem !== null) {
// Fill-in the address using selected item in the list.
this.autocomplete.dispatchEvent(event);
@@ -276,8 +294,7 @@ export default {
break;
}
case "route": {
- self.addressModel.streetAddress +=
- " " + component.short_name;
+ self.addressModel.streetAddress += " " + component.short_name;
break;
}
case "locality": {
@@ -331,8 +348,12 @@ export default {
resetAlerts() {
this.displayVerificationWarning = false;
},
+ forceRerender() {
+ this.componentKey.value += 1;
+ }
},
mounted() {
+ console.log("mounted")
// Load the Google Places Autocomplete script
const apiKey = applicationConfig.GOOGLE_PLACES_API_KEY;
this.$loadScript(
@@ -342,11 +363,13 @@ export default {
this.scriptLoaded = true;
});
},
- beforeUpdate() {
+ unmounted() {
+ console.log("unmounted")
+ },
+ beforeUpdate() {
// Make place results box stick to the input on scroll
const streetAddressField = document.getElementById("streetAddressField");
- const autocompleteResultsContainer =
- document.getElementsByClassName("pac-container")[0];
+ const autocompleteResultsContainer = document.getElementsByClassName("pac-container")[0];
if (autocompleteResultsContainer) {
streetAddressField.appendChild(autocompleteResultsContainer);
}
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 0052c1368..dd4780928 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
@@ -33,24 +33,28 @@
:footerButtonText="modalFooterText"
:onModalOpenedCallback="onModalOpened"
:onModalClosedCallback="onModalClosed"
+ @modalOpened="setModalOpened"
@footer-button-event="setMobileLocation">
-
-
-
-
+
+
+
+
+
+
+
@@ -82,6 +86,8 @@ export default {
return {
internalModel: deepClone(this.modelValue),
displayInvalidZipAlert: false,
+ addressQuestionsKey: 0,
+ modalOpened: false,
};
},
setup(props) {
@@ -195,6 +201,10 @@ export default {
openModal() {
this.$refs[this.modalName].openModal();
},
+ setModalOpened(isOpened) {
+ this.modalOpened = isOpened;
+ console.log(this.modalOpened)
+ },
closeModal() {
this.$refs[this.modalName].closeModal();
},
@@ -224,17 +234,17 @@ export default {
this.$refs[this.modalName].resetButtonStyle();
},
resetValidation() {
- this.$refs.addressQuestions.resetAlerts();
+ //this.$refs.addressQuestions.resetAlerts();
- this.$refs[this.modalName].resetForm({
- values: {
- autocomplete: this.internalModel.addressQuestions.streetAddress,
- city: this.internalModel.addressQuestions.city,
- state: this.internalModel.addressQuestions.state,
- zipCode: this.internalModel.addressQuestions.zipCode,
- isVehicleProtected: this.internalModel.isVehicleProtected,
- },
- });
+ // this.$refs[this.modalName].resetForm({
+ // values: {
+ // autocomplete: this.internalModel.addressQuestions.streetAddress,
+ // city: this.internalModel.addressQuestions.city,
+ // state: this.internalModel.addressQuestions.state,
+ // zipCode: this.internalModel.addressQuestions.zipCode,
+ // isVehicleProtected: this.internalModel.isVehicleProtected,
+ // },
+ // });
},
async setMobileLocation() {
if (
diff --git a/src/store/index.js b/src/store/index.js
index 15233a1cf..bd8ccffe7 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1105,17 +1105,10 @@ export const actions = {
"glassPieces"
);
- return Promise.resolve({
- "isGlassServiceableInshop": true,
- "isRecalibrationServiceableInshop": true,
- "isGlassServiceableMobile": true,
- "isRecalibrationServiceableMobile": true
- })
-
- // return globalMethods.callHttpClient({
- // method: endpoints.GetServiceabilityDetails.method,
- // endpoint: `${endpoints.GetServiceabilityDetails.url}?zip=${serviceZipCode}&carId=${carId}&${lineItems}&${glassPieces}`,
- // });
+ return globalMethods.callHttpClient({
+ method: endpoints.GetServiceabilityDetails.method,
+ endpoint: `${endpoints.GetServiceabilityDetails.url}?zip=${serviceZipCode}&carId=${carId}&${lineItems}&${glassPieces}`,
+ });
},
getProviders(context, { serviceZipCode }) {