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( () => {