336 lines
12 KiB
Vue
336 lines
12 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" />
|
|
<div class="fade-on-route-transition sub-container make-tall">
|
|
<div class="row my-2">
|
|
<div class="col">
|
|
<textboxQuestion cmsWidgetName="LicensePlateNumber" v-model="licensePlate" isRequired inputId="license_plate" validationRules="license-plate-required" />
|
|
</div>
|
|
</div>
|
|
<div class="row my-2">
|
|
<div class="col">
|
|
<textboxQuestion cmsWidgetName="RegistrationZip" v-model="registrationZip" inputId="zip" mask="#####" validationRules="zip-required" />
|
|
</div>
|
|
</div>
|
|
<div class="row my-2">
|
|
<div class="col">
|
|
<textboxQuestion cmsWidgetName="EmailAddress" v-model="email" inputId="email" validationRules="email-address-required|email-address-format" />
|
|
</div>
|
|
</div>
|
|
<alert class="my-3" :manualHeadline="NoServiceZipHeader" :manualCopy="NoServiceZipBody" v-if="!isRegistrationZipServicable && isVinValid && !isCarIdDifferent" alertClass="alert-danger" />
|
|
<div class="row my-2">
|
|
<div class="col">
|
|
<textboxQuestion v-if="!isRegistrationZipServicable" cmsWidgetName="ServiceZip" v-model="serviceZip" inputId="serviceZip" validationRules="zip-required" />
|
|
</div>
|
|
</div>
|
|
<alert class="my-3" cmsWidgetName="NoMatchAlertWidget" v-if="!isVinValid" />
|
|
<alert class="my-3" :manualHeadline="MatchedDifferentVehicleAlertHeader" :manualCopy="MatchedDifferentVehicleAlertBody" v-if="isCarIdDifferent" alertClass="alert-warning" />
|
|
<funnelFooter ref="funnelFooter" cmsWidgetName="FunnelFooterWidget" :isForwardActionDisabled="!meta.valid" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
|
|
</div>
|
|
</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 textboxQuestion from "@/common-components/textbox-question/textbox-question";
|
|
// 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 {
|
|
errorMessages
|
|
} from "@/constants/error-messages";
|
|
import {
|
|
navigateAfterSaveToHeritageFunnel
|
|
} from "@/helpers/heritage-integration/navigation-helper";
|
|
import {
|
|
getDamageString,
|
|
isGlassAvailableForCarId,
|
|
} from "@/helpers/damage-helper";
|
|
import {
|
|
required,
|
|
regex,
|
|
} from "@/helpers/validation-rules";
|
|
import {
|
|
Form,
|
|
defineRule,
|
|
} from "vee-validate";
|
|
|
|
// DEFINE VALIDATION RULES
|
|
defineRule(
|
|
"license-plate-required",
|
|
required(errorMessages.LICENSE_PLATE_REQUIRED)
|
|
);
|
|
defineRule("zip-required", required(errorMessages.ZIP_REQUIRED));
|
|
defineRule(
|
|
"email-address-required",
|
|
required(errorMessages.EMAIL_ADDRESS_REQUIRED)
|
|
);
|
|
defineRule(
|
|
"email-address-format",
|
|
regex(
|
|
/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+).([a-zA-Z]{2,})$/,
|
|
errorMessages.EMAIL_ADDRESS_FORMAT
|
|
)
|
|
);
|
|
export default {
|
|
name: "license-plate-lookup",
|
|
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 {
|
|
isRegistrationZipServicable: true,
|
|
isVinValid: true,
|
|
isCarIdDifferent: false,
|
|
licensePlate: this.getLicensePlateFromStore(),
|
|
registrationZip: this.getRegistrationZipFromStore(),
|
|
email: this.getEmailFromStore(),
|
|
serviceZip: this.getServiceZipFromStore(),
|
|
previouslyEnteredCarId: "",
|
|
customAlertData: {},
|
|
isSelectedGlassAvailableForVehicle: true,
|
|
zipToDisplay: this.getRegistrationZipFromStore(),
|
|
};
|
|
},
|
|
mounted() {
|
|
this.attachCustomEvents();
|
|
},
|
|
computed: {
|
|
MatchedDifferentVehicleAlertHeader() {
|
|
let text = this.getCmsContent(
|
|
"MatchedDifferentVehicleAlertWidget",
|
|
"HeadlineText"
|
|
).replaceAll("{custom:damage}", getDamageString());
|
|
return text;
|
|
},
|
|
MatchedDifferentVehicleAlertBody() {
|
|
let text = this.getCmsContent(
|
|
"MatchedDifferentVehicleAlertWidget",
|
|
"BodyText"
|
|
)
|
|
.replaceAll("{custom:damage}", getDamageString())
|
|
.replaceAll(
|
|
"{custom:plateLookupYear}",
|
|
this.customAlertData?.vehicleInfo?.year
|
|
)
|
|
.replaceAll(
|
|
"{custom:plateLookupMake}",
|
|
this.customAlertData?.vehicleInfo?.make
|
|
)
|
|
.replaceAll(
|
|
"{custom:plateLookupModel}",
|
|
this.customAlertData?.vehicleInfo?.model
|
|
);
|
|
return text;
|
|
},
|
|
NoServiceZipHeader() {
|
|
let text = this.getCmsContent(
|
|
"NoServiceZipWidget",
|
|
"HeadlineText"
|
|
).replaceAll("{custom:zip}", this.zipToDisplay);
|
|
return text;
|
|
},
|
|
NoServiceZipBody() {
|
|
return this.getCmsContent("NoServiceZipWidget", "BodyText");
|
|
},
|
|
},
|
|
methods: {
|
|
arePagePrerequisitesValid() {
|
|
return store.getters.vehicle.carId !== null;
|
|
},
|
|
resetDependentState() {
|
|
store.commit(storeMutations.UPDATE_REGISTRATION_ADDRESS, null);
|
|
store.commit(storeMutations.UPDATE_REGISTRATION_CITY, null);
|
|
store.commit(storeMutations.UPDATE_REGISTRATION_FIRST_NAME, null);
|
|
store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, null);
|
|
store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
|
|
},
|
|
attachCustomEvents() {
|
|
this.prependActionToMethod(this, this.forwardButtonAction, () => {
|
|
this.pushEventToGA(
|
|
this.$route.query[this.queryStrings.FMG_PAGE],
|
|
this.GaActions.SUBMITTED,
|
|
this.GaLabels.LICENSE_PLATE_LOOKUP,
|
|
true
|
|
);
|
|
});
|
|
},
|
|
getLicensePlateFromStore() {
|
|
return store.getters.vehicle.registration.licensePlate;
|
|
},
|
|
getRegistrationZipFromStore() {
|
|
return store.getters.vehicle.registration.zipCode;
|
|
},
|
|
getEmailFromStore() {
|
|
return store.getters.order.customer.emailAddress;
|
|
},
|
|
getServiceZipFromStore() {
|
|
return store.getters.order.serviceLocation.zip;
|
|
},
|
|
backButtonAction() {
|
|
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
|
},
|
|
async forwardButtonAction() {
|
|
const zipValidation = this.serviceZip ?
|
|
await this.validateZip(this.serviceZip) :
|
|
await this.validateZip(this.registrationZip);
|
|
if (!zipValidation.data.isServiceable) {
|
|
this.$refs.funnelFooter.removeLoader();
|
|
this.isVinValid = true;
|
|
this.isRegistrationZipServicable = false;
|
|
this.isCarIdDifferent = false;
|
|
this.zipToDisplay = this.serviceZip ? this.serviceZip : this.registrationZip;
|
|
return;
|
|
}
|
|
|
|
const vinLookup = await this.lookupVin(
|
|
this.licensePlate,
|
|
zipValidation.data.state
|
|
).catch(() => {
|
|
this.$refs.funnelFooter.removeLoader();
|
|
this.isVinValid = false;
|
|
this.isCarIdDifferent = false;
|
|
return;
|
|
});
|
|
|
|
this.isCarIdDifferent =
|
|
vinLookup.data.vehicle.carId !== store.getters.vehicle.carId;
|
|
|
|
if (
|
|
this.isCarIdDifferent &&
|
|
vinLookup.data.vehicle.carId !== this.previouslyEnteredCarId
|
|
) {
|
|
this.previouslyEnteredCarId = vinLookup.data.vehicle.carId;
|
|
this.customAlertData.vehicleInfo = vinLookup.data.vehicle;
|
|
this.$refs.funnelFooter.updateButtonText(
|
|
`Continue with ${vinLookup.data.vehicle.year} ${vinLookup.data.vehicle.make} ${vinLookup.data.vehicle.model}`
|
|
);
|
|
this.isVinValid = true;
|
|
this.isSelectedGlassAvailableForVehicle =
|
|
await isGlassAvailableForCarId(vinLookup.data.vehicle.carId);
|
|
this.$refs.funnelFooter.removeLoader();
|
|
return;
|
|
}
|
|
|
|
this.updateCustomerInfo(
|
|
vinLookup.data.vin,
|
|
vinLookup.data.vehicle,
|
|
zipValidation.data.state
|
|
);
|
|
|
|
this.navigateForward();
|
|
},
|
|
navigateForward() {
|
|
if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
|
|
this.$router.navigateAfterSave(
|
|
this.navigationScenarios.CLICKED_FORWARD,
|
|
this.$route,
|
|
{},
|
|
{ displayVehicleChangeAlert: true },
|
|
{}
|
|
);
|
|
return;
|
|
} else {
|
|
navigateAfterSaveToHeritageFunnel(this.$route);
|
|
return;
|
|
}
|
|
},
|
|
validateZip(zip) {
|
|
return baseMixin.methods.dispatchStoreAction(storeActions.VALIDATE_ZIP, {
|
|
zip,
|
|
});
|
|
},
|
|
lookupVin(plate, state) {
|
|
return baseMixin.methods.dispatchStoreAction(
|
|
storeActions.LOOKUP_VIN_BY_PLATE,
|
|
{ licensePlate: plate, licenseState: state }
|
|
);
|
|
},
|
|
updateCustomerInfo(vin, vehicleInfo, registrationState) {
|
|
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, vehicleInfo.year);
|
|
store.commit(storeMutations.UPDATE_MAKE, vehicleInfo.make);
|
|
store.commit(storeMutations.UPDATE_MODEL, vehicleInfo.model);
|
|
store.commit(storeMutations.UPDATE_STYLE, vehicleInfo.style);
|
|
store.commit(storeMutations.UPDATE_CAR_ID, vehicleInfo.carId);
|
|
store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, vehicleInfo.category);
|
|
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, vehicleInfo.imageUrl);
|
|
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, vehicleInfo.imageVifNumber);
|
|
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, vehicleInfo.imageVifColor);
|
|
store.commit(storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE, this.licensePlate);
|
|
store.commit(storeMutations.UPDATE_REGISTRATION_STATE, registrationState);
|
|
store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, this.registrationZip);
|
|
store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE, this.serviceZip);
|
|
store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.email);
|
|
},
|
|
},
|
|
watch: {
|
|
licensePlate() {
|
|
this.$refs.funnelFooter.updateButtonText(
|
|
this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
|
|
);
|
|
},
|
|
registrationZip() {
|
|
this.$refs.funnelFooter.updateButtonText(
|
|
this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
|
|
);
|
|
},
|
|
serviceZip() {
|
|
this.$refs.funnelFooter.updateButtonText(
|
|
this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
|
|
);
|
|
},
|
|
},
|
|
components: {
|
|
Form,
|
|
funnelHeader,
|
|
vehicleBanner,
|
|
funnelSubHeader,
|
|
textboxQuestion,
|
|
alert,
|
|
funnelFooter,
|
|
},
|
|
};
|
|
</script>
|