252 lines
8.9 KiB
Vue
252 lines
8.9 KiB
Vue
<template>
|
|
<Form
|
|
@submit="onSubmit"
|
|
@invalid-submit="onInvalidSubmit"
|
|
ref="theForm"
|
|
v-slot="{ meta }"
|
|
>
|
|
<div class="page-container-grouped-styles">
|
|
<loadingModal ref="loadingModal"/>
|
|
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
|
|
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
|
|
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
|
|
<alert ref="alertFoundMultipleVehicles"
|
|
class="my-5"
|
|
cmsWidgetName="FoundMultipleVehicles"
|
|
:manualHeadline="AlertFoundMultipleVehiclesHeader"
|
|
manualCopy=""
|
|
alertClass="alert-warning"
|
|
v-bind:isDismissible="false"
|
|
/>
|
|
<addressVehiclesQuestion ref="addressVehiclesQuestion"
|
|
cmsWidgetName="VehicleConfirmationQuestion"
|
|
:vehicles="VehiclesForQuestions"
|
|
validationRules="vehicle-required"
|
|
v-model="selectedVehicleVin"
|
|
:isCarIdDifferent="isCarIdDifferent"
|
|
/>
|
|
<div class="alert-provide-vin my-3" v-if="splitAlertProvideVinBodyForLink.length">
|
|
<span v-for="copy in splitAlertProvideVinBodyForLink" :key="copy">
|
|
<span v-if="doesCopyContainRouterLink(copy)" class="text-body">
|
|
<router-link :to="{query: {fmgPage: `${getRouterLinkRouteFromCopy(copy)}`}, name: 'root'}">{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link>
|
|
</span>
|
|
<span v-else class="m-0 text-body" v-html="copy"></span>
|
|
</span>
|
|
</div>
|
|
<funnelFooter
|
|
cmsWidgetName="FunnelFooterWidget"
|
|
ref="funnelFooter"
|
|
:isForwardActionDisabled="!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 alert from "@/ux-components/alert/alert";
|
|
import addressVehiclesQuestion from "@/layouts/address-vehicles/address-vehicles-question/address-vehicles-question";
|
|
import loadingModal from '@/common-components/loading-modal/loading-modal.vue';
|
|
|
|
// Supporting files
|
|
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
|
import { settleAllPromises } from "@/helpers/layout-helper";
|
|
import store from "@/store";
|
|
import baseMixin from "@/mixins/base-mixin.js";
|
|
import { storeActions } from "@/constants/store-actions";
|
|
import { storeMutations } from "@/constants/store-mutations";
|
|
import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
|
|
import { errorMessages } from "@/constants/error-messages";
|
|
import { required } from "@/helpers/validation-rules";
|
|
import { Form, defineRule } from "vee-validate";
|
|
import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
|
|
import { isGlassAvailableForCarId } from "@/helpers/damage-helper";
|
|
import { doesCopyContainRouterLink,
|
|
splitCopyOnCMSPlaceHolder,
|
|
getRouterLinkRouteFromCopy,
|
|
getRouterLinkDisplayTextFromCopy, } from "@/helpers/cms-content-helper"
|
|
|
|
// DEFINE VALIDATION RULES
|
|
defineRule("vehicle-required", required(errorMessages.VEHICLE_REQUIRED));
|
|
|
|
export default {
|
|
name: "address-vehicles",
|
|
async beforeRouteEnter(to, from, next) {
|
|
// Call APIs
|
|
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
|
|
|
// Settle promises and get results
|
|
const promiseResultMap = [
|
|
{
|
|
resultKey: "cmsContent",
|
|
promise: cmsContentPromise,
|
|
},
|
|
];
|
|
|
|
const resultMap = await settleAllPromises(promiseResultMap);
|
|
|
|
// Call the "next" function to complete the transition to this page.
|
|
next((vm) => {
|
|
vm.setCmsContent(resultMap.cmsContent);
|
|
});
|
|
},
|
|
props: {
|
|
validationRules: String,
|
|
},
|
|
data() {
|
|
return {
|
|
selectedVehicleVin: null,
|
|
isCarIdDifferent: false,
|
|
isSelectedGlassAvailableForVehicle: true,
|
|
};
|
|
},
|
|
computed: {
|
|
vehicleCount() {
|
|
return this.VehiclesForQuestions.length;
|
|
},
|
|
AlertFoundMultipleVehiclesHeader() {
|
|
let text = this.getCmsContent("FoundMultipleVehicles", "HeadlineText").replaceAll("{custom:vehicleCount}", this.vehicleCount);
|
|
return text;
|
|
},
|
|
AlertProvideVinBody() {
|
|
return this.getCmsContent("ProvideVinAlert", "BodyText");
|
|
},
|
|
splitAlertProvideVinBodyForLink() {
|
|
// Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
|
|
return this.splitCopyOnCMSPlaceHolder(this.AlertProvideVinBody);
|
|
},
|
|
VehiclesForQuestions() {
|
|
const vehiclesData = this.VehiclesFromApi;
|
|
|
|
// Map API result data, to address-vehicles data structure
|
|
const mappedData = vehiclesData.map((v) => {
|
|
const maskSymbol = "X";
|
|
const vinStart = maskSymbol.repeat(v.vin.length-4);
|
|
const vinEnd = v.vin.substring(v.vin.length-4);
|
|
return {
|
|
vin: v.vin,
|
|
vehicle: v.vehicle,
|
|
Text: v.vehicle.year + " " + v.vehicle.make + " " + v.vehicle.model,
|
|
Name: v.vin,
|
|
SubText: "VIN " + vinStart + vinEnd,
|
|
};
|
|
});
|
|
|
|
return mappedData;
|
|
},
|
|
VehiclesFromApi() {
|
|
return store.getters.pageData(fmgPageValues.ADDRESS_VEHICLES);
|
|
},
|
|
selectedVehicle() {
|
|
return this.VehiclesForQuestions.find( ({ vin }) => vin === this.selectedVehicleVin[0] );
|
|
},
|
|
},
|
|
methods: {
|
|
doesCopyContainRouterLink,
|
|
splitCopyOnCMSPlaceHolder,
|
|
getRouterLinkRouteFromCopy,
|
|
getRouterLinkDisplayTextFromCopy,
|
|
arePagePrerequisitesValid() {
|
|
if (
|
|
store.getters.order.vehicle.carId
|
|
&& store.getters.order.serviceLocation.zipCode
|
|
&& store.getters.order.customer.emailAddress
|
|
&& store.getters.pageData(fmgPageValues.ADDRESS_VEHICLES)
|
|
) {
|
|
return true;
|
|
}
|
|
return false;
|
|
},
|
|
backButtonAction() {
|
|
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
|
},
|
|
async forwardButtonAction() {
|
|
const vinLookup = await this.lookupVin(this.selectedVehicle.vin).catch(() => {
|
|
this.$refs.funnelFooter.removeLoader();
|
|
});
|
|
if (!vinLookup) {
|
|
return;
|
|
}
|
|
this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vinLookup.data.carId);
|
|
this.updateCustomerInfo(this.selectedVehicle.vin, this.selectedVehicle.vehicle);
|
|
this.navigateForward();
|
|
},
|
|
navigateForward() {
|
|
if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
|
|
this.$router.navigateAfterSave(
|
|
this.navigationScenarios.CLICKED_FORWARD,
|
|
this.$route,
|
|
{},
|
|
{ displayVehicleChangeAlert: true },
|
|
);
|
|
return;
|
|
} else {
|
|
this.$refs.loadingModal.showModal();
|
|
navigateAfterSaveToHeritageFunnel(this.$route);
|
|
return;
|
|
}
|
|
},
|
|
lookupVin(vin) {
|
|
return baseMixin.methods.dispatchStoreAction(
|
|
storeActions.LOOKUP_VEHICLE_BY_VIN,
|
|
{ vin }
|
|
);
|
|
},
|
|
resetDependentState() { // needed because navigateAfterSaveToHeritageFunnel calls it
|
|
store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
|
|
},
|
|
updateCustomerInfo(vin, vehicle) {
|
|
if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
|
|
store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
|
|
}
|
|
store.commit(storeMutations.UPDATE_VEHICLE_VIN, vin);
|
|
store.commit(storeMutations.UPDATE_YEAR, vehicle.year);
|
|
store.commit(storeMutations.UPDATE_MAKE, vehicle.make);
|
|
store.commit(storeMutations.UPDATE_MODEL, vehicle.model);
|
|
store.commit(storeMutations.UPDATE_STYLE, vehicle.style);
|
|
store.commit(storeMutations.UPDATE_CAR_ID, vehicle.carId);
|
|
store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, vehicle.category);
|
|
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, vehicle.imageUrl);
|
|
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, vehicle.imageVifNumber);
|
|
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, vehicle.imageColor);
|
|
},
|
|
},
|
|
|
|
watch: {
|
|
selectedVehicleVin() {
|
|
// does this vehicle match the previously selected carId?
|
|
this.isCarIdDifferent = this.selectedVehicle.vehicle.carId !== store.getters.vehicle.carId;
|
|
this.$refs.funnelFooter.updateButtonText(`Continue with ${this.selectedVehicle.vehicle.year} ${this.selectedVehicle.vehicle.make} ${this.selectedVehicle.vehicle.model}`);
|
|
},
|
|
},
|
|
|
|
components: {
|
|
Form,
|
|
funnelHeader,
|
|
vehicleBanner,
|
|
funnelSubHeader,
|
|
alert,
|
|
funnelFooter,
|
|
addressVehiclesQuestion,
|
|
loadingModal,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.alert-provide-vin {
|
|
font-size: 0.875rem;
|
|
line-height: 1.4;
|
|
|
|
a {
|
|
text-underline-offset: .2em;
|
|
line-height: inherit;
|
|
}
|
|
}
|
|
</style>
|