Flattened the data model at the page level

This commit is contained in:
Leah Schumann 2023-03-03 15:07:45 -05:00
parent b779b948d6
commit ebbc522c1c
3 changed files with 64 additions and 66 deletions

View file

@ -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();
}
},

View file

@ -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: {
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,
},
mobileFeePart: null,
};
},
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() {
return store.getters.vehicle.registration.address;
getServiceAddressFromStore() {
return store.getters.order.serviceLocation.address;
},
getRegistrationCityFromStore() {
return store.getters.vehicle.registration.city;
},
getRegistrationStateFromStore() {
return store.getters.vehicle.registration.state;
},
getRegistrationZipFromStore() {
return store.getters.vehicle.registration.zipCode;
},
getServiceZipCodeFromStore() {
return store.getters.order.serviceLocation.zipCode;
getServiceCityFromStore() {
return store.getters.order.serviceLocation.city;
},
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 = {
addressQuestions: {
streetAddress: "",
apartmentNumberOrBusinessName: "",
city: "",
state: "",
zipCode: "",
},
isVehicleProtected: null,
serviceZipCode: updatedServiceZipCode,
};
this.streetAddress = "";
this.apartmentNumberOrBusinessName = "",
this.city = "",
this.isVehicleProtected = null;
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);
},

View file

@ -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);