From d4a938f3c3f540c3ef6b81671d0ca799bdb42fd3 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Fri, 17 Mar 2023 14:42:28 -0400
Subject: [PATCH 01/17] WIP

---
 src/constants/error-messages.js               |  1 +
 .../mobile-location-modal-questions.vue       | 40 +++++++++++++++++
 .../service-location/service-location.vue     | 45 ++++++++++++++++---
 3 files changed, 80 insertions(+), 6 deletions(-)

diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js
index 5631b44c7..739698861 100644
--- a/src/constants/error-messages.js
+++ b/src/constants/error-messages.js
@@ -18,6 +18,7 @@ const errorMessages = {
     LAST_NAME_REQUIRED: "Please enter your last name",
     EMAIL_ADDRESS_REQUIRED: "Please enter your email address",
     EMAIL_ADDRESS_FORMAT: "Please enter a valid email address",
+    SERVICE_ADDRESS_REQUIRED: "Please enter your service address",
     SERVICE_ZIP_REQUIRED: "Please enter your service ZIP",
     SERVICE_ZIP_FORMAT: "Please enter a valid service ZIP",
     VIN_REQUIRED: "Please enter your VIN",
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 586e1c6de..46cb51d13 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
@@ -22,6 +22,9 @@
                     cmsWidgetName="MobileFeeDisclaimerWidget"
                     typeStyle="caption" />
             </div>
+            <div v-show="errorMessage" class="row my-1 form-test-error">
+                <span class="small mt-0" role="alert">{{ errorMessage }}</span>
+            </div>
             <modal
                 :ref="modalName"
                 :headerText="modalHeaderText"
@@ -57,6 +60,7 @@ 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 store from "@/store";
+import { useField } from "vee-validate";
 
 // Helpers
 import { deepClone } from "@/layouts/service-location/helpers/object-cloning-helper/object-cloning-helper";
@@ -71,6 +75,36 @@ export default {
             displayInvalidZipAlert: false,
         };
     },
