Changes for consistency

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

@@ -13,19 +13,16 @@
                 :text="this.mobileLocationLinkText"
                 href="#!"
                 @click-event="openModal"
-                :data-bs-target="getModalId"
                 aria-label="Modal window" />
         </div>
         <textBlock cmsWidgetName="MobileFeeDisclaimerWidget" typeStyle="caption" />
     </div>
     <modal
-        ref="mobileLocationModal"
+        :ref="modalName"
         :headerText="modalHeaderText"
-        :modalId="this.modalWidgetName"
         :onModalOpenedCallback="onModalOpened"
         :footerButtonText="modalFooterText"
-        @footer-button-event="setMobileLocation"
+        @footer-button-event="setMobileLocation">
-        :modalForm="modalForm">
         <addressQuestions
             ref="addressQuestions"
             v-model="mobileLocationQuestionModel.addressQuestions"
@@ -97,15 +94,15 @@ export default {
         mobileLocationLinkText() {
             return this.getCmsContent(this.linkWidgetName, "BodyText");
         },
-        getModalId() {
-            return "#" + this.modalWidgetName;
-        },
         modalHeaderText() {
             return this.getCmsContent(this.modalWidgetName, "HeaderText");
         },
         modalFooterText() {
             return this.getCmsContent(this.modalWidgetName, "FooterText");
         },
+        modalName() {
+            return this.modalWidgetName;
+        },
         mobileLocationQuestionModel: {
             get: function () {
                 return this.modelValue;
@@ -117,10 +114,10 @@ export default {
     },
     methods: {
         openModal() {
-            this.$refs.mobileLocationModal.openModal();
+            this.$refs[this.modalName].openModal();
         },
         closeModal() {
-            this.$refs.mobileLocationModal.closeModal();
+            this.$refs[this.modalName].closeModal();
         },
         async setMobileLocation() {
             this.closeModal();

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

@@ -2,9 +2,9 @@
     <div class="text-center">
         <div class="update-zip-text-link">
             <textLink
-                id="serviceLocationLinkPromptId"
+                id="serviceZipLinkPromptId"
                 linkType="text"
-                :text="serviceZipDisplayText"
+                :text="serviceZipLinkText"
                 href="#!"
                 @click-event="openModal"
                 aria-label="Modal window" />
@@ -12,21 +12,19 @@
     </div>
     <modal
         :ref="modalName"
+        :headerText="modalHeaderText"
         :onModalOpenedCallback="onModalOpened"
         :footerButtonText="modalFooterText"
-        :headerText="textboxQuestionPrompt"
+        @footer-button-event="setZipCode">
-        @footer-button-event="setZipCode"
-        :modalForm="modalForm">
         <textboxQuestion
             ref="zipInputTextQuestion"
             :cmsWidgetName="textboxQuestionWidgetName"
-            v-model="serviceZipCodeInput"
+            v-model="serviceZipModel.serviceZipCode"
-            inputId="zipInputTextQuestionTextbox"
+            inputId="serviceZipCode"
             questionAlignment="center"
             mask="#####"
             :displayQuestionText="false"
             isRequired
-            disableAutoFill
             validationRules="zip-required|zip-format" />
         <alert
             ref="alertInvalidZip"
@@ -85,11 +83,33 @@ export default {
             modalForm,
         };
     },
-    methods: {
+    computed: {
-        mobileLocationLinkPromptText() {
+        serviceZipLinkText() {
-            return this.getCmsContent(this.linkWidgetName, "HeaderText");
+            const defaultText = this.getCmsContent(this.linkWidgetName, "BodyText");
+            if (this.modelValue.serviceZipCode.length > 0) {
+                return this.modelValue.serviceState + ", " + this.modelValue.serviceZipCode;
+            }
+            return this.serviceZipLinkPromptText || defaultText;
         },
-
+        modalHeaderText() {
+            return this.getCmsContent(this.textboxQuestionWidgetName, "QuestionText");
+        },
+        modalFooterText() {
+            return this.getCmsContent(this.modalWidgetName, "FooterText");
+        },
+        modalName() {
+            return this.modalWidgetName;
+        },
+        serviceZipModel: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+    },
+    methods: {
         resetAlerts() {
             this.displayInvalidZipAlert = false;
         },
@@ -100,10 +120,8 @@ export default {
         },
 
         focusOnZipInput() {
-            this.$nextTick(() => {
+            const input = document.getElementById("serviceZipCode");
-                const input = this.$refs.zipInputTextQuestion.$refs.zipInputTextQuestionTextbox;
+            input.focus();
-                input.focus();
-            });
         },
 
         openModal() {
@@ -115,7 +133,6 @@ export default {
         },
 
         onModalOpened() {
-            this.serviceZipCodeInput = this.serviceZipModel.serviceZipCode;
             this.resetsOnZipInput();
             this.focusOnZipInput();
         },
@@ -123,7 +140,7 @@ export default {
         async setZipCode() {
             this.resetAlerts();
 
-            const zipCodeData = await this.getZipCodeData(this.serviceZipCodeInput);
+            const zipCodeData = await this.getZipCodeData(this.serviceZipModel.serviceZipCode);
 
             if (!zipCodeData.isValid) {
                 this.displayInvalidZipAlert = true;
@@ -131,7 +148,7 @@ export default {
             } else {
                 this.serviceZipModel = {
                     serviceState: zipCodeData.state,
-                    serviceZipCode: this.serviceZipCodeInput,
+                    serviceZipCode: this.serviceZipModel.serviceZipCode,
                     isServiceable: zipCodeData.isServiceable,
                 };
 
@@ -139,38 +156,11 @@ export default {
             }
         },
     },
-    computed: {
-        serviceZipLinkPromptText() {
-            return this.getCmsContent(this.linkWidgetName, "BodyText");
-        },
-        modalFooterText() {
-            return this.getCmsContent(this.modalWidgetName, "FooterText");
-        },
-        textboxQuestionPrompt() {
-            return this.getCmsContent(this.textboxQuestionWidgetName, "QuestionText");
-        },
-        modalName() {
-            return this.modalWidgetName;
-        },
-        serviceZipDisplayText() {
-            if (this.modelValue.serviceZipCode.length > 0) {
-                return this.modelValue.serviceState + ", " + this.modelValue.serviceZipCode;
-            }
-            return this.serviceZipLinkPromptText || "Enter your service ZIP";
-        },
-
-        serviceZipModel: {
-            get: function () {
-                return this.modelValue;
-            },
-            set: function (newValue) {
-                this.$emit("update:modelValue", newValue);
-            },
-        },
-    },
     watch: {
-        serviceZipCodeInput() {
+        serviceZipModel: {
-            this.resetsOnZipInput();
+            handler() {
+                this.displayInvalidZipAlert = false;
+            },
         },
     },
     components: {