diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index 39833ab4d..834fc4fa4 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -59,7 +59,9 @@ export default {
setup() {
const modalId = `modal-${crypto.randomUUID()}`;
- return modalId;
+ return {
+ modalId,
+ };
},
methods: {
async validateAndEmit() {
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..db39cf55a 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
@@ -83,7 +83,7 @@ export default {
isVehicleProtected: Boolean,
}),
},
- cmsWidgetName: String,
+ linkWidgetName: String,
modalWidgetName: String,
mobileFeeDisclaimerWidgetName: String,
workspaceRequirementsWidgetName: String,
@@ -92,10 +92,10 @@ export default {
},
computed: {
mobileLocationLinkPromptText() {
- return this.getCmsContent(this.cmsWidgetName, "HeaderText");
+ return this.getCmsContent(this.linkWidgetName, "HeaderText");
},
mobileLocationLinkText() {
- return this.getCmsContent(this.cmsWidgetName, "BodyText");
+ return this.getCmsContent(this.linkWidgetName, "BodyText");
},
getModalId() {
return "#" + this.modalWidgetName;
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 2ed5f676b..66ad2954e 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -6,13 +6,13 @@ fmg
@@ -45,6 +45,7 @@ export default {
serviceZipQuestion: {
serviceState: "",
serviceZipCode: "",
+ isServiceable: null,
},
mobileLocationQuestions: {
addressQuestions: {
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 c6d293590..43589d1da 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
@@ -5,30 +5,29 @@
: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="serviceLocationLinkPromptText">
+ v-html="serviceZipLinkText">
-
@@ -73,11 +64,8 @@ export default {
name: "service-zip-modal-question",
data() {
return {
- serviceZip: this.getZipFromStore(),
- serviceZipState: this.getZipStateFromStore(),
- serviceZipCodeInput: this.getZipFromStore(),
+ serviceZipCodeInput: null,
displayInvalidZipAlert: false,
- displayNonServiceableZipAlert: false,
};
},
props: {
@@ -87,12 +75,13 @@ export default {
serviceZipQuestion: {
serviceState: "",
serviceZipCode: "",
+ isServiceable: null,
},
}),
},
- cmsWidgetName: String,
+ linkWidgetName: String,
+ modalWidgetName: String,
textboxQuestionWidgetName: String,
- alertNonServiceableZipWidgetName: String,
alertInvalidZipWidgetName: String,
},
setup() {
@@ -104,23 +93,11 @@ export default {
},
methods: {
mobileLocationLinkPromptText() {
- return this.getCmsContent(this.cmsWidgetName, "HeaderText");
- },
-
- openZipCodeModal() {
- this.$refs[this.modalName].openModal();
- },
- getZipFromStore() {
- return this.$store.getters.order.serviceLocation.zipCode;
- },
-
- getZipStateFromStore() {
- return this.$store.getters.order.serviceLocation.state;
+ return this.getCmsContent(this.linkWidgetName, "HeaderText");
},
resetAlerts() {
this.displayInvalidZipAlert = false;
- this.displayNonServiceableZipAlert = false;
},
resetsOnZipInput() {
@@ -130,21 +107,25 @@ export default {
focusOnZipInput() {
this.$nextTick(() => {
- const input = this.$refs.zipInputTextQuestion.$refs.serviceZipCodeInput;
+ const input = this.$refs.zipInputTextQuestion.$refs.zipInputTextQuestionTextbox;
input.focus();
});
},
- onModalOpened() {
- this.serviceZipCodeInput = this.serviceZip;
- this.resetsOnZipInput();
- this.focusOnZipInput();
+ openModal() {
+ this.$refs[this.modalName].openModal();
},
closeModal() {
this.$refs[this.modalName].closeModal();
},
+ onModalOpened() {
+ this.serviceZipCodeInput = this.serviceZipModel.serviceZipCode;
+ this.resetsOnZipInput();
+ this.focusOnZipInput();
+ },
+
async setZipCode() {
this.resetAlerts();
@@ -152,11 +133,12 @@ export default {
if (!zipCodeData.isValid) {
this.displayInvalidZipAlert = true;
- } else if (!zipCodeData.isServiceable) {
- this.displayNonServiceableZipAlert = true;
} else {
- this.serviceZip = this.serviceZipCodeInput;
- this.serviceZipState = zipCodeData.state;
+ this.serviceZipModel = {
+ serviceState: zipCodeData.state,
+ serviceZipCode: this.serviceZipCodeInput,
+ isServiceable: zipCodeData.isServiceable,
+ };
this.closeModal();
}
@@ -164,52 +146,27 @@ export default {
},
computed: {
serviceZipLinkPromptText() {
- return this.getCmsContent(this.cmsWidgetName, "HeaderText");
+ return this.getCmsContent(this.linkWidgetName, "BodyText");
},
serviceZipLinkText() {
- return this.getCmsContent(this.cmsWidgetName, "BodyText");
- },
- modalHeaderText() {
- return this.getCmsContent(this.textboxQuestionWidgetName, "QuestionText");
+ return this.getCmsContent(this.linkWidgetName, "HeaderText");
},
modalFooterText() {
return this.getCmsContent(this.modalWidgetName, "FooterText");
},
-
-
-
-
-
-
-
textboxQuestionPrompt() {
return this.getCmsContent(this.textboxQuestionWidgetName, "QuestionText");
},
modalName() {
- return this.cmsWidgetName;
- },
- questionText() {
- return this.getCmsContent(this.cmsWidgetName, "HeaderText");
+ return this.modalWidgetName;
},
serviceZipDisplayText() {
- if (this.serviceZip && this.serviceZip != 0) {
- return this.serviceZipState + ", " + this.serviceZip;
+ if (this.modelValue.serviceZipCode.length > 0) {
+ return this.modelValue.serviceState + ", " + this.modelValue.serviceZipCode;
}
- return (
- this.getCmsContent(this.cmsWidgetName, "SubheaderText") || "Enter your service ZIP"
- );
- },
- footerButtonText() {
- return this.getCmsContent(this.cmsWidgetName, "FooterText");
- },
- AlertNonServiceableZipHeader() {
- const zipCode = this.serviceZipCodeInput;
- const text = this.getCmsContent(
- "AlertNonServiceableZipWidget",
- "HeadlineText"
- ).replaceAll("{custom:serviceZipCodeInput}", zipCode);
- return text;
+ return this.serviceZipLinkPromptText || "Enter your service ZIP";
},
+
serviceZipModel: {
get: function () {
return this.modelValue;
@@ -219,13 +176,6 @@ export default {
},
},
},
- watch: {
- serviceZipModel: {
- handler() {
- this.displayNonServiceableZipAlert = false;
- },
- },
- },
mounted() {
this.$watch(
() => {