Flattened the data model at the page level

src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue

@@ -79,7 +79,7 @@ export default {
                 },
                 isVehicleProtected: null,
                 serviceZipCode: "",
-                mobileFee: 0,
+                mobileFeePart: null,
             }),
         },
         isZipServiceableMobile: Boolean,
@@ -138,11 +138,9 @@ export default {
         openModal() {
             this.$refs[this.modalName].openModal();
         },
-
         closeModal() {
             this.$refs[this.modalName].closeModal();
         },
-
         resetComponent() {
             this.resetModel();
 
@@ -158,8 +156,6 @@ export default {
             this.internalModel.addressQuestions.streetAddress = "";
             this.internalModel.addressQuestions.apartmentNumberOrBusinessName = "";
             this.internalModel.addressQuestions.city = "";
-            this.internalModel.addressQuestions.state = "";
-            this.internalModel.addressQuestions.zipCode = "";
 
             // Is Vehicle Protected
             this.internalModel.isVehicleProtected = null;
@@ -175,16 +171,7 @@ export default {
                 this.displayInvalidZipAlert = true;
             } else {
                 // Update the page level model
-                this.internalModel.serviceZipCode = this.internalModel.addressQuestions.zipCode;
                 this.$emit("update:modelValue", this.internalModel);
-
-                // Emit the update service zip code information to the parent to update the service zipcode details
-                this.$emit("updated-zip-code", {
-                    zipCode: this.internalModel.addressQuestions.zipCode,
-                    state: zipCodeData.state,
-                    isServiceable: zipCodeData.isServiceable,
-                });
-
                 this.closeModal();
             }
         },

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

@@ -12,7 +12,6 @@
                 modalWidgetName="ServiceZipModalWidget" />
             <mobileLocationModalQuestions
                 v-model="mobileLocationQuestions"
-                @updated-zip-code="resetServiceZipCode"
                 ref="mobileLocationModalQuestions"
                 linkWidgetName="MobileLocationLinkWidget"
                 modalWidgetName="MobileLocationModalWidget" />
@@ -45,25 +44,15 @@ export default {
     name: "service-location",
     data() {
         return {
+            streetAddress: this.getServiceAddressFromStore(),
+            apartmentNumberOrBusinessName: "",
+            city: this.getServiceCityFromStore(),
+            state: this.getServiceStateFromStore(),
+            zipCode: this.getServiceZipCodeFromStore(),
+            isServiceable: false,
             isZipServiceableMobile: null,
             isZipServiceableInShop: null,
-            serviceZipCodeQuestion: {
+            mobileFeePart: null,
-                state: this.getServiceStateFromStore(),
-                zipCode: this.getServiceZipCodeFromStore(),
-                isServiceable: this.getIsServiceableFromStore(),
-            },
-            mobileLocationQuestions: {
-                addressQuestions: {
-                    streetAddress: this.getRegistrationAddressFromStore(),
-                    apartmentNumberOrBusinessName: "",
-                    city: this.getRegistrationCityFromStore(),
-                    state: this.getRegistrationStateFromStore(),
-                    zipCode: this.getRegistrationZipFromStore(),
-                },
-                isVehicleProtected: null,
-                serviceZipCode: this.getServiceZipCodeFromStore(),
-                mobileFee: 0,
-            },
         };
     },
     async beforeRouteEnter(to, from, next) {
@@ -93,6 +82,50 @@ export default {
             vm.setData(resultMap.mobileFeePart);
         });
     },
+    computed: {
+        serviceZipCodeQuestion: {
+            get: function () {
+                return {
+                    state: this.state,
+                    zipCode: this.zipCode,
+                    isServiceable: this.isServiceable,
+                };
+            },
+            set: function (newValue) {
+                if (newValue.zipCode !== this.zipCode) {
+                    this.resetMobileLocation(this.zipCode);
+                }
+
+                this.state = newValue.state;
+                this.zipCode = newValue.zipCode;
+                this.isServiceable = newValue.isServiceable;
+            },
+        },
+        mobileLocationQuestions: {
+            get: function () {
+                return {
+                    addressQuestions: {
+                        streetAddress: this.streetAddress,
+                        apartmentNumberOrBusinessName: this.apartmentNumberOrBusinessName,
+                        city: this.city,
+                        state: this.state,
+                        zipCode: this.zipCode,
+                    },
+                    isVehicleProtected: this.isVehicleProtected,
+                    mobileFeePart: this.mobileFeePart
+                };
+            },
+            set: function (newValue) {
+                this.streetAddress = newValue.addressQuestions.streetAddress;
+                this.apartmentNumberOrBusinessName = newValue.addressQuestions.apartmentNumberOrBusinessName,
+                this.city = newValue.addressQuestions.city;
+                this.state = newValue.addressQuestions.state;
+                this.zipCode = newValue.addressQuestions.zipCode;
+                this.isVehicleProtected = newValue.isVehicleProtected,
+                this.mobileFeePart = newValue.mobileFeePart;
+            },
+        },
+    },
     methods: {
         arePagePrerequisitesValid() {
             return true;
@@ -104,27 +137,21 @@ export default {
         },
         setData(mobileFeePart) {
             if (mobileFeePart) {
-                this.mobileLocationQuestions.mobileFeePart = mobileFeePart;
+                this.mobileFeePart = mobileFeePart;
             }
         },
-        getRegistrationAddressFromStore() {
+        getServiceAddressFromStore() {
-            return store.getters.vehicle.registration.address;
+            return store.getters.order.serviceLocation.address;
         },
-        getRegistrationCityFromStore() {
+        getServiceCityFromStore() {
-            return store.getters.vehicle.registration.city;
+            return store.getters.order.serviceLocation.city;
-        },
-        getRegistrationStateFromStore() {
-            return store.getters.vehicle.registration.state;
-        },
-        getRegistrationZipFromStore() {
-            return store.getters.vehicle.registration.zipCode;
-        },
-        getServiceZipCodeFromStore() {
-            return store.getters.order.serviceLocation.zipCode;
         },
         getServiceStateFromStore() {
             return store.getters.order.serviceLocation.state;
         },
+        getServiceZipCodeFromStore() {
+            return store.getters.order.serviceLocation.zipCode;
+        },
         getIsServiceableFromStore() {
             return store.getters.order.serviceLocation.isServiceable;
         },
@@ -134,29 +161,15 @@ export default {
             });
         },
         resetMobileLocation(updatedServiceZipCode) {
-            this.mobileLocationQuestions = {
+            this.streetAddress = "";
-                addressQuestions: {
+            this.apartmentNumberOrBusinessName = "",
-                    streetAddress: "",
+            this.city = "",
-                    apartmentNumberOrBusinessName: "",
+            this.isVehicleProtected = null;
-                    city: "",
-                    state: "",
-                    zipCode: "",
-                },
-                isVehicleProtected: null,
-                serviceZipCode: updatedServiceZipCode,
-            };
 
             this.$refs.mobileLocationModalQuestions.resetComponent();
 
             this.resetMobileFeePart(updatedServiceZipCode);
         },
-        resetServiceZipCode(updatedServiceZipInfo) {
-            this.serviceZipCodeQuestion.state = updatedServiceZipInfo.state;
-            this.serviceZipCodeQuestion.zipCode = updatedServiceZipInfo.zipCode;
-            this.serviceZipCodeQuestion.isServiceable = updatedServiceZipInfo.isServiceable;
-
-            this.resetMobileFeePart(this.serviceZipCodeQuestion.zipCode);
-        },
         backButtonAction() {
             this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
         },

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

@@ -139,8 +139,6 @@ export default {
                 this.internalModel.state = zipCodeData.state;
                 this.internalModel.isServiceable = zipCodeData.isServiceable;
 
-                this.$emit("updated-service-zip-code", this.internalModel.zipCode);
-
                 // Update the page level model
                 this.$emit("update:modelValue", this.internalModel);