Updated vin-lookup so that vin field is always read only coming back from Heritage and also to clear out the vin field when reselecting lookup by vin on the estimate page
This commit is contained in:
Leah Schumann
parent
0c84428b7e
commit
fe007b2b99
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