Merge pull request #579 from Safelite/feature/CSR-659

Feature/csr 659
This commit is contained in:
Leah Schumann 2022-06-27 08:30:10 -04:00 committed by GitHub
commit 9bbaec7fe4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 60 additions and 80 deletions

View file

@ -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

View file

@ -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) {