Flattened the data model at the page level
This commit is contained in:
parent
b779b948d6
commit
ebbc522c1c
3 changed files with 64 additions and 66 deletions
|
|
@ -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();
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue