commit
408d5a35a2
8 changed files with 114 additions and 82 deletions
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -43,7 +43,7 @@ export default ({
|
||||||
streetAddress: "",
|
streetAddress: "",
|
||||||
city: "",
|
city: "",
|
||||||
state: "",
|
state: "",
|
||||||
zip: "",
|
zipCode: "",
|
||||||
},
|
},
|
||||||
firstName: "",
|
firstName: "",
|
||||||
lastName: "",
|
lastName: "",
|
||||||
|
|
|
||||||
|
|
@ -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",
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue