Fixed error issues with Address component, fixed spacing in modals

src/digital-components/modal/modal.vue

@@ -17,7 +17,7 @@
                         data-bs-dismiss="modal"
                         aria-label="Close"></button>
                 </div>
-                <div class="modal-body ps-4 pe-4 pt-5 pb-4" v-if="showModalBody">
+                <div class="modal-body ps-5 pe-5 pt-5 pb-4" v-if="showModalBody">
                     <img :src="ModalImage" class="mw-100 d-flex mx-auto mb-4" alt="" />
                     <h5 class="mb-4" v-html="ModalHeadline"></h5>
                     <p class="fw-bold mb-2 subheader-text" v-html="ModalSubheadertext"></p>
@@ -62,12 +62,11 @@ export default {
     },
     data() {
         return {
-            myModal: null,
+            modal: null,
-        }        
+        };
     },
     mounted() {
-        this.myModal = new Modal(document.getElementById(this.cmsWidgetName));
+        this.modal = new Modal(document.getElementById(this.cmsWidgetName));
-        
     },
     computed: {
         ModalHeadline() {
@@ -97,10 +96,10 @@ export default {
             this.$refs.buttonMain.resetButtonStyle();
         },
         openModal() {
-            this.myModal.show();
+            this.modal.show();
         },
         closeModal() {
-            this.myModal.hide();
+            this.modal.hide();
         },
         async footerButtonClick() {
             if (this.footerButtonCallback) {

src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue

@@ -93,7 +93,6 @@ import { applicationConfig } from "@/constants/application-config.js";
 import { defineRule } from "vee-validate";
 import { required, regex } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
-import { fill } from "lodash";
 
 // DEFINE VALIDATION RULES
 defineRule("street-address-required", required(errorMessages.STREET_ADDRESS_REQUIRED));
@@ -258,13 +257,17 @@ export default {
                     });
 
                     addressField1.addEventListener("keydown", (e) => {
-                        if (e.code === "Enter" || e.code === "NumpadEnter") {
+                        const autocomplete = document.getElementById("autocomplete");
+                        const event = new Event("place_changed");
+
+                        if (e.code === "Enter" || e.code === "NumpadEnter" || e.code === "Tab") {
                             const selectedItem = document.querySelector(
                                 ".pac-container .pac-item-selected"
                             );
                             if (selectedItem !== null) {
                                 // Fill-in the address using selected item in the list.
-                                fillInAddress(selectedItem);
+                                autocomplete.dispatchEvent(event);
+                                //fillInAddress(selectedItem.textContent);
                             } else {
                                 // Fill-in the address using first item in the list.
                                 fillInAddressUsingFirstItem();
@@ -274,23 +277,25 @@ export default {
                         }
                     });
 
-                    addressField1.addEventListener("change", () => {
+                    // addressField1.addEventListener("change", () => {
-                        // If a match has been previously attempted then do nothing
+                    //     // If a match has been previously attempted then do nothing
-                        if (self.matchFound !== null) {
+                    //     if (self.matchFound !== null) {
-                            return;
+                    //         return;
-                        }
+                    //     }
 
-                        // Get the address that the user clicked on (if any)
+                    //     // Get the address that the user clicked on (if any)
-                        const clickedAddress = document.querySelector(
+                    //     const clickedAddress = document.querySelector(
-                            ".pac-container .pac-item:hover"
+                    //         ".pac-container .pac-item:hover"
-                        );
+                    //     );
 
-                        // If the Street Address field changed without clicking (i.e. by pressing Tab, or clicking outside the field)
+                    //     // If the Street Address field changed without clicking (i.e. by pressing Tab, or clicking outside the field)
-                        if (clickedAddress === null) {
+                    //     if (clickedAddress === null) {
-                            // Fill-in the address using first item in the list.
+                    //         // Fill-in the address using first item in the list.
-                            fillInAddressUsingFirstItem();
+                    //         fillInAddressUsingFirstItem();
-                        }
+                    //     }
-                    });
+
+                    //     console.log("change");
+                    // });
 
                     function fillInAddressUsingFirstItem() {
                         // Fill-in the address using first item in the list.
@@ -315,6 +320,7 @@ export default {
                     }
 
                     function fillInAddress(place) {
+                        console.log("fillInAddress");
                         if (!place) {
                             place = autocomplete.getPlace();
                         }
@@ -322,8 +328,11 @@ export default {
                         if (place && place.address_components) {
                             self.matchFound = true;
 
-                            self.addressModel.streetAddress = "";
                             self.$nextTick(function () {
+                                //self.addressModel.streetAddress = "";
+
+                                //self.$nextTick();
+
                                 self.showAddressFields = true;
 
                                 for (const component of place.address_components) {
@@ -407,6 +416,11 @@ export default {
                 }
             },
         },
+        "addressModel.streetAddress": {
+            handler(newValue, oldValue) {
+                console.log(`I got changed from ${oldValue} to ${newValue}`);
+            },
+        },
     },
     components: {
         textboxQuestion,

src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue

@@ -12,7 +12,7 @@
                 linkType="text"
                 :text="this.mobileLocationDisplayText"
                 href="#!"
-                data-bs-toggle="modal"
+                @click-event="openModal"
                 :data-bs-target="getModalId"
                 aria-label="Modal window" />
         </div>
@@ -22,8 +22,13 @@
         :cmsWidgetName="this.modalWidgetName"
         :onModalOpenedCallback="onModalOpened"
         :footerButtonCallback="saveMobileLocationData">
-        <div class="ps-4 pe-4 pb-4">
+        <div class="modal-body ps-5 pe-5 pt-5 pb-4">
-            <addressQuestions ref="addressQuestions" captureApartmentNumberOrBusinessName ="true" />
+            <addressQuestions
+                ref="addressQuestions"
+                v-model="mobileQuestionModel.addressQuestions"
+                captureApartmentNumberOrBusinessName="true" />
+            <vehicleProtectedQuestion v-model="mobileQuestionModel.selectedValue"/>
+            <textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
         </div>
     </modal>
 </template>
@@ -32,28 +37,49 @@
 // Components
 import textLink from "@/ux-components/text-link/text-link";
 import modal from "@/digital-components/modal/modal";
+import buttonQuestion from "@/digital-components/button-question/button-question";
 import alert from "@/ux-components/alert/alert";
 import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
 import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions";
+import vehicleProtectedQuestion from "@/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question";
+import textBlock from "@/digital-components/text-block/text-block";
 
-//Supporting Files
+// Supporting Files
 import { defineRule } from "vee-validate";
 import { required, regex } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
-import { isNoUnitNumericStyleProp } from "@vue/shared";
+import { storeActions } from "@/constants/store-actions.js";
+import baseMixin from "@/mixins/base-mixin.js";
+import TextBlock from '../../../digital-components/text-block/text-block.vue';
 
 // Define Validation Rules
 defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
 defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
 
 export default {
-    name: "mobile-location-modal-question",
+    name: "mobile-location-modal-questions",
+    emits: ["update:modelValue"], // The component emits an event
     data() {
         return {
-
+            isVehicleProtectedAnswers: [],
         };
     },
     props: {
+        modelValue: {
+            type: Object,
+            default: () => ({
+                addressQuestions: {
+                    streetAddress: "",
+                    apartmentNumberOrBusinessName: "",
+                    city: "",
+                    state: "",
+                    zipCode: "",
+                },
+                isZipServiceableMobile: Boolean,
+                isZipServiceableInShop: Boolean,
+                isVehicleProtected: Boolean,
+            }),
+        },
         cmsWidgetName: String,
         modalWidgetName: String,
         textboxQuestionWidgetName: String,
@@ -61,7 +87,25 @@ export default {
         alertInvalidZipWidgetName: String,
     },
     methods: {
- 
+        loadInitialData() {
+            return baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_YEARS, {});
+        },
+        initializeComponent(initialData) {
+            this.isVehicleProtectedAnswers = initialData;
+        },
+        openModal() {
+            this.$refs.mobileServiceModal.openModal();
+        },
+        closeModal() {
+            this.$refs.mobileServiceModal.closeModal();
+        },
+        focusOnZipInput() {
+            this.$nextTick(() => {
+                console.log(this.$refs);
+                const input = this.$refs.streetAddressField;
+                input.focus();
+            });
+        },
     },
     computed: {
         getModalId() {
@@ -71,17 +115,25 @@ export default {
             return this.getCmsContent(this.cmsWidgetName, "HeaderText");
         },
         mobileLocationDisplayText() {
-
             return this.getCmsContent(this.cmsWidgetName, "FooterText");
         },
-    },
+        mobileQuestionModel: {
-    mounted() {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
 
     },
+    mounted() {},
     components: {
         textLink,
         modal,
-        addressQuestions
+        addressQuestions,
+        vehicleProtectedQuestion,
+        textBlock
     },
 };
 </script>

src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue

@@ -0,0 +1,53 @@
+<template>
+    <buttonQuestion
+        class="radioQuestion"
+        :questionText="questionText"
+        :answers="answers"
+        groupName="isVehicleProtected"
+        textPosition="text-center"
+        v-model="selectedValue"
+        isRequired />
+</template>
+
+<script>
+import buttonQuestion from "@/digital-components/button-question/button-question";
+// Supporting files
+import { storeActions } from "@/constants/store-actions.js";
+import baseMixin from "@/mixins/base-mixin.js";
+export default {
+    name: "vehicle-protected-question",
+    data() {
+        return {
+            answers: [ "Yes", "No" ],
+        };
+    },
+    props: {
+        modelValue: String,
+        cmsWidgetName: String,
+    },
+    components: {
+        buttonQuestion,
+    },
+    computed: {
+        questionText() {
+            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+        },
+        selectedValue: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+    },
+    methods: {
+        loadInitialData() {
+            return baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_YEARS, {});
+        },
+        initializeComponent(initialData) {
+            this.years = initialData;
+        },
+    },
+};
+</script>

src/layouts/service-location/service-location.vue

@@ -10,10 +10,11 @@ fmg
                 textboxQuestionWidgetName="ServiceZipQuestionWidget"
                 alertNonServiceableZipWidgetName="AlertNonServiceableZipWidget"
                 alertInvalidZipWidgetName="AlertInvalidZipWidget" />
-            <mobileLocationModalQuestion
+            <mobileLocationModalQuestions
+                v-model="mobileLocationQuestion"
                 cmsWidgetName="MobileLocationModalWidget"
                 modalWidgetName="LocationModalWidget"
-                textboxQuestionWidgetName="MobileLocationQuestionWidget" />    
+                textboxQuestionWidgetName="MobileLocationQuestionWidget" />
             <funnel-footer
                 cmsWidgetName="FunnelFooterWidget"
                 :isForwardActionDisabled="!meta.valid"
@@ -26,7 +27,7 @@ fmg
 <script>
 // Components
 import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question";
-import mobileLocationModalQuestion from "@/layouts/service-location/mobile-location-modal-question/mobile-location-modal-question";
+import mobileLocationModalQuestions from "@/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions";
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
@@ -39,7 +40,17 @@ import { settleAllPromises } from "@/helpers/layout-helper";
 export default {
     name: "service-location",
     data() {
-        return {};
+        return {
+            mobileLocationQuestion: {
+                addressQuestions: {
+                    streetAddress: "",
+                    apartmentNumberOrBusinessName: "",
+                    city: "",
+                    state: "",
+                    zipCode: "",
+                },
+            },
+        };
     },
     async beforeRouteEnter(to, from, next) {
         // Call APIs
@@ -70,7 +81,7 @@ export default {
     },
     components: {
         serviceZipModalQuestion,
-        mobileLocationModalQuestion,
+        mobileLocationModalQuestions,
         funnelHeader,
         funnelFooter,
         funnelSubHeader,