262 lines
10 KiB
Vue
262 lines
10 KiB
Vue
<template>
|
|
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
|
|
<div class="page-container-grouped-styles">
|
|
<div class="fade-on-route-transition position-relative">
|
|
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
|
<div class="select-car">
|
|
<div class="container-fluid pb-2">
|
|
<div class="row px-3">
|
|
<div class="col">
|
|
<div class="select-car-form rounded">
|
|
<vehicleBanner class="mt-2 mb-4" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
|
|
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
|
|
<vinLookupAlerts class="mt-5" :activeAlertType="activeVehicleLookupAlertType" />
|
|
<vinQuestion v-model="vin" :mask="vinMask" :isDisabled="vinPopulatedOnPageLoad" textPosition="left" />
|
|
<vinLocationInformation />
|
|
<siteFooter cmsWidgetName="SiteFooterWidget" :isForwardActionDisabled="!meta.valid" @backClicked="backButtonAction" @forwardClicked="forwardButtonAction" ref="siteFooter" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Form>
|
|
</template>
|
|
<script>
|
|
// Import Supporting Files
|
|
import { computed } from 'vue';
|
|
import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
|
|
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
|
|
import { isGlassAvailableForCarId } from '@/helpers/damage-helper';
|
|
import { settleAllPromises } from '@/helpers/layout-helper';
|
|
import { routerParams } from '@/router/router-params';
|
|
import { useMainStore } from '@/store';
|
|
|
|
// Import Component
|
|
import baseFormMixin from '@/mixins/base-form-mixin';
|
|
import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin';
|
|
import { Form } from 'vee-validate';
|
|
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
|
|
import siteHeader from '@/iss-components/site-header/site-header.vue';
|
|
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
|
|
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
|
|
import vinLocationInformation from './vin-location-information/vin-location-information.vue';
|
|
import vinLookupAlerts from './vin-lookup-alerts/vin-lookup-alerts.vue';
|
|
import vinQuestion from './vin-question/vin-question.vue';
|
|
|
|
export default {
|
|
name: 'vin-lookup',
|
|
mixins: [baseFormMixin, vehicleQuestionsMixin],
|
|
components: {
|
|
siteFooter,
|
|
siteHeader,
|
|
siteSubHeader,
|
|
Form,
|
|
vehicleBanner,
|
|
vinLocationInformation,
|
|
vinLookupAlerts,
|
|
vinQuestion,
|
|
},
|
|
setup() {
|
|
const mainStore = useMainStore();
|
|
|
|
return { mainStore };
|
|
},
|
|
data() {
|
|
return {
|
|
activeVehicleLookupAlertType: null,
|
|
needToLookupVehicle: true,
|
|
vehicleFromLookup: null,
|
|
vin: this.getVinFromStore(),
|
|
forwardButtonCarStyle:"",
|
|
vinPopulatedOnPageLoad: this.getVinFromStore()?.length > 0,
|
|
bailout: false,
|
|
};
|
|
},
|
|
provide() {
|
|
return {
|
|
vehicleFromLookup: computed(() => this.vehicleFromLookup),
|
|
};
|
|
},
|
|
async beforeRouteEnter(to, from, next) {
|
|
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
|
|
|
// Settle promises and get results
|
|
const promiseResultMap = [
|
|
{
|
|
resultKey: 'cmsContent',
|
|
promise: cmsContentPromise,
|
|
},
|
|
];
|
|
|
|
const resultMap = await settleAllPromises(promiseResultMap);
|
|
|
|
next((vm) => {
|
|
vm.setCmsContent(resultMap.cmsContent);
|
|
});
|
|
},
|
|
computed: {
|
|
isCarIdDifferentFromTheStore() {
|
|
return (
|
|
this.vehicleFromLookup !== null
|
|
&& this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId
|
|
);
|
|
},
|
|
isTwoIdenticalYMMVehicleFound(){
|
|
const vinYmmFound = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
|
|
const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
|
|
return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
|
|
},
|
|
vinMask() {
|
|
if (this.vinPopulatedOnPageLoad) {
|
|
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.PERFECT_MATCH;
|
|
this.needToLookupVehicle = false;
|
|
const lastSixChars = this.vin.substring(11, this.vin.length);
|
|
return `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`;
|
|
} else {
|
|
return "XXXXXXXXXXXXXXXXX";
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
arePagePrerequisiteValid() {
|
|
return true;
|
|
},
|
|
getVinFromStore() {
|
|
return this.mainStore.vehicle.vin;
|
|
},
|
|
backButtonAction() {
|
|
/**
|
|
* this.navigationScenarios comes from base-mixin
|
|
*/
|
|
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
|
},
|
|
// NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
|
|
async forwardButtonAction() {
|
|
this.resetActiveAlert();
|
|
// Temp solution to reset the 'disabled' style on the Continue button
|
|
this.$refs.siteFooter.enableForwardAction();
|
|
|
|
if (this.needToLookupVehicle) {
|
|
const vehicleLookupResponse = await this.lookupVehicleByVin(this.vin);
|
|
|
|
if (vehicleLookupResponse.error) {
|
|
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
|
|
this.resetVehicleFromLookup();
|
|
this.$refs.siteFooter.removeLoader();
|
|
// Temp solution to turn on 'disabled' style on the Continue button
|
|
// because the form itself actually passes its client-side validation.
|
|
// SSR-189 Scenario #4.
|
|
this.$refs.siteFooter.enableForwardAction();
|
|
this.bailout=true
|
|
}
|
|
|
|
if(this.bailout){
|
|
return this.$router.navigate(
|
|
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
|
|
this.$route);
|
|
}
|
|
// Add vin bcs the response from the service doesn't contain vin
|
|
this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, { vin: this.vin });
|
|
}
|
|
|
|
if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) {
|
|
if(this.isTwoIdenticalYMMVehicleFound){
|
|
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED;
|
|
this.forwardButtonCarStyle = this.vehicleFromLookup.style;
|
|
}
|
|
else{
|
|
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
|
|
}
|
|
|
|
const vehicleYearMakeModelStyle = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model} ${this.forwardButtonCarStyle}`;
|
|
this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModelStyle}`);
|
|
this.$refs.siteFooter.removeLoader();
|
|
|
|
this.needToLookupVehicle = false;
|
|
|
|
return;
|
|
}
|
|
|
|
let isSelectedGlassAvailableForVehicle = true;
|
|
if (this.isCarIdDifferentFromTheStore) {
|
|
isSelectedGlassAvailableForVehicle =
|
|
await isGlassAvailableForCarId(this.vehicleFromLookup.carId);
|
|
}
|
|
|
|
// navigate back to vehicle-damage
|
|
if (this.isCarIdDifferentFromTheStore && !isSelectedGlassAvailableForVehicle) {
|
|
this.mainStore.updateVehicle(this.vehicleFromLookup);
|
|
this.$router.navigate(
|
|
this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
|
|
this.$route,
|
|
{},
|
|
{ [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
|
|
);
|
|
|
|
// navigate() doesn't stop the processing flow
|
|
return;
|
|
}
|
|
|
|
// save vehicle to store if it hasn't already been saved
|
|
if (!this.vinPopulatedOnPageLoad) {
|
|
this.mainStore.updateVehicle(this.vehicleFromLookup);
|
|
}
|
|
|
|
const partsOrQuestionsResponse = await this.getPartsOrQuestions();
|
|
if (partsOrQuestionsResponse.error) {
|
|
// To Do: Need requirement on what to do here
|
|
console.error('Error on retrieving PartsOrQuestions');
|
|
this.$refs.siteFooter.removeLoader();
|
|
return;
|
|
}
|
|
|
|
// Comes from vehicleQuestionsMixin.navigateForward()
|
|
await this.navigateForward(partsOrQuestionsResponse.data.partsOrQuestions, this);
|
|
},
|
|
async getPartsOrQuestions() {
|
|
try {
|
|
const response = await this.mainStore.getPartsOrQuestions();
|
|
|
|
return response;
|
|
} catch (responseError) {
|
|
return {
|
|
error: {
|
|
status: responseError.status,
|
|
},
|
|
};
|
|
}
|
|
},
|
|
async lookupVehicleByVin(vin) {
|
|
try {
|
|
return await this.mainStore.lookupVehicleByVin(vin);
|
|
}
|
|
catch (responseError) {
|
|
return {
|
|
error: {
|
|
status: responseError.status,
|
|
},
|
|
};
|
|
}
|
|
},
|
|
resetActiveAlert() {
|
|
this.activeVehicleLookupAlertType = null;
|
|
},
|
|
resetVehicleFromLookup() {
|
|
this.vehicleFromLookup = null;
|
|
},
|
|
resetDependentState() {},
|
|
},
|
|
watch: {
|
|
vin() {
|
|
this.resetActiveAlert();
|
|
this.$refs.siteFooter.enableForwardAction();
|
|
this.needToLookupVehicle = true;
|
|
this.$refs.siteFooter.updateButtonText(
|
|
this.getCmsContent('SiteFooterWidget', 'ForwardButtonText')
|
|
);
|
|
}
|
|
},
|
|
};
|
|
</script>
|