WIP

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: {

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() {
+            get: function () {
-                return this.addressModel.streetAddress &&
+                return (
-                       this.addressModel.city &&
+                    this.addressModel.streetAddress &&
-                       this.addressModel.state &&
+                    this.addressModel.city &&
-                       this.addressModel.zipCode
+                    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 +=
+                                self.addressModel.streetAddress += " " + component.short_name;
-                                    " " + 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 =
+        const autocompleteResultsContainer = document.getElementsByClassName("pac-container")[0];
-            document.getElementsByClassName("pac-container")[0];
         if (autocompleteResultsContainer) {
             streetAddressField.appendChild(autocompleteResultsContainer);
         }

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">
-                <addressQuestions
+                <template v-if="modalOpened">
-                    ref="addressQuestions"
+                    <addressQuestions 
-                    v-model="internalModel.addressQuestions"
+                        ref="addressQuestions"
-                    captureApartmentNumberOrBusinessName="true"
+                        v-model="internalModel.addressQuestions"
-                    preserveCityAndStateOnReset="true" />
+                        captureApartmentNumberOrBusinessName="true"
-                <vehicleProtectedQuestion
+                        preserveCityAndStateOnReset="true" />
-                    ref="vehicleProtectedQuestion"
+                    <vehicleProtectedQuestion
-                    v-model="internalModel.isVehicleProtected"
+                        ref="vehicleProtectedQuestion"
-                    cmsWidgetName="VehicleProtectedQuestionWidget" />
+                        v-model="internalModel.isVehicleProtected"
-                <textBlock cmsWidgetName="WorkspaceRequirementsWidget" typeStyle="caption" />
+                        cmsWidgetName="VehicleProtectedQuestionWidget" />
-                <alert
+                    <textBlock cmsWidgetName="WorkspaceRequirementsWidget" typeStyle="caption" />
-                    ref="alertInvalidZip"
+                    <alert
-                    v-if="displayInvalidZipAlert"
+                        ref="alertInvalidZip"
-                    class="my-4"
+                        v-if="displayInvalidZipAlert"
-                    cmsWidgetName="AlertInvalidZipWidget"
+                        class="my-4"
-                    alertClass="alert-danger"
+                        cmsWidgetName="AlertInvalidZipWidget"
-                    v-bind:isDismissible="false" />
+                        alertClass="alert-danger"
+                        v-bind:isDismissible="false" />
+                </template>
+
             </modal>
         </div>
     </transition>
@@ -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({
+            // this.$refs[this.modalName].resetForm({
-                values: {
+            //     values: {
-                    autocomplete: this.internalModel.addressQuestions.streetAddress,
+            //         autocomplete: this.internalModel.addressQuestions.streetAddress,
-                    city: this.internalModel.addressQuestions.city,
+            //         city: this.internalModel.addressQuestions.city,
-                    state: this.internalModel.addressQuestions.state,
+            //         state: this.internalModel.addressQuestions.state,
-                    zipCode: this.internalModel.addressQuestions.zipCode,
+            //         zipCode: this.internalModel.addressQuestions.zipCode,
-                    isVehicleProtected: this.internalModel.isVehicleProtected,
+            //         isVehicleProtected: this.internalModel.isVehicleProtected,
-                },
+            //     },
-            });
+            // });
         },
         async setMobileLocation() {
             if (

src/store/index.js

@@ -1105,17 +1105,10 @@ export const actions = {
             "glassPieces"
         );
 
-        return Promise.resolve({
+        return globalMethods.callHttpClient({
-            "isGlassServiceableInshop": true,
+            method: endpoints.GetServiceabilityDetails.method,
-            "isRecalibrationServiceableInshop": true,
+            endpoint: `${endpoints.GetServiceabilityDetails.url}?zip=${serviceZipCode}&carId=${carId}&${lineItems}&${glassPieces}`,
-            "isGlassServiceableMobile": true,
+        });
-            "isRecalibrationServiceableMobile": true
-        })
-
-        // return globalMethods.callHttpClient({
-        //     method: endpoints.GetServiceabilityDetails.method,
-        //     endpoint: `${endpoints.GetServiceabilityDetails.url}?zip=${serviceZipCode}&carId=${carId}&${lineItems}&${glassPieces}`,
-        // });
     },
 
     getProviders(context, { serviceZipCode }) {