WIP
This commit is contained in:
parent
4ccda4ee93
commit
9cf7204059
3 changed files with 94 additions and 80 deletions
|
|
@ -1,5 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="textbox-question" :class="hasError ? 'has-error' : ''">
|
<div class="textbox-question" :class="[
|
||||||
|
errors.length > 0 ? 'has-error' : '',
|
||||||
|
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"
|
||||||
|
|
@ -64,7 +67,8 @@ export default {
|
||||||
handleBlur,
|
handleBlur,
|
||||||
handleChange,
|
handleChange,
|
||||||
meta,
|
meta,
|
||||||
validate
|
validate,
|
||||||
|
errors,
|
||||||
} = useField(props.inputId, props.validationRules, fieldOptions);
|
} = useField(props.inputId, props.validationRules, fieldOptions);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|
@ -73,6 +77,7 @@ export default {
|
||||||
handleChange,
|
handleChange,
|
||||||
validate,
|
validate,
|
||||||
meta,
|
meta,
|
||||||
|
errors,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
|
||||||
|
|
@ -46,7 +46,7 @@ export async function getPageToRouteExistingOrderTo(toRoute = {}, existingHerita
|
||||||
//return 'vehicle-damage'; //(uncomment)
|
//return 'vehicle-damage'; //(uncomment)
|
||||||
return "vin-lookup"; //This may be temporary
|
return "vin-lookup"; //This may be temporary
|
||||||
} else {
|
} else {
|
||||||
return 'vehicle-damage';
|
return 'vin-lookup';
|
||||||
//return "estimate" (uncomment)
|
//return "estimate" (uncomment)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -31,59 +31,59 @@
|
||||||
</div>
|
</div>
|
||||||
<alert
|
<alert
|
||||||
class="my-3"
|
class="my-3"
|
||||||
v-if="MatchedDifferentVehicle"
|
v-if="matchedDifferentVehicle"
|
||||||
alertClass="alert-danger"
|
alertClass="alert-danger"
|
||||||
:alertHeadline="MatchedDifferentVehicle.headline"
|
:alertHeadline="matchedDifferentVehicle.headline"
|
||||||
:alertCopy="MatchedDifferentVehicle.copy"
|
:alertCopy="matchedDifferentVehicle.copy"
|
||||||
/>
|
/>
|
||||||
<alert
|
<alert
|
||||||
class="my-3"
|
class="my-3"
|
||||||
v-if="NoMatchAlertWidget"
|
v-if="noMatchAlert"
|
||||||
alertClass="alert-danger"
|
|
||||||
:alertHeadline="NoMatchAlertWidget.headline"
|
|
||||||
:alertCopy="NoMatchAlertWidget.copy"
|
|
||||||
/>
|
|
||||||
<alert
|
|
||||||
class="my-3"
|
|
||||||
v-if="NoServiceZipWidget"
|
|
||||||
alertClass="alert-warning"
|
alertClass="alert-warning"
|
||||||
:alertHeadline="NoServiceZipWidget.headline"
|
:alertHeadline="noMatchAlertWidget.headline"
|
||||||
:alertCopy="NoServiceZipWidget.copy"
|
:alertCopy="noMatchAlertWidget.copy"
|
||||||
/>
|
/>
|
||||||
<alert
|
<alert
|
||||||
class="my-3"
|
class="my-3"
|
||||||
v-if="VinFoundWidget"
|
v-if="noServiceZip"
|
||||||
alertClass="alert-warning"
|
alertClass="alert-warning"
|
||||||
:alertHeadline="VinFoundWidget.headline"
|
:alertHeadline="noServiceZipWidget.headline"
|
||||||
:alertCopy="VinFoundWidget.copy"
|
:alertCopy="noServiceZipWidget.copy"
|
||||||
/>
|
/>
|
||||||
<alert
|
<alert
|
||||||
class="my-3"
|
class="my-3"
|
||||||
v-if="VinFoundReadOnlyWidget"
|
v-if="vinFound"
|
||||||
alertClass="alert-warning"
|
alertClass="alert-warning"
|
||||||
:alertHeadline="VinFoundReadOnlyWidget.headline"
|
:alertHeadline="vinFoundWidget.headline"
|
||||||
:alertCopy="VinFoundReadOnlyWidget.copy"
|
:alertCopy="vinFoundWidget.copy"
|
||||||
/>
|
/>
|
||||||
<alert
|
<alert
|
||||||
class="my-3"
|
class="my-3"
|
||||||
v-if="FoundWindshieldAlert"
|
v-if="vinFoundReadOnly"
|
||||||
alertClass="alert-warning"
|
alertClass="alert-warning"
|
||||||
:alertHeadline="FoundWindshieldAlert.headline"
|
:alertHeadline="vinFoundReadOnlyWidget.headline"
|
||||||
:alertCopy="FoundWindshieldAlert.copy"
|
:alertCopy="vinFoundReadOnlyWidget.copy"
|
||||||
/>
|
/>
|
||||||
<alert
|
<alert
|
||||||
class="my-3"
|
class="my-3"
|
||||||
v-if="VinNotFound"
|
v-if="foundWindshieldAlert"
|
||||||
alertClass="alert-warning"
|
alertClass="alert-warning"
|
||||||
:alertHeadline="VinNotFound.headline"
|
:alertHeadline="foundWindshieldAlertWidget.headline"
|
||||||
:alertCopy="VinNotFound.copy"
|
:alertCopy="foundWindshieldAlertWidget.copy"
|
||||||
/>
|
/>
|
||||||
<alert
|
<alert
|
||||||
class="my-3"
|
class="my-3"
|
||||||
v-if="PerfectMatchNewVinAlert"
|
v-if="vinNotFound"
|
||||||
alertClass="alert-warning"
|
alertClass="alert-warning"
|
||||||
:alertHeadline="PerfectMatchNewVinAlert.headline"
|
:alertHeadline="vinNotFoundWidget.headline"
|
||||||
:alertCopy="PerfectMatchNewVinAlert.copy"
|
:alertCopy="vinNotFoundWidget.copy"
|
||||||
|
/>
|
||||||
|
<alert
|
||||||
|
class="my-3"
|
||||||
|
v-if="perfectMatchNewVinAlert"
|
||||||
|
alertClass="alert-warning"
|
||||||
|
:alertHeadline="perfectMatchNewVinAlertWidget.headline"
|
||||||
|
:alertCopy="perfectMatchNewVinAlertWidget.copy"
|
||||||
/>
|
/>
|
||||||
<funnelFooter
|
<funnelFooter
|
||||||
cmsWidgetName="FunnelFooterWidget"
|
cmsWidgetName="FunnelFooterWidget"
|
||||||
|
|
@ -129,6 +129,8 @@ export default {
|
||||||
async beforeRouteEnter(to, from, next) {
|
async beforeRouteEnter(to, from, next) {
|
||||||
// Call APIs
|
// Call APIs
|
||||||
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
||||||
|
|
||||||
|
|
||||||
// Settle promises and get results
|
// Settle promises and get results
|
||||||
const promiseResultMap = [
|
const promiseResultMap = [
|
||||||
{
|
{
|
||||||
|
|
@ -136,24 +138,41 @@ export default {
|
||||||
promise: cmsContentPromise,
|
promise: cmsContentPromise,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const resultMap = await settleAllPromises(promiseResultMap);
|
const resultMap = await settleAllPromises(promiseResultMap);
|
||||||
|
|
||||||
// Call the "next" function to complete the transition to this page.
|
// Call the "next" function to complete the transition to this page.
|
||||||
next((vm) => {
|
next((vm) => {
|
||||||
vm.setCmsContent(resultMap.cmsContent);
|
vm.setCmsContent(resultMap.cmsContent);
|
||||||
vm.noServiceZipWidget = {
|
vm.matchedDifferentVehicleWidget = {
|
||||||
headline: resultMap.cmsContent.NoServiceZipWidget.HeadlineText,
|
headline: resultMap.cmsContent.MatchedDifferentVehicle.HeadlineText,
|
||||||
copy: resultMap.cmsContent.NoServiceZipWidget.BodyText,
|
copy: resultMap.cmsContent.MatchedDifferentVehicle.BodyText
|
||||||
};
|
};
|
||||||
vm.noMatchAlertWidget = {
|
vm.noMatchAlertWidget = {
|
||||||
headline: resultMap.cmsContent.NoMatchAlertWidget.HeadlineText,
|
headline: resultMap.cmsContent.NoMatchAlertWidget.HeadlineText,
|
||||||
copy: resultMap.cmsContent.NoMatchAlertWidget.BodyText
|
copy: resultMap.cmsContent.NoMatchAlertWidget.BodyText
|
||||||
};
|
};
|
||||||
vm.MatchedDifferentVehicle = {
|
vm.noServiceZipWidget = {
|
||||||
headline: resultMap.cmsContent.MatchedDifferentVehicle.HeadlineText,
|
headline: resultMap.cmsContent.NoServiceZipWidget.HeadlineText,
|
||||||
copy: resultMap.cmsContent.MatchedDifferentVehicle.BodyText
|
copy: resultMap.cmsContent.NoServiceZipWidget.BodyText
|
||||||
};
|
};
|
||||||
vm.PerfectMatchNewVinAlert = {
|
vm.vinFoundWidget = {
|
||||||
|
headline: resultMap.cmsContent.VinFoundWidget.HeadlineText,
|
||||||
|
copy: resultMap.cmsContent.VinFoundWidget.BodyText
|
||||||
|
};
|
||||||
|
vm.vinFoundReadOnlyWidget = {
|
||||||
|
headline: resultMap.cmsContent.VinFoundReadOnlyWidget.HeadlineText,
|
||||||
|
copy: resultMap.cmsContent.VinFoundReadOnlyWidget.BodyText
|
||||||
|
};
|
||||||
|
vm.foundWindshieldAlertWidget = {
|
||||||
|
headline: resultMap.cmsContent.FoundWindshieldAlert.HeadlineText,
|
||||||
|
copy: resultMap.cmsContent.FoundWindshieldAlert.BodyText
|
||||||
|
};
|
||||||
|
vm.vinNotFoundWidget = {
|
||||||
|
headline: resultMap.cmsContent.VinNotFound.HeadlineText,
|
||||||
|
copy: resultMap.cmsContent.VinNotFound.BodyText
|
||||||
|
};
|
||||||
|
vm.perfectMatchNewVinAlertWidget = {
|
||||||
headline: resultMap.cmsContent.PerfectMatchNewVinAlert.HeadlineText,
|
headline: resultMap.cmsContent.PerfectMatchNewVinAlert.HeadlineText,
|
||||||
copy: resultMap.cmsContent.PerfectMatchNewVinAlert.BodyText
|
copy: resultMap.cmsContent.PerfectMatchNewVinAlert.BodyText
|
||||||
};
|
};
|
||||||
|
|
@ -164,15 +183,14 @@ export default {
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
MatchedDifferentVehicle: false,
|
matchedDifferentVehicle: false,
|
||||||
NoMatchAlertWidget: false,
|
noMatchAlert: false,
|
||||||
PerfectMatchNewVinAlert: false,
|
noServiceZip: false,
|
||||||
NoServiceZipWidget: false,
|
vinFound: false,
|
||||||
VinFoundWidget: false,
|
vinFoundReadOnly: false,
|
||||||
VinFoundReadOnlyWidget: false,
|
foundWindshieldAlert: false,
|
||||||
FoundWindshieldAlert: false,
|
vinNotFound: false,
|
||||||
newServiceZipRequired: false,
|
perfectMatchNewVinAlert: false,
|
||||||
VinNotFound: false,
|
|
||||||
vin: '',
|
vin: '',
|
||||||
zip: '',
|
zip: '',
|
||||||
email: '',
|
email: '',
|
||||||
|
|
@ -193,24 +211,18 @@ export default {
|
||||||
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||||
},
|
},
|
||||||
async forwardButtonAction() {
|
async forwardButtonAction() {
|
||||||
const zipValidation = this.serviceZip ? await this.validateZip(this.serviceZip) : await this.validateZip(this.zip);
|
const zipValidation = await this.validateZip(this.zip);
|
||||||
|
console.log(zipValidation);
|
||||||
if (!zipValidation.data.isServiceable) {
|
if (!zipValidation.data.isServiceable) {
|
||||||
//this.$refs.funnelFooter.removeLoader();
|
this.$refs.funnelFooter.removeLoader();
|
||||||
this.newServiceZipRequired = true;
|
this.noServiceZip = true;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const vinLookup = await this.lookupVin(this.licensePlate, zipValidation.data.state).catch(() => {
|
const vinLookup = await this.lookupVin(this.vin).catch(() => {
|
||||||
this.$refs.funnelFooter.removeLoader();
|
this.$refs.funnelFooter.removeLoader();
|
||||||
this.vinNotValid = true;
|
this.vinNotValid = true;
|
||||||
return;
|
return;
|
||||||
});
|
});
|
||||||
if (vinLookup.data.vehicle.carId !== store.getters.vehicle.carId) {
|
|
||||||
this.$refs.funnelFooter.updateButtonText(`Continue with ${vinLookup.data.vin} ${vinLookup.data.vehicle.year} ${vinLookup.data.vehicle.make} ${vinLookup.data.vehicle.model}`);
|
|
||||||
//this.$refs.funnelFooter.removeLoader();
|
|
||||||
this.vinDoesNotMatchCarId = true;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const partsData = await baseMixin.methods.dispatchNonBlockingStoreAction(
|
const partsData = await baseMixin.methods.dispatchNonBlockingStoreAction(
|
||||||
this.storeActions.GET_PARTS_OR_QUESTIONS,
|
this.storeActions.GET_PARTS_OR_QUESTIONS,
|
||||||
{
|
{
|
||||||
|
|
@ -240,10 +252,10 @@ export default {
|
||||||
{ zip }
|
{ zip }
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
lookupVin(plate, state) {
|
lookupVin(vin) {
|
||||||
return baseMixin.methods.dispatchNonBlockingStoreAction(
|
return baseMixin.methods.dispatchNonBlockingStoreAction(
|
||||||
storeActions.LOOKUP_VIN_BY_PLATE,
|
storeActions.LOOKUP_VEHICLE_BY_VIN,
|
||||||
{ licensePlate: plate, licenseState: state }
|
{ vin }
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
updateStore() {
|
updateStore() {
|
||||||
|
|
@ -260,9 +272,6 @@ export default {
|
||||||
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, null);
|
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, null);
|
||||||
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, null);
|
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, null);
|
||||||
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, null);
|
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, null);
|
||||||
store.commit(storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE, null);
|
|
||||||
store.commit(storeMutations.UPDATE_REGISTRATION_STATE, null);
|
|
||||||
store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, null);
|
|
||||||
store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP, null);
|
store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP, null);
|
||||||
store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, null);
|
store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, null);
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue