Merge pull request #407 from Safelite/feature/CSR-104

Feature/csr 104
This commit is contained in:
AdamCaouetteSafelite 2022-05-10 13:10:15 -04:00 committed by GitHub
commit 408d5a35a2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 114 additions and 82 deletions

View file

@ -43,6 +43,7 @@ export default {
const fieldOptions = { const fieldOptions = {
type: "text", type: "text",
value: props.modelValue, value: props.modelValue,
initialValue: props.modelValue,
}; };
const { const {

View file

@ -1,7 +1,8 @@
<template> <template>
<div class="textbox-question" :class="(errors && errors.length) || hasError ? 'has-error' : ''"> <div class="textbox-question" :class="(errors && errors.length) || hasError ? 'has-error' : ''">
<label :for="inputId" :aria-label="questionText" class="form-label" v-html="labelText"></label> <label :for="inputId" :aria-label="questionText" class="form-label" v-html="labelText"></label>
<input v-model="value" <input
v-model="value"
v-maska="mask" v-maska="mask"
:type="type" :type="type"
class="form-control" class="form-control"
@ -15,8 +16,7 @@
autocomplete="off" autocomplete="off"
:class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']" :class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']"
:validationRules="validationRules" :validationRules="validationRules"
@change="handleChange" />
@blur="handleBlur" />
<div v-show="errorMessage" class="row mt-2 form-test-error"> <div v-show="errorMessage" class="row mt-2 form-test-error">
<span role="alert">{{ errorMessage }}</span> <span role="alert">{{ errorMessage }}</span>
</div> </div>
@ -57,13 +57,9 @@ export default {
const fieldOptions = { const fieldOptions = {
type: "text", type: "text",
value: props.modelValue, value: props.modelValue,
potentialInitialValue: props.modelValue, initialValue: (props.modelValue && props.modelValue.length > 0) ? props.modelValue : "",
}; };
if (props.modelValue && props.modelValue.length > 0) {
fieldOptions['initialValue'] = fieldOptions.potentialInitialValue;
}
const { const {
errorMessage, errorMessage,
handleBlur, handleBlur,
@ -115,6 +111,11 @@ export default {
} }
} }
}, },
watch: {
value(newValue) {
this.handleChange(newValue);
}
}
}; };
</script> </script>

View file

@ -42,7 +42,7 @@
<div class="service-zip-field" v-if="showServiceZipField" aria-live="polite"> <div class="service-zip-field" v-if="showServiceZipField" aria-live="polite">
<div class="row my-4"> <div class="row my-4">
<div class="col"> <div class="col">
<textboxQuestion cmsWidgetName="ServiceZipQuestionWidget" v-model="serviceZip" ref="serviceZip" inputId="7add1b26df344f2caf1678de5797803f" aria-haspopup="" mask="#####" disableAutoFill validationRules="service-zip-required|service-zip-format" /> <textboxQuestion cmsWidgetName="ServiceZipQuestionWidget" v-model="serviceZipCode" ref="serviceZip" inputId="7add1b26df344f2caf1678de5797803f" aria-haspopup="" mask="#####" disableAutoFill validationRules="service-zip-required|service-zip-format" />
</div> </div>
</div> </div>
</div> </div>
@ -118,19 +118,22 @@ export default {
streetAddress: this.getRegistrationAddressFromStore(), streetAddress: this.getRegistrationAddressFromStore(),
city: this.getRegistrationCityFromStore(), city: this.getRegistrationCityFromStore(),
state: this.getRegistrationStateFromStore(), state: this.getRegistrationStateFromStore(),
zip: this.getRegistrationZipFromStore(), zipCode: this.getRegistrationZipFromStore(),
}, },
firstName: this.getRegistrationFirstNameFromStore(), firstName: this.getRegistrationFirstNameFromStore(),
lastName: this.getRegistrationLastNameFromStore(), lastName: this.getRegistrationLastNameFromStore(),
emailAddress: this.getEmailFromStore(), emailAddress: this.getEmailFromStore(),
}, },
serviceZip: this.getServiceZipFromStore(), serviceZipCode: this.getServiceZipFromStore(),
displayNonServiceableZipAlert: false, displayNonServiceableZipAlert: false,
displayVinNotFoundAlert: false, displayVinNotFoundAlert: false,
displayMatchedDifferentVehicleAlert: false, displayMatchedDifferentVehicleAlert: false,
displayVinLookupByHomeAddressNotAllowedAlert: false, displayVinLookupByHomeAddressNotAllowedAlert: false,
previousCarIdFound: "", previouslyEnteredCarId: "",
isSelectedGlassAvailableForVehicle: false,
customAlertData: {}, customAlertData: {},
showServiceZipField: this.getServiceZipFromStore(),
isZipServicable: false,
} }
}, },
methods: { methods: {
@ -176,14 +179,19 @@ export default {
this.resetWarningsAndErrors(); this.resetWarningsAndErrors();
// Lookup VIN(s) with the provided address // Lookup VIN(s) with the provided address
const vinLookup = await this.lookupVin( const vinLookup = this.lookupVin(
this.customerQuestions.lastName, this.customerQuestions.lastName,
this.customerQuestions.addressQuestions.streetAddress, this.customerQuestions.addressQuestions.streetAddress,
this.customerQuestions.addressQuestions.zip, this.customerQuestions.addressQuestions.zipCode,
this.customerQuestions.addressQuestions.state this.customerQuestions.addressQuestions.state
); );
if (!vinLookup.data.isStatePermissible) { const zipValidation = this.serviceZipCode ? this.validateZip(this.serviceZipCode) : this.validateZip(this.customerQuestions.addressQuestions.zipCode);
const vinLookupResponse = await vinLookup;
const zipValidationResponse = await zipValidation;
if (!vinLookupResponse.data.isStatePermissible) {
// State Restrictions forbid lookup by address // State Restrictions forbid lookup by address
this.displayVinLookupByHomeAddressNotAllowedAlert = true; this.displayVinLookupByHomeAddressNotAllowedAlert = true;
this.$refs.funnelFooter.removeLoader(); this.$refs.funnelFooter.removeLoader();
@ -191,50 +199,58 @@ export default {
} }
// Validate if the original or service zip provided is serviceable // Validate if the original or service zip provided is serviceable
const zipValidation = this.serviceZip ? await this.validateZip(this.serviceZip) : await this.validateZip(this.customerQuestions.addressQuestions.zip); this.isZipServicable = zipValidationResponse.data.isServiceable;
if (!zipValidation.data.isServiceable) { if (!this.isZipServicable) {
this.displayNonServiceableZipAlert = true; this.displayNonServiceableZipAlert = true;
this.showServiceZipField = true; this.showServiceZipField = true;
this.$refs.funnelFooter.removeLoader(); this.$refs.funnelFooter.removeLoader();
} }
const carEntered = store.getters.vehicle; const carEntered = store.getters.vehicle;
const carsFound = vinLookup.data.vinVehicles; const carsFound = vinLookupResponse.data.vinVehicles;
if (carsFound.length == 0) { if (carsFound.length == 0) {
// No VINs found // No VINs found
this.displayVinNotFoundAlert = true; this.displayVinNotFoundAlert = true;
this.$refs.funnelFooter.removeLoader(); this.$refs.funnelFooter.removeLoader();
return; return;
} else if (carsFound.length == 1) { } else if (carsFound.length == 1) {
var carFound = carsFound[0].vehicle; const carFound = carsFound[0].vehicle;
this.isCarIdDifferent = carFound.carId !== carEntered.carId;
if (carEntered.carId == carFound.carId || carFound.carId == this.previousCarIdFound) { if (this.isCarIdDifferent && carFound.carId !== this.previouslyEnteredCarId) {
// update data
this.updateVehicleInfo(carFound.vin, carFound);
this.updateCustomerInfo();
// navigate forward
this.navigateForward(carEntered, carsFound);
} else {
// Display Alert // Display Alert
this.previouslyEnteredCarId = carFound.carId;
this.customAlertData.vehicleInfo = carFound; this.customAlertData.vehicleInfo = carFound;
this.displayMatchedDifferentVehicleAlert = true; this.displayMatchedDifferentVehicleAlert = true;
this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(carFound.carId);
// Update button "Continue with..." // Update button "Continue with..."
this.$refs.funnelFooter.updateButtonText(`Continue with ${carFound.year} ${carFound.make} ${carFound.model}`); this.$refs.funnelFooter.updateButtonText(`Continue with ${carFound.year} ${carFound.make} ${carFound.model}`);
this.$refs.funnelFooter.removeLoader(); this.$refs.funnelFooter.removeLoader();
return;
} }
this.previousCarIdFound = carFound.carId; if (!this.isZipServicable) {
return;
}
} else if (vinLookup.data.vinVehicles.length > 1) { // update data if the zip or service zip is servicable
this.updateVehicleInfo(carsFound[0].vin, carFound);
this.updateCustomerInfo(); this.updateCustomerInfo();
// navigate forward } else if (carsFound.length > 1) {
this.navigateForward(carEntered, carsFound); if (!this.isZipServicable) {
return;
}
// update data if the zip or service zip is servicable
this.updateCustomerInfo();
} }
this.navigateForward(carEntered, carsFound);
}, },
resetWarningsAndErrors() { resetWarningsAndErrors() {
this.displayVinNotFoundAlert = false; this.displayVinNotFoundAlert = false;
@ -242,22 +258,17 @@ export default {
this.displayMatchedDifferentVehicleAlert = false; this.displayMatchedDifferentVehicleAlert = false;
this.displayVinLookupByHomeAddressNotAllowedAlert = false; this.displayVinLookupByHomeAddressNotAllowedAlert = false;
}, },
async navigateForward(carEntered, carsFound) { navigateForward(carEntered, carsFound) {
if (carsFound.length == 1) { if (carsFound.length == 1) {
// get the damage options for the car that was found if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
const carFound = carsFound[0].vehicle; this.$router.navigateAfterSave(
const glassOptions = await baseMixin.methods.dispatchStoreAction( this.navigationScenarios.CONTINUING_WITH_DIFFERENT_GLASS,
storeActions.GET_DAMAGE_OPTIONS, this.$route, {}, {
{ carId: carFound.carId } displayVehicleChangeAlert: true
); }, {}
);
// if the car entered is the same as the car found OR the glass options for the found car match the users damage selections
if (carEntered.carId == carFound.carId || isGlassAvailableForCarId(carFound.carId)) {
this.$refs.loadingModal.showModal();
navigateAfterSaveToHeritageFunnel(this.$route);
} else { } else {
// if not then navigate to the "vehicle-damage" page navigateAfterSaveToHeritageFunnel(this.$route);
this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD, this.$route, {}, { displayVehicleChangeAlert: true }, {});
} }
} else if (carsFound.length > 1) { } else if (carsFound.length > 1) {
// if multiple cars were found // if multiple cars were found
@ -266,8 +277,10 @@ export default {
this.$refs.loadingModal.showModal(); this.$refs.loadingModal.showModal();
navigateAfterSaveToHeritageFunnel(this.$route); navigateAfterSaveToHeritageFunnel(this.$route);
} else { } else {
// and there is no match, navigate to "address-vehicle" page // and there is no match, navigate to "address-vehicles" page
this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_VEHICLES, this.$route, {}, {}, carsFound); this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_VEHICLES,
this.$route, {}, {},
carsFound);
} }
} }
@ -307,29 +320,29 @@ export default {
store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, this.customerQuestions.addressQuestions.zipCode); store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, this.customerQuestions.addressQuestions.zipCode);
store.commit(storeMutations.UPDATE_REGISTRATION_FIRST_NAME, this.customerQuestions.firstName); store.commit(storeMutations.UPDATE_REGISTRATION_FIRST_NAME, this.customerQuestions.firstName);
store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, this.customerQuestions.lastName); store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, this.customerQuestions.lastName);
store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE, this.serviceZip); store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE, this.serviceZipCode);
store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.customerQuestions.email); store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.customerQuestions.emailAddress);
}, },
}, },
computed: { computed: {
AlertNonServiceableZipHeader(){ AlertNonServiceableZipHeader(){
let zip = this.serviceZip ? this.serviceZip : this.customerQuestions.addressQuestions.zip; const zipCode = this.serviceZipCode ? this.serviceZipCode : this.customerQuestions.addressQuestions.zipCode;
let text = this.getCmsContent("AlertNonServiceableZipWidget", "HeadlineText").replaceAll("{custom:serviceZip}", zip); const text = this.getCmsContent("AlertNonServiceableZipWidget", "HeadlineText").replaceAll("{custom:serviceZip}", zipCode);
return text; return text;
}, },
AlertNonServiceableZipBody(){ AlertNonServiceableZipBody(){
return this.getCmsContent("AlertNonServiceableZipWidget", "BodyText"); return this.getCmsContent("AlertNonServiceableZipWidget", "BodyText");
}, },
AlertMatchedDifferentVehicleHeader(){ AlertMatchedDifferentVehicleHeader(){
let text = this.getCmsContent("AlertMatchedDifferentVehicleWidget", "HeadlineText").replaceAll("{custom:glassText}", getDamageString()); const text = this.getCmsContent("AlertMatchedDifferentVehicleWidget", "HeadlineText").replaceAll("{custom:glassText}", getDamageString());
return text; return text;
}, },
AlertMatchedDifferentVehicleBody(){ AlertMatchedDifferentVehicleBody(){
let content = this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText"); let content = this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText");
content = content.replaceAll("{custom:glassText}", getDamageString()); content = content.replaceAll("{custom:glassText}", getDamageString());
let vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`; const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
let vinYmmExpected = `${store.getters.vehicle.year} ${store.getters.vehicle.make} ${store.getters.vehicle.model}`; const vinYmmExpected = `${store.getters.vehicle.year} ${store.getters.vehicle.make} ${store.getters.vehicle.model}`;
content = content.replaceAll("{custom:vinYmmFound}", vinYmmFound); content = content.replaceAll("{custom:vinYmmFound}", vinYmmFound);
content = content.replaceAll("{custom:vinYmmExpected}", vinYmmExpected); content = content.replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
@ -340,20 +353,27 @@ export default {
watch: { watch: {
customerQuestions: { customerQuestions: {
handler(newValue) { handler(newValue) {
// if they modify one of the lookup fields (address, city, state, zip, or lastName), then modify the button text back to Get my personalized quote // if they modify one of the lookup fields (address, city, state, zipCode, or lastName), then modify the button text back to Get my personalized quote
this.$refs.funnelFooter.updateButtonText(this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")); this.$refs.funnelFooter.updateButtonText(this.getCmsContent("FunnelFooterWidget", "ForwardButtonText"));
this.showServiceZipField = false; this.showServiceZipField = false;
this.resetWarningsAndErrors(); this.resetWarningsAndErrors();
}, },
deep: true deep: true
}, },
serviceZip: { serviceZipCode: {
handler(newValue) { handler(newValue) {
// if they modify the service zip, then hide the error message // if they modify the service zip code, then hide the error message
this.displayNonServiceableZipAlert = false; this.displayNonServiceableZipAlert = false;
}, },
},
showServiceZipField: {
handler(newValue) {
// if the Service Zip Code field is ever hidden, clear out it's value
if (!newValue) {
this.serviceZipCode = null;
}
},
} }
}, },
components: { components: {
funnelHeader, funnelHeader,

View file

@ -17,7 +17,7 @@
<dropdownQuestion cmsWidgetName="StateQuestionWidget" v-model="addressModel.state" ref="state" inputId="8fdf9dc2e13e430eb57529499dceb3eb" :options="stateOptions" disableAutoFill validationRules="state-required" /> <dropdownQuestion cmsWidgetName="StateQuestionWidget" v-model="addressModel.state" ref="state" inputId="8fdf9dc2e13e430eb57529499dceb3eb" :options="stateOptions" disableAutoFill validationRules="state-required" />
</div> </div>
<div class="col"> <div class="col">
<textboxQuestion cmsWidgetName="ZipQuestionWidget" v-model="addressModel.zip" ref="zip" inputId="01a9a1c2de0b4c9da8e023c9ae3be498" mask="#####" disableAutoFill validationRules="zip-required|zip-format"/> <textboxQuestion cmsWidgetName="ZipQuestionWidget" v-model="addressModel.zipCode" ref="zipCode" inputId="01a9a1c2de0b4c9da8e023c9ae3be498" mask="#####" disableAutoFill validationRules="zip-code-required|zip-code-format"/>
</div> </div>
</div> </div>
</transition> </transition>
@ -48,8 +48,8 @@ import { errorMessages } from "@/constants/error-messages";
defineRule("street-address-required", required(errorMessages.STREET_ADDRESS_REQUIRED)); defineRule("street-address-required", required(errorMessages.STREET_ADDRESS_REQUIRED));
defineRule("city-required", required(errorMessages.CITY_REQUIRED)); defineRule("city-required", required(errorMessages.CITY_REQUIRED));
defineRule("state-required", required(errorMessages.STATE_REQUIRED)); defineRule("state-required", required(errorMessages.STATE_REQUIRED));
defineRule("zip-required", required(errorMessages.ZIP_REQUIRED)); defineRule("zip-code-required", required(errorMessages.ZIP_REQUIRED));
defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_FORMAT)); defineRule("zip-code-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_FORMAT));
export default ({ export default ({
name: "address-questions", name: "address-questions",
@ -61,7 +61,7 @@ export default ({
streetAddress: "", streetAddress: "",
city: "", city: "",
state: "", state: "",
zip: "", zipCode: "",
}), }),
}, },
validationRules: String, validationRules: String,
@ -146,6 +146,15 @@ export default ({
}, },
methods: { methods: {
setupAddressLookup() { setupAddressLookup() {
if (this.addressModel.streetAddress !== null &
this.addressModel.city !== null &
this.addressModel.state !== null &
this.addressModel.zipCode !== null) {
this.showAddressFields = true;
}
const addressField1 = document.getElementById("autocomplete"); const addressField1 = document.getElementById("autocomplete");
const self = this; const self = this;
@ -166,7 +175,7 @@ export default ({
// Standard place_changed event handling // Standard place_changed event handling
autocomplete.addListener('place_changed', fillInAddress); autocomplete.addListener('place_changed', fillInAddress);
addressField1.onblur = function() { addressField1.onchange = function() {
const hover = document.querySelector(".pac-container .pac-item:hover"); const hover = document.querySelector(".pac-container .pac-item:hover");
// if an item has been clicked, do nothing, otherwise get first solution and use Geocoder to get the place // if an item has been clicked, do nothing, otherwise get first solution and use Geocoder to get the place
if (hover === null) { if (hover === null) {
@ -187,7 +196,7 @@ export default ({
else { else {
self.addressModel.city = ""; self.addressModel.city = "";
self.addressModel.state = ""; self.addressModel.state = "";
self.addressModel.zip = ""; self.addressModel.zipCode = "";
self.showAddressFields = true; self.showAddressFields = true;
self.displayVerificationWarning = false; self.displayVerificationWarning = false;
self.displayNoMatchWarning = true; self.displayNoMatchWarning = true;
@ -225,7 +234,7 @@ export default ({
break; break;
} }
case "postal_code": { case "postal_code": {
self.addressModel.zip = component.long_name; self.addressModel.zipCode = component.long_name;
break; break;
} }

View file

@ -43,7 +43,7 @@ export default ({
streetAddress: "", streetAddress: "",
city: "", city: "",
state: "", state: "",
zip: "", zipCode: "",
}, },
firstName: "", firstName: "",
lastName: "", lastName: "",

View file

@ -12,6 +12,7 @@ const navigationScenarios = {
CONTINUING_WITH_MULTIPLE_PARTS: "CONTINUING_WITH_MULTIPLE_PARTS", CONTINUING_WITH_MULTIPLE_PARTS: "CONTINUING_WITH_MULTIPLE_PARTS",
CONTINUING_WITH_SINGLE_PART: "CONTINUING_WITH_SINGLE_PART", CONTINUING_WITH_SINGLE_PART: "CONTINUING_WITH_SINGLE_PART",
CONTINUING_WITH_MULTIPLE_VEHICLES: "CONTINUING_WITH_MULTIPLE_VEHICLES", CONTINUING_WITH_MULTIPLE_VEHICLES: "CONTINUING_WITH_MULTIPLE_VEHICLES",
CONTINUING_WITH_DIFFERENT_GLASS: "CONTINUING_WITH_DIFFERENT_GLASS",
CLICKED_FORWARD_WITHOUT_VIN: "CLICKED_FORWARD_WITHOUT_VIN", CLICKED_FORWARD_WITHOUT_VIN: "CLICKED_FORWARD_WITHOUT_VIN",
SELECTED_MANUAL_VIN: "SELECTED_MANUAL_VIN", SELECTED_MANUAL_VIN: "SELECTED_MANUAL_VIN",
SELECTED_LICENSE_PLATE: "SELECTED_LICENSE_PLATE", SELECTED_LICENSE_PLATE: "SELECTED_LICENSE_PLATE",

View file

@ -135,7 +135,7 @@ const routingTable = [
destinationFmgPageValue: fmgPageValues.ADDRESS_VEHICLES, destinationFmgPageValue: fmgPageValues.ADDRESS_VEHICLES,
}, },
{ {
scenario: navigationScenarios.CLICKED_FORWARD, scenario: navigationScenarios.CONTINUING_WITH_DIFFERENT_GLASS,
destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE, destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
}, },
], ],

View file

@ -135,20 +135,20 @@ export const mutations = {
updateRegistrationLicensePlate(state, licensePlate){ updateRegistrationLicensePlate(state, licensePlate){
state.order.vehicle.registration.licensePlate = licensePlate; state.order.vehicle.registration.licensePlate = licensePlate;
}, },
updateRegistrationAddress(state, registrationAddress){
state.order.vehicle.registration.address = registrationAddress;
},
updateRegistrationCity(state, registrationCity){
state.order.vehicle.registration.city = registrationCity;
},
updateRegistrationState(state, registrationState){ updateRegistrationState(state, registrationState){
state.order.vehicle.registration.state = registrationState; state.order.vehicle.registration.state = registrationState;
}, },
updateRegistrationZipCode(state, registrationZipCode){ updateRegistrationZipCode(state, registrationZipCode){
state.order.vehicle.registration.zipCode = registrationZipCode; state.order.vehicle.registration.zipCode = registrationZipCode;
}, },
updateRegistrationAddress(state, registrationAddress){
state.order.vehicle.registration.address = registrationAddress;
},
updateServiceLocationZipCode(state, serviceLocationZip){ updateServiceLocationZipCode(state, serviceLocationZip){
state.order.vehicle.registration.zip = serviceLocationZip; state.order.serviceLocation.zipCode = serviceLocationZip;
},
updateRegistrationCity(state, serviceCity){
state.order.vehicle.registration.city = serviceCity;
}, },
updateRegistrationFirstName(state, firstName){ updateRegistrationFirstName(state, firstName){
state.order.vehicle.registration.firstName = firstName; state.order.vehicle.registration.firstName = firstName;