From 31334370bbf6bacdcd8038b603ba9540c6d74822 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Wed, 8 Feb 2023 08:22:03 -0500
Subject: [PATCH 1/5] Added code to enable / disable the Footer Button

---
 src/digital-components/modal/modal.vue | 30 ++++++++++++++++++++------
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index 89ff1f8ed..e206dd3e3 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -32,7 +32,8 @@
                         ref="buttonMain"
                         suppressLoader
                         :buttonText="footerButtonText"
-                        @click-event="validateAndEmit" />
+                        @click-event="validateAndEmit"
+                        :class="isFooterButtonDisabled && 'form-test-invalid'" />
                 </div>
             </div>
         </div>
@@ -42,6 +43,7 @@
 <script>
 import buttonMain from "@/ux-components/button-main/button-main";
 import { Modal } from "bootstrap";
+import { useIsFormTouched, useIsFormDirty, useIsFormValid } from "vee-validate";
 
 export default {
     name: "modal",
@@ -49,20 +51,26 @@ export default {
         modalId: String,
         headerText: String,
         footerButtonText: String,
-        modalForm: {
-            type: Object,
-        },
         onModalOpenedCallback: {
             type: Function,
         },
     },
+    setup() {        
+        const isTouched = useIsFormTouched();
+        const isDirty = useIsFormDirty();
+        const isValid = useIsFormValid();
+
+        return {
+            isTouched,
+            isDirty,
+            isValid,
+        };
+    },
     methods: {
         async validateAndEmit() {
-            const validationResult = await this.modalForm.validate();
-            if (validationResult.valid) {
+            if (!this.isModalSubmitDisabled) {
                 this.$emit("footer-button-event");
             }
-
             this.resetButtonStyle();
         },
         resetButtonStyle() {
@@ -77,6 +85,14 @@ export default {
             modal.hide();
         },
     },
+    computed: {
+        isFooterButtonDisabled() {
+            if (!this.isTouched) {
+                return !this.isValid;
+            }
+            return !this.isDirty || !this.isValid;
+        },
+    },
     components: {
         buttonMain,
     },

From 0f1a4d96411ece37adcb901aeb62108d2ccb6076 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Wed, 8 Feb 2023 08:22:43 -0500
Subject: [PATCH 2/5] Added @input handler which is necessary for modal
 validation

---
 src/digital-components/textbox-question/textbox-question.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/digital-components/textbox-question/textbox-question.vue b/src/digital-components/textbox-question/textbox-question.vue
index bbbbb0bd7..2800e260a 100644
--- a/src/digital-components/textbox-question/textbox-question.vue
+++ b/src/digital-components/textbox-question/textbox-question.vue
@@ -27,6 +27,7 @@
                     cornerStyle === 'rounded' ? 'rounded-pill' : '',
                 ]"
                 :validationRules="validationRules"
+                @input="handleChange"
                 @change="handleChange"
                 @blur="handleChange"
                 :maxlength="maxLength ? maxLength : '999'"

From 4e63afb5da1d6b3998a1d962ba4ad95cea1b35da Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Wed, 8 Feb 2023 08:23:28 -0500
Subject: [PATCH 3/5] Removed modal form validation from question level, now at
 Modal level.

---
 .../mobile-location-modal-questions.vue       | 32 ++++++++++++-------
 1 file changed, 21 insertions(+), 11 deletions(-)

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 5dab5edf0..8469985fe 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
@@ -48,7 +48,6 @@ import vehicleProtectedQuestion from "@/layouts/service-location/mobile-location
 import textBlock from "@/digital-components/text-block/text-block";
 
 // Supporting Files
-import { useForm } from "vee-validate";
 
 // Define Validation Rules
 
@@ -60,13 +59,6 @@ export default {
             answers: [],
         };
     },
-    setup() {
-        const modalForm = useForm();
-
-        return {
-            modalForm,
-        };
-    },
     props: {
         modelValue: {
             type: Object,
@@ -91,15 +83,24 @@ export default {
         alertInvalidZipWidgetName: String,
     },
     computed: {
+        getModalId() {
+            return "#" + this.modalWidgetName;
+        },
         mobileLocationLinkPromptText() {
             return this.getCmsContent(this.cmsWidgetName, "HeaderText");
         },
         mobileLocationLinkText() {
+            if (
+                this.addressModel.streetAddress != "" &&
+                this.addressModel.city != "" &&
+                this.addressModel.state != "" &&
+                this.addressModel.zipCode != ""
+            ) {
+                return `${this.addressModel.streetAddress}\n${this.addressModel.city}, ${this.addressModel.state} ${this.addressModel.zipCode}`;
+            }
             return this.getCmsContent(this.cmsWidgetName, "BodyText");
         },
-        getModalId() {
-            return "#" + this.modalWidgetName;
-        },
+
         modalHeaderText() {
             return this.getCmsContent(this.modalWidgetName, "HeaderText");
         },
@@ -114,6 +115,11 @@ export default {
                 this.$emit("update:modelValue", newValue);
             },
         },
+        addressModel: {
+            get: function () {
+                return this.mobileLocationQuestionModel.addressQuestions;
+            },
+        },
     },
     methods: {
         openModal() {
@@ -151,4 +157,8 @@ export default {
 .address-questions {
     margin-top: 0em;
 }
+
+#mobileLocationLinkPromptId {
+    white-space: pre-line;
+}
 </style>

From c2a3859dddd970ee5f81a789d56d2abcd5410a7d Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Wed, 8 Feb 2023 09:13:47 -0500
Subject: [PATCH 4/5] Renamed footer button for consistency

---
 src/digital-components/modal/modal.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index e206dd3e3..5bc1b1af8 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -55,7 +55,7 @@ export default {
             type: Function,
         },
     },
-    setup() {        
+    setup() {
         const isTouched = useIsFormTouched();
         const isDirty = useIsFormDirty();
         const isValid = useIsFormValid();
@@ -68,7 +68,7 @@ export default {
     },
     methods: {
         async validateAndEmit() {
-            if (!this.isModalSubmitDisabled) {
+            if (!this.isFooterButtonDisabled) {
                 this.$emit("footer-button-event");
             }
             this.resetButtonStyle();

From 1aa470bf188967261b85c75ca41507184e46ff80 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Thu, 9 Feb 2023 10:45:29 -0500
Subject: [PATCH 5/5] CSR-1088 - Additional model / prop related changes

---
 src/digital-components/modal/modal.vue        |  1 -
 .../mobile-location-modal-questions.vue       | 38 +++++++++++++++----
 .../vehicle-protected-question.vue            |  4 +-
 .../service-location/service-location.vue     |  9 ++++-
 4 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index 3d1be957a..96263ecf2 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -44,7 +44,6 @@
 import buttonMain from "@/ux-components/button-main/button-main";
 import { Modal } from "bootstrap";
 import { useIsFormTouched, useIsFormDirty, useIsFormValid } from "vee-validate";
-import { checkPropertyChange } from "json-schema";
 
 export default {
     name: "modal",
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 8469985fe..5face28b1 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
@@ -54,11 +54,6 @@ import textBlock from "@/digital-components/text-block/text-block";
 export default {
     name: "mobile-location-modal-questions",
     emits: ["update:modelValue"], // The component emits an event
-    data() {
-        return {
-            answers: [],
-        };
-    },
     props: {
         modelValue: {
             type: Object,
@@ -70,11 +65,12 @@ export default {
                     state: "",
                     zipCode: "",
                 },
-                isZipServiceableMobile: Boolean,
-                isZipServiceableInShop: Boolean,
                 isVehicleProtected: Boolean,
+                isZipServiceableMobile: Boolean,
+                isZipServiceableInShop: Boolean,            
             }),
         },
+        serviceZipCode: String,
         cmsWidgetName: String,
         modalWidgetName: String,
         mobileFeeDisclaimerWidgetName: String,
@@ -100,7 +96,6 @@ export default {
             }
             return this.getCmsContent(this.cmsWidgetName, "BodyText");
         },
-
         modalHeaderText() {
             return this.getCmsContent(this.modalWidgetName, "HeaderText");
         },
@@ -120,6 +115,14 @@ export default {
                 return this.mobileLocationQuestionModel.addressQuestions;
             },
         },
+        _isVehicleProtected: {
+            get: function () {
+                return this.modelValue.isVehicleProtected;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue.isVehicleProtected", newValue);
+            },            
+        }
     },
     methods: {
         openModal() {
@@ -128,10 +131,29 @@ export default {
         closeModal() {
             this.$refs.mobileLocationModal.closeModal();
         },
+        resetModel() {
+            // Address
+            this.addressModel.streetAddress = "";
+            this.addressModel.apartmentNumberOrBusinessName = "";
+            this.addressModel.city = "";
+            this.addressModel.state = "";
+            this.addressModel.zipCode = "";
+
+            // Is Vehicle Protected
+            this._isVehicleProtected = null;
+        },
         async setMobileLocation() {
             this.closeModal();
         },
     },
+    watch: {
+        serviceZipCode: {
+            handler() {
+                // if they modify the Service Zip Code, clear the model
+                this.resetModel();
+            }
+        },
+    },
     components: {
         textLink,
         modal,
diff --git a/src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue b/src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue
index 6b00df0d1..f5754ea06 100644
--- a/src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue
+++ b/src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue
@@ -23,7 +23,9 @@ defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
 export default {
     name: "vehicle-protected-question",
     props: {
-        modelValue: String,
+        modelValue: {
+            isVehicleProtected: Boolean,
+        },
         cmsWidgetName: String,
     },
     components: {
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 2ed5f676b..63e0d1c81 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -1,4 +1,3 @@
-fmg
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <div class="page-container-grouped-styles">
@@ -12,6 +11,7 @@ fmg
                 alertInvalidZipWidgetName="AlertInvalidZipWidget" />
             <mobileLocationModalQuestions
                 v-model="mobileLocationQuestions"
+                :serviceZipCode="serviceZipQuestion.serviceZipCode"
                 cmsWidgetName="MobileLocationLinkWidget"
                 modalWidgetName="MobileLocationModalWidget"
                 mobileFeeDisclaimerWidgetName="MobileFeeDisclaimerWidget"
@@ -54,6 +54,9 @@ export default {
                     state: "",
                     zipCode: "",
                 },
+                isVehicleProtected: null,
+                isZipServiceableMobile: null,
+                isZipServiceableInShop: null, 
             },
         };
     },
@@ -80,7 +83,9 @@ export default {
         arePagePrerequisitesValid() {
             return true;
         },
-
+        resetMobileLocationTest() {
+            this.serviceZipQuestion.serviceZipCode = "43054";
+        },
         backButtonAction() {},
         forwardButtonAction() {},
     },