This commit is contained in:
bmauger 2022-04-18 11:12:32 -04:00
parent 9cf7204059
commit e1f20ad3a8
2 changed files with 50 additions and 77 deletions

View file

@ -31,59 +31,59 @@
</div>
<alert
class="my-3"
v-model="customAlertData"
v-if="matchedDifferentVehicle"
alertClass="alert-danger"
:alertHeadline="matchedDifferentVehicle.headline"
:alertCopy="matchedDifferentVehicle.copy"
cmsWidgetName="MatchedDifferentVehicle"
/>
<alert
class="my-3"
v-model="customAlertData"
v-if="noMatchAlert"
alertClass="alert-warning"
:alertHeadline="noMatchAlertWidget.headline"
:alertCopy="noMatchAlertWidget.copy"
cmsWidgetName="NoMatchAlertWidget"
/>
<alert
class="my-3"
v-model="customAlertData"
v-if="noServiceZip"
alertClass="alert-warning"
:alertHeadline="noServiceZipWidget.headline"
:alertCopy="noServiceZipWidget.copy"
cmsWidgetName="NoServiceZipWidget"
/>
<alert
class="my-3"
v-model="customAlertData"
v-if="vinFound"
alertClass="alert-warning"
:alertHeadline="vinFoundWidget.headline"
:alertCopy="vinFoundWidget.copy"
cmsWidgetName="VinFoundWidget"
/>
<alert
class="my-3"
v-model="customAlertData"
v-if="vinFoundReadOnly"
alertClass="alert-warning"
:alertHeadline="vinFoundReadOnlyWidget.headline"
:alertCopy="vinFoundReadOnlyWidget.copy"
cmsWidgetName="VinFoundReadOnlyWidget"
/>
<alert
class="my-3"
v-model="customAlertData"
v-if="foundWindshieldAlert"
alertClass="alert-warning"
:alertHeadline="foundWindshieldAlertWidget.headline"
:alertCopy="foundWindshieldAlertWidget.copy"
cmsWidgetName="FoundWindshieldAlert"
/>
<alert
class="my-3"
v-model="customAlertData"
v-if="vinNotFound"
alertClass="alert-warning"
:alertHeadline="vinNotFoundWidget.headline"
:alertCopy="vinNotFoundWidget.copy"
cmsWidgetName="VinNotFound"
/>
<alert
class="my-3"
v-model="customAlertData"
v-if="perfectMatchNewVinAlert"
alertClass="alert-warning"
:alertHeadline="perfectMatchNewVinAlertWidget.headline"
:alertCopy="perfectMatchNewVinAlertWidget.copy"
cmsWidgetName="PerfectMatchNewVinAlert"
/>
<funnelFooter
cmsWidgetName="FunnelFooterWidget"
@ -144,38 +144,6 @@ export default {
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.matchedDifferentVehicleWidget = {
headline: resultMap.cmsContent.MatchedDifferentVehicle.HeadlineText,
copy: resultMap.cmsContent.MatchedDifferentVehicle.BodyText
};
vm.noMatchAlertWidget = {
headline: resultMap.cmsContent.NoMatchAlertWidget.HeadlineText,
copy: resultMap.cmsContent.NoMatchAlertWidget.BodyText
};
vm.noServiceZipWidget = {
headline: resultMap.cmsContent.NoServiceZipWidget.HeadlineText,
copy: resultMap.cmsContent.NoServiceZipWidget.BodyText
};
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,
copy: resultMap.cmsContent.PerfectMatchNewVinAlert.BodyText
};
});
},
props: {
@ -194,6 +162,7 @@ export default {
vin: '',
zip: '',
email: '',
customAlertData: {},
};
},
methods: {
@ -212,17 +181,25 @@ export default {
},
async forwardButtonAction() {
const zipValidation = await this.validateZip(this.zip);
console.log(zipValidation);
if (!zipValidation.data.isServiceable) {
this.customAlertData.zip = this.zip;
this.$refs.funnelFooter.removeLoader();
this.noServiceZip = true;
return;
}
const vinLookup = await this.lookupVin(this.vin).catch(() => {
this.$refs.funnelFooter.removeLoader();
this.vinNotValid = true;
this.noMatchAlert = true;
return;
});
if (vinLookup.data.carId !== store.getters.vehicle.carId) {
this.customAlertData.vehicleInfo = vinLookup.data.vehicle;
this.$refs.funnelFooter.removeLoader();
this.foundWindshieldAlert = true;
return;
}
const carInfo = this.vinDoesNotMatchCarId ? vinLookup.data : store.getters.vehicle;
this.updateStore(carInfo)
const partsData = await baseMixin.methods.dispatchNonBlockingStoreAction(
this.storeActions.GET_PARTS_OR_QUESTIONS,
{
@ -258,22 +235,22 @@ export default {
{ vin }
);
},
updateStore() {
updateStore(carInfo) {
// if(vehicleDamage){
// store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
// }
store.commit(storeMutations.UPDATE_VEHICLE_VIN, null);
store.commit(storeMutations.UPDATE_YEAR, null);
store.commit(storeMutations.UPDATE_MAKE, null);
store.commit(storeMutations.UPDATE_MODEL, null);
store.commit(storeMutations.UPDATE_STYLE, null);
store.commit(storeMutations.UPDATE_CAR_ID, null);
store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null);
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, null);
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, null);
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, null);
store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP, null);
store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, null);
store.commit(storeMutations.UPDATE_VEHICLE_VIN, this.vin);
store.commit(storeMutations.UPDATE_YEAR, carInfo.year);
store.commit(storeMutations.UPDATE_MAKE, carInfo.make);
store.commit(storeMutations.UPDATE_MODEL, carInfo.model);
store.commit(storeMutations.UPDATE_STYLE, carInfo.style);
store.commit(storeMutations.UPDATE_CAR_ID, carInfo.carId);
store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, carInfo.category);
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, carInfo.imageUrl);
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, carInfo.imageVifNumber);
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, carInfo.imageColor);
store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP, this.zip);
store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.email);
},
},
components: {

View file

@ -5,12 +5,7 @@
:class="[isDismissible ? 'alert-dismissible' : '', this.alertClass]"
>
<p class="m-0 fw-bold small alert-heading">{{ alertHeadline }}</p>
<span v-if="isMultiParagraph">
<p class="m-1 text-body small" v-for="(para, index) in alertCopy" :key="index">
{{ para }}
</p>
</span>
<p class="m-0 text-body small" v-else>{{ alertCopy }}</p>
<p class="m-0 text-body small">{{ alertCopy }}</p>
<button
type="button"
class="btn-close p-2"
@ -34,8 +29,6 @@
export default {
name: "alert",
props: {
alertHeadline: String,
alertCopy: [Array, String],
isDismissible: Boolean,
/*
alertClass class names:
@ -45,14 +38,17 @@ export default {
alert-info (blue)
*/
alertClass: String,
cmsWidgetName: String,
manualHeadline: String,
manualCopy: String,
},
computed: {
isMultiParagraph() {
if (typeof this.alertCopy == "string") {
return false;
}
return true;
}
alertHeadline(){
return this.cmsWidgetName ? this.getCmsContent(this.cmsWidgetName, 'HeadlineText') : this.manualHeadline;
},
alertCopy(){
return this.cmsWidgetName ? this.getCmsContent(this.cmsWidgetName, 'BodyText') : this.manualCopy;
},
},
};
</script>