CSR-1012 | reorganized service-location page data

src/digital-components/modal/modal.vue

@@ -2,7 +2,7 @@
     <!-- Modal -->
     <div
         class="modal fade modal-component"
-        v-on="{ 'hidden.bs.modal': resetButtonStyle, 'shown.bs.modal': onModalOpenedCallback }"
+        v-on="{ 'hidden.bs.modal': onModalClosed, 'shown.bs.modal': onModalOpened }"
         :id="modalId"
         tabindex="-1"
         aria-labelledby="ModalComponentLabel"
@@ -53,6 +53,9 @@ export default {
         onModalOpenedCallback: {
             type: Function,
         },
+        onModalClosedCallback: {
+            type: Function,
+        },
     },
     setup() {
         const modalId = `modal-${crypto.randomUUID()}`;
@@ -78,6 +81,13 @@ export default {
         resetButtonStyle() {
             this.$refs.buttonMain.resetButtonStyle();
         },
+        onModalOpened() {
+            this.onModalOpenedCallback?.();
+        },
+        onModalClosed() {
+            this.resetButtonStyle();
+            this.onModalClosedCallback?.();
+        },
         openModal() {
             const modal = Modal.getOrCreateInstance(document.getElementById(this.modalId));
             modal.show();

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

@@ -4,14 +4,13 @@
             <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
             <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
             <serviceZipModalQuestion
-                v-model="serviceZipQuestion"
+                v-model="serviceZipQuestionModel"
                 linkWidgetName="ServiceZipLinkWidget"
                 modalWidgetName="ServiceZipModalWidget"
                 textboxQuestionWidgetName="ServiceZipQuestionWidget"
                 alertInvalidZipWidgetName="AlertInvalidZipWidget" />
             <mobileLocationModalQuestions
-                v-model="mobileLocationQuestions"
+                v-model="mobileLocationQuestionsModel"
-                :serviceZipCode="serviceZipQuestion.serviceZipCode"
                 linkWidgetName="MobileLocationLinkWidget"
                 modalWidgetName="MobileLocationModalWidget"
                 mobileFeeDisclaimerWidgetName="MobileFeeDisclaimerWidget"
@@ -42,25 +41,18 @@ export default {
     name: "service-location",
     data() {
         return {
-            serviceZipQuestion: {
+            isServiceable: null,
-                serviceState: "",
+            streetAddress: "",
-                serviceZipCode: "",
+            apartmentNumberOrBusinessName: "",
-                isServiceable: null,
+            city: "",
-            },
+            state: "",
-            mobileLocationQuestions: {
+            zipCode: "",
-                addressQuestions: {
+            isVehicleProtected: null,
-                    streetAddress: "",
+            isZipServiceableMobile: null,
-                    apartmentNumberOrBusinessName: "",
+            isZipServiceableInShop: null,
-                    city: "",
-                    state: "",
-                    zipCode: "",
-                },
-                isVehicleProtected: null,
-                isZipServiceableMobile: null,
-                isZipServiceableInShop: null,
-            },
         };
     },
+
     async beforeRouteEnter(to, from, next) {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
@@ -80,6 +72,42 @@ export default {
             vm.setCmsContent(resultMap.cmsContent);
         });
     },
+    computed: {
+        serviceZipQuestionModel: {
+            get: function () {
+                return {
+                    state: this.state,
+                    zipCode: this.zipCode,
+                    isServiceable: this.isServiceable,
+                };
+            },
+            set: function (newValue) {
+                this.state = newValue.state;
+                this.zipCode = newValue.zipCode;
+                this.isServiceable = newValue.isServiceable;
+            },
+        },
+        mobileLocationQuestionsModel: {
+            get: function () {
+                return {
+                    addressQuestions: {
+                        streetAddress: this.streetAddress,
+                        apartmentNumberOrBusinessName: this.apartmentNumberOrBusinessName,
+                        city: this.city,
+                        state: this.state,
+                        zipCode: this.zipCode,
+                    },
+                };
+            },
+            set: function (newValue) {
+                this.streetAddress = newValue.streetAddress;
+                this.apartmentNumberOrBusinessName = newValue.apartmentNumberOrBusinessName;
+                this.city = newValue.city;
+                this.state = newValue.state;
+                this.zipCode = newValue.zipCode;
+            },
+        },
+    },
     methods: {
         arePagePrerequisitesValid() {
             return true;

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

@@ -14,12 +14,13 @@
         :ref="modalName"
         :headerText="modalHeaderText"
         :onModalOpenedCallback="onModalOpened"
+        :onModalClosedCallback="onModalClosed"
         :footerButtonText="modalFooterText"
         @footer-button-event="setZipCode">
         <serviceZipQuestion
             ref="serviceZipQuestion"
             :cmsWidgetName="textboxQuestionWidgetName"
-            v-model="serviceZipModel.serviceZipCode" />
+            v-model="serviceZipCodeInput" />
         <alert
             ref="alertInvalidZip"
             v-if="displayInvalidZipAlert"
@@ -59,8 +60,8 @@ export default {
             type: Object,
             default: () => ({
                 serviceZipQuestion: {
-                    serviceState: "",
+                    state: "",
-                    serviceZipCode: "1234",
+                    zipCode: "",
                     isServiceable: null,
                 },
             }),
@@ -79,11 +80,10 @@ export default {
     },
     computed: {
         serviceZipLinkText() {
-            const defaultText = this.getCmsContent(this.linkWidgetName, "BodyText");
+            if (this.modelValue.zipCode.length > 0) {
-            if (this.modelValue.serviceZipCode.length > 0) {
+                return this.modelValue.state + ", " + this.modelValue.zipCode;
-                return this.modelValue.serviceState + ", " + this.modelValue.serviceZipCode;
             }
-            return this.serviceZipLinkPromptText || defaultText;
+            return this.getCmsContent(this.linkWidgetName, "BodyText");
         },
         modalHeaderText() {
             return this.getCmsContent(this.textboxQuestionWidgetName, "QuestionText");
@@ -127,22 +127,26 @@ export default {
         },
 
         onModalOpened() {
-            this.resetsOnZipInput();
             this.focusOnZipInput();
         },
 
+        onModalClosed() {
+            this.serviceZipCodeInput = this.serviceZipModel.zipCode;
+            this.resetsOnZipInput();
+        },
+
         async setZipCode() {
             this.resetAlerts();
 
-            const zipCodeData = await this.getZipCodeData(this.serviceZipModel.serviceZipCode);
+            const zipCodeData = await this.getZipCodeData(this.serviceZipCodeInput);
 
             if (!zipCodeData.isValid) {
                 this.displayInvalidZipAlert = true;
                 this.focusOnZipInput();
             } else {
                 this.serviceZipModel = {
-                    serviceState: zipCodeData.state,
+                    state: zipCodeData.state,
-                    serviceZipCode: this.serviceZipModel.serviceZipCode,
+                    zipCode: this.serviceZipCodeInput,
                     isServiceable: zipCodeData.isServiceable,
                 };
 
@@ -151,10 +155,8 @@ export default {
         },
     },
     watch: {
-        serviceZipModel: {
+        serviceZipCodeInput() {
-            handler() {
+            this.resetsOnZipInput();
-                this.displayInvalidZipAlert = false;
-            },
         },
     },
     components: {