CSR-416 Fix merge conflict
This commit is contained in:
Katie
commit
2790f78aa9
8 changed files with 108 additions and 85 deletions
|
|
@ -42,7 +42,8 @@ export default {
|
|||
setup(props) {
|
||||
const fieldOptions = {
|
||||
type: "text",
|
||||
value: props.modelValue,
|
||||
value: props.modelValue,
|
||||
initialValue: props.modelValue,
|
||||
};
|
||||
|
||||
const {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<template>
|
||||
<div class="textbox-question" :class="(errors && errors.length) || hasError ? 'has-error' : ''">
|
||||
<label :for="inputId" :aria-label="questionText" class="form-label" v-html="labelText"></label>
|
||||
<input v-model="value"
|
||||
<input
|
||||
v-model="value"
|
||||
v-maska="mask"
|
||||
:type="type"
|
||||
class="form-control"
|
||||
|
|
@ -15,8 +16,7 @@
|
|||
autocomplete="off"
|
||||
:class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']"
|
||||
:validationRules="validationRules"
|
||||
@change="handleChange"
|
||||
@blur="handleBlur" />
|
||||
/>
|
||||
<div v-show="errorMessage" class="row mt-2 form-test-error">
|
||||
<span role="alert">{{ errorMessage }}</span>
|
||||
</div>
|
||||
|
|
@ -57,13 +57,9 @@ export default {
|
|||
const fieldOptions = {
|
||||
type: "text",
|
||||
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 {
|
||||
errorMessage,
|
||||
handleBlur,
|
||||
|
|
@ -115,6 +111,11 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(newValue) {
|
||||
this.handleChange(newValue);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -166,4 +167,4 @@ export default {
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
@ -1,11 +1,6 @@
|
|||
<template>
|
||||
<Form
|
||||
@submit="onSubmit"
|
||||
@invalid-submit="onInvalidSubmit"
|
||||
ref="theForm"
|
||||
v-slot="{ meta }"
|
||||
autocomplete="off" >
|
||||
<div class="page-container-grouped-styles">
|
||||
<Form ref="theForm" @submit="onSubmit" @invalid-submit="onInvalidSubmit" v-slot="{ meta }" autocomplete="off">
|
||||
<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
|
||||
<loadingModal :showCloseButton=false :clickOutCloses=false ref="loadingModal">
|
||||
<template v-slot:body>
|
||||
Please wait...
|
||||
|
|
@ -49,7 +44,7 @@
|
|||
<div class="service-zip-field" v-if="showServiceZipField" aria-live="polite">
|
||||
<div class="row my-4">
|
||||
<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>
|
||||
|
|
@ -125,19 +120,22 @@ export default {
|
|||
streetAddress: this.getRegistrationAddressFromStore(),
|
||||
city: this.getRegistrationCityFromStore(),
|
||||
state: this.getRegistrationStateFromStore(),
|
||||
zip: this.getRegistrationZipFromStore(),
|
||||
zipCode: this.getRegistrationZipFromStore(),
|
||||
},
|
||||
firstName: this.getRegistrationFirstNameFromStore(),
|
||||
lastName: this.getRegistrationLastNameFromStore(),
|
||||
emailAddress: this.getEmailFromStore(),
|
||||
},
|
||||
serviceZip: this.getServiceZipFromStore(),
|
||||
serviceZipCode: this.getServiceZipFromStore(),
|
||||
displayNonServiceableZipAlert: false,
|
||||
displayVinNotFoundAlert: false,
|
||||
displayMatchedDifferentVehicleAlert: false,
|
||||
displayVinLookupByHomeAddressNotAllowedAlert: false,
|
||||
previousCarIdFound: "",
|
||||
customAlertData: {},
|
||||
previouslyEnteredCarId: "",
|
||||
isSelectedGlassAvailableForVehicle: false,
|
||||
customAlertData: {},
|
||||
showServiceZipField: this.getServiceZipFromStore(),
|
||||
isZipServicable: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -186,7 +184,7 @@ export default {
|
|||
const vinLookup = await this.lookupVin(
|
||||
this.customerQuestions.lastName,
|
||||
this.customerQuestions.addressQuestions.streetAddress,
|
||||
this.customerQuestions.addressQuestions.zip,
|
||||
this.customerQuestions.addressQuestions.zipCode,
|
||||
this.customerQuestions.addressQuestions.state
|
||||
);
|
||||
|
||||
|
|
@ -198,50 +196,59 @@ export default {
|
|||
}
|
||||
|
||||
// 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);
|
||||
if (!zipValidation.data.isServiceable) {
|
||||
const zipValidation = this.serviceZipCode ? await this.validateZip(this.serviceZipCode) : await this.validateZip(this.customerQuestions.addressQuestions.zipCode);
|
||||
this.isZipServicable = zipValidation.data.isServiceable;
|
||||
if (!this.isZipServicable) {
|
||||
this.displayNonServiceableZipAlert = true;
|
||||
this.showServiceZipField = true;
|
||||
this.$refs.funnelFooter.removeLoader();
|
||||
this.$refs.funnelFooter.removeLoader();
|
||||
}
|
||||
|
||||
const carEntered = store.getters.vehicle;
|
||||
const carsFound = vinLookup.data.vinVehicles;
|
||||
const carsFound = vinLookup.data.vinVehicles;
|
||||
|
||||
if (carsFound.length == 0) {
|
||||
// No VINs found
|
||||
this.displayVinNotFoundAlert = true;
|
||||
this.$refs.funnelFooter.removeLoader();
|
||||
return;
|
||||
} 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) {
|
||||
// update data
|
||||
this.updateVehicleInfo(carFound.vin, carFound);
|
||||
this.updateCustomerInfo();
|
||||
|
||||
// navigate forward
|
||||
this.navigateForward(carEntered, carsFound);
|
||||
} else {
|
||||
if (this.isCarIdDifferent && carFound.carId !== this.previouslyEnteredCarId) {
|
||||
// Display Alert
|
||||
this.previouslyEnteredCarId = carFound.carId;
|
||||
this.customAlertData.vehicleInfo = carFound;
|
||||
this.displayMatchedDifferentVehicleAlert = true;
|
||||
|
||||
this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(carFound.carId);
|
||||
|
||||
// Update button "Continue with..."
|
||||
this.$refs.funnelFooter.updateButtonText(`Continue with ${carFound.year} ${carFound.make} ${carFound.model}`);
|
||||
this.$refs.funnelFooter.removeLoader();
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.isZipServicable) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.previousCarIdFound = carFound.carId;
|
||||
|
||||
} else if (vinLookup.data.vinVehicles.length > 1) {
|
||||
// update data if the zip or service zip is servicable
|
||||
this.updateVehicleInfo(carFound.vin, carFound);
|
||||
this.updateCustomerInfo();
|
||||
|
||||
} else if (carsFound.length > 1) {
|
||||
if (!this.isZipServicable) {
|
||||
return;
|
||||
}
|
||||
|
||||
// navigate forward
|
||||
this.navigateForward(carEntered, carsFound);
|
||||
// update data if the zip or service zip is servicable
|
||||
this.updateCustomerInfo();
|
||||
}
|
||||
|
||||
|
||||
this.navigateForward(carEntered, carsFound);
|
||||
},
|
||||
resetWarningsAndErrors() {
|
||||
this.displayVinNotFoundAlert = false;
|
||||
|
|
@ -251,21 +258,16 @@ export default {
|
|||
},
|
||||
async navigateForward(carEntered, carsFound) {
|
||||
if (carsFound.length == 1) {
|
||||
// get the damage options for the car that was found
|
||||
const carFound = carsFound[0].vehicle;
|
||||
const glassOptions = await baseMixin.methods.dispatchStoreAction(
|
||||
storeActions.GET_DAMAGE_OPTIONS,
|
||||
{ carId: carFound.carId }
|
||||
);
|
||||
|
||||
// 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);
|
||||
if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
|
||||
this.$router.navigateAfterSave(
|
||||
this.navigationScenarios.CONTINUING_WITH_DIFFERENT_GLASS,
|
||||
this.$route, {}, {
|
||||
displayVehicleChangeAlert: true
|
||||
}, {}
|
||||
);
|
||||
} else {
|
||||
// if not then navigate to the "vehicle-damage" page
|
||||
this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD, this.$route, {}, { displayVehicleChangeAlert: true }, {});
|
||||
}
|
||||
navigateAfterSaveToHeritageFunnel(this.$route);
|
||||
}
|
||||
} else if (carsFound.length > 1) {
|
||||
// if multiple cars were found
|
||||
if (carsFound.find(car => car.carId === carEntered.carId)) {
|
||||
|
|
@ -273,8 +275,10 @@ export default {
|
|||
this.$refs.loadingModal.showModal();
|
||||
navigateAfterSaveToHeritageFunnel(this.$route);
|
||||
} else {
|
||||
// and there is no match, navigate to "address-vehicle" page
|
||||
this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_VEHICLES, this.$route, {}, {}, carsFound);
|
||||
// and there is no match, navigate to "address-vehicles" page
|
||||
this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_VEHICLES,
|
||||
this.$route, {}, {},
|
||||
carsFound);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -314,29 +318,29 @@ export default {
|
|||
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_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.emailAddress);
|
||||
},
|
||||
|
||||
},
|
||||
computed: {
|
||||
AlertNonServiceableZipHeader(){
|
||||
let zip = this.serviceZip ? this.serviceZip : this.customerQuestions.addressQuestions.zip;
|
||||
let text = this.getCmsContent("AlertNonServiceableZipWidget", "HeadlineText").replaceAll("{custom:serviceZip}", zip);
|
||||
const zipCode = this.serviceZipCode ? this.serviceZipCode : this.customerQuestions.addressQuestions.zipCode;
|
||||
const text = this.getCmsContent("AlertNonServiceableZipWidget", "HeadlineText").replaceAll("{custom:serviceZip}", zipCode);
|
||||
return text;
|
||||
},
|
||||
AlertNonServiceableZipBody(){
|
||||
return this.getCmsContent("AlertNonServiceableZipWidget", "BodyText");
|
||||
},
|
||||
AlertMatchedDifferentVehicleHeader(){
|
||||
let text = this.getCmsContent("AlertMatchedDifferentVehicleWidget", "HeadlineText").replaceAll("{custom:glassText}", getDamageString());
|
||||
const text = this.getCmsContent("AlertMatchedDifferentVehicleWidget", "HeadlineText").replaceAll("{custom:glassText}", getDamageString());
|
||||
return text;
|
||||
},
|
||||
AlertMatchedDifferentVehicleBody(){
|
||||
let content = this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText");
|
||||
content = content.replaceAll("{custom:glassText}", getDamageString());
|
||||
let 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 vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.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:vinYmmExpected}", vinYmmExpected);
|
||||
|
|
@ -347,20 +351,27 @@ export default {
|
|||
watch: {
|
||||
customerQuestions: {
|
||||
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.showServiceZipField = false;
|
||||
this.resetWarningsAndErrors();
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
serviceZip: {
|
||||
serviceZipCode: {
|
||||
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;
|
||||
},
|
||||
},
|
||||
showServiceZipField: {
|
||||
handler(newValue) {
|
||||
// if the Service Zip Code field is ever hidden, clear out it's value
|
||||
if (!newValue) {
|
||||
this.serviceZipCode = null;
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
},
|
||||
components: {
|
||||
funnelHeader,
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
<dropdownQuestion cmsWidgetName="StateQuestionWidget" v-model="addressModel.state" ref="state" inputId="8fdf9dc2e13e430eb57529499dceb3eb" :options="stateOptions" disableAutoFill validationRules="state-required" />
|
||||
</div>
|
||||
<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>
|
||||
</transition>
|
||||
|
|
@ -48,8 +48,8 @@ import { errorMessages } from "@/constants/error-messages";
|
|||
defineRule("street-address-required", required(errorMessages.STREET_ADDRESS_REQUIRED));
|
||||
defineRule("city-required", required(errorMessages.CITY_REQUIRED));
|
||||
defineRule("state-required", required(errorMessages.STATE_REQUIRED));
|
||||
defineRule("zip-required", required(errorMessages.ZIP_REQUIRED));
|
||||
defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_FORMAT));
|
||||
defineRule("zip-code-required", required(errorMessages.ZIP_REQUIRED));
|
||||
defineRule("zip-code-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_FORMAT));
|
||||
|
||||
export default ({
|
||||
name: "address-questions",
|
||||
|
|
@ -61,7 +61,7 @@ export default ({
|
|||
streetAddress: "",
|
||||
city: "",
|
||||
state: "",
|
||||
zip: "",
|
||||
zipCode: "",
|
||||
}),
|
||||
},
|
||||
validationRules: String,
|
||||
|
|
@ -146,6 +146,15 @@ export default ({
|
|||
},
|
||||
methods: {
|
||||
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 self = this;
|
||||
|
||||
|
|
@ -166,7 +175,7 @@ export default ({
|
|||
// Standard place_changed event handling
|
||||
autocomplete.addListener('place_changed', fillInAddress);
|
||||
|
||||
addressField1.onblur = function() {
|
||||
addressField1.onchange = function() {
|
||||
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 (hover === null) {
|
||||
|
|
@ -187,7 +196,7 @@ export default ({
|
|||
else {
|
||||
self.addressModel.city = "";
|
||||
self.addressModel.state = "";
|
||||
self.addressModel.zip = "";
|
||||
self.addressModel.zipCode = "";
|
||||
self.showAddressFields = true;
|
||||
self.displayVerificationWarning = false;
|
||||
self.displayNoMatchWarning = true;
|
||||
|
|
@ -225,7 +234,7 @@ export default ({
|
|||
break;
|
||||
}
|
||||
case "postal_code": {
|
||||
self.addressModel.zip = component.long_name;
|
||||
self.addressModel.zipCode = component.long_name;
|
||||
break;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ export default ({
|
|||
streetAddress: "",
|
||||
city: "",
|
||||
state: "",
|
||||
zip: "",
|
||||
zipCode: "",
|
||||
},
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ const navigationScenarios = {
|
|||
CONTINUING_WITH_MULTIPLE_PARTS: "CONTINUING_WITH_MULTIPLE_PARTS",
|
||||
CONTINUING_WITH_SINGLE_PART: "CONTINUING_WITH_SINGLE_PART",
|
||||
CONTINUING_WITH_MULTIPLE_VEHICLES: "CONTINUING_WITH_MULTIPLE_VEHICLES",
|
||||
CONTINUING_WITH_DIFFERENT_GLASS: "CONTINUING_WITH_DIFFERENT_GLASS",
|
||||
CLICKED_FORWARD_WITHOUT_VIN: "CLICKED_FORWARD_WITHOUT_VIN",
|
||||
SELECTED_MANUAL_VIN: "SELECTED_MANUAL_VIN",
|
||||
SELECTED_LICENSE_PLATE: "SELECTED_LICENSE_PLATE",
|
||||
|
|
|
|||
|
|
@ -139,7 +139,7 @@ const routingTable = [
|
|||
destinationFmgPageValue: fmgPageValues.ADDRESS_VEHICLES,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD,
|
||||
scenario: navigationScenarios.CONTINUING_WITH_DIFFERENT_GLASS,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -136,21 +136,21 @@ export const mutations = {
|
|||
console.log(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){
|
||||
state.order.vehicle.registration.state = registrationState;
|
||||
},
|
||||
updateRegistrationZipCode(state, registrationZipCode){
|
||||
state.order.vehicle.registration.zipCode = registrationZipCode;
|
||||
},
|
||||
updateRegistrationAddress(state, registrationAddress){
|
||||
state.order.vehicle.registration.address = registrationAddress;
|
||||
},
|
||||
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){
|
||||
state.order.vehicle.registration.firstName = firstName;
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue