Moved 'useForm' inside modal component

src/digital-components/modal/modal.vue

@@ -43,7 +43,7 @@
 <script>
 import buttonMain from "@/ux-components/button-main/button-main";
 import { Modal } from "bootstrap";
-import { useIsFormTouched, useIsFormDirty, useIsFormValid } from "vee-validate";
+import { useForm, useIsFormTouched, useIsFormDirty, useIsFormValid } from "vee-validate";
 
 export default {
     name: "modal",
@@ -60,15 +60,17 @@ export default {
     setup() {
         const modalId = `modal-${crypto.randomUUID()}`;
 
-        const isTouched = useIsFormTouched();
-        const isDirty = useIsFormDirty();
-        const isValid = useIsFormValid();
+        const form = useForm();
+        const isFormTouched = useIsFormTouched();
+        const isFormDirty = useIsFormDirty();
+        const isFormValid = useIsFormValid();
 
         return {
             modalId,
-            isTouched,
-            isDirty,
-            isValid,
+            form,
+            isFormTouched,
+            isFormDirty,
+            isFormValid,
         };
     },
     methods: {
@@ -99,10 +101,10 @@ export default {
     },
     computed: {
         isFooterButtonDisabled() {
-            if (!this.isTouched) {
-                return !this.isValid;
+            if (!this.isFormTouched) {
+                return !this.isFormValid;
             }
-            return !this.isDirty || !this.isValid;
+            return !this.isFormDirty || !this.isFormValid;
         },
     },
     components: {

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

@@ -20,7 +20,7 @@
     <modal
         :ref="modalName"
         :headerText="modalHeaderText"
-        :onModalOpenedCallback="onModalOpened"
+        :onModalClosedCallback="onModalClosed"
         :footerButtonText="modalFooterText"
         @footer-button-event="setMobileLocation">
         <addressQuestions
@@ -44,11 +44,6 @@ import addressQuestions from "@/layouts/address-lookup/customer-questions/addres
 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
-import { useForm } from "vee-validate";
-
-// Define Validation Rules
-
 export default {
     name: "mobile-location-modal-questions",
     emits: ["update:modelValue"], // The component emits an event
@@ -68,13 +63,6 @@ export default {
             },
         };
     },
-    setup() {
-        const modalForm = useForm();
-
-        return {
-            modalForm,
-        };
-    },
     props: {
         modelValue: {
             type: Object,
@@ -135,6 +123,11 @@ export default {
             },
         },
         addressModel: {
+            get: function () {
+                return this.mobileLocationQuestionsModel.addressQuestions;
+            },
+        },
+        addressModelInput: {
             get: function () {
                 return this.mobileLocationQuestionsInput.addressQuestions;
             },
@@ -144,12 +137,15 @@ export default {
         openModal() {
             this.$refs[this.modalName].openModal();
         },
-        onModalClosed() {
+        onModalOpened() {
             this.mobileLocationQuestionsInput = this.mobileLocationQuestionsModel;
         },
         closeModal() {
             this.$refs[this.modalName].closeModal();
         },
+        onModalClosed() {
+            this.mobileLocationQuestionsInput = this.mobileLocationQuestionsModel;
+        },
         resetModel() {
             // Address
             this.addressModel.streetAddress = "";
@@ -164,11 +160,12 @@ export default {
         async setMobileLocation() {
             this.mobileLocationQuestionsModel = {
                 addressQuestions: {
-                    streetAddress: this.addressModel.streetAddress,
-                    apartmentNumberOrBusinessName: this.addressModel.apartmentNumberOrBusinessName,
-                    city: this.addressModel.city,
-                    state: this.addressModel.state,
-                    zipCode: this.addressModel.zipCode,
+                    streetAddress: this.addressModelInput.streetAddress,
+                    apartmentNumberOrBusinessName:
+                        this.addressModelInput.apartmentNumberOrBusinessName,
+                    city: this.addressModelInput.city,
+                    state: this.addressModelInput.state,
+                    zipCode: this.addressModelInput.zipCode,
                 },
                 isVehicleProtected: this.mobileLocationQuestionsInput.isVehicleProtected,
                 isZipServiceableMobile: this.mobileLocationQuestionsInput.isZipServiceableMobile,
@@ -178,14 +175,6 @@ export default {
             this.closeModal();
         },
     },
-    watch: {
-        serviceZipCode: {
-            handler() {
-                // if they modify the Service Zip Code, clear the model
-                this.resetModel();
-            },
-        },
-    },
     components: {
         textLink,
         modal,

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

@@ -100,17 +100,18 @@ export default {
                     isVehicleProtected: this.isVehicleProtected,
                     isZipServiceableMobile: this.isZipServiceableMobile,
                     isZipServiceableInShop: this.isZipServiceableInShop,
-                }
+                };
             },
             set: function (newValue) {
                 this.streetAddress = newValue.addressQuestions.streetAddress;
-                this.apartmentNumberOrBusinessName = newValue.addressQuestions.apartmentNumberOrBusinessName;
+                this.apartmentNumberOrBusinessName =
+                    newValue.addressQuestions.apartmentNumberOrBusinessName;
                 this.city = newValue.addressQuestions.city;
                 this.state = newValue.addressQuestions.state;
                 this.zipCode = newValue.addressQuestions.zipCode;
                 this.isVehicleProtected = newValue.isVehicleProtected;
                 this.isZipServiceableMobile = newValue.isZipServiceableMobile;
-                this.isZipServiceableInShop = newValue.isZipServiceableInShop;                
+                this.isZipServiceableInShop = newValue.isZipServiceableInShop;
             },
         },
     },

src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue

@@ -71,13 +71,6 @@ export default {
         textboxQuestionWidgetName: String,
         alertInvalidZipWidgetName: String,
     },
-    setup() {
-        const modalForm = useForm();
-
-        return {
-            modalForm,
-        };
-    },
     computed: {
         serviceZipLinkText() {
             if (this.modelValue.zipCode && this.modelValue.zipCode.length > 0) {