From 7db466fc60262327ccfdd77cd9d5197814c5b111 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Wed, 8 Feb 2023 13:33:10 -0500
Subject: [PATCH] Additional consistency changes between the two modals

---
 .../address-questions/address-questions.vue   |  5 --
 .../service-location/service-location.vue     |  5 ++
 .../service-zip-modal-question.vue            | 61 ++++++++++++++++---
 3 files changed, 59 insertions(+), 12 deletions(-)

diff --git a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
index 9ed26f29d..aed1b5147 100644
--- a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
+++ b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
@@ -409,11 +409,6 @@ export default {
                 }
             },
         },
-        "addressModel.streetAddress": {
-            handler(newValue, oldValue) {
-                console.log(`I got changed from ${oldValue} to ${newValue}`);
-            },
-        },
     },
     components: {
         textboxQuestion,
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index f3627d362..2ed5f676b 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -5,6 +5,7 @@ fmg
             <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
             <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
             <serviceZipModalQuestion
+                v-model="serviceZipQuestion"
                 cmsWidgetName="ServiceZipModalWidget"
                 textboxQuestionWidgetName="ServiceZipQuestionWidget"
                 alertNonServiceableZipWidgetName="AlertNonServiceableZipWidget"
@@ -41,6 +42,10 @@ export default {
     name: "service-location",
     data() {
         return {
+            serviceZipQuestion: {
+                serviceState: "",
+                serviceZipCode: "",
+            },
             mobileLocationQuestions: {
                 addressQuestions: {
                     streetAddress: "",
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 8f0cbd049..c6d293590 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
@@ -1,16 +1,16 @@
 <template>
     <div class="text-center">
         <label
-            :for="displayModalLink"
-            :aria-label="questionText"
+            :for="serviceLocationLinkPromptId"
+            :aria-label="serviceLocationLinkPromptText"
             class="form-label fw-bold w-100 ps-4 pe-4 pt-4"
             :class="[questionAlignment === 'center' ? 'text-center w-100 mb-5' : '']"
-            v-html="questionText"></label>
+            v-html="serviceLocationLinkPromptText"></label>
         <div class="update-zip-text-link">
             <textLink
-                id="displayModalLink"
+                id="serviceLocationLinkPromptId"
                 linkType="text"
-                :text="this.serviceZipDisplayText"
+                :text="this.serviceZipLinkText"
                 href="#!"
                 @click-event="openZipCodeModal"
                 aria-label="Modal window" />
@@ -27,8 +27,8 @@
         <textboxQuestion
             ref="zipInputTextQuestion"
             :cmsWidgetName="this.textboxQuestionWidgetName"
-            v-model="serviceZipCodeInput"
-            inputId="serviceZipCodeInput"
+            v-model="serviceZipCode"
+            inputId="serviceZipCode"
             questionAlignment="center"
             mask="#####"
             :displayQuestionText="false"
@@ -81,6 +81,15 @@ export default {
         };
     },
     props: {
+        modelValue: {
+            type: Object,
+            default: () => ({
+                serviceZipQuestion: {
+                    serviceState: "",
+                    serviceZipCode: "",
+                },
+            }),
+        },
         cmsWidgetName: String,
         textboxQuestionWidgetName: String,
         alertNonServiceableZipWidgetName: String,
@@ -94,6 +103,10 @@ export default {
         };
     },
     methods: {
+        mobileLocationLinkPromptText() {
+            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
+        },
+
         openZipCodeModal() {
             this.$refs[this.modalName].openModal();
         },
@@ -150,6 +163,25 @@ export default {
         },
     },
     computed: {
+        serviceZipLinkPromptText() {
+            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
+        },
+        serviceZipLinkText() {
+            return this.getCmsContent(this.cmsWidgetName, "BodyText");
+        },
+        modalHeaderText() {
+            return this.getCmsContent(this.textboxQuestionWidgetName, "QuestionText");
+        },
+        modalFooterText() {
+            return this.getCmsContent(this.modalWidgetName, "FooterText");
+        },
+
+
+
+
+
+
+
         textboxQuestionPrompt() {
             return this.getCmsContent(this.textboxQuestionWidgetName, "QuestionText");
         },
@@ -178,6 +210,21 @@ export default {
             ).replaceAll("{custom:serviceZipCodeInput}", zipCode);
             return text;
         },
+        serviceZipModel: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+    },
+    watch: {
+        serviceZipModel: {
+            handler() {
+                this.displayNonServiceableZipAlert = false;
+            },
+        },
     },
     mounted() {
         this.$watch(