CSR-101 vin-lookup updates WIP
This commit is contained in:
bmauger
parent
c44b96aba0
commit
6c770a6e26
2 changed files with 246 additions and 22 deletions
|
|
@ -15,6 +15,8 @@ const errorMessages = {
|
|||
LAST_NAME_REQUIRED: "Please enter your last name",
|
||||
EMAIL_ADDRESS_REQUIRED: "Please enter your email address",
|
||||
EMAIL_ADDRESS_FORMAT: "Please enter a valid email address",
|
||||
VIN_REQUIRED: "Please enter your VIN",
|
||||
VIN_FORMAT: "Please enter a valid VIN",
|
||||
};
|
||||
|
||||
export { errorMessages };
|
||||
|
||||
export { errorMessages };
|
||||
|
|
|
|||
|
|
@ -1,41 +1,263 @@
|
|||
<template>
|
||||
<div class="container-fluid shadow rounded-3 px-5 position-relative make-tall">
|
||||
<funnelHeader ref="funnelHeader" />
|
||||
<vehicleBanner ref="vehicleBanner" />
|
||||
<funnelSubHeader ref="funnelSubHeader" />
|
||||
<vinInformation
|
||||
class="mb-5"
|
||||
/>
|
||||
<funnel-footer
|
||||
ref="funnelFooter"
|
||||
:isDisabled="!meta.valid"
|
||||
@back-clicked="backButtonAction"
|
||||
@ForwardClicked="forwardButtonAction"
|
||||
/>
|
||||
</div>
|
||||
<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 ref="funnelHeader" />
|
||||
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage="false" />
|
||||
<funnelSubHeader ref="funnelSubHeader" />
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<textboxQuestion ref="VinNumber" v-model="vin" inputId="vin" disableAutoFill validationRules="vin-required|vin-format" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<vinInformation />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<textboxQuestion ref="ServiceZIP" v-model="servicezip" inputId="serviceZip" disableAutoFill validationRules="zip-required" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<textboxQuestion ref="EmailAddress" v-model="email" inputId="email" disableAutoFill validationRules="email-address-required|email-address-format" />
|
||||
</div>
|
||||
</div>
|
||||
<alert
|
||||
class="my-3"
|
||||
v-if="newServiceZipRequired"
|
||||
alertClass="alert-danger"
|
||||
:alertHeadline="noServiceZipWidget.headline"
|
||||
:alertCopy="noServiceZipWidget.copy"
|
||||
/>
|
||||
<alert
|
||||
class="my-3"
|
||||
v-if="vinNotValid"
|
||||
alertClass="alert-danger"
|
||||
:alertHeadline="noMatchAlertWidget.headline"
|
||||
:alertCopy="noMatchAlertWidget.copy"
|
||||
/>
|
||||
<alert
|
||||
class="my-3"
|
||||
v-if="vinDoesNotMatchCarId"
|
||||
alertClass="alert-warning"
|
||||
:alertHeadline="matchedDifferentVehicleAlertWidget.headline"
|
||||
:alertCopy="matchedDifferentVehicleAlertWidget.copy"
|
||||
/>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<textboxQuestion v-if="newServiceZipRequired" questionText="Service area ZIP code" v-model="serviceZip" inputId="serviceZip" disableAutoFill validationRules="zip-required" />
|
||||
</div>
|
||||
</div>
|
||||
<funnelFooter
|
||||
ref="funnelFooter"
|
||||
: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 funnelFooter from "@/common-components/funnel-footer/funnel-footer";
|
||||
import alert from "@/ux-components/alert/alert";
|
||||
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
|
||||
import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information";
|
||||
|
||||
// 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 { required, regex } from "@/helpers/validation-rules";
|
||||
import { Form, defineRule } from "vee-validate";
|
||||
|
||||
// DEFINE VALIDATION RULES
|
||||
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));
|
||||
defineRule("vin-required", required(errorMessages.VIN_REQUIRED));
|
||||
defineRule("vin-format", regex(/^[A-HJ-NPR-Z0-9]{17}$/, errorMessages.VIN_FORMAT));
|
||||
|
||||
export default {
|
||||
name: "vin-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.$refs.funnelHeader.initializeComponent(
|
||||
resultMap.cmsContent.FunnelHeaderWidget
|
||||
);
|
||||
vm.$refs.vehicleBanner.initializeComponent(
|
||||
resultMap.cmsContent.VehicleBannerWidget
|
||||
);
|
||||
vm.$refs.funnelSubHeader.initializeComponent(
|
||||
resultMap.cmsContent.FunnelSubHeaderWidget
|
||||
);
|
||||
vm.$refs.VinNumber.initializeComponent(
|
||||
resultMap.cmsContent.VinNumber.QuestionText
|
||||
);
|
||||
vm.$refs.ServiceZIP.initializeComponent(
|
||||
resultMap.cmsContent.ServiceZIP.QuestionText
|
||||
);
|
||||
vm.$refs.EmailAddress.initializeComponent(
|
||||
resultMap.cmsContent.EmailAddress.QuestionText
|
||||
);
|
||||
vm.$refs.funnelFooter.initializeComponent(
|
||||
resultMap.cmsContent.FunnelFooterWidget
|
||||
);
|
||||
vm.noServiceZipWidget = {
|
||||
headline: resultMap.cmsContent.NoServiceZipWidget.HeadlineText,
|
||||
copy: resultMap.cmsContent.NoServiceZipWidget.BodyText
|
||||
};
|
||||
// vm.noMatchAlertWidget = {
|
||||
// headline: resultMap.cmsContent.NoMatchAlertWidget.HeadlineText,
|
||||
// copy: resultMap.cmsContent.NoMatchAlertWidget.BodyText
|
||||
// };
|
||||
// vm.matchedDifferentVehicleAlertWidget = {
|
||||
// headline: resultMap.cmsContent.MatchedDifferentVehicleAlertWidget.HeadlineText,
|
||||
// copy: resultMap.cmsContent.MatchedDifferentVehicleAlertWidget.BodyText
|
||||
// };
|
||||
});
|
||||
},
|
||||
props: {
|
||||
validationRules: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
newServiceZipRequired: false,
|
||||
vinNotValid: false,
|
||||
vinDoesNotMatchCarId: false,
|
||||
licensePlate: '',
|
||||
zip: '',
|
||||
email: '',
|
||||
serviceZip: '',
|
||||
};
|
||||
},
|
||||
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);
|
||||
},
|
||||
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.zip);
|
||||
if (!zipValidation.data.isServiceable) {
|
||||
this.$refs.funnelFooter.removeLoader();
|
||||
this.newServiceZipRequired = true;
|
||||
return;
|
||||
}
|
||||
const vinLookup = await this.lookupVin(this.licensePlate, zipValidation.data.state).catch(() => {
|
||||
this.$refs.funnelFooter.removeLoader();
|
||||
this.vinNotValid = true;
|
||||
return;
|
||||
});
|
||||
if (vinLookup.data.vehicle.carId !== store.getters.vehicle.carId) {
|
||||
this.$refs.funnelFooter.updateButtonText(`Continue with ${vinLookup.data.vin} ${vinLookup.data.vehicle.year} ${vinLookup.data.vehicle.make} ${vinLookup.data.vehicle.model}`);
|
||||
this.$refs.funnelFooter.removeLoader();
|
||||
this.vinDoesNotMatchCarId = true;
|
||||
return;
|
||||
}
|
||||
|
||||
const partsData = await baseMixin.methods.dispatchNonBlockingStoreAction(
|
||||
this.storeActions.GET_PARTS_OR_QUESTIONS,
|
||||
{
|
||||
carId: store.getters.vehicle.carId,
|
||||
glassArray: store.getters.damage.glassToReplace,
|
||||
zipCode: this.zip,
|
||||
vin: vinLookup.vin
|
||||
},
|
||||
false
|
||||
);
|
||||
this.navigateForward(partsData);
|
||||
},
|
||||
navigateForward(partsData){
|
||||
if(partsData.data.partsOrQuestions[0].partQuestions && partsData.data.partsOrQuestions[0].partQuestions.length > 0){
|
||||
this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_PARTS_QUESTION, this.$route, {}, {}, partsData.data);
|
||||
return;
|
||||
} else if((!partsData.data.partsOrQuestions[0].partQuestions || partsData.data.partsOrQuestions[0].partQuestions.length < 1) && partsData.data.partsOrQuestions[0].parts.length > 1) {
|
||||
this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_PARTS, this.$route, {}, {}, partsData.data);
|
||||
return;
|
||||
} else {
|
||||
this.$router.navigate(this.navigationScenarios.CONTINUING_WITH_SINGLE_PART, this.$route);
|
||||
}
|
||||
},
|
||||
validateZip(zip) {
|
||||
return baseMixin.methods.dispatchNonBlockingStoreAction(
|
||||
storeActions.VALIDATE_ZIP,
|
||||
{ zip }
|
||||
);
|
||||
},
|
||||
lookupVin(plate, state) {
|
||||
return baseMixin.methods.dispatchNonBlockingStoreAction(
|
||||
storeActions.LOOKUP_VIN_BY_PLATE,
|
||||
{ licensePlate: plate, licenseState: state }
|
||||
);
|
||||
},
|
||||
updateStore() {
|
||||
// if(vehicleDamage){
|
||||
// store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
|
||||
// }
|
||||
store.commit(storeMutations.UPDATE_VEHICLE_VIN, null);
|
||||
store.commit(storeMutations.UPDATE_YEAR, null);
|
||||
store.commit(storeMutations.UPDATE_MAKE, null);
|
||||
store.commit(storeMutations.UPDATE_MODEL, null);
|
||||
store.commit(storeMutations.UPDATE_STYLE, null);
|
||||
store.commit(storeMutations.UPDATE_CAR_ID, null);
|
||||
store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null);
|
||||
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, null);
|
||||
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, null);
|
||||
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, null);
|
||||
store.commit(storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE, null);
|
||||
store.commit(storeMutations.UPDATE_REGISTRATION_STATE, null);
|
||||
store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, null);
|
||||
store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP, null);
|
||||
store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, null);
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Form,
|
||||
funnelHeader,
|
||||
vehicleBanner,
|
||||
funnelSubHeader,
|
||||
vinInformation,
|
||||
textboxQuestion,
|
||||
alert,
|
||||
funnelFooter,
|
||||
vinInformation,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue