commit
9bbaec7fe4
2 changed files with 60 additions and 80 deletions
|
|
@ -52,6 +52,7 @@ import { required } from "@/helpers/validation-rules";
|
|||
import { errorMessages } from "@/constants/error-messages";
|
||||
import { Form, defineRule } from "vee-validate";
|
||||
import store from "@/store";
|
||||
import { storeMutations } from "@/constants/store-mutations";
|
||||
import { vinLookupMethodSelections } from "@/constants/vin-lookup-method-selections.js";
|
||||
// Define Validation Rules
|
||||
defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
|
||||
|
|
@ -94,21 +95,22 @@ export default {
|
|||
);
|
||||
},
|
||||
forwardButtonAction() {
|
||||
if (this.selectedValues[0]===vinLookupMethodSelections.MANUALVIN) {
|
||||
if (this.selectedValues[0] === vinLookupMethodSelections.MANUALVIN) {
|
||||
store.commit(storeMutations.UPDATE_VEHICLE_VIN, null);
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.SELECTED_MANUAL_VIN,
|
||||
this.$route
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (this.selectedValues[0]===vinLookupMethodSelections.LICENSEPLATE) {
|
||||
if (this.selectedValues[0] === vinLookupMethodSelections.LICENSEPLATE) {
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.SELECTED_LICENSE_PLATE,
|
||||
this.$route
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (this.selectedValues[0]===vinLookupMethodSelections.HOMEADDRESS) {
|
||||
if (this.selectedValues[0] === vinLookupMethodSelections.HOMEADDRESS) {
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.SELECTED_HOME_ADDRESS,
|
||||
this.$route
|
||||
|
|
|
|||
|
|
@ -23,11 +23,9 @@
|
|||
isRequired
|
||||
disableAutoFill
|
||||
validationRules="vin-required|vin-format"
|
||||
:isDisabled="isVinFieldReadOnly"
|
||||
:isDisabled="vinPopulatedOnPageLoad"
|
||||
maxLength="17"
|
||||
:mask="vinMask"
|
||||
@focus="setVinTouched"
|
||||
@maska="rawVinValue = $event.target.dataset.maskRawValue"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -70,10 +68,10 @@
|
|||
/>
|
||||
<alert
|
||||
class="my-4"
|
||||
:manualHeadline="PerfectMatchNewVinAlertReadOnlyHeader"
|
||||
:manualCopy="PerfectMatchNewVinAlertReadOnlyBody"
|
||||
:manualHeadline="PerfectMatchInsuranceVerifiedAlertHeader"
|
||||
:manualCopy="PerfectMatchInsuranceVerifiedAlertBody"
|
||||
v-model="customAlertData"
|
||||
v-if="isVinFieldReadOnly"
|
||||
v-if="vinPopulatedOnPageLoad && isInsuranceVerified"
|
||||
alertClass="alert-success"
|
||||
/>
|
||||
<alert
|
||||
|
|
@ -101,10 +99,10 @@
|
|||
/>
|
||||
<alert
|
||||
class="my-4"
|
||||
:manualHeadline="PerfectMatchNewVinAlertHeader"
|
||||
:manualCopy="PerfectMatchNewVinAlertBody"
|
||||
:manualHeadline="PerfectMatchInsuranceNotVerifiedAlertHeader"
|
||||
:manualCopy="PerfectMatchInsuranceNotVerifiedAlertBody"
|
||||
v-model="customAlertData"
|
||||
v-if="perfectMatchNewVinAlert && !noServiceZip && !vinNotFound && meta.valid && !isVinFieldReadOnly"
|
||||
v-if="vinPopulatedOnPageLoad && !isInsuranceVerified"
|
||||
alertClass="alert-success"
|
||||
/>
|
||||
<funnelFooter
|
||||
|
|
@ -140,10 +138,8 @@ import { errorMessages } from "@/constants/error-messages";
|
|||
import { getDamageString, getIsWindshieldOnly, isGlassAvailableForCarId } from "@/helpers/damage-helper";
|
||||
import { required, regex } from "@/helpers/validation-rules";
|
||||
import { Form, defineRule } from "vee-validate";
|
||||
import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
|
||||
import { getFunnelCookie } from "@/helpers/heritage-integration/cookie-helper";
|
||||
import vinPagesMixin from "@/mixins/vin-pages-mixin";
|
||||
import { StatusCodes } from 'http-status-codes';
|
||||
|
||||
// DEFINE VALIDATION RULES
|
||||
defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
|
||||
|
|
@ -187,15 +183,14 @@ export default {
|
|||
previouslyEnteredCarId: '',
|
||||
invalidZip: '',
|
||||
vinPopulatedOnPageLoad: this.getVinFromStore()?.length > 0,
|
||||
initialVin: this.getVinFromStore(),
|
||||
vinTouched: false,
|
||||
rawVinValue: "",
|
||||
isInsuranceVerified: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.attachCustomEvents();
|
||||
if (this.vinPopulatedOnPageLoad) {
|
||||
this.setupVinMask();
|
||||
this.setupVinMask();
|
||||
this.isInsuranceVerified = store.getters.payment.insuranceCoverage.isVerified || getFunnelCookie().HasDelayedClaimRegistration;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -210,12 +205,6 @@ export default {
|
|||
},
|
||||
},
|
||||
computed: {
|
||||
perfectMatchNewVinAlert() {
|
||||
const vinToCheck = this.vinTouched ? this.rawVinValue : this.initialVin;
|
||||
const isVinPerfectMatch = this.vinPopulatedOnPageLoad && vinToCheck === this.getVinFromStore();
|
||||
this.updateIsCarIdDifferent(isVinPerfectMatch);
|
||||
return isVinPerfectMatch;
|
||||
},
|
||||
MatchedDifferentVehicleAlertHeader(){
|
||||
const text = this.getCmsContent("MatchedDifferentVehicle",
|
||||
"HeadlineText").replaceAll("{custom:damage}", getDamageString());
|
||||
|
|
@ -231,41 +220,29 @@ export default {
|
|||
},
|
||||
NoServiceZipHeader(){
|
||||
const text = this.getCmsContent("NoServiceZipWidget", "HeadlineText").replaceAll("{custom:serviceZip}", this.invalidZip);
|
||||
|
||||
return text;
|
||||
},
|
||||
NoServiceZipBody(){
|
||||
return this.getCmsContent("NoServiceZipWidget", "BodyText");
|
||||
},
|
||||
PerfectMatchNewVinAlertHeader() {
|
||||
return this.getCmsContent("PerfectMatchNewVinAlert", "HeadlineText");
|
||||
PerfectMatchInsuranceNotVerifiedAlertHeader() {
|
||||
return this.getCmsContent("PerfectMatchInsuranceNotVerifiedAlert", "HeadlineText");
|
||||
},
|
||||
PerfectMatchNewVinAlertBody() {
|
||||
return this.getCmsContent("PerfectMatchNewVinAlert", "BodyText").replaceAll("{custom:damage}",
|
||||
PerfectMatchInsuranceNotVerifiedAlertBody() {
|
||||
return this.getCmsContent("PerfectMatchInsuranceNotVerifiedAlert", "BodyText").replaceAll("{custom:damage}",
|
||||
getDamageString())
|
||||
},
|
||||
PerfectMatchNewVinAlertReadOnlyHeader () {
|
||||
return this.getCmsContent("PerfectMatchNewVinAlertReadOnly", "HeadlineText");
|
||||
PerfectMatchInsuranceVerifiedAlertHeader () {
|
||||
return this.getCmsContent("PerfectMatchInsuranceVerifiedAlert", "HeadlineText");
|
||||
},
|
||||
PerfectMatchNewVinAlertReadOnlyBody () {
|
||||
return this.getCmsContent("PerfectMatchNewVinAlertReadOnly", "BodyText").replaceAll("{custom:damage}",
|
||||
PerfectMatchInsuranceVerifiedAlertBody () {
|
||||
return this.getCmsContent("PerfectMatchInsuranceVerifiedAlert", "BodyText").replaceAll("{custom:damage}",
|
||||
getIsWindshieldOnly())
|
||||
},
|
||||
isVinFieldReadOnly(){
|
||||
return this.$store.getters.payment.insuranceCoverage.isVerified || getFunnelCookie().HasDelayedClaimRegistration;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
setVinTouched() {
|
||||
if (!this.vinTouched) {
|
||||
this.vinMask = "XXXXXXXXXXXXXXXXX";
|
||||
this.vin = this.initialVin;
|
||||
}
|
||||
|
||||
this.vinTouched = true;
|
||||
},
|
||||
setupVinMask() {
|
||||
const lastSixChars = this.initialVin.substring(11, this.initialVin.length);
|
||||
const lastSixChars = this.vin.substring(11, this.vin.length);
|
||||
this.vinMask = `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`;
|
||||
},
|
||||
arePagePrerequisitesValid() {
|
||||
|
|
@ -315,17 +292,16 @@ export default {
|
|||
let vehicleLookupResponse;
|
||||
|
||||
const zipValidation = this.validateZip(this.zip);
|
||||
|
||||
if (this.vinTouched && this.vin != this.initialVin) {
|
||||
// If the user has clicked on the VIN field, either they are doing a new VIN lookup or changing the VIN previously matched.
|
||||
// Therefore we need to do a Vehicle Lookup
|
||||
const vinToLookup = this.vinTouched ? this.vin : this.initialVin;
|
||||
const vehicleLookup = this.lookupVehicle(vinToLookup);
|
||||
|
||||
|
||||
// If this is a new VIN Lookup, do both a Vehicle Lookup and a Zip Validation
|
||||
if (!this.vinPopulatedOnPageLoad) {
|
||||
// Perform Zip Validation
|
||||
zipValidationResponse = await zipValidation;
|
||||
|
||||
// Perform Vehicle Lookup
|
||||
const vehicleLookup = this.lookupVehicle(this.vin);
|
||||
vehicleLookupResponse = await vehicleLookup.catch(() => {
|
||||
this.vinNotFound = true;
|
||||
this.$refs.funnelFooter.removeLoader();
|
||||
return false;
|
||||
});
|
||||
|
||||
|
|
@ -335,44 +311,46 @@ export default {
|
|||
}
|
||||
|
||||
if (!vehicleLookupResponse || !zipValidationResponse.data.isServiceable) {
|
||||
// If either lookup fails, remove the loader and stop processing the page.
|
||||
this.$refs.funnelFooter.removeLoader();
|
||||
return;
|
||||
}
|
||||
|
||||
this.isCarIdDifferent = vehicleLookupResponse.data.carId !== store.getters.vehicle.carId;
|
||||
|
||||
if (this.isCarIdDifferent && (vehicleLookupResponse.data.carId !== this.previouslyEnteredCarId)) {
|
||||
this.previouslyEnteredCarId = vehicleLookupResponse.data.carId;
|
||||
this.noServiceZip = false;
|
||||
this.customAlertData.vehicleInfo = vehicleLookupResponse.data;
|
||||
this.$refs.funnelFooter.updateButtonText(`Continue with ${vehicleLookupResponse.data.year} ${vehicleLookupResponse.data.make} ${vehicleLookupResponse.data.model}`);
|
||||
this.isVinValid = true;
|
||||
this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vehicleLookupResponse.data.carId);
|
||||
this.$refs.funnelFooter.removeLoader();
|
||||
this.isCarIdDifferent = true;
|
||||
return;
|
||||
}
|
||||
|
||||
this.updateStore(vehicleLookupResponse.data, zipValidationResponse.data);
|
||||
this.navigateForward();
|
||||
|
||||
} else {
|
||||
// If a VIN has already been found. Validate the Service Zip (in case of changes)
|
||||
const zipValidationResponse = await zipValidation;
|
||||
|
||||
// Check if Service Zip entered is serviceable, if not display an alert
|
||||
if (!zipValidationResponse.data.isServiceable) {
|
||||
// Check if Service Zip entered is serviceable
|
||||
if (zipValidationResponse.data.isServiceable) {
|
||||
// If the Service Zip entered is serviceable then save the Zip Info and Email Address and navigate forward
|
||||
store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE, this.zip);
|
||||
store.commit(storeMutations.UPDATE_SERVICE_LOCATION_STATE, zipValidationResponse.data.state);
|
||||
store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.email);
|
||||
this.navigateForward();
|
||||
} else {
|
||||
// If the Service Zip is NOT serviceable then show an alert
|
||||
this.setupUiForNonServiceableZip(this.zip);
|
||||
this.$refs.funnelFooter.removeLoader();
|
||||
return;
|
||||
} else {
|
||||
this.navigateForward();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (!vehicleLookupResponse) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.isCarIdDifferent = vehicleLookupResponse.data.carId !== store.getters.vehicle.carId;
|
||||
|
||||
if (this.isCarIdDifferent && (vehicleLookupResponse.data.carId !== this.previouslyEnteredCarId)) {
|
||||
this.previouslyEnteredCarId = vehicleLookupResponse.data.carId;
|
||||
this.noServiceZip = false;
|
||||
this.customAlertData.vehicleInfo = vehicleLookupResponse.data;
|
||||
this.$refs.funnelFooter.updateButtonText(`Continue with ${vehicleLookupResponse.data.year} ${vehicleLookupResponse.data.make} ${vehicleLookupResponse.data.model}`);
|
||||
this.isVinValid = true;
|
||||
this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vehicleLookupResponse.data.carId);
|
||||
this.$refs.funnelFooter.removeLoader();
|
||||
this.isCarIdDifferent = true;
|
||||
return;
|
||||
}
|
||||
|
||||
this.updateStore(vehicleLookupResponse.data, zipValidationResponse.data);
|
||||
this.navigateForward();
|
||||
|
||||
},
|
||||
navigateForward(){
|
||||
if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue