Merge remote-tracking branch 'origin/develop' into feature/CSR-700

jest.config.js

@@ -11,13 +11,9 @@ module.exports = {
     "!src/constants/*.js",
     "!src/router/**/*.js",
     "!src/helpers/unit-test-helper.js",
-    "!src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue",
     "!src/layouts/vehicle-damage/windshield-options/windshield-options.vue",
     "!src/layouts/part-questions/**/*.vue",
-    "!src/layouts/reveal/**/*.vue",
+    "!src/layouts/reveal/**/*.vue"
-    // TODO REMOVE THESE AFTER WRITING UNIT TESTS 
-    "!src/ux-components/alert/alert.vue",
-    "!src/helpers/validation-rules.js",
     // END
   ], // ! means exclude from coverage.
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],

src/common-components/textbox-question/textbox-question.spec.js

@@ -15,7 +15,7 @@ const maska = jest.fn();
 describe("textboxQuestion.vue", () => {
 
   it("Should render a text input", async () => {
-    // Arrange   
+    // Arrange
     const wrapper = shallowMount(textboxQuestion, {
       global: {
         directives: {
@@ -53,35 +53,7 @@ describe("textboxQuestion.vue", () => {
     expect(label.text()).toContain(questionText);
 
   }); 
-  
-  it("Should render the 'questionText' data value with '⁠' after the first character of each word in the label text when disableAutoFill is true.", async () => {
-    // Arrange
-    const wrapper = shallowMount(textboxQuestion, {
-      global: {
-        directives: {
-          maska: maska,
-        }
-      },
-      propsData: {
-        disableAutoFill: true,
-      },
-      mixins: [mockMixin]
-    });
 
-    // Mock CMS content ...
-    // Trust me, the below instance of the string "Q⁠uestion Text" actually has the ⁠ in it. You just can't see it
-    // Don't believe me? Copy and paste it into Google. Then inspect the search field element in Dev Tools, 
-    // you will see "Q⁠uestion T⁠ext"
-    const expectedQuestionText = "Q⁠uestion T⁠ext"; 
-
-    // Act
-    const label = wrapper.find("label");
-
-    // Assert
-    expect(label.text()).toContain(expectedQuestionText);
-
-  });
-  
   it("Should return input id as the id of the input field", async () => {
     // Arrange
     const wrapper = shallowMount(textboxQuestion, {
@@ -103,7 +75,7 @@ describe("textboxQuestion.vue", () => {
     expect(input.attributes().id).toEqual("input ID");
 
   });
-  
+
   it("Should render the 'questionText' data value as the aria-label attribute.", async () => {
 
     // Arrange
@@ -193,6 +165,6 @@ describe("textboxQuestion.vue", () => {
     // Assert
     expect(wrapper.vm.handleChange).toHaveBeenCalled;
 
-  });  
+  });
 
 });

src/common-components/textbox-question/textbox-question.vue

@@ -1,7 +1,6 @@
 <template>
 	<div class="textbox-question" :class="(errors && errors.length) || hasError ? 'has-error' : ''">
 		<label :for="inputId" :aria-label="questionText" class="form-label" v-html="labelText"></label>
-		<!-- See https://stackoverflow.com/a/30976223 for information about "do-not-autofill" -->
 		<input
 			v-model.trim="value"
 			v-maska="mask"
@@ -14,7 +13,6 @@
 			:aria-disabled="isDisabled"
 			:disabled="isDisabled"
 			:aria-required="isRequired"
-			autocomplete="do-not-autofill"
 			:class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']"
 			:validationRules="validationRules"
 			@change="handleChange"
@@ -46,7 +44,6 @@ export default {
 		inputId: String,
 		isDisabled: Boolean,
 		isRequired: Boolean,
-		disableAutoFill: Boolean,
 		hasIcon: Boolean, // If input has an icon
 		iconRight: Boolean, // Place icon on right side of text input, otherwise default is left if hasIcon prop is used
 		hasError: Boolean,
@@ -132,7 +129,7 @@ export default {
 			const result = await validate(newValue, this.validationRules); // do a test validation check, without triggering full validation
 			if (result.valid) {
 				this.handleChange(newValue); // trigger full validation on this field only
-			}	
+			}
 		},
 	},
 };

src/helpers/damage-helper.js

@@ -19,7 +19,7 @@ export function getDamageString() {
     if (damageLocations.length > 1) {
       returnString = "match"
     } else {
-      switch(damageLocations[0]?.location) {
+      switch(damageLocations[0]?.glassLocation) {
         case "Windshield":
           returnString = "windshield"
           break;
@@ -36,7 +36,7 @@ export function getDamageString() {
 
   export function getIsWindshieldOnly () {
     const damageLocations = store.getters.damage.glassToReplace;
-    const returnString = damageLocations.length === 1 && damageLocations[0]?.location === "Windshield" ? "windshield" : "glass";
+    const returnString = damageLocations.length === 1 && damageLocations[0]?.glassLocation === "Windshield" ? "windshield" : "glass";
     return returnString;
   }
 
@@ -56,7 +56,7 @@ export async function isGlassAvailableForCarId(carId){
     }
 
     for(const option of currentGlassOptions){
-      if(!newGlassOptions.data[optionsMap[option.location]].availableReplacementOptions.includes(option.name)){
+      if(!newGlassOptions.data[optionsMap[option.glassLocation]].availableReplacementOptions.includes(option.glassName)){
         return false;
       }
     }

src/helpers/damage-helper.spec.js

@@ -16,7 +16,7 @@ jest.mock("@/mixins/base-mixin.js", () => ({
     it("Should return match when multiple selected damage options are in the store", () => {
 
       // Arrange / Act
-      store.getters.damage.glassToReplace = [{location: "Windshield", name: "windshield"}, {location: "Passenger", name: "sideWindow"}];
+      store.getters.damage.glassToReplace = [{glassLocation: "Windshield", glassName: "windshield"}, {glassLocation: "Passenger", glassName: "sideWindow"}];
 
       const damage = getDamageString();
 
@@ -29,7 +29,7 @@ jest.mock("@/mixins/base-mixin.js", () => ({
     it("Should return windshield when Windshield is the only selected damage option in the store", () => {
 
       // Arrange / Act
-      store.getters.damage.glassToReplace = [{location: "Windshield", name: "windshield"}];
+      store.getters.damage.glassToReplace = [{glassLocation: "Windshield", glassName: "windshield"}];
 
       const damage = getDamageString();
 
@@ -42,7 +42,7 @@ jest.mock("@/mixins/base-mixin.js", () => ({
     it("Should return side window when Driver or Passenger is the only selected damage option in the store", () => {
 
       // Arrange / Act
-      store.getters.damage.glassToReplace = [{location: "Passenger", name: "sideWindow"}];
+      store.getters.damage.glassToReplace = [{glassLocation: "Passenger", glassName: "sideWindow"}];
 
       const damage = getDamageString();
 
@@ -55,7 +55,7 @@ jest.mock("@/mixins/base-mixin.js", () => ({
     it("Should return rear window when Rear is the only selected damage option in the store", () => {
 
       // Arrange / Act
-      store.getters.damage.glassToReplace = [{location: "Rear", name: "rear"}];
+      store.getters.damage.glassToReplace = [{glassLocation: "Rear", glassName: "rear"}];
 
       const damage = getDamageString();
 
@@ -67,7 +67,7 @@ jest.mock("@/mixins/base-mixin.js", () => ({
   describe("damage-helper.js", () => {
     it("Should return true if no mismatches between each array exist", async () => {
       // Arrange
-      store.getters.damage.glassToReplace = [{location: "Windshield", name: "windshield"}];
+      store.getters.damage.glassToReplace = [{glassLocation: "Windshield", glassName: "windshield"}];
 
       // Act
       const isGlassAvailable = await isGlassAvailableForCarId();
@@ -80,7 +80,7 @@ jest.mock("@/mixins/base-mixin.js", () => ({
   describe("damage-helper.js", () => {
     it("Should return false if any mismatches between each array exist", async () => {
       // Arrange
-      store.getters.damage.glassToReplace = [{location: "Windshield", name: "sideWindow"}];
+      store.getters.damage.glassToReplace = [{glassLocation: "Windshield", glassName: "sideWindow"}];
 
       const isGlassAvailable = await isGlassAvailableForCarId();
 

src/layouts/address-lookup/address-lookup.vue

@@ -9,7 +9,7 @@
 			<loadingModal ref="loadingModal"/>
 			<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
 			<vehicleBanner cmsWidgetName="VehicleBannerWidget" ref="vehicleBanner" :displayGenericVehicleImage=false />
-			<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />	
+			<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />
 			<div class="fade-on-route-transition sub-container make-tall">
 				<customerQuestions ref="customerQuestions" v-model="customerQuestions" />
 				<alert ref="alertVinNotFound" v-if="displayVinNotFoundAlert"
@@ -24,14 +24,14 @@
 					:manualCopy="AlertMatchedDifferentVehicleBody"
 					alertClass="alert-warning"
 					v-bind:isDismissible="false"
-				/>			
+				/>
 				<alert ref="alertNonServiceableZip" v-if="displayNonServiceableZipAlert"
 					class="mb-4"
 					alertClass="alert-danger"
 					:manualHeadline="AlertNonServiceableZipHeader"
 					:manualCopy="AlertNonServiceableZipBody"
 					v-bind:isDismissible="false"
-				/>			
+				/>
 				<alert ref="alertVinLookupsByHomeAddressNotAllowed" v-if="displayVinLookupByHomeAddressNotAllowedAlert"
 					class="mb-4"
 					cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
@@ -42,11 +42,11 @@
 					<div class="service-zip-field" v-if="showServiceZipField" aria-live="polite">
 						<div class="row mb-4">
 							<div class="col">
-								<textboxQuestion cmsWidgetName="ServiceZipQuestionWidget" v-model="serviceZipCode" ref="serviceZip" inputId="7add1b26df344f2caf1678de5797803f" aria-haspopup="" mask="#####" disableAutoFill validationRules="service-zip-required|service-zip-format" />
+								<textboxQuestion cmsWidgetName="ServiceZipQuestionWidget" v-model="serviceZipCode" ref="serviceZip" inputId="7add1b26df344f2caf1678de5797803f" aria-haspopup="" mask="#####" validationRules="service-zip-required|service-zip-format" />
 							</div>
 						</div>
 					</div>
-				</transition>								
+				</transition>
 				<funnel-footer
 					cmsWidgetName="FunnelFooterWidget"
 					ref="funnelFooter"
@@ -55,7 +55,7 @@
 					@back-clicked="backButtonAction"
 					:isForwardActionDisabled="!meta.valid"
 				/>
-			</div>	
+			</div>
 		</div>
 	</Form>
 </template>
@@ -122,14 +122,14 @@ export default {
 				firstName: this.getRegistrationFirstNameFromStore(),
 				lastName: this.getRegistrationLastNameFromStore(),
 				emailAddress: this.getEmailFromStore(),
-			}, 
+			},
 			serviceZipCode: this.getServiceZipFromStore(),
 			displayNonServiceableZipAlert: false,
 			displayVinNotFoundAlert: false,
 			displayMatchedDifferentVehicleAlert: false,
 			displayVinLookupByHomeAddressNotAllowedAlert: false,
 			previouslyEnteredCarId: "",
-			isSelectedGlassAvailableForVehicle: false, 
+			isSelectedGlassAvailableForVehicle: false,
 			customAlertData: {},
 			showServiceZipField: this.getServiceZipFromStore(),
 			isZipServicable: false,
@@ -150,7 +150,7 @@ export default {
 				this.$route
 			);
 		},
-		attachCustomEvents() { 
+		attachCustomEvents() {
 			this.prependActionToMethod(this, this.forwardButtonAction, () => {
 				this.pushEventToGA(
 					this.$route.query[this.queryStrings.FMG_PAGE],
@@ -177,7 +177,7 @@ export default {
 		},
 		getRegistrationLastNameFromStore() {
 			return store.getters.vehicle.registration.lastName;
-		},						
+		},
 		getEmailFromStore() {
 			return store.getters.order.customer.emailAddress;
 		},
@@ -189,9 +189,9 @@ export default {
 
 			// Lookup VIN(s) with the provided address
 			const vinLookupPromise = this.lookupVin(
-				this.customerQuestions.lastName, 
+				this.customerQuestions.lastName,
-				this.customerQuestions.addressQuestions.streetAddress, 
+				this.customerQuestions.addressQuestions.streetAddress,
-				this.customerQuestions.addressQuestions.zipCode, 
+				this.customerQuestions.addressQuestions.zipCode,
 				this.customerQuestions.addressQuestions.state
 			);
 
@@ -200,8 +200,8 @@ export default {
 
 			const vinLookupResponse = await vinLookupPromise;
 			const serviceZipValidationResponse = await serviceZipValidationPromise;
-			
+
-			if (!vinLookupResponse.data.isStatePermissible) {				
+			if (!vinLookupResponse.data.isStatePermissible) {
 				// State Restrictions forbid lookup by address
 				this.displayVinLookupByHomeAddressNotAllowedAlert = true;
 				this.$refs.funnelFooter.removeLoader();
@@ -210,29 +210,29 @@ export default {
 
 			// if the neither the registration zip code or service zip code are not serviceable
 			this.isZipServicable = serviceZipValidationResponse.data.isServiceable;
-			if (!this.isZipServicable) {				
+			if (!this.isZipServicable) {
 				this.displayNonServiceableZipAlert = true;
 				this.showServiceZipField = true;
-				this.$refs.funnelFooter.removeLoader();		
+				this.$refs.funnelFooter.removeLoader();
 			} else if (!this.serviceZipCode) {
 				// if the registration zip code is servicable and nothing was entered for the service zip code
 				// then set the service zip code to the registration zip code
 				this.serviceZipCode = this.customerQuestions.addressQuestions.zipCode;
-			} 
+			}
 
 			const carEntered = store.getters.vehicle;
 			const carsFound = vinLookupResponse.data.vinVehicles;
 
 			if (carsFound.length == 0) {
-				// No VINs found					
+				// No VINs found
 				this.displayVinNotFoundAlert = true;
 				this.$refs.funnelFooter.removeLoader();
-				return;				
+				return;
-			} else if (carsFound.length == 1) {			
+			} else if (carsFound.length == 1) {
 				const carFound = carsFound[0].vehicle;
 				this.isCarIdDifferent = carFound.carId !== carEntered.carId;
 
-				if (this.isCarIdDifferent && carFound.carId !== this.previouslyEnteredCarId) {	
+				if (this.isCarIdDifferent && carFound.carId !== this.previouslyEnteredCarId) {
 					// Display Alert
 					this.previouslyEnteredCarId = carFound.carId;
 					this.customAlertData.vehicleInfo = carFound;
@@ -241,12 +241,12 @@ export default {
 					this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(carFound.carId);
 
 					// Update button "Continue with..."
-					this.$refs.funnelFooter.updateButtonText(`Continue with ${carFound.year} ${carFound.make} ${carFound.model}`);				
+					this.$refs.funnelFooter.updateButtonText(`Continue with ${carFound.year} ${carFound.make} ${carFound.model}`);
 					this.$refs.funnelFooter.removeLoader();
-					
+
 					return;
-				} 				
+				}
-								
+
 				if (!this.isZipServicable) {
 					return;
 				}
@@ -254,21 +254,21 @@ export default {
 				// update data if the zip or service zip is servicable
 				this.updateVehicleInfo(carsFound[0].vin, carFound);
 				this.updateCustomerInfo(serviceZipValidationResponse.data.state);
-	
+
 			} else if (carsFound.length > 1) {
 				if (!this.isZipServicable) {
 					return;
 				}
 
 				// if multiple cars were found
-				let matchingCars = carsFound.filter(car => car.vehicle.carId === carEntered.carId); 
+				let matchingCars = carsFound.filter(car => car.vehicle.carId === carEntered.carId);
 				if (matchingCars.length === 1) {
 					// and one and only one of them matches the carId entered, save the vehicle info
 					// so we can go to the Heritage Funnel directly
 					const matchingCar = matchingCars[0];
 					this.updateVehicleInfo(matchingCar.vin, matchingCar.vehicle);
 				}
-				
+
 				// update data if the zip or service zip is servicable
 				this.updateCustomerInfo(serviceZipValidationResponse.data.state);
 			}
@@ -277,13 +277,13 @@ export default {
 		},
 		resetWarningsAndErrors() {
 			this.displayVinNotFoundAlert = false;
-			this.displayNonServiceableZipAlert = false;	
+			this.displayNonServiceableZipAlert = false;
 			this.displayMatchedDifferentVehicleAlert = false;
 			this.displayVinLookupByHomeAddressNotAllowedAlert = false;
 		},
 		navigateForward(carEntered, carsFound) {
 			this.updateServiceLocationIfNecessary();
-			
+
 			if (carsFound.length == 1) {
 				// if a different vehicle is found than the one entered and the selected glass
 				// is not available for that vehicle
@@ -297,37 +297,37 @@ export default {
 						}, {}
 					);
 				} else {
-					// otherwise 
+					// otherwise
 					this.navigateForwardWithSingleCarMatch();
-				}				
+				}
 			} else if (carsFound.length > 1) {
 				// if multiple cars were found
-				let matchingCars = carsFound.filter(car => car.vehicle.carId === carEntered.carId);  
+				let matchingCars = carsFound.filter(car => car.vehicle.carId === carEntered.carId);
 				if (matchingCars.length === 1) {
 					// and one and only of them matches the car id entered
-					const matchingCar = matchingCars[0];					
+					const matchingCar = matchingCars[0];
 					this.updateVehicleInfo(matchingCar.vin, matchingCar.vehicle);
 					this.navigateForwardWithSingleCarMatch();
 				} else {
 					// if there are no matches or there are multiple matches, navigate to "address-vehicles" page
 					this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_VEHICLES, this.$route, {}, {}, carsFound);
 				}
-			} 
+			}
 
 		},
 		validateZip(zip) {
 			return this.dispatchStoreAction(
-				storeActions.VALIDATE_ZIP, 
+				storeActions.VALIDATE_ZIP,
 				{ zip });
 		},
 		lookupVin(lastName, streetAddress, zip, state) {
 			return this.dispatchStoreAction(
 				storeActions.LOOKUP_VIN_BY_ADDRESS,
-				{ 
+				{
-					licenseLastName: lastName, 
+					licenseLastName: lastName,
-					licenseStreetAddress: streetAddress, 
+					licenseStreetAddress: streetAddress,
-					licenseZip: zip, 
+					licenseZip: zip,
-					licenseState: state 
+					licenseState: state
 				}, false
 			);
 		},
@@ -342,7 +342,7 @@ export default {
 			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.imageColor);
-		},		
+		},
 		updateCustomerInfo(serviceState) {
 			store.commit(storeMutations.UPDATE_REGISTRATION_ADDRESS, this.customerQuestions.addressQuestions.streetAddress);
 			store.commit(storeMutations.UPDATE_REGISTRATION_CITY, this.customerQuestions.addressQuestions.city);
@@ -350,10 +350,10 @@ export default {
 			store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, this.customerQuestions.addressQuestions.zipCode);
 			store.commit(storeMutations.UPDATE_REGISTRATION_FIRST_NAME, this.customerQuestions.firstName);
 			store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, this.customerQuestions.lastName);
-			store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE, this.serviceZipCode);			
+			store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE, this.serviceZipCode);
-			store.commit(storeMutations.UPDATE_SERVICE_LOCATION_STATE, serviceState);			
+			store.commit(storeMutations.UPDATE_SERVICE_LOCATION_STATE, serviceState);
 			store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.customerQuestions.emailAddress);
-		},		
+		},
 		updateServiceLocationIfNecessary() {
 			const serviceLocation = store.getters.order.serviceLocation;
 
@@ -373,7 +373,7 @@ export default {
 		},
 		AlertNonServiceableZipBody() {
 			return this.getCmsContent("AlertNonServiceableZipWidget", "BodyText");
-		},		
+		},
 		AlertMatchedDifferentVehicleHeader() {
 			const text = this.getCmsContent("AlertMatchedDifferentVehicleWidget", "HeadlineText").replaceAll("{custom:glassText}", getDamageString());
 			return text;
@@ -386,13 +386,13 @@ export default {
 			const content = this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
 				.replaceAll("{custom:glassText}", getDamageString())
 				.replaceAll("{custom:vinYmmFound}", vinYmmFound)
-				.replaceAll("{custom:vinYmmExpected}", vinYmmExpected);			
+				.replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
 
 			return content;
-		},		
+		},
 	},
 	watch: {
-		customerQuestions: {		
+		customerQuestions: {
 			handler(newValue) {
 				// if they modify one of the lookup fields (address, city, state, zipCode, or lastName), then modify the button text back to “Get my personalized quote”
 				this.$refs.funnelFooter.updateButtonText(this.getCmsContent("FunnelFooterWidget", "ForwardButtonText"));
@@ -412,8 +412,8 @@ export default {
 				// if the Service Zip Code field is ever hidden, clear out it's value
 				if (!newValue) {
 					this.serviceZipCode = null;
-				}			
+				}
-			},			
+			},
 		}
 	},
 	components: {

src/layouts/estimate/estimate.vue

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

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -267,8 +267,7 @@ export default {
           `Continue with ${vinLookup.data.vehicle.year} ${vinLookup.data.vehicle.make} ${vinLookup.data.vehicle.model}`
         );
         this.isVinValid = true;
-        this.isSelectedGlassAvailableForVehicle =
+        this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vinLookup.data.vehicle.carId);
-          await isGlassAvailableForCarId(vinLookup.data.vehicle.carId);
         this.$refs.funnelFooter.removeLoader();
         return;
       }

src/layouts/vehicle-damage/vehicle-damage.spec.js

@@ -145,8 +145,8 @@ describe("vehicle-damage.vue", () => {
 
       wrapper.vm.selectedRearReplaceOptions = ["Stationary"];
 
-      const expectedGlassToReplace = [{ location: "Windshield", name: "Single" }, { location: "Driver", name: "Back" },
+      const expectedGlassToReplace = [{ glassLocation: "Windshield", glassName: "Single" }, { glassLocation: "Driver", glassName: "Back" },
-      { location: "Passenger", name: "Quarter" }, { location: "Rear", name: "Stationary" }];
+      { glassLocation: "Passenger", glassName: "Quarter" }, { glassLocation: "Rear", glassName: "Stationary" }];
 
       //Act
       vehicleDamage.beforeRouteEnter.call(
@@ -237,7 +237,7 @@ describe("vehicle-damage.vue", () => {
         selectedWindshieldDamageType: ["Replace"]
       };
 
-      const expectedGlassToReplace = [{ location: "Windshield", name: "Single" },];
+      const expectedGlassToReplace = [{ glassLocation: "Windshield", glassName: "Single" },];
 
       //Act
       vehicleDamage.beforeRouteEnter.call(

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -314,25 +314,25 @@ export default {
       const selectedGlassToReplace = [];
       if (this.isWindshieldDamageLocation && !this.isWindshieldRepair){
           this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach(wsItem => {
-            selectedGlassToReplace.push({ location: damageLocationsSelected.WINDSHIELD, name: wsItem});
+            selectedGlassToReplace.push({ glassLocation: damageLocationsSelected.WINDSHIELD, glassName: wsItem});
           })
       }
 
       if (this.isDriverSideReplace){
         this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach(driverItem => {
-          selectedGlassToReplace.push({ location: damageLocationsSelected.DRIVER, name: driverItem});
+          selectedGlassToReplace.push({ glassLocation: damageLocationsSelected.DRIVER, glassName: driverItem});
         })
       }
 
       if (this.isPassengerSideReplace){
         this.sideDoorOptionsData.selectedPassengerSideReplaceOptions.forEach(passengerItem => {
-          selectedGlassToReplace.push({ location: damageLocationsSelected.PASSENGER, name: passengerItem});
+          selectedGlassToReplace.push({ glassLocation: damageLocationsSelected.PASSENGER, glassName: passengerItem});
         })
       }
 
       if (this.isRearWindowDamageLocation) {
           this.selectedRearReplaceOptions.forEach(rearItem => {
-            selectedGlassToReplace.push({ location: damageLocationsSelected.REAR, name: rearItem});
+            selectedGlassToReplace.push({ glassLocation: damageLocationsSelected.REAR, glassName: rearItem});
           })
       }
 

src/layouts/vin-lookup/vin-lookup.vue

@@ -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"
+          :manualHeadline="PerfectMatchInsuranceVerifiedAlertHeader"
-          :manualCopy="PerfectMatchNewVinAlertReadOnlyBody"
+          :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"
+          :manualHeadline="PerfectMatchInsuranceNotVerifiedAlertHeader"
-          :manualCopy="PerfectMatchNewVinAlertBody"
+          :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(),
+      isInsuranceVerified: false,
-      vinTouched: false,
-      rawVinValue: "",
     };
   },
   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() {
+    PerfectMatchInsuranceNotVerifiedAlertHeader() {
-      return this.getCmsContent("PerfectMatchNewVinAlert", "HeadlineText");
+      return this.getCmsContent("PerfectMatchInsuranceNotVerifiedAlert", "HeadlineText");
     },
-    PerfectMatchNewVinAlertBody() {
+    PerfectMatchInsuranceNotVerifiedAlertBody() {
-      return this.getCmsContent("PerfectMatchNewVinAlert", "BodyText").replaceAll("{custom:damage}",
+      return this.getCmsContent("PerfectMatchInsuranceNotVerifiedAlert", "BodyText").replaceAll("{custom:damage}",
       getDamageString())
     },
-    PerfectMatchNewVinAlertReadOnlyHeader () {
+    PerfectMatchInsuranceVerifiedAlertHeader () {
-      return this.getCmsContent("PerfectMatchNewVinAlertReadOnly", "HeadlineText");
+      return this.getCmsContent("PerfectMatchInsuranceVerifiedAlert", "HeadlineText");
     },
-    PerfectMatchNewVinAlertReadOnlyBody () {
+    PerfectMatchInsuranceVerifiedAlertBody () {
-      return this.getCmsContent("PerfectMatchNewVinAlertReadOnly", "BodyText").replaceAll("{custom:damage}",
+      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 this is a new VIN Lookup, do both a Vehicle Lookup and a Zip Validation
-        // If the user has clicked on the VIN field, either they are doing a new VIN lookup or changing the VIN previously matched.
+      if (!this.vinPopulatedOnPageLoad) {          
-        // Therefore we need to do a Vehicle Lookup        
+        // Perform Zip Validation      
-        const vinToLookup = this.vinTouched ? this.vin : this.initialVin;
-        const vehicleLookup = this.lookupVehicle(vinToLookup);
-        
         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
+        // Check if Service Zip entered is serviceable
-        if (!zipValidationResponse.data.isServiceable) {
+        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) {