+    setup(props) {
+        const inputId = `component-${crypto.randomUUID()}`;
+
+        const propsClone = Object.assign({}, props);
+        const modelValue = propsClone.modelValue;
+
+        const initialValue = modelValue;
+
+        const fieldOptions = {
+            type: "object",
+            value: modelValue,
+            initialValue: initialValue,
+        };
+
+        const { errorMessage, handleBlur, handleChange, meta, validate, errors } = useField(
+            inputId,
+            props.validationRules,
+            fieldOptions
+        );
+
+        return {
+            inputId,
+            errorMessage,
+            handleBlur,
+            handleChange,
+            validate,
+            meta,
+            errors,
+        };
+    },    
     props: {
         modelValue: {
             type: Object,
@@ -93,6 +127,7 @@ export default {
         modalWidgetName: String,
         alertNonServiceableZipWidgetName: String,
         alertInvalidZipWidgetName: String,
+        validationRules: String
     },
     computed: {
         mobileLocationLinkPromptText() {
@@ -158,6 +193,8 @@ export default {
             // on the service-zip-modal-question component
             this.$refs[this.modalName].form.resetForm({
                 values: {
+                    autocomplete: updatedServiceZipCodeInfo.streetAddress,
+                    city: updatedServiceZipCodeInfo.city,
                     state: updatedServiceZipCodeInfo.state,
                     zipCode: updatedServiceZipCodeInfo.zipCode,
                     isVehicleProtected: updatedServiceZipCodeInfo.isVehicleProtected,
@@ -197,10 +234,13 @@ export default {
                 this.internalModel = deepClone(newValue);
 
                 this.resetComponent({
+                    streetAddress: newValue.addressQuestions.streetAddress,
+                    city: newValue.addressQuestions.city,
                     state: newValue.addressQuestions.state,
                     zipCode: newValue.addressQuestions.zipCode,
                     isVehicleProtected: newValue.isVehicleProtected,
                 });
+                
             },
             deep: true,
         },
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 58f440708..d0711cd1b 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -22,11 +22,12 @@
                 @updated-mobile-fee-part="setMobileFeePart"
                 ref="mobileLocationModalQuestions"
                 linkWidgetName="MobileLocationLinkWidget"
-                modalWidgetName="MobileLocationModalWidget" />
+                modalWidgetName="MobileLocationModalWidget" 
+                validationRules="service-address-required"/>   
             <funnel-footer
                 cmsWidgetName="FunnelFooterWidget"
                 ref="funnelFooter"
-                :isForwardActionDisabled="!meta.valid || shouldDisableForwardAction"
+                :isForwardActionDisabled="!meta.valid"
                 @back-clicked="backButtonAction"
                 @ForwardClicked="forwardButtonAction" />
         </div>
@@ -42,7 +43,7 @@ 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";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
-import { Form } from "vee-validate";
+import { Form, defineRule } from "vee-validate";
 
 // Supporting files
 import baseMixin from "@/mixins/base-mixin.js";
@@ -50,8 +51,24 @@ import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
 import { getPricedMobileFeePart } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
+import { errorMessages } from "@/constants/error-messages";
 import store from "@/store";
 
+defineRule("service-address-required", (value) => {
+    const isValid = 
+        value.addressQuestions.streetAddress !== "" && 
+        value.addressQuestions.city !== "" && 
+        value.addressQuestions.state !== "" && 
+        value.addressQuestions.zipCode !== "" &&
+        value.isVehicleProtected !== null;
+
+    if (!isValid) {
+        return errorMessages.SERVICE_ADDRESS_REQUIRED;
+    }  
+
+    return isValid;
+});
+
 export default {
     name: "service-location",
     data() {
@@ -139,6 +156,12 @@ export default {
                 this.state = newValue.addressQuestions.state;
                 this.zipCode = newValue.addressQuestions.zipCode;
                 this.isVehicleProtected = newValue.isVehicleProtected;
+
+                // setErrors({
+                //     mobileLocationQuestions: ""
+                // });
+
+                //this.$refs.theForm.setTouched({});
             },
         },
         shouldDisableForwardAction() {
@@ -147,6 +170,7 @@ export default {
     },
     methods: {
         arePagePrerequisitesValid() {
+            
             return (
                 store.getters.lineItems.supportingItems !== null &&
                 store.getters.order.serviceLocation.zipCode !== null &&
@@ -188,9 +212,9 @@ export default {
         },
     },
     watch: {
-        zipCode(current, previous) {
-            if (current !== previous) {
-                baseMixin.methods.getZipCodeData(current).then((r) => {
+        zipCode(newValue, oldValue) {
+            if (newValue !== oldValue) {
+                baseMixin.methods.getZipCodeData(newValue).then((r) => {
                     this.zipContainsMilitaryBase = r.containsMilitaryBase;
                 });
             }
@@ -208,3 +232,12 @@ export default {
     },
 };
 </script>
+
+<style lang="scss">
+.form-test-error {
+    text-align: center;
+}
+
+
+
+</style>

From 6039bacf0da8765f0223d20b8f078bf42262397c Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Mon, 20 Mar 2023 09:34:31 -0400
Subject: [PATCH 02/17] Added SERVCE_ADDRESS_REQUIRED Error Msg

---
 src/constants/error-messages.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js
index 739698861..5631b44c7 100644
--- a/src/constants/error-messages.js
+++ b/src/constants/error-messages.js
@@ -18,7 +18,6 @@ const errorMessages = {
     LAST_NAME_REQUIRED: "Please enter your last name",
     EMAIL_ADDRESS_REQUIRED: "Please enter your email address",
     EMAIL_ADDRESS_FORMAT: "Please enter a valid email address",
-    SERVICE_ADDRESS_REQUIRED: "Please enter your service address",
     SERVICE_ZIP_REQUIRED: "Please enter your service ZIP",
     SERVICE_ZIP_FORMAT: "Please enter a valid service ZIP",
     VIN_REQUIRED: "Please enter your VIN",

From 0a78965a3772642813a105f543d16ec54f4e0c9f Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Mon, 20 Mar 2023 09:34:31 -0400
Subject: [PATCH 03/17] Revert "Added SERVCE_ADDRESS_REQUIRED Error Msg"

This reverts commit 6039bacf0da8765f0223d20b8f078bf42262397c.
---
 src/constants/error-messages.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js
index 5631b44c7..739698861 100644
--- a/src/constants/error-messages.js
+++ b/src/constants/error-messages.js
@@ -18,6 +18,7 @@ const errorMessages = {
     LAST_NAME_REQUIRED: "Please enter your last name",
     EMAIL_ADDRESS_REQUIRED: "Please enter your email address",
     EMAIL_ADDRESS_FORMAT: "Please enter a valid email address",
+    SERVICE_ADDRESS_REQUIRED: "Please enter your service address",
     SERVICE_ZIP_REQUIRED: "Please enter your service ZIP",
     SERVICE_ZIP_FORMAT: "Please enter a valid service ZIP",
     VIN_REQUIRED: "Please enter your VIN",

From 80d5f9597077f64afba637883283b1fcf37e1092 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Mon, 20 Mar 2023 09:50:05 -0400
Subject: [PATCH 04/17] Clean up

---
 .../mobile-location-modal-questions.vue       | 40 -----------------
 .../service-location/service-location.vue     | 45 +++----------------
 2 files changed, 6 insertions(+), 79 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 46cb51d13..586e1c6de 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
@@ -22,9 +22,6 @@
                     cmsWidgetName="MobileFeeDisclaimerWidget"
                     typeStyle="caption" />
             </div>
-            <div v-show="errorMessage" class="row my-1 form-test-error">
-                <span class="small mt-0" role="alert">{{ errorMessage }}</span>
-            </div>
             <modal
                 :ref="modalName"
                 :headerText="modalHeaderText"
@@ -60,7 +57,6 @@ 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 store from "@/store";
-import { useField } from "vee-validate";
 
 // Helpers
 import { deepClone } from "@/layouts/service-location/helpers/object-cloning-helper/object-cloning-helper";
@@ -75,36 +71,6 @@ export default {
             displayInvalidZipAlert: false,
         };
     },
-    setup(props) {
-        const inputId = `component-${crypto.randomUUID()}`;
-
-        const propsClone = Object.assign({}, props);
-        const modelValue = propsClone.modelValue;
-
-        const initialValue = modelValue;
-
-        const fieldOptions = {
-            type: "object",
-            value: modelValue,
-            initialValue: initialValue,
-        };
-
-        const { errorMessage, handleBlur, handleChange, meta, validate, errors } = useField(
-            inputId,
-            props.validationRules,
-            fieldOptions
-        );
-
-        return {
-            inputId,
-            errorMessage,
-            handleBlur,
-            handleChange,
-            validate,
-            meta,
-            errors,
-        };
-    },    
     props: {
         modelValue: {
             type: Object,
@@ -127,7 +93,6 @@ export default {
         modalWidgetName: String,
         alertNonServiceableZipWidgetName: String,
         alertInvalidZipWidgetName: String,
-        validationRules: String
     },
     computed: {
         mobileLocationLinkPromptText() {
@@ -193,8 +158,6 @@ export default {
             // on the service-zip-modal-question component
             this.$refs[this.modalName].form.resetForm({
                 values: {
-                    autocomplete: updatedServiceZipCodeInfo.streetAddress,
-                    city: updatedServiceZipCodeInfo.city,
                     state: updatedServiceZipCodeInfo.state,
                     zipCode: updatedServiceZipCodeInfo.zipCode,
                     isVehicleProtected: updatedServiceZipCodeInfo.isVehicleProtected,
@@ -234,13 +197,10 @@ export default {
                 this.internalModel = deepClone(newValue);
 
                 this.resetComponent({
-                    streetAddress: newValue.addressQuestions.streetAddress,
-                    city: newValue.addressQuestions.city,
                     state: newValue.addressQuestions.state,
                     zipCode: newValue.addressQuestions.zipCode,
                     isVehicleProtected: newValue.isVehicleProtected,
                 });
-                
             },
             deep: true,
         },
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index d0711cd1b..58f440708 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -22,12 +22,11 @@
                 @updated-mobile-fee-part="setMobileFeePart"
                 ref="mobileLocationModalQuestions"
                 linkWidgetName="MobileLocationLinkWidget"
-                modalWidgetName="MobileLocationModalWidget" 
-                validationRules="service-address-required"/>   
+                modalWidgetName="MobileLocationModalWidget" />
             <funnel-footer
                 cmsWidgetName="FunnelFooterWidget"
                 ref="funnelFooter"
-                :isForwardActionDisabled="!meta.valid"
+                :isForwardActionDisabled="!meta.valid || shouldDisableForwardAction"
                 @back-clicked="backButtonAction"
                 @ForwardClicked="forwardButtonAction" />
         </div>
@@ -43,7 +42,7 @@ 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";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
-import { Form, defineRule } from "vee-validate";
+import { Form } from "vee-validate";
 
 // Supporting files
 import baseMixin from "@/mixins/base-mixin.js";
@@ -51,24 +50,8 @@ import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
 import { getPricedMobileFeePart } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
-import { errorMessages } from "@/constants/error-messages";
 import store from "@/store";
 
-defineRule("service-address-required", (value) => {
-    const isValid = 
-        value.addressQuestions.streetAddress !== "" && 
-        value.addressQuestions.city !== "" && 
-        value.addressQuestions.state !== "" && 
-        value.addressQuestions.zipCode !== "" &&
-        value.isVehicleProtected !== null;
-
-    if (!isValid) {
-        return errorMessages.SERVICE_ADDRESS_REQUIRED;
-    }  
-
-    return isValid;
-});
-
 export default {
     name: "service-location",
     data() {
@@ -156,12 +139,6 @@ export default {
                 this.state = newValue.addressQuestions.state;
                 this.zipCode = newValue.addressQuestions.zipCode;
                 this.isVehicleProtected = newValue.isVehicleProtected;
-
-                // setErrors({
-                //     mobileLocationQuestions: ""
-                // });
-
-                //this.$refs.theForm.setTouched({});
             },
         },
         shouldDisableForwardAction() {
@@ -170,7 +147,6 @@ export default {
     },
     methods: {
         arePagePrerequisitesValid() {
-            
             return (
                 store.getters.lineItems.supportingItems !== null &&
                 store.getters.order.serviceLocation.zipCode !== null &&
@@ -212,9 +188,9 @@ export default {
         },
     },
     watch: {
-        zipCode(newValue, oldValue) {
-            if (newValue !== oldValue) {
-                baseMixin.methods.getZipCodeData(newValue).then((r) => {
+        zipCode(current, previous) {
+            if (current !== previous) {
+                baseMixin.methods.getZipCodeData(current).then((r) => {
                     this.zipContainsMilitaryBase = r.containsMilitaryBase;
                 });
             }
@@ -232,12 +208,3 @@ export default {
     },
 };
 </script>
-
-<style lang="scss">
-.form-test-error {
-    text-align: center;
-}
-
-
-
-</style>

From 1bc00e31e713cfef5f0e928c269713237aeacab1 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Mon, 20 Mar 2023 09:50:05 -0400
Subject: [PATCH 05/17] Revert "Clean up"

This reverts commit 80d5f9597077f64afba637883283b1fcf37e1092.
---
 .../mobile-location-modal-questions.vue       | 40 +++++++++++++++++
 .../service-location/service-location.vue     | 45 ++++++++++++++++---
 2 files changed, 79 insertions(+), 6 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 586e1c6de..46cb51d13 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
@@ -22,6 +22,9 @@
                     cmsWidgetName="MobileFeeDisclaimerWidget"
                     typeStyle="caption" />
             </div>
+            <div v-show="errorMessage" class="row my-1 form-test-error">
+                <span class="small mt-0" role="alert">{{ errorMessage }}</span>
+            </div>
             <modal
                 :ref="modalName"
                 :headerText="modalHeaderText"
@@ -57,6 +60,7 @@ 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 store from "@/store";
+import { useField } from "vee-validate";
 
 // Helpers
 import { deepClone } from "@/layouts/service-location/helpers/object-cloning-helper/object-cloning-helper";
@@ -71,6 +75,36 @@ export default {
             displayInvalidZipAlert: false,
         };
     },
+    setup(props) {
+        const inputId = `component-${crypto.randomUUID()}`;
+
+        const propsClone = Object.assign({}, props);
+        const modelValue = propsClone.modelValue;
+
+        const initialValue = modelValue;
+
+        const fieldOptions = {
+            type: "object",
+            value: modelValue,
+            initialValue: initialValue,
+        };
+
+        const { errorMessage, handleBlur, handleChange, meta, validate, errors } = useField(
+            inputId,
+            props.validationRules,
+            fieldOptions
+        );
+
+        return {
+            inputId,
+            errorMessage,
+            handleBlur,
+            handleChange,
+            validate,
+            meta,
+            errors,
+        };
+    },    
     props: {
         modelValue: {
             type: Object,
@@ -93,6 +127,7 @@ export default {
         modalWidgetName: String,
         alertNonServiceableZipWidgetName: String,
         alertInvalidZipWidgetName: String,
+        validationRules: String
     },
     computed: {
         mobileLocationLinkPromptText() {
@@ -158,6 +193,8 @@ export default {
             // on the service-zip-modal-question component
             this.$refs[this.modalName].form.resetForm({
                 values: {
+                    autocomplete: updatedServiceZipCodeInfo.streetAddress,
+                    city: updatedServiceZipCodeInfo.city,
                     state: updatedServiceZipCodeInfo.state,
                     zipCode: updatedServiceZipCodeInfo.zipCode,
                     isVehicleProtected: updatedServiceZipCodeInfo.isVehicleProtected,
@@ -197,10 +234,13 @@ export default {
                 this.internalModel = deepClone(newValue);
 
                 this.resetComponent({
+                    streetAddress: newValue.addressQuestions.streetAddress,
+                    city: newValue.addressQuestions.city,
                     state: newValue.addressQuestions.state,
                     zipCode: newValue.addressQuestions.zipCode,
                     isVehicleProtected: newValue.isVehicleProtected,
                 });
+                
             },
             deep: true,
         },
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 58f440708..d0711cd1b 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -22,11 +22,12 @@
                 @updated-mobile-fee-part="setMobileFeePart"
                 ref="mobileLocationModalQuestions"
                 linkWidgetName="MobileLocationLinkWidget"
-                modalWidgetName="MobileLocationModalWidget" />
+                modalWidgetName="MobileLocationModalWidget" 
+                validationRules="service-address-required"/>   
             <funnel-footer
                 cmsWidgetName="FunnelFooterWidget"
                 ref="funnelFooter"
-                :isForwardActionDisabled="!meta.valid || shouldDisableForwardAction"
+                :isForwardActionDisabled="!meta.valid"
                 @back-clicked="backButtonAction"
                 @ForwardClicked="forwardButtonAction" />
         </div>
@@ -42,7 +43,7 @@ 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";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
-import { Form } from "vee-validate";
+import { Form, defineRule } from "vee-validate";
 
 // Supporting files
 import baseMixin from "@/mixins/base-mixin.js";
@@ -50,8 +51,24 @@ import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
 import { getPricedMobileFeePart } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
+import { errorMessages } from "@/constants/error-messages";
 import store from "@/store";
 
+defineRule("service-address-required", (value) => {
+    const isValid = 
+        value.addressQuestions.streetAddress !== "" && 
+        value.addressQuestions.city !== "" && 
+        value.addressQuestions.state !== "" && 
+        value.addressQuestions.zipCode !== "" &&
+        value.isVehicleProtected !== null;
+
+    if (!isValid) {
+        return errorMessages.SERVICE_ADDRESS_REQUIRED;
+    }  
+
+    return isValid;
+});
+
 export default {
     name: "service-location",
     data() {
@@ -139,6 +156,12 @@ export default {
                 this.state = newValue.addressQuestions.state;
                 this.zipCode = newValue.addressQuestions.zipCode;
                 this.isVehicleProtected = newValue.isVehicleProtected;
+
+                // setErrors({
+                //     mobileLocationQuestions: ""
+                // });
+
+                //this.$refs.theForm.setTouched({});
             },
         },
         shouldDisableForwardAction() {
@@ -147,6 +170,7 @@ export default {
     },
     methods: {
         arePagePrerequisitesValid() {
+            
             return (
                 store.getters.lineItems.supportingItems !== null &&
                 store.getters.order.serviceLocation.zipCode !== null &&
@@ -188,9 +212,9 @@ export default {
         },
     },
     watch: {
-        zipCode(current, previous) {
-            if (current !== previous) {
-                baseMixin.methods.getZipCodeData(current).then((r) => {
+        zipCode(newValue, oldValue) {
+            if (newValue !== oldValue) {
+                baseMixin.methods.getZipCodeData(newValue).then((r) => {
                     this.zipContainsMilitaryBase = r.containsMilitaryBase;
                 });
             }
@@ -208,3 +232,12 @@ export default {
     },
 };
 </script>
+
+<style lang="scss">
+.form-test-error {
+    text-align: center;
+}
+
+
+
+</style>

From be31530bfa9990cae45781afa51714f775742936 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Mon, 20 Mar 2023 09:50:05 -0400
Subject: [PATCH 06/17] Revert "Revert "Clean up""

This reverts commit 1bc00e31e713cfef5f0e928c269713237aeacab1.
---
 .../mobile-location-modal-questions.vue       | 40 -----------------
 .../service-location/service-location.vue     | 45 +++----------------
 2 files changed, 6 insertions(+), 79 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 46cb51d13..586e1c6de 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
@@ -22,9 +22,6 @@
                     cmsWidgetName="MobileFeeDisclaimerWidget"
                     typeStyle="caption" />
             </div>
-            <div v-show="errorMessage" class="row my-1 form-test-error">
-                <span class="small mt-0" role="alert">{{ errorMessage }}</span>
-            </div>
             <modal
                 :ref="modalName"
                 :headerText="modalHeaderText"
@@ -60,7 +57,6 @@ 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 store from "@/store";
-import { useField } from "vee-validate";
 
 // Helpers
 import { deepClone } from "@/layouts/service-location/helpers/object-cloning-helper/object-cloning-helper";
@@ -75,36 +71,6 @@ export default {
             displayInvalidZipAlert: false,
         };
     },
-    setup(props) {
-        const inputId = `component-${crypto.randomUUID()}`;
-
-        const propsClone = Object.assign({}, props);
-        const modelValue = propsClone.modelValue;
-
-        const initialValue = modelValue;
-
-        const fieldOptions = {
-            type: "object",
-            value: modelValue,
-            initialValue: initialValue,
-        };
-
-        const { errorMessage, handleBlur, handleChange, meta, validate, errors } = useField(
-            inputId,
-            props.validationRules,
-            fieldOptions
-        );
-
-        return {
-            inputId,
-            errorMessage,
-            handleBlur,
-            handleChange,
-            validate,
-            meta,
-            errors,
-        };
-    },    
     props: {
         modelValue: {
             type: Object,
@@ -127,7 +93,6 @@ export default {
         modalWidgetName: String,
         alertNonServiceableZipWidgetName: String,
         alertInvalidZipWidgetName: String,
-        validationRules: String
     },
     computed: {
         mobileLocationLinkPromptText() {
@@ -193,8 +158,6 @@ export default {
             // on the service-zip-modal-question component
             this.$refs[this.modalName].form.resetForm({
                 values: {
-                    autocomplete: updatedServiceZipCodeInfo.streetAddress,
-                    city: updatedServiceZipCodeInfo.city,
                     state: updatedServiceZipCodeInfo.state,
                     zipCode: updatedServiceZipCodeInfo.zipCode,
                     isVehicleProtected: updatedServiceZipCodeInfo.isVehicleProtected,
@@ -234,13 +197,10 @@ export default {
                 this.internalModel = deepClone(newValue);
 
                 this.resetComponent({
-                    streetAddress: newValue.addressQuestions.streetAddress,
-                    city: newValue.addressQuestions.city,
                     state: newValue.addressQuestions.state,
                     zipCode: newValue.addressQuestions.zipCode,
                     isVehicleProtected: newValue.isVehicleProtected,
                 });
-                
             },
             deep: true,
         },
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index d0711cd1b..58f440708 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -22,12 +22,11 @@
                 @updated-mobile-fee-part="setMobileFeePart"
                 ref="mobileLocationModalQuestions"
                 linkWidgetName="MobileLocationLinkWidget"
-                modalWidgetName="MobileLocationModalWidget" 
-                validationRules="service-address-required"/>   
+                modalWidgetName="MobileLocationModalWidget" />
             <funnel-footer
                 cmsWidgetName="FunnelFooterWidget"
                 ref="funnelFooter"
-                :isForwardActionDisabled="!meta.valid"
+                :isForwardActionDisabled="!meta.valid || shouldDisableForwardAction"
                 @back-clicked="backButtonAction"
                 @ForwardClicked="forwardButtonAction" />
         </div>
@@ -43,7 +42,7 @@ 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";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
-import { Form, defineRule } from "vee-validate";
+import { Form } from "vee-validate";
 
 // Supporting files
 import baseMixin from "@/mixins/base-mixin.js";
@@ -51,24 +50,8 @@ import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
 import { getPricedMobileFeePart } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
-import { errorMessages } from "@/constants/error-messages";
 import store from "@/store";
 
-defineRule("service-address-required", (value) => {
-    const isValid = 
-        value.addressQuestions.streetAddress !== "" && 
-        value.addressQuestions.city !== "" && 
-        value.addressQuestions.state !== "" && 
-        value.addressQuestions.zipCode !== "" &&
-        value.isVehicleProtected !== null;
-
-    if (!isValid) {
-        return errorMessages.SERVICE_ADDRESS_REQUIRED;
-    }  
-
-    return isValid;
-});
-
 export default {
     name: "service-location",
     data() {
@@ -156,12 +139,6 @@ export default {
                 this.state = newValue.addressQuestions.state;
                 this.zipCode = newValue.addressQuestions.zipCode;
                 this.isVehicleProtected = newValue.isVehicleProtected;
-
-                // setErrors({
-                //     mobileLocationQuestions: ""
-                // });
-
-                //this.$refs.theForm.setTouched({});
             },
         },
         shouldDisableForwardAction() {
@@ -170,7 +147,6 @@ export default {
     },
     methods: {
         arePagePrerequisitesValid() {
-            
             return (
                 store.getters.lineItems.supportingItems !== null &&
                 store.getters.order.serviceLocation.zipCode !== null &&
@@ -212,9 +188,9 @@ export default {
         },
     },
     watch: {
-        zipCode(newValue, oldValue) {
-            if (newValue !== oldValue) {
-                baseMixin.methods.getZipCodeData(newValue).then((r) => {
+        zipCode(current, previous) {
+            if (current !== previous) {
+                baseMixin.methods.getZipCodeData(current).then((r) => {
                     this.zipContainsMilitaryBase = r.containsMilitaryBase;
                 });
             }
@@ -232,12 +208,3 @@ export default {
     },
 };
 </script>
-
-<style lang="scss">
-.form-test-error {
-    text-align: center;
-}
-
-
-
-</style>

From 521937c388c2805f05a1539a4c45a89f03c9da5e Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Mon, 20 Mar 2023 09:34:31 -0400
Subject: [PATCH 07/17] Revert "Revert "Added SERVCE_ADDRESS_REQUIRED Error
 Msg""

This reverts commit 0a78965a3772642813a105f543d16ec54f4e0c9f.
---
 src/constants/error-messages.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js
index 739698861..5631b44c7 100644
--- a/src/constants/error-messages.js
+++ b/src/constants/error-messages.js
@@ -18,7 +18,6 @@ const errorMessages = {
     LAST_NAME_REQUIRED: "Please enter your last name",
     EMAIL_ADDRESS_REQUIRED: "Please enter your email address",
     EMAIL_ADDRESS_FORMAT: "Please enter a valid email address",
-    SERVICE_ADDRESS_REQUIRED: "Please enter your service address",
     SERVICE_ZIP_REQUIRED: "Please enter your service ZIP",
     SERVICE_ZIP_FORMAT: "Please enter a valid service ZIP",
     VIN_REQUIRED: "Please enter your VIN",

From 2e7de50c967ca5c457ddac2081fa5417f2e1b8c5 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Mon, 20 Mar 2023 09:34:31 -0400
Subject: [PATCH 08/17] Revert "Added SERVCE_ADDRESS_REQUIRED Error Msg"

This reverts commit 6039bacf0da8765f0223d20b8f078bf42262397c.
---
 src/constants/error-messages.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js
index 5631b44c7..739698861 100644
--- a/src/constants/error-messages.js
+++ b/src/constants/error-messages.js
@@ -18,6 +18,7 @@ const errorMessages = {
     LAST_NAME_REQUIRED: "Please enter your last name",
     EMAIL_ADDRESS_REQUIRED: "Please enter your email address",
     EMAIL_ADDRESS_FORMAT: "Please enter a valid email address",
+    SERVICE_ADDRESS_REQUIRED: "Please enter your service address",
     SERVICE_ZIP_REQUIRED: "Please enter your service ZIP",
     SERVICE_ZIP_FORMAT: "Please enter a valid service ZIP",
     VIN_REQUIRED: "Please enter your VIN",

From a0ab81acaad470453cd77a618029a22123c16a09 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Fri, 17 Mar 2023 14:42:28 -0400
Subject: [PATCH 09/17] Revert "WIP"

This reverts commit d4a938f3c3f540c3ef6b81671d0ca799bdb42fd3.
---
 src/constants/error-messages.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js
index 739698861..5631b44c7 100644
--- a/src/constants/error-messages.js
+++ b/src/constants/error-messages.js
@@ -18,7 +18,6 @@ const errorMessages = {
     LAST_NAME_REQUIRED: "Please enter your last name",
     EMAIL_ADDRESS_REQUIRED: "Please enter your email address",
     EMAIL_ADDRESS_FORMAT: "Please enter a valid email address",
-    SERVICE_ADDRESS_REQUIRED: "Please enter your service address",
     SERVICE_ZIP_REQUIRED: "Please enter your service ZIP",
     SERVICE_ZIP_FORMAT: "Please enter a valid service ZIP",
     VIN_REQUIRED: "Please enter your VIN",

From 4c60dc054f40b8e241a16ac26762460a34d25df4 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Mon, 20 Mar 2023 10:30:36 -0400
Subject: [PATCH 10/17] Added autocomplete and city reset for validation

---
 .../mobile-location-modal-questions.vue                       | 4 ++++
 1 file changed, 4 insertions(+)

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 586e1c6de..9ba81f14a 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
@@ -158,6 +158,8 @@ export default {
             // on the service-zip-modal-question component
             this.$refs[this.modalName].form.resetForm({
                 values: {
+                    autocomplete: updatedServiceZipCodeInfo.streetAddress,
+                    city: updatedServiceZipCodeInfo.city,
                     state: updatedServiceZipCodeInfo.state,
                     zipCode: updatedServiceZipCodeInfo.zipCode,
                     isVehicleProtected: updatedServiceZipCodeInfo.isVehicleProtected,
@@ -197,6 +199,8 @@ export default {
                 this.internalModel = deepClone(newValue);
 
                 this.resetComponent({
+                    autocomplete: updatedServiceZipCodeInfo.streetAddress,
+                    city: updatedServiceZipCodeInfo.city,
                     state: newValue.addressQuestions.state,
                     zipCode: newValue.addressQuestions.zipCode,
                     isVehicleProtected: newValue.isVehicleProtected,

From 12c5d684d800df90f87a9e4aabb6c64160413573 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Mon, 20 Mar 2023 10:46:02 -0400
Subject: [PATCH 11/17] Minor correction to previous commit

---
 .../mobile-location-modal-questions.vue                         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 9ba81f14a..2974254b3 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
@@ -199,7 +199,7 @@ export default {
                 this.internalModel = deepClone(newValue);
 
                 this.resetComponent({
-                    autocomplete: updatedServiceZipCodeInfo.streetAddress,
+                    streetAddress: updatedServiceZipCodeInfo.streetAddress,
                     city: updatedServiceZipCodeInfo.city,
                     state: newValue.addressQuestions.state,
                     zipCode: newValue.addressQuestions.zipCode,

From e0a57916750417890b95240d22e107b8fff7f156 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Mon, 20 Mar 2023 14:15:51 -0400
Subject: [PATCH 12/17] Another correction for previous commit

---
 .../mobile-location-modal-questions.vue                       | 4 ++--
 1 file changed, 2 insertions(+), 2 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 2974254b3..5261d81e0 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
@@ -199,8 +199,8 @@ export default {
                 this.internalModel = deepClone(newValue);
 
                 this.resetComponent({
-                    streetAddress: updatedServiceZipCodeInfo.streetAddress,
-                    city: updatedServiceZipCodeInfo.city,
+                    streetAddress: newValue.addressQuestions.streetAddress,
+                    city: newValue.addressQuestions.city,
                     state: newValue.addressQuestions.state,
                     zipCode: newValue.addressQuestions.zipCode,
                     isVehicleProtected: newValue.isVehicleProtected,

From df2665a2ce0a9a1a8dbf34b902daa69e1d48bbc5 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Fri, 24 Mar 2023 13:44:31 -0400
Subject: [PATCH 13/17] Technical review changes

---
 src/constants/error-messages.js               |  1 +
 src/digital-components/modal/modal.vue        | 15 +++++----
 .../textbox-question/textbox-question.vue     | 28 +++++++++++++++--
 .../mobile-location-modal-questions.vue       | 13 +++++++-
 .../service-location/service-location.vue     | 31 ++++++++++++++++---
 .../service-zip-modal-question.vue            |  2 +-
 6 files changed, 74 insertions(+), 16 deletions(-)

diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js
index 5631b44c7..3c3f776c1 100644
--- a/src/constants/error-messages.js
+++ b/src/constants/error-messages.js
@@ -25,6 +25,7 @@ const errorMessages = {
         "Invalid VIN. Please make sure that you entered the correct 17-digit, alpha-numeric number. VINs do not contain the letters I, O, or Q",
     OPTION_REQUIRED: "Please select an option",
     VEHICLE_REQUIRED: "Please select a vehicle",
+    MOBILE_LOCATION_REQUIRED: "Please enter your service address",
 };
 
 export { errorMessages };
diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index a18881796..e10f437d3 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -60,14 +60,17 @@ export default {
     setup() {
         const modalId = `modal-${crypto.randomUUID()}`;
 
-        const form = useForm();
+        const { meta, validate, resetForm } = useForm();
+
         const isFormTouched = useIsFormTouched();
         const isFormDirty = useIsFormDirty();
         const isFormValid = useIsFormValid();
 
         return {
             modalId,
-            form,
+            meta,
+            validate,
+            resetForm,
             isFormTouched,
             isFormDirty,
             isFormValid,
@@ -75,7 +78,7 @@ export default {
     },
     methods: {
         async validateAndEmit() {
-            const validationResult = await this.form.validate();
+            const validationResult = await this.validate();
             if (validationResult.valid) {
                 this.$emit("footer-button-event");
             } else {
@@ -103,10 +106,10 @@ export default {
     },
     computed: {
         isFooterButtonDisabled() {
-            if (!this.isFormTouched) {
-                return !this.isFormValid;
+            if (!this.meta.touched) {
+                return !this.meta.valid;
             }
-            return !this.isFormDirty || !this.isFormValid;
+            return !this.meta.dirty || !this.meta.valid;
         },
     },
     components: {
diff --git a/src/digital-components/textbox-question/textbox-question.vue b/src/digital-components/textbox-question/textbox-question.vue
index 2766e2cd9..335c47a60 100644
--- a/src/digital-components/textbox-question/textbox-question.vue
+++ b/src/digital-components/textbox-question/textbox-question.vue
@@ -1,11 +1,19 @@
 <template>
-    <div class="textbox-question" :class="(errors && errors.length) || hasError ? 'has-error' : ''">
+    <div
+        class="textbox-question"
+        :class="[
+            (errors && errors.length) || hasError ? 'has-error' : '',
+            hideInput ? 'hide-input' : '',
+        ]">
         <label
             v-if="displayQuestionText"
             :for="inputId"
             :aria-label="questionText"
             class="form-label"
-            :class="[questionAlignment === 'center' ? 'text-center w-100 mb-5' : '']"
+            :class="[
+                questionAlignment === 'center' ? 'text-center w-100 mb-5' : '',
+                hideInput ? 'hide-input' : '',
+            ]"
             v-html="questionText"></label>
         <div class="input-wrapper" :class="[includeSearchIcon ? 'has-search-icon' : '']">
             <input
@@ -25,6 +33,7 @@
                     hasIcon ? 'has-icon' : '',
                     iconRight ? 'icon-right' : '',
                     cornerStyle === 'rounded' ? 'rounded-pill' : '',
+                    hideInput ? 'hide-input' : '',
                 ]"
                 :validationRules="validationRules"
                 @change="handleChange"
@@ -34,7 +43,12 @@
             <button v-if="includeSearchIcon" type="submit" aria-label="Search button" />
         </div>
         <div v-show="errorMessage" class="row my-1 form-test-error">
-            <span class="d-inline-flex small mt-0" role="alert">{{ errorMessage }}</span>
+            <span
+                class="d-inline-flex small mt-0"
+                role="alert"
+                :class="[centerErrorMessage ? 'center-error-message' : '']"
+                >{{ errorMessage }}</span
+            >
         </div>
     </div>
 </template>
@@ -74,6 +88,8 @@ export default {
         questionAlignment: String, // Left or center. Left is default.
         cornerStyle: String, // Rounded or square. Square is default.
         includeSearchIcon: Boolean,
+        hideInput: Boolean,
+        centerErrorMessage: Boolean,
     },
     setup(props) {
         const inputId = !props.customInputId ? `input-${crypto.randomUUID()}` : props.customInputId;
@@ -142,6 +158,12 @@ export default {
 
 <style lang="scss">
 .textbox-question {
+    .hide-input {
+        display: none;
+    }
+    .center-error-message {
+        justify-content: center !important;
+    }
     label {
         color: $black;
         font-weight: 500;
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 5261d81e0..3872635e2 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
@@ -26,6 +26,8 @@
                 :ref="modalName"
                 :headerText="modalHeaderText"
                 :footerButtonText="modalFooterText"
+                :onModalOpenedCallback="onModalOpened"
+                :onModalClosedCallback="onModalClosed"
                 @footer-button-event="setMobileLocation">
                 <addressQuestions
                     ref="addressQuestions"
@@ -152,11 +154,20 @@ export default {
         closeModal() {
             this.$refs[this.modalName].closeModal();
         },
+
+        onModalOpened() {
+            this.internalModel = deepClone(this.modelValue);
+        },
+
+        onModalClosed() {
+            this.internalModel = deepClone(this.modelValue);
+        },
+
         resetComponent(updatedServiceZipCodeInfo) {
             // Reset the validation form, setting the initial values
             // for the state and zipCode to those that were entered
             // on the service-zip-modal-question component
-            this.$refs[this.modalName].form.resetForm({
+            this.$refs[this.modalName].resetForm({
                 values: {
                     autocomplete: updatedServiceZipCodeInfo.streetAddress,
                     city: updatedServiceZipCodeInfo.city,
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 58f440708..04e8a7359 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -23,10 +23,16 @@
                 ref="mobileLocationModalQuestions"
                 linkWidgetName="MobileLocationLinkWidget"
                 modalWidgetName="MobileLocationModalWidget" />
+            <textboxQuestion
+                ref="mobileLocationQuestionsError"
+                v-model="mobileLocationValidationField"
+                validationRules="mobile-location-required"
+                hideInput
+                centerErrorMessage />
             <funnel-footer
                 cmsWidgetName="FunnelFooterWidget"
                 ref="funnelFooter"
-                :isForwardActionDisabled="!meta.valid || shouldDisableForwardAction"
+                :isForwardActionDisabled="!meta.valid"
                 @back-clicked="backButtonAction"
                 @ForwardClicked="forwardButtonAction" />
         </div>
@@ -42,7 +48,8 @@ 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";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
-import { Form } from "vee-validate";
+import { Form, defineRule } from "vee-validate";
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
 
 // Supporting files
 import baseMixin from "@/mixins/base-mixin.js";
@@ -51,6 +58,10 @@ import { settleAllPromises } from "@/helpers/layout-helper";
 import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
 import { getPricedMobileFeePart } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
 import store from "@/store";
+import { errorMessages } from "@/constants/error-messages";
+import { required } from "@/helpers/validation-rules";
+
+defineRule("mobile-location-required", required(errorMessages.MOBILE_LOCATION_REQUIRED));
 
 export default {
     name: "service-location",
@@ -66,6 +77,7 @@ export default {
             isZipServiceableInShop: null,
             mobileFeePart: null,
             zipContainsMilitaryBase: false,
+            mobileLocationValidationField: null,
         };
     },
     async beforeRouteEnter(to, from, next) {
@@ -139,6 +151,8 @@ export default {
                 this.state = newValue.addressQuestions.state;
                 this.zipCode = newValue.addressQuestions.zipCode;
                 this.isVehicleProtected = newValue.isVehicleProtected;
+
+                this.mobileLocationValidationField = "isValid";
             },
         },
         shouldDisableForwardAction() {
@@ -180,6 +194,12 @@ export default {
 
             this.isVehicleProtected = null;
         },
+        setServiceZipCodeModalMeta(meta) {
+            this.serviceZipCodeMeta = meta;
+        },
+        setMobileLocationModalMeta(meta) {
+            this.mobileLocationMeta = meta;
+        },
         backButtonAction() {
             this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
@@ -188,9 +208,9 @@ export default {
         },
     },
     watch: {
-        zipCode(current, previous) {
-            if (current !== previous) {
-                baseMixin.methods.getZipCodeData(current).then((r) => {
+        zipCode(newValue, oldValue) {
+            if (newValue !== oldValue) {
+                baseMixin.methods.getZipCodeData(newValue).then((r) => {
                     this.zipContainsMilitaryBase = r.containsMilitaryBase;
                 });
             }
@@ -205,6 +225,7 @@ export default {
         funnelSubHeader,
         Form,
         loadingModal,
+        textboxQuestion,
     },
 };
 </script>
diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
index 0d2c35000..55f849b53 100644
--- a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
+++ b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
@@ -38,7 +38,7 @@ import textLink from "@/ux-components/text-link/text-link";
 import serviceZipQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-question/service-zip-question";
 import modal from "@/digital-components/modal/modal";
 import alert from "@/ux-components/alert/alert";
-import store from "@/store";
+
 import { getPricedMobileFeePart } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
 
 export default {

From 0e1be70c231c6d8e7a0389aa74f6220781bff3ce Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Fri, 24 Mar 2023 14:06:01 -0400
Subject: [PATCH 14/17] Minor formating changes

---
 src/digital-components/modal/modal.vue                 |  9 +--------
 .../mobile-location-modal-questions.vue                | 10 +++-------
 .../service-zip-modal-question.vue                     | 10 ----------
 3 files changed, 4 insertions(+), 25 deletions(-)

diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index 890351d8d..56b6c74d6 100644
--- a/src/digital-components/modal/modal.vue
+++ b/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 { useForm, useIsFormTouched, useIsFormDirty, useIsFormValid } from "vee-validate";
+import { useForm } from "vee-validate";
 
 export default {
     name: "modal",
@@ -62,18 +62,11 @@ export default {
 
         const { meta, validate, resetForm } = useForm();
 
-        const isFormTouched = useIsFormTouched();
-        const isFormDirty = useIsFormDirty();
-        const isFormValid = useIsFormValid();
-
         return {
             modalId,
             meta,
             validate,
             resetForm,
-            isFormTouched,
-            isFormDirty,
-            isFormValid,
         };
     },
     methods: {
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 afc81261f..153521ea4 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
@@ -58,7 +58,6 @@ import modal from "@/digital-components/modal/modal";
 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 store from "@/store";
 
 // Helpers
 import { deepClone } from "@/layouts/service-location/helpers/object-cloning-helper/object-cloning-helper";
@@ -140,7 +139,6 @@ export default {
         modalFooterText() {
             return this.getCmsContent(this.modalWidgetName, "FooterText");
         },
-
         addressModel: {
             get: function () {
                 return this.modelValue.addressQuestions;
@@ -154,15 +152,12 @@ export default {
         closeModal() {
             this.$refs[this.modalName].closeModal();
         },
-
         onModalOpened() {
             this.internalModel = deepClone(this.modelValue);
         },
-
         onModalClosed() {
             this.internalModel = deepClone(this.modelValue);
         },
-
         resetComponent(updatedServiceZipCodeInfo) {
             // Reset the validation form, setting the initial values
             // for the state and zipCode to those that were entered
@@ -195,12 +190,13 @@ export default {
 
                 const mobileFeePart = await getPricedMobileFeePart(serviceZipCode);
 
-                // emit it to parent
+                // emit additional data to parent
                 this.$emit("updated-mobile-fee-part", mobileFeePart);
+                this.$emit("updated-contains-military-base", zipCodeData.containsMilitaryBase);
 
                 // Update the page level model
                 this.$emit("update:modelValue", this.internalModel);
-                this.$emit("updated-contains-military-base", zipCodeData.containsMilitaryBase);
+
                 this.closeModal();
             }
         },
diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
index 88ed17d21..e94388e06 100644
--- a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
+++ b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
@@ -96,49 +96,39 @@ export default {
         resetAlerts() {
             this.displayInvalidZipAlert = false;
         },
-
         resetsOnZipInput() {
             this.resetAlerts();
         },
-
         focusOnZipInput() {
             const input = document.getElementById(this.serviceZipCodeTextInputId);
             input?.focus();
         },
-
         copyModel(modelToCopy) {
             return {
                 state: modelToCopy.state,
                 zipCode: modelToCopy.zipCode,
             };
         },
-
         openModal() {
             this.$refs[this.modalName].openModal();
         },
-
         closeModal() {
             this.$refs[this.modalName].closeModal();
         },
-
         resetModalButtonStyle() {
             this.$refs[this.modalName].resetButtonStyle();
         },
-
         onInputIdAssigned(inputId) {
             this.serviceZipCodeTextInputId = inputId;
         },
-
         onModalOpened() {
             this.internalModel.zipCode = this.modelValue.zipCode;
             this.focusOnZipInput();
         },
-
         onModalClosed() {
             this.internalModel.zipCode = this.modelValue.zipCode;
             this.resetsOnZipInput();
         },
-
         async setZipCode() {
             if (this.internalModel.zipCode !== this.modelValue.zipCode) {
                 this.resetAlerts();

From 3606e7a1c77dcc4510fa233fca0d8414101d6f57 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Fri, 24 Mar 2023 14:31:34 -0400
Subject: [PATCH 15/17] Updated unit tests

---
 src/digital-components/modal/modal.spec.js | 104 ++++++++++++++++-----
 1 file changed, 80 insertions(+), 24 deletions(-)

diff --git a/src/digital-components/modal/modal.spec.js b/src/digital-components/modal/modal.spec.js
index b738ac6ae..4f8da5c86 100644
--- a/src/digital-components/modal/modal.spec.js
+++ b/src/digital-components/modal/modal.spec.js
@@ -1,16 +1,14 @@
 jest.mock("vee-validate", () => ({
     useForm: jest.fn(),
-    useIsFormTouched: jest.fn(),
-    useIsFormDirty: jest.fn(),
-    useIsFormValid: jest.fn(),
 }));
 
 const mockValidate = (returnValue) => jest.fn(async () => Promise.resolve({ valid: returnValue }));
+const mockMeta = (returnValue) => jest.fn(async () => Promise.resolve(returnValue));
 
 import { shallowMount } from "@vue/test-utils";
 import modal from "./modal";
 import crypto from "crypto";
-import { useForm, useIsFormDirty, useIsFormTouched, useIsFormValid } from "vee-validate";
+import { useForm } from "vee-validate";
 import { Modal } from "bootstrap";
 
 const footerButtonText = "Sample footer text here.";
@@ -21,6 +19,18 @@ global.crypto = crypto;
 describe("modal.vue", () => {
     it("Should display modal header text when headerText is defined", async () => {
         // Arrange / Act
+        const fakeMeta = {
+            touched: true,
+            dirty: true,
+            valid: true,
+            validated: true,
+        }
+
+        useForm.mockReturnValue({
+            meta: mockMeta(fakeMeta),
+            validate: mockValidate(true),
+        });
+        
         const wrapper = shallowMount(modal, {
             props: {
                 headerText: headerText,
@@ -35,6 +45,17 @@ describe("modal.vue", () => {
 
     it("Should display footer button text when footerButtonText is defined", async () => {
         // Arrange / Act
+        const fakeMeta = {
+            touched: true,
+            dirty: true,
+            valid: true,
+            validated: true,
+        }
+
+        useForm.mockReturnValue({
+            meta: mockMeta(fakeMeta),
+            validate: mockValidate(true),
+        });
         const wrapper = shallowMount(modal, {
             props: {
                 footerButtonText: footerButtonText,
@@ -48,7 +69,15 @@ describe("modal.vue", () => {
 
     it("Should emit 'footer-button-event' if the form is valid", async () => {
         // Arrange
+        const fakeMeta = {
+            touched: true,
+            dirty: true,
+            valid: true,
+            validated: true,
+        }
+
         useForm.mockReturnValue({
+            meta: mockMeta(fakeMeta),
             validate: mockValidate(true),
         });
 
@@ -72,7 +101,15 @@ describe("modal.vue", () => {
 
     it("Should not emit 'footer-button-event' if the form is invalid", async () => {
         // Arrange
+        const fakeMeta = {
+            touched: true,
+            dirty: true,
+            valid: false,
+            validated: true,
+        }
+
         useForm.mockReturnValue({
+            meta: mockMeta(fakeMeta),
             validate: mockValidate(false),
         });
 
@@ -96,11 +133,17 @@ describe("modal.vue", () => {
 
     it("Should have a disabled footer button when the form has not been touched", async () => {
         // Arrange / Act
-        useForm.mockReturnValue({
-            validate: mockValidate(false),
-        });
+        const fakeMeta = {
+            touched: true,
+            dirty: true,
+            valid: true,
+            validated: true,
+        }
 
-        useIsFormTouched.mockReturnValue(false);
+        useForm.mockReturnValue({
+            meta: mockMeta(fakeMeta),
+            validate: mockValidate(true),
+        });
 
         const resetButtonStyle = jest.fn();
         const wrapper = shallowMount(modal, {
@@ -118,13 +161,17 @@ describe("modal.vue", () => {
 
     it("Should have a disabled footer button when the form is invalid", async () => {
         // Arrange / Act
-        useForm.mockReturnValue({
-            validate: mockValidate(false),
-        });
+        const fakeMeta = {
+            touched: true,
+            dirty: true,
+            valid: true,
+            validated: true,
+        }
 
-        useIsFormTouched.mockReturnValue(true);
-        useIsFormDirty.mockReturnValue(true);
-        useIsFormValid.mockReturnValue(false);
+        useForm.mockReturnValue({
+            meta: mockMeta(fakeMeta),
+            validate: mockValidate(true),
+        });
 
         const resetButtonStyle = jest.fn();
         const wrapper = shallowMount(modal, {
@@ -142,12 +189,17 @@ describe("modal.vue", () => {
 
     it("Should call bootstrap Modal method 'show' when calling 'openModal'", async () => {
         // Arrange
-        useForm.mockReturnValue({
-            validate: mockValidate(false),
-        });
+        const fakeMeta = {
+            touched: true,
+            dirty: true,
+            valid: true,
+            validated: true,
+        }
 
-        useIsFormDirty.mockReturnValue(true);
-        useIsFormValid.mockReturnValue(true);
+        useForm.mockReturnValue({
+            meta: mockMeta(fakeMeta),
+            validate: mockValidate(true),
+        });
 
         const showMock = jest.spyOn(Modal.prototype, "show");
 
@@ -170,13 +222,17 @@ describe("modal.vue", () => {
 
     it("Should call bootstrap Modal method 'hide' when calling 'closeModal'", async () => {
         // Arrange
+        const fakeMeta = {
+            touched: true,
+            dirty: true,
+            valid: true,
+            validated: true,
+        }
+
         useForm.mockReturnValue({
-            validate: mockValidate(false),
+            meta: mockMeta(fakeMeta),
+            validate: mockValidate(true),
         });
-
-        useIsFormDirty.mockReturnValue(true);
-        useIsFormValid.mockReturnValue(true);
-
         const hideMock = jest.spyOn(Modal.prototype, "hide");
 
         const resetButtonStyle = jest.fn();

From 519233cad50bff955a3d179cbf95280745fd8483 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Fri, 24 Mar 2023 15:06:47 -0400
Subject: [PATCH 16/17] Prettified

---
 src/digital-components/modal/modal.spec.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/digital-components/modal/modal.spec.js b/src/digital-components/modal/modal.spec.js
index 4f8da5c86..a948fe99a 100644
--- a/src/digital-components/modal/modal.spec.js
+++ b/src/digital-components/modal/modal.spec.js
@@ -24,13 +24,13 @@ describe("modal.vue", () => {
             dirty: true,
             valid: true,
             validated: true,
-        }
+        };
 
         useForm.mockReturnValue({
             meta: mockMeta(fakeMeta),
             validate: mockValidate(true),
         });
-        
+
         const wrapper = shallowMount(modal, {
             props: {
                 headerText: headerText,
@@ -50,7 +50,7 @@ describe("modal.vue", () => {
             dirty: true,
             valid: true,
             validated: true,
-        }
+        };
 
         useForm.mockReturnValue({
             meta: mockMeta(fakeMeta),
@@ -74,7 +74,7 @@ describe("modal.vue", () => {
             dirty: true,
             valid: true,
             validated: true,
-        }
+        };
 
         useForm.mockReturnValue({
             meta: mockMeta(fakeMeta),
@@ -106,7 +106,7 @@ describe("modal.vue", () => {
             dirty: true,
             valid: false,
             validated: true,
-        }
+        };
 
         useForm.mockReturnValue({
             meta: mockMeta(fakeMeta),
@@ -138,7 +138,7 @@ describe("modal.vue", () => {
             dirty: true,
             valid: true,
             validated: true,
-        }
+        };
 
         useForm.mockReturnValue({
             meta: mockMeta(fakeMeta),
@@ -166,7 +166,7 @@ describe("modal.vue", () => {
             dirty: true,
             valid: true,
             validated: true,
-        }
+        };
 
         useForm.mockReturnValue({
             meta: mockMeta(fakeMeta),
@@ -194,7 +194,7 @@ describe("modal.vue", () => {
             dirty: true,
             valid: true,
             validated: true,
-        }
+        };
 
         useForm.mockReturnValue({
             meta: mockMeta(fakeMeta),
@@ -227,7 +227,7 @@ describe("modal.vue", () => {
             dirty: true,
             valid: true,
             validated: true,
-        }
+        };
 
         useForm.mockReturnValue({
             meta: mockMeta(fakeMeta),

From 25d03a1c0ac2178bda18d6312f2b137b7d4551fe Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Mon, 27 Mar 2023 10:31:54 -0400
Subject: [PATCH 17/17] Removed unused watch statement

---
 src/layouts/service-location/service-location.vue | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 8b3042678..261e84521 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -216,15 +216,6 @@ export default {
             navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal });
         },
     },
-    watch: {
-        zipCode(newValue, oldValue) {
-            if (newValue !== oldValue) {
-                baseMixin.methods.getZipCodeData(newValue).then((r) => {
-                    this.zipContainsMilitaryBase = r.containsMilitaryBase;
-                });
-            }
-        },
-    },
     components: {
         alert,
         serviceZipModalQuestion,