CSR-1012 | service zip and state now stored in parent

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

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;

src/layouts/service-location/service-location.vue

@@ -6,13 +6,13 @@ fmg
             <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
             <serviceZipModalQuestion
                 v-model="serviceZipQuestion"
-                cmsWidgetName="ServiceZipModalWidget"
+                linkWidgetName="ServiceZipLinkWidget"
+                modalWidgetName="ServiceZipModalWidget"
                 textboxQuestionWidgetName="ServiceZipQuestionWidget"
-                alertNonServiceableZipWidgetName="AlertNonServiceableZipWidget"
                 alertInvalidZipWidgetName="AlertInvalidZipWidget" />
             <mobileLocationModalQuestions
                 v-model="mobileLocationQuestions"
-                cmsWidgetName="MobileLocationLinkWidget"
+                linkWidgetName="MobileLocationLinkWidget"
                 modalWidgetName="MobileLocationModalWidget"
                 mobileFeeDisclaimerWidgetName="MobileFeeDisclaimerWidget"
                 workspaceRequirementsWidgetName="WorkspaceRequirementsWidget" />
@@ -45,6 +45,7 @@ export default {
             serviceZipQuestion: {
                 serviceState: "",
                 serviceZipCode: "",
+                isServiceable: null,
             },
             mobileLocationQuestions: {
                 addressQuestions: {

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"></label>
+            v-html="serviceZipLinkText"></label>
         <div class="update-zip-text-link">
             <textLink
                 id="serviceLocationLinkPromptId"
                 linkType="text"
-                :text="this.serviceZipLinkText"
+                :text="serviceZipDisplayText"
                 href="#!"
-                @click-event="openZipCodeModal"
+                @click-event="openModal"
                 aria-label="Modal window" />
         </div>
     </div>
     <modal
         :ref="modalName"
-        :modalId="modalName"
         :onModalOpenedCallback="onModalOpened"
-        :footerButtonText="footerButtonText"
+        :footerButtonText="modalFooterText"
         :headerText="textboxQuestionPrompt"
         @footer-button-event="setZipCode"
         :modalForm="modalForm">
         <textboxQuestion
             ref="zipInputTextQuestion"
-            :cmsWidgetName="this.textboxQuestionWidgetName"
-            v-model="serviceZipCode"
-            inputId="serviceZipCode"
+            :cmsWidgetName="textboxQuestionWidgetName"
+            v-model="serviceZipCodeInput"
+            inputId="zipInputTextQuestionTextbox"
             questionAlignment="center"
             mask="#####"
             :displayQuestionText="false"
@@ -39,15 +38,7 @@
             ref="alertInvalidZip"
             v-if="displayInvalidZipAlert"
             class="my-4"
-            :cmsWidgetName="this.alertInvalidZipWidgetName"
-            alertClass="alert-danger"
-            v-bind:isDismissible="false" />
-        <alert
-            ref="alertNonServiceableZip"
-            v-if="displayNonServiceableZipAlert"
-            class="my-4"
-            :cmsWidgetName="this.alertNonServiceableZipWidgetName"
-            :manualHeadline="AlertNonServiceableZipHeader"
+            :cmsWidgetName="alertInvalidZipWidgetName"
             alertClass="alert-danger"
             v-bind:isDismissible="false" />
     </modal>
@@ -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(
             () => {