264 lines
No EOL
8.2 KiB
Vue
264 lines
No EOL
8.2 KiB
Vue
<template>
|
|
<Form
|
|
@submit="onSubmit"
|
|
@invalidSubmit="onInvalidSubmit"
|
|
v-slot="{ meta }"
|
|
>
|
|
<div class="page-container-grouped-styles ">
|
|
<siteHeader
|
|
cmsWidgetName="SiteHeaderWidget"
|
|
/>
|
|
<vehicleBanner
|
|
class="mb-3"
|
|
cmsWidgetName="VehicleBannerWidget"
|
|
:displayGenericVehicleImage="false"
|
|
/>
|
|
<siteSubHeader
|
|
cmsWidgetName="SiteSubHeaderWidget"
|
|
/>
|
|
<div class="px-4 overflow-scroll ">
|
|
<div class="fade-on-route-transition sub-container px-2 mt-5">
|
|
<vinLookupAlerts
|
|
:activeAlertType="activeVehicleLookupAlertType"
|
|
/>
|
|
|
|
<vinQuestion
|
|
v-model="vin"
|
|
/>
|
|
|
|
<vinLocationInformation />
|
|
|
|
<siteFooter
|
|
cmsWidgetName="SiteFooterWidget"
|
|
:isForwardActionDisabled="!meta.valid"
|
|
@backClicked="backButtonAction"
|
|
@forwardClicked="forwardButtonAction"
|
|
ref="siteFooter"
|
|
/>
|
|
</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: null,
|
|
forwardButtonCarStyle:"",
|
|
};
|
|
},
|
|
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());
|
|
}
|
|
},
|
|
methods: {
|
|
arePagePrerequisiteValid() {
|
|
return true;
|
|
},
|
|
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.disableForwardButton();
|
|
return;
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
|
|
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>
|
|
<style>
|
|
.overflow-scroll {
|
|
height: calc(100% - 368px);
|
|
overflow-X: hidden !important;
|
|
}
|
|
|
|
|
|
</style> |