Model reset stuff, still need to change address-questions to use normal names

src/digital-components/modal/modal.vue

@@ -75,7 +75,8 @@ export default {
     },
     methods: {
         async validateAndEmit() {
-            if (!this.isFooterButtonDisabled) {
+            const validationResult = await this.form.validate();
+            if (validationResult.valid) {
                 this.$emit("footer-button-event");
             }
             this.resetButtonStyle();

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

@@ -25,11 +25,11 @@
         @footer-button-event="setMobileLocation">
         <addressQuestions
             ref="addressQuestions"
-            v-model="mobileLocationQuestionsInput.addressQuestions"
+            v-model="internalModel.addressQuestions"
             captureApartmentNumberOrBusinessName="true" />
         <vehicleProtectedQuestion
             ref="vehicleProtectedQuestion"
-            v-model="mobileLocationQuestionsInput.isVehicleProtected"
+            v-model="internalModel.isVehicleProtected"
             cmsWidgetName="VehicleProtectedQuestionWidget" />
         <textBlock cmsWidgetName="WorkspaceRequirementsWidget" typeStyle="caption" />
     </modal>
@@ -43,25 +43,15 @@ import alert from "@/ux-components/alert/alert";
 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";
+import { useForm } from "vee-validate";
 
 export default {
     name: "mobile-location-modal-questions",
     emits: ["update:modelValue"], // The component emits an event
     data() {
         return {
-            mobileLocationQuestionsInput: {
+            internalModel: this.copyModel(this.modelValue),
-                addressQuestions: {
+        }
-                    streetAddress: "",
-                    apartmentNumberOrBusinessName: "",
-                    city: "",
-                    state: "",
-                    zipCode: "",
-                },
-                isVehicleProtected: null,
-                isZipServiceableMobile: null,
-                isZipServiceableInShop: null,
-            },
-        };
     },
     props: {
         modelValue: {
@@ -74,9 +64,9 @@ export default {
                     state: "",
                     zipCode: "",
                 },
-                isVehicleProtected: Boolean,
+                isVehicleProtected: null,
-                isZipServiceableMobile: Boolean,
+                isZipServiceableMobile: null,
-                isZipServiceableInShop: Boolean,
+                isZipServiceableInShop: null,
             }),
         },
         serviceZipCode: String,
@@ -88,9 +78,6 @@ export default {
         alertInvalidZipWidgetName: String,
     },
     computed: {
-        getModalId() {
-            return "#" + this.modalWidgetName;
-        },
         mobileLocationLinkPromptText() {
             return this.getCmsContent(this.linkWidgetName, "HeaderText");
         },
@@ -114,73 +101,77 @@ export default {
         modalName() {
             return this.modalWidgetName;
         },
-        mobileLocationQuestionsModel: {
-            get: function () {
-                return this.modelValue;
-            },
-            set: function (newValue) {
-                this.$emit("update:modelValue", newValue);
-            },
-        },
         addressModel: {
             get: function () {
-                return this.mobileLocationQuestionsModel.addressQuestions;
+                return this.modelValue.addressQuestions;
-            },
-        },
-        addressModelInput: {
-            get: function () {
-                return this.mobileLocationQuestionsInput.addressQuestions;
             },
         },
     },
     methods: {
+        copyModel(modelToCopy) {
+            return {
+                addressQuestions: {
+                    streetAddress: modelToCopy.addressQuestions.streetAddress,
+                    apartmentNumberOrBusinessName: modelToCopy.addressQuestions.apartmentNumberOrBusinessName,
+                    city: modelToCopy.addressQuestions.city,
+                    state: modelToCopy.addressQuestions.state,
+                    zipCode: modelToCopy.addressQuestions.zipCode,
+                },
+                isVehicleProtected: modelToCopy.isVehicleProtected,
+                isZipServiceableMobile: modelToCopy.isZipServiceableMobile,
+                isZipServiceableInShop: modelToCopy.isZipServiceableInShop,
+            }
+        },
+
         openModal() {
             this.$refs[this.modalName].openModal();
         },
-        onModalOpened() {
+
-            this.mobileLocationQuestionsInput = this.mobileLocationQuestionsModel;
-        },
         closeModal() {
             this.$refs[this.modalName].closeModal();
         },
-        onModalClosed() {
+
-            this.mobileLocationQuestionsInput = this.mobileLocationQuestionsModel;
-        },
         resetComponent() {
-            // Address
+            this.resetModel();
-            this.addressModelInput.streetAddress = "";
-            this.addressModelInput.apartmentNumberOrBusinessName = "";
-            this.addressModelInput.city = "";
-            this.addressModelInput.state = "";
-            this.addressModelInput.zipCode = "";
             
-            // Is Vehicle Protected
+            // Reset the validation form
-            this.mobileLocationQuestionsInput.isVehicleProtected = null; 
+            this.$refs[this.modalName].form.resetForm({
+                values: {
+                    "8fdf9dc2e13e430eb57529499dceb3eb": "OH"
+                }
  
-            this.$refs[this.modalName].form.resetForm();
                 
+            });
+
+            // Reinitialize the Address Auto Complete
             this.$refs.addressQuestions.setupAddressLookup();
         },
+
+        resetModel() {
+            // Address
+            this.internalModel.addressQuestions.streetAddress = "";
+            this.internalModel.addressQuestions.apartmentNumberOrBusinessName = "";
+            this.internalModel.addressQuestions.city = "";
+            this.internalModel.addressQuestions.state = "";
+            this.internalModel.addressQuestions.zipCode = "";
+
+            // Is Vehicle Protected
+            this.internalModel.isVehicleProtected = null; 
+        },
+
         async setMobileLocation() {
             // TODO: Any lookups or actions to be taken before assigning the Mobile Location
 
-            this.mobileLocationQuestionsModel = {
+            this.$emit("update:modelValue", this.internalModel);
-                addressQuestions: {
-                    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,
-                isZipServiceableInShop: this.mobileLocationQuestionsInput.isZipServiceableInShop,
-            };
 
             this.closeModal();
         },
     },
+    watch: {
+        modelValue(newValue) {
+            this.internalModel = this.copyModel(newValue);
+        }
+    },
     components: {
         textLink,
         modal,

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

@@ -20,7 +20,7 @@
         <serviceZipQuestion
             ref="serviceZipQuestion"
             :cmsWidgetName="textboxQuestionWidgetName"
-            v-model="serviceZipCodeInput" />
+            v-model="internalModel.zipCode" />
         <alert
             ref="alertInvalidZip"
             v-if="displayInvalidZipAlert"
@@ -44,14 +44,14 @@ import { required, regex } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
 
 // Define Validation Rules
-defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
+// defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
-defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
+// defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
 
 export default {
     name: "service-zip-modal-question",
     data() {
         return {
-            serviceZipCodeInput: null,
+            internalModel: this.copyModel(this.modelValue),
             displayInvalidZipAlert: false,
         };
     },  
@@ -59,11 +59,9 @@ export default {
         modelValue: {
             type: Object,
             default: () => ({
-                serviceZipQuestion: {
+                state: "",
-                    state: "",
+                zipCode: "",
-                    zipCode: "",
+                isServiceable: null,
-                    isServiceable: null,
-                },
             }),
         },
         linkWidgetName: String,
@@ -87,14 +85,14 @@ export default {
         modalName() {
             return this.modalWidgetName;
         },
-        serviceZipModel: {
+        // serviceZipModel: {
-            get: function () {
+        //     get: function () {
-                return this.modelValue;
+        //         return this.modelValue;
-            },
+        //     },
-            set: function (newValue) {
+        //     set: function (newValue) {
-                this.$emit("update:modelValue", newValue);
+        //         this.$emit("update:modelValue", newValue);
-            },
+        //     },
-        },
+        // },
     },
     methods: {
         resetAlerts() {
@@ -111,6 +109,14 @@ export default {
             input.focus();
         },
 
+        copyModel(modelToCopy) {
+            return {
+                state: modelToCopy.state,
+                zipCode: modelToCopy.zipCode,
+                isServiceable: modelToCopy.isServiceable,
+            }
+        },
+
         openModal() {
             this.$refs[this.modalName].openModal();
         },
@@ -119,35 +125,36 @@ export default {
             this.$refs[this.modalName].closeModal();
         },
 
-        onModalOpened() {
+        // onModalOpened() {
-            this.serviceZipCodeInput = this.serviceZipModel.zipCode;
+        //     this.serviceZipCodeInput = this.serviceZipModel.zipCode;
-            this.focusOnZipInput();
+        //     this.focusOnZipInput();
-        },
+        // },
 
-        onModalClosed() {
+        // onModalClosed() {
-            this.serviceZipCodeInput = this.serviceZipModel.zipCode;
+        //     this.serviceZipCodeInput = this.serviceZipModel.zipCode;
-            this.resetsOnZipInput();
+        //     this.resetsOnZipInput();
-        },
+        // },
 
         async setZipCode() {
             this.resetAlerts();
 
-            const zipCodeData = await this.getZipCodeData(this.serviceZipCodeInput);
+            const zipCodeData = await this.getZipCodeData(this.internalModel.zipCode);
 
             if (!zipCodeData.isValid) {
                 this.displayInvalidZipAlert = true;
                 this.focusOnZipInput();
             } else {
-                // if the service zip code changes we need to clear the Mobile Location Model
+                this.internalModel.state = zipCodeData.state;
-                if (this.serviceZipModel.zipCode !== "" && this.serviceZipCodeInput !== this.serviceZipModel.zipCode ) {
+                this.internalModel.isServiceable = zipCodeData.isServiceable;
+
+                // if the service zip code is changing we need to clear the Mobile Location Model
+                if (this.modelValue.zipCode !== "" && this.internalModel.zipCode !== this.modelValue.zipCode ) {
                     this.$emit("service-zip-updated");
                 }
 
-                this.serviceZipModel = {
+                this.$emit("update:modelValue", this.internalModel);
-                    state: zipCodeData.state,
+
-                    zipCode: this.serviceZipCodeInput,
+
-                    isServiceable: zipCodeData.isServiceable,
-                };
 
                 this.closeModal();
             }
@@ -157,6 +164,9 @@ export default {
         serviceZipCodeInput() {
             this.resetsOnZipInput();
         },
+        modelValue(newValue) {
+            this.internalModel = this.copyModel(newValue);
+        }
     },
     components: {
         textLink,