417 lines
16 KiB
Vue
417 lines
16 KiB
Vue
<template>
|
|
<Form
|
|
@submit="onSubmit"
|
|
@invalid-submit="onInvalidSubmit"
|
|
ref="theForm"
|
|
v-slot="{ meta }"
|
|
>
|
|
<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
|
|
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
|
|
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
|
|
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
|
|
<damageLocationQuestion
|
|
ref="damageLocation"
|
|
cmsWidgetName="DamageLocationQuestion"
|
|
v-model="selectedDamageLocations"
|
|
groupName="DamageLocationQuestion"
|
|
/>
|
|
<windshieldOptions
|
|
ref="windshieldOptions"
|
|
v-model="selectedWindshieldOptions"
|
|
:hasRepairReplaceConflict="hasRepairReplaceConflict"
|
|
:hasSplitSingleConflict="hasSplitSingleConflict"
|
|
:selectedDamageLocations="selectedDamageLocations"
|
|
/>
|
|
<alert
|
|
class="my-3"
|
|
v-show="hasRepairReplaceConflict"
|
|
alertClass="alert-danger"
|
|
alertHeadline="You'll need to schedule separate appointments"
|
|
:alertCopy="['Vehicle service requiring both glass repair and replacement must be scheduled separately, as they\'re performed by different technicians.', 'Continue scheduling your first service now, and then come back to schedule the second service.']"
|
|
:isDismissible="false"
|
|
/>
|
|
<sideDoorOptions
|
|
ref="sideDoorOptions"
|
|
cmsWidgetName="SideDoorSideQuestion"
|
|
groupName="SideDoorSideQuestion"
|
|
v-model="sideDoorOptionsData"
|
|
v-show="!hasRepairReplaceConflict"
|
|
:selectedDamageLocations="selectedDamageLocations"
|
|
/>
|
|
<replaceOptionsQuestion
|
|
ref="backGlassOptions"
|
|
cmsWidgetName="RearReplaceOptionsQuestion"
|
|
:isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
|
|
v-model="selectedRearReplaceOptions"
|
|
groupName="BackGlassReplaceOptionsQuestion"
|
|
validationRules="replace-options-required"
|
|
/>
|
|
<funnel-footer
|
|
cmsWidgetName="FunnelFooterWidget"
|
|
:isDisabled="!meta.valid"
|
|
@back-clicked="backButtonAction"
|
|
@ForwardClicked="forwardButtonAction"
|
|
/>
|
|
</div>
|
|
</Form>
|
|
</template>
|
|
|
|
<script>
|
|
// Components
|
|
import funnelHeader from "@/common-components/funnel-header/funnel-header";
|
|
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
|
|
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
|
|
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
|
|
import sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-door-options";
|
|
import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
|
|
import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";
|
|
import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
|
|
import alert from "@/ux-components/alert/alert";
|
|
|
|
// Supporting files
|
|
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
|
import { settleAllPromises } from "@/helpers/layout-helper";
|
|
import { storeActions } from "@/constants/store-actions";
|
|
import { Form, defineRule } from "vee-validate";
|
|
import { required } from "@/helpers/validation-rules";
|
|
import { errorMessages } from "@/constants/error-messages";
|
|
import { damageLocationsCms } from "@/constants/damage-locations-cms.js";
|
|
import { damageLocationsSelected } from "@/constants/damage-locations-selected.js";
|
|
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
|
|
|
|
import store from "@/store";
|
|
import baseMixin from "@/mixins/base-mixin";
|
|
|
|
// DEFINE VALIDATION RULES
|
|
defineRule("replace-options-required", required(errorMessages.REPLACE_OPTIONS_REQUIRED));
|
|
|
|
export default {
|
|
name: "vehicle-damage",
|
|
async beforeRouteEnter(to, from, next) {
|
|
// Call APIs
|
|
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
|
const damageOptionsPromise =
|
|
baseMixin.methods.dispatchNonBlockingStoreAction(
|
|
storeActions.GET_DAMAGE_OPTIONS,
|
|
{ carId: store.getters.vehicle.carId }
|
|
);
|
|
|
|
// Settle promises and get results
|
|
const promiseResultMap = [
|
|
{
|
|
resultKey: "cmsContent",
|
|
promise: cmsContentPromise,
|
|
},
|
|
{
|
|
resultKey: "damageOptions",
|
|
promise: damageOptionsPromise,
|
|
},
|
|
];
|
|
|
|
const resultMap = await settleAllPromises(promiseResultMap);
|
|
|
|
// Call the "next" function to complete the transition to this page.
|
|
next((vm) => {
|
|
vm.setCmsContent(resultMap.cmsContent);
|
|
vm.$refs.damageLocation.initializeComponent(
|
|
resultMap.damageOptions
|
|
);
|
|
vm.$refs.sideDoorOptions.initializeComponent(
|
|
resultMap.damageOptions.driverSideOptions.availableReplacementOptions, resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
|
|
);
|
|
vm.$refs.windshieldOptions.initializeComponent(
|
|
resultMap.damageOptions.windshieldOptions.availableReplacementOptions
|
|
);
|
|
vm.$refs.backGlassOptions.initializeComponent(
|
|
resultMap.damageOptions.backGlassOptions.availableReplacementOptions
|
|
);
|
|
});
|
|
},
|
|
data(){
|
|
return {
|
|
selectedDamageLocations: this.getDamageLocationsFromStore(),
|
|
sideDoorOptionsData: {
|
|
selectedDoorSides: this.getDoorSidesFromStore(),
|
|
selectedDriverSideReplaceOptions: this.getDriverSideReplaceOptionsFromStore(),
|
|
selectedPassengerSideReplaceOptions: this.getPassengerSideReplaceOptionsFromStore()
|
|
},
|
|
selectedWindshieldOptions: this.getWindshieldOptionsFromStore(),
|
|
selectedRearReplaceOptions: this.getRearReplaceOptionsFromStore(),
|
|
}
|
|
},
|
|
methods: {
|
|
arePagePrerequisitesValid() {
|
|
if(store.getters.vehicle.carId){
|
|
return true;
|
|
}
|
|
return false;
|
|
},
|
|
resetDependentState() {
|
|
store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
|
|
},
|
|
backButtonAction() {
|
|
// route to move backwards
|
|
this.$router.navigate(
|
|
this.navigationScenarios.CLICKED_BACK,
|
|
this.$route
|
|
);
|
|
},
|
|
getDamageLocationsFromStore() {
|
|
var glassSelections = [];
|
|
|
|
if (store.getters.damage.glassToReplace.some(glass => { return glass.location === damageLocationsSelected.WINDSHIELD }) ||
|
|
store.getters.damage.isRepair) {
|
|
glassSelections.push(damageLocationsSelected.WINDSHIELD);
|
|
}
|
|
if (store.getters.damage.glassToReplace.some(glass => { return glass.location === damageLocationsSelected.DRIVER ||
|
|
glass.location === damageLocationsSelected.PASSENGER })) {
|
|
glassSelections.push(damageLocationsSelected.SIDEDOOR);
|
|
}
|
|
|
|
if (store.getters.damage.glassToReplace.some(glass => { return glass.location === damageLocationsSelected.REAR })) {
|
|
glassSelections.push(damageLocationsSelected.REARWINDOW);
|
|
}
|
|
|
|
return glassSelections;
|
|
},
|
|
|
|
getWindshieldOptionsFromStore() {
|
|
var windShieldOptions = { selectedWindshieldDamageType: [], selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: []};
|
|
|
|
if (store.getters.damage.isRepair === undefined) return windshieldOptions;
|
|
|
|
if (!store.getters.damage.isRepair) {
|
|
if (store.getters.damage.glassToReplace.some(glass => { return glass.location === damageLocationsSelected.WINDSHIELD &&
|
|
glass.name === damageLocationsSelected.SINGLE })) {
|
|
windShieldOptions.selectedWindshieldDamageType.push(damageLocationsSelected.REPLACE);
|
|
windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.SINGLE);
|
|
}
|
|
|
|
if (store.getters.damage.glassToReplace.some(glass => { return glass.location === damageLocationsSelected.WINDSHIELD &&
|
|
glass.name === damageLocationsSelected.DRIVER })) {
|
|
windShieldOptions.selectedWindshieldDamageType.push(damageLocationsSelected.REPLACE);
|
|
windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.DRIVER);
|
|
}
|
|
|
|
if (store.getters.damage.glassToReplace.some(glass => { return glass.location === damageLocationsSelected.WINDSHIELD &&
|
|
glass.name === damageLocationsSelected.PASSENGER })) {
|
|
windShieldOptions.selectedWindshieldDamageType.push(damageLocationsSelected.REPLACE);
|
|
windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.PASSENGER);
|
|
}
|
|
}
|
|
|
|
if (store.getters.damage.isRepair) {
|
|
windShieldOptions.selectedWindshieldDamageType.push(damageLocationsSelected.REPAIR);
|
|
windShieldOptions.selectedWindshieldChipCount.push(store.getters.damage.numberOfChips);
|
|
}
|
|
|
|
return windShieldOptions;
|
|
|
|
},
|
|
|
|
getDoorSidesFromStore() {
|
|
var doorSides = [];
|
|
if (store.getters.damage.glassToReplace.some(glass => { return glass.location === damageLocationsSelected.DRIVER })){
|
|
doorSides.push(damageLocationsSelected.DRIVERSIDE);
|
|
}
|
|
|
|
if (store.getters.damage.glassToReplace.some(glass => { return glass.location === damageLocationsSelected.PASSENGER })){
|
|
doorSides.push(damageLocationsSelected.PASSENGERSIDE);
|
|
}
|
|
|
|
return doorSides;
|
|
},
|
|
|
|
getDriverSideReplaceOptionsFromStore() {
|
|
var driverSideReplaceOptions = [];
|
|
|
|
store.getters.damage.glassToReplace.forEach(glass => {
|
|
if (glass.location === damageLocationsSelected.DRIVER){
|
|
driverSideReplaceOptions.push(glass.name);
|
|
}
|
|
});
|
|
|
|
return driverSideReplaceOptions;
|
|
},
|
|
|
|
getPassengerSideReplaceOptionsFromStore() {
|
|
var passengerSideReplaceOptions = [];
|
|
|
|
store.getters.damage.glassToReplace.forEach(glass => {
|
|
if (glass.location === damageLocationsSelected.PASSENGER){
|
|
passengerSideReplaceOptions.push(glass.name);
|
|
}
|
|
});
|
|
|
|
return passengerSideReplaceOptions;
|
|
},
|
|
|
|
getRearReplaceOptionsFromStore(){
|
|
var rearReplaceOptions = [];
|
|
|
|
store.getters.damage.glassToReplace.forEach(glass => {
|
|
if (glass.location === damageLocationsSelected.REAR){
|
|
rearReplaceOptions.push(glass.name);
|
|
}
|
|
});
|
|
|
|
return rearReplaceOptions;
|
|
},
|
|
|
|
async forwardButtonAction() {
|
|
store.commit(this.storeMutations.UPDATE_IS_REPAIR, this.isWindshieldRepair);
|
|
|
|
if (this.isWindshieldRepair){
|
|
store.commit(this.storeMutations.UPDATE_NUMBER_OF_CHIPS, parseInt(this.selectedWindshieldOptions.selectedWindshieldChipCount));
|
|
} else {
|
|
store.commit(this.storeMutations.UPDATE_NUMBER_OF_CHIPS, null);
|
|
}
|
|
|
|
store.commit(this.storeMutations.UPDATE_GLASS_TO_REPLACE, this.selectedGlassToReplace());
|
|
|
|
const partsData = await baseMixin.methods.dispatchNonBlockingStoreAction(this.storeActions.GET_PARTS_OR_QUESTIONS,
|
|
{ carId: store.getters.vehicle.carId, glassArray: this.selectedGlassToReplace()}, false);
|
|
|
|
this.navigateForward(partsData);
|
|
},
|
|
|
|
navigateForward(partsData){
|
|
// CSR-98 TEMP
|
|
const vehicleYearsToShowHeritageFunnel = [ "2001", "2002", "2010" ];
|
|
if (vehicleYearsToShowHeritageFunnel.includes(store.getters.vehicle.year)) {
|
|
navigateToHeritageFunnel();
|
|
return;
|
|
}
|
|
|
|
//found problem questions
|
|
if (partsData.data.partsOrQuestions.some(pq => pq.partQuestions != null && pq.partQuestions.length > 0)){
|
|
this.$router.navigateAfterSave(this.navigationScenarios.SELECTED_DAMAGE_WITH_PART_QUESTIONS, this.$route, {}, {}, partsData.data);
|
|
return;
|
|
}
|
|
|
|
//found multiple parts for a single glass location (Windshield, Driver, Passenger, Rear)
|
|
if (partsData.data.partsOrQuestions){
|
|
for (var i = 0; i < partsData.data.partsOrQuestions.length; i++){
|
|
if (partsData.data.partsOrQuestions[i].parts != null && partsData.data.partsOrQuestions[i].parts.length > 1){
|
|
this.$router.navigateAfterSave(this.navigationScenarios.SELECTED_DAMAGE_WITH_MULTIPLE_PARTS, this.$route, {}, {}, partsData.data);
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
//if not a repair then there should only be 1 part and no problem questions at this point so save the part to the store.
|
|
if (!this.isWindshieldRepair){
|
|
store.commit(this.storeMutations.UPDATE_PARTS, partsData.data.partsOrQuestions[0].parts);
|
|
}
|
|
|
|
this.$router.navigate(this.navigationScenarios.SELECTED_DAMAGE_WITH_SINGLE_PART, this.$route);
|
|
},
|
|
|
|
selectedGlassToReplace() {
|
|
const selectedGlassToReplace = [];
|
|
if (this.isWindshieldDamageLocation && !this.isWindshieldRepair){
|
|
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach(wsItem => {
|
|
selectedGlassToReplace.push({ location: damageLocationsSelected.WINDSHIELD, name: wsItem});
|
|
})
|
|
}
|
|
|
|
if (this.isDriverSideReplace){
|
|
this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach(driverItem => {
|
|
selectedGlassToReplace.push({ location: damageLocationsSelected.DRIVER, name: driverItem});
|
|
})
|
|
}
|
|
|
|
if (this.isPassengerSideReplace){
|
|
this.sideDoorOptionsData.selectedPassengerSideReplaceOptions.forEach(passengerItem => {
|
|
selectedGlassToReplace.push({ location: damageLocationsSelected.PASSENGER, name: passengerItem});
|
|
})
|
|
}
|
|
|
|
if (this.isRearWindowDamageLocation) {
|
|
this.selectedRearReplaceOptions.forEach(rearItem => {
|
|
selectedGlassToReplace.push({ location: damageLocationsSelected.REAR, name: rearItem});
|
|
})
|
|
}
|
|
|
|
return selectedGlassToReplace;
|
|
},
|
|
},
|
|
computed: {
|
|
isWindshieldDamageLocation() {
|
|
return this.selectedDamageLocations.some(selectedDamages =>
|
|
{
|
|
return selectedDamages.toUpperCase() === damageLocationsCms.WINDSHIELD;
|
|
});
|
|
},
|
|
isSideDoorDamageLocation() {
|
|
return this.selectedDamageLocations.some(selectedDamages =>
|
|
{
|
|
return selectedDamages.toUpperCase() === damageLocationsCms.SIDEDOOR;
|
|
});
|
|
},
|
|
isRearWindowDamageLocation() {
|
|
return this.selectedDamageLocations.some(selectedDamages =>
|
|
{
|
|
return selectedDamages.toUpperCase() === damageLocationsCms.REARWINDOW;
|
|
});
|
|
},
|
|
isWindshieldRepair() {
|
|
if (!this.isWindshieldDamageLocation) return false;
|
|
|
|
return this.selectedWindshieldOptions.selectedWindshieldDamageType && this.selectedWindshieldOptions.selectedWindshieldDamageType.some(selectedDamageType =>
|
|
{
|
|
return selectedDamageType.toUpperCase() === "REPAIR";
|
|
});
|
|
},
|
|
isDriverSideReplace() {
|
|
if (!this.isSideDoorDamageLocation) return false;
|
|
|
|
return this.sideDoorOptionsData.selectedDoorSides.some(selectedDriverSide =>
|
|
{
|
|
return selectedDriverSide.toUpperCase() === damageLocationsCms.DRIVERSIDE;
|
|
});
|
|
},
|
|
isPassengerSideReplace() {
|
|
if (!this.isSideDoorDamageLocation) return false;
|
|
|
|
return this.sideDoorOptionsData.selectedDoorSides.some(selectedPassengerSide =>
|
|
{
|
|
return selectedPassengerSide.toUpperCase() === damageLocationsCms.PASSENGERSIDE;
|
|
});
|
|
},
|
|
hasRepairReplaceConflict() {
|
|
return this.isWindshieldDamageLocation && this.selectedDamageLocations.length > 1 && this.isWindshieldRepair;
|
|
},
|
|
hasSplitSingleConflict() {
|
|
if (!this.selectedWindshieldOptions.selectedWindshieldReplaceOptions) return false;
|
|
|
|
return this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.some(selectedSingleWindshield =>
|
|
{
|
|
return selectedSingleWindshield.toUpperCase() === damageLocationsSelected.SINGLE.toUpperCase();
|
|
}) &&
|
|
(this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.some(selectedDriverWindshield =>
|
|
{
|
|
return selectedDriverWindshield.toUpperCase() === damageLocationsSelected.DRIVER.toUpperCase();
|
|
}) ||
|
|
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.some(selectedPassengerWindshield =>
|
|
{
|
|
return selectedPassengerWindshield.toUpperCase() === damageLocationsSelected.PASSENGER.toUpperCase();
|
|
})
|
|
);
|
|
},
|
|
},
|
|
|
|
components: {
|
|
funnelHeader,
|
|
funnelFooter,
|
|
vehicleBanner,
|
|
funnelSubHeader,
|
|
sideDoorOptions,
|
|
damageLocationQuestion,
|
|
windshieldOptions,
|
|
replaceOptionsQuestion,
|
|
Form,
|
|
alert,
|
|
},
|
|
};
|
|
</script>
|