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 db39cf55a..00be9117e 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
@@ -13,19 +13,16 @@
:text="this.mobileLocationLinkText"
href="#!"
@click-event="openModal"
- :data-bs-target="getModalId"
aria-label="Modal window" />
+ @footer-button-event="setMobileLocation">
@@ -12,21 +12,19 @@
+ @footer-button-event="setZipCode">
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 = this.$refs.zipInputTextQuestion.$refs.zipInputTextQuestionTextbox;
- input.focus();
- });
+ const input = document.getElementById("serviceZipCode");
+ 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() {
- this.resetsOnZipInput();
+ serviceZipModel: {
+ handler() {
+ this.displayInvalidZipAlert = false;
+ },
},
},
components: {