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

jest.config.js

@@ -34,7 +34,7 @@ module.exports = {
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
   coverageThreshold: {
     global: {
-      statements: 85,
+      statements: 84,
       // Got the go ahead from Mark to temporarily lower this. Taking out initialize component made the year,make,model and style coverage drop a bit. Once unit tests for license plate lookup, vin lookup and address lookup are in the coverage should go back up to 90
     },
   },

src/common-components/loading-modal/loading-modal.spec.js

@@ -13,6 +13,7 @@ jest.mock(
 
 jest.mock('@/assets/img/loader.gif', () => 'loader.gif')
 jest.mock('@/assets/img/windshield.png', () => 'windshield.png')
+jest.mock('@/assets/img/wiper-loader.gif', () => 'windshield.png')
 
 describe("loadingModal", () => {
   test("showModal sets modal visible", async () => {

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

@@ -3,7 +3,7 @@
 		<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="value"
+			v-model.trim="value"
 			v-maska="mask"
 			:type="type"
 			class="form-control"
@@ -17,42 +17,44 @@
 			autocomplete="do-not-autofill"
 			:class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']"
 			:validationRules="validationRules"
+			@change="handleChange"
+			@blur="handleChange"
 		/>
 		<div v-show="errorMessage" class="row my-2 form-test-error">
-			<span role="alert">{{ errorMessage }}</span>
+			<span class="d-inline-flex mt-0" role="alert">{{ errorMessage }}</span>
 		</div>
 	</div>
 </template>
 
 <script>
-
+import { useField, validate } from "vee-validate";
-import { useField } from "vee-validate";
 
 export default {
 	name: "textbox-question",
 	props: {
 		type: {
 			type: String,
-			default: 'text',
+			default: "text",
 		},
 		placeholderText: {
 			type: String,
-			default: '',
+			default: "",
 		},
 		modelValue: String,
 		inputId: String,
 		isDisabled: Boolean,
 		isRequired: Boolean,
 		disableAutoFill: Boolean,
-		hasIcon: Boolean,    // If input has an icon
+		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
+		iconRight: Boolean, // Place icon on right side of text input, otherwise default is left if hasIcon prop is used
 		hasError: Boolean,
 		mask: {
 			type: String,
-			default: '',
+			default: "",
 		},
 		validationRules: String,
-		cmsWidgetName: String
+		semiAggressiveValidation: Boolean,
+		cmsWidgetName: String,
 	},
 	setup(props) {
 		const propsClone = Object.assign({}, props);
@@ -71,17 +73,11 @@ export default {
 		const fieldOptions = {
 			type: "text",
 			value: modelValue,
-			initialValue: initialValue
+			initialValue: initialValue,
 		};
 
-		const {
+		const { errorMessage, handleBlur, handleChange, meta, validate, errors } =
-			errorMessage,
+			useField(props.inputId, props.validationRules, fieldOptions);
-			handleBlur,
-			handleChange,
-			meta,
-			validate,
-			errors,
-		} = useField(props.inputId, props.validationRules, fieldOptions);
 
 		return {
 			errorMessage,
@@ -93,16 +89,16 @@ export default {
 		};
 	},
 	computed: {
-		questionText(){
+		questionText() {
-			return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
+			return this.getCmsContent(this.cmsWidgetName, "QuestionText");
 		},
 		value: {
-			get: function() {
+			get: function () {
 				return this.modelValue;
 			},
-			set: function(newValue) {
+			set: function (newValue) {
 				this.$emit("update:modelValue", newValue);
-			}
+			},
 		},
 		labelText: {
 			get: function () {
@@ -112,7 +108,11 @@ export default {
 					var words = this.questionText.toString().split(/[ ]+/);
 					words.forEach(function (word) {
 						const position = 1;
-						word = [word.toString().slice(0, position), noBreakChar, word.toString().slice(position)].join('');
+						word = [
+						word.toString().slice(0, position),
+						noBreakChar,
+						word.toString().slice(position),
+						].join("");
 						questionText += `${word} `;
 					});
 
@@ -122,14 +122,19 @@ export default {
 				}
 
 				return questionText;
-			}
+			},
-		}
+		},
 	},
 	watch: {
-		value(newValue) {
+		async value(newValue) {
-			this.handleChange(newValue);
+			if (this.semiAggressiveValidation) {
-		}
+				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
+				}
+			}
+		},
+	},
 };
 </script>
 
@@ -159,6 +164,7 @@ export default {
 		border: 1px solid $gray-500;
 		border-radius: .5rem;
 		min-height: 3rem;
+		padding: 12px 16px;
 		&::placeholder {
 			color: $gray-500;
 		}

src/constants/analytics.js

@@ -26,6 +26,7 @@ const GaLabels = {
   ERROR: 'Error',
   LICENSE_PLATE_LOOKUP: 'License_Plate_Look_Up',
   VIN_LOOKUP: 'Vin_Look_Up', 
+  ADDRESS_LOOKUP: 'Address_Look_up', 
 };
 
 

src/helpers/damage-helper.js

@@ -4,10 +4,17 @@ import { storeActions } from "@/constants/store-actions";
 
 export function getDamageString() {
     const damageLocations = store.getters.damage.glassToReplace;
+    const isRepair = store.getters.damage.isRepair;
+
     let returnString;
     if (!damageLocations) {
       return;
     }
+    // If it's a repair it's always a windshield.
+    if(isRepair){
+      return "windshield"
+    }
+
     if (damageLocations.length > 1) {
       returnString = "match"
     } else {

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

@@ -72,10 +72,8 @@ import alert from "@/ux-components/alert/alert";
 import textboxQuestion from "@/common-components/textbox-question/textbox-question";
 import loadingModal from '@/common-components/loading-modal/loading-modal.vue';
 
-import { Form } from "vee-validate";
+import { Form, defineRule } from "vee-validate";
-import { defineRule } from "vee-validate";
+import { required, regex } from "@/helpers/validation-rules";
-import { required } from "@/helpers/validation-rules";
-import { regex } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
 
 // Supporting files
@@ -152,6 +150,16 @@ export default {
 				this.$route
 			);
 		},
+		attachCustomEvents() { 
+       this.prependActionToMethod(this, this.forwardButtonAction, () => {
+      this.pushEventToGA(
+          this.$route.query[this.queryStrings.FMG_PAGE],
+          this.GaActions.SUBMITTED,
+          this.GaLabels.ADDRESS_LOOKUP,
+          true
+     );
+      });
+	},
 		getRegistrationAddressFromStore() {
 			return store.getters.vehicle.registration.address;
 		},
@@ -297,8 +305,10 @@ export default {
 				// if multiple cars were found
 				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
 					this.$refs.loadingModal.showModal();
+
+					// and one and only of them matches the car id entered
+					const matchingCar = matchingCars[0];					
 					this.updateVehicleInfo(matchingCar.vin, matchingCar.vehicle);
 					navigateAfterSaveToHeritageFunnel(this.$route);
 				} else {
@@ -356,6 +366,9 @@ export default {
 			}
 		}
 	},
+	mounted() {
+    this.attachCustomEvents();
+  },
 	computed: {
 		AlertNonServiceableZipHeader(){
 			const zipCode = this.serviceZipCode ? this.serviceZipCode : this.customerQuestions.addressQuestions.zipCode;
@@ -370,13 +383,14 @@ export default {
 			return text;
 		},
 		AlertMatchedDifferentVehicleBody(){
-			let content = this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText");
-			content = content.replaceAll("{custom:glassText}", getDamageString());
-			const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
-			const vinYmmExpected = `${store.getters.vehicle.year} ${store.getters.vehicle.make} ${store.getters.vehicle.model}`;   
 
-			content = content.replaceAll("{custom:vinYmmFound}", vinYmmFound); 
+			const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
-			content = content.replaceAll("{custom:vinYmmExpected}", vinYmmExpected); 			
+			const vinYmmExpected = `${store.getters.vehicle.year} ${store.getters.vehicle.make} ${store.getters.vehicle.model}`;
+
+			const content = this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
+				.replaceAll("{custom:glassText}", getDamageString())
+				.replaceAll("{custom:vinYmmFound}", vinYmmFound)
+				.replaceAll("{custom:vinYmmExpected}", vinYmmExpected);			
 
 			return content;
 		},		

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

@@ -1,23 +1,59 @@
 <template>
 	<div class="row mt-2 mb-4">
 		<div class="col">
-			<textboxQuestion id="streetAddressField" cmsWidgetName="StreetAddressQuestionWidget" v-model="addressModel.streetAddress" ref="autocomplete" inputId="autocomplete" placeholderText="Search" aria-haspopup="" hasIcon disableAutoFill validationRules="street-address-required" />
+			<textboxQuestion
+				id="streetAddressField"
+				cmsWidgetName="StreetAddressQuestionWidget"
+				v-model="addressModel.streetAddress"
+				ref="autocomplete"
+				inputId="autocomplete"
+				placeholderText="Search"
+				aria-haspopup=""
+				hasIcon
+				disableAutoFill
+				validationRules="street-address-required"
+			/>
 		</div>
 	</div>
 	<transition name="fade" mode="out-in">
 		<div class="row mb-4" v-show="showAddressFields" aria-live="polite">
 			<div class="col">
-				<textboxQuestion cmsWidgetName="CityQuestionWidget" v-model="addressModel.city" ref="city" inputId="cbf28188fdf2436688fd735915f7ee56" disableAutoFill validationRules="city-required"/>
+				<textboxQuestion
+					cmsWidgetName="CityQuestionWidget"
+					v-model="addressModel.city"
+					ref="city"
+					inputId="cbf28188fdf2436688fd735915f7ee56"
+					disableAutoFill
+					validationRules="city-required"
+					semiAggressiveValidation
+				/>
 			</div>
 		</div>
 	</transition>
 	<transition name="fade" mode="out-in">
 		<div class="row mb-4" v-show="showAddressFields" aria-live="polite">
 			<div class="col">
-				<dropdownQuestion cmsWidgetName="StateQuestionWidget" v-model="addressModel.state" ref="state" inputId="8fdf9dc2e13e430eb57529499dceb3eb" :options="stateOptions" disableAutoFill validationRules="state-required" />
+				<dropdownQuestion
+					cmsWidgetName="StateQuestionWidget"
+					v-model="addressModel.state"
+					ref="state"
+					inputId="8fdf9dc2e13e430eb57529499dceb3eb"
+					:options="stateOptions"
+					disableAutoFill
+					validationRules="state-required"
+				/>
 			</div>
 			<div class="col">
-				<textboxQuestion cmsWidgetName="ZipQuestionWidget" v-model="addressModel.zipCode" ref="zipCode" inputId="01a9a1c2de0b4c9da8e023c9ae3be498" mask="#####" disableAutoFill validationRules="zip-code-required|zip-code-format"/>
+				<textboxQuestion
+					cmsWidgetName="ZipQuestionWidget"
+					v-model="addressModel.zipCode"
+					ref="zipCode"
+					inputId="01a9a1c2de0b4c9da8e023c9ae3be498"
+					mask="#####"
+					disableAutoFill
+					validationRules="zip-code-required|zip-code-format"
+					semiAggressiveValidation
+				/>
 			</div>
 		</div>
 	</transition>		
@@ -36,18 +72,19 @@
 </template>
 
 <script>
-
 import textboxQuestion from "@/common-components/textbox-question/textbox-question";
 import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
 import alert from "@/ux-components/alert/alert";
 import { applicationConfig } from "@/constants/application-config.js";
 import { defineRule } from "vee-validate";
-import { required } from "@/helpers/validation-rules";
+import { required, regex } from "@/helpers/validation-rules";
-import { regex } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
 
 // DEFINE VALIDATION RULES
-defineRule("street-address-required", required(errorMessages.STREET_ADDRESS_REQUIRED));
+defineRule(
+	"street-address-required",
+	required(errorMessages.STREET_ADDRESS_REQUIRED)
+);
 defineRule("city-required", required(errorMessages.CITY_REQUIRED));
 defineRule("state-required", required(errorMessages.STATE_REQUIRED));
 defineRule("zip-code-required", required(errorMessages.ZIP_REQUIRED));
@@ -154,7 +191,7 @@ export default ({
 				this.addressModel.state !== null & 
 				this.addressModel.zipCode !== null) {
 
-				this.showAddressFields = true;				
+				this.showAddressFields = true;
 			}
 
 			const addressField1 = document.getElementById("autocomplete");
@@ -175,49 +212,52 @@ export default ({
 					);
 
 					// Standard place_changed event handling
-					autocomplete.addListener('place_changed', fillInAddress);
+					const autocompleteListener = window.google.maps.event.addListener(autocomplete, 'place_changed', fillInAddress);
 
-					// Wrapping the addressField1 element in the Google Address Autocomplete object 
+						// Wrapping the addressField1 element in the Google Address Autocomplete object 
-					// will cause "autocomplete='off'" which Chrome completely ignores. This event
+						// will cause "autocomplete='off'" which Chrome completely ignores. This event
-					// handler will set the value to something arbitrary so autofill doesn't work. 
+						// handler will set the value to something arbitrary so autofill doesn't work. 
-					// https://stackoverflow.com/a/30976223
+						// https://stackoverflow.com/a/30976223
-					addressField1.addEventListener("focus", () => {
+						addressField1.addEventListener("focus", () => {
-						addressField1.setAttribute("autocomplete", "do-not-autofill");
+							addressField1.setAttribute("autocomplete", "do-not-autofill");
 
 						// Make place results box stick to the input on scroll
 						const streetAddressField = document.getElementById("streetAddressField");
 						const autocompleteResultsContainer = document.getElementsByClassName("pac-container")[0];
-						streetAddressField.appendChild(autocompleteResultsContainer);
+						if (autocompleteResultsContainer) {
+							streetAddressField.appendChild(autocompleteResultsContainer);
+						}
+						
 					})
 
-					addressField1.onchange = function() {
+						addressField1.onchange = function() {
-						const hover = document.querySelector(".pac-container .pac-item:hover");
+							const hover = document.querySelector(".pac-container .pac-item:hover");
-						// if an item has been clicked, do nothing, otherwise get first solution and use Geocoder to get the place
+							// if an item has been clicked, do nothing, otherwise get first solution and use Geocoder to get the place
-						if (hover === null) {
+							if (hover === null) {
-							const item = document.querySelector(".pac-container .pac-item");
+								const item = document.querySelector(".pac-container .pac-item");
-							if (item != null) {
+								if (item != null) {
-								const firstResult = item.textContent;
+									const firstResult = item.textContent;
-								const geocoder = new window.google.maps.Geocoder();
+									const geocoder = new window.google.maps.Geocoder();
-								geocoder.geocode({
+									geocoder.geocode({
-									address: firstResult
+										address: firstResult
-								}, function (results, status) {
+									}, function (results, status) {
-									if (status === window.google.maps.GeocoderStatus.OK) {
+										if (status === window.google.maps.GeocoderStatus.OK) {
-										fillInAddress(results[0]);
+											fillInAddress(results[0]);
-										self.displayVerificationWarning = true;
+											self.displayVerificationWarning = true;
-										self.displayNoMatchWarning = false;
+											self.displayNoMatchWarning = false;
-									}
+										}
-								});
+									});
+								}
+								else {
+									self.addressModel.city = "";
+									self.addressModel.state = "";
+									self.addressModel.zipCode = "";      
+									self.showAddressFields = true;
+									self.displayVerificationWarning = false;
+									self.displayNoMatchWarning = true;
+								}					
 							}
-							else {
+						};
-								self.addressModel.city = "";
-								self.addressModel.state = "";
-								self.addressModel.zipCode = "";      
-								self.showAddressFields = true;
-								self.displayVerificationWarning = false;
-								self.displayNoMatchWarning = true;
-							}					
-						}
-					};
 
 					function fillInAddress(place) {
 						if (!place) {
@@ -225,19 +265,19 @@ export default ({
 						}
 
 						if (place && place.address_components) {
-							self.addressModel.streetAddress= "";
 							self.showAddressFields = true;
 
 							for (const component of place.address_components) {
 								const componentType = component.types[0];
 
-								switch (componentType) {
+									switch (componentType) {
 									case "street_number": {
 										self.addressModel.streetAddress = component.long_name;
 										break;
 									}
 									case "route": {
-										self.addressModel.streetAddress += ' ' + component.short_name;
+										self.addressModel.streetAddress +=
+										" " + component.short_name;
 										break;
 									}
 									case "locality": {
@@ -246,15 +286,15 @@ export default ({
 									}
 									case "administrative_area_level_1": {
 										self.addressModel.state = component.short_name;
+										// self.addressModel.state = "";
 										break;
 									}
 									case "postal_code": {
 										self.addressModel.zipCode = component.long_name;
 										break;
 									}
-
 								}
-							}  
+							}
 
 							self.displayVerificationWarning = false;
 							self.displayNoMatchWarning = false; 
@@ -262,13 +302,21 @@ export default ({
 						else {
 							self.displayVerificationWarning = true;
 							self.displayNoMatchWarning = false;
-						}       
+						}
-					}
+						
-				})
+						// after showing the address fields, disable the address autocomplete
-				.catch(() => {
+						window.google.maps.event.removeListener(autocompleteListener);
-					// Failed to fetch script
+						window.google.maps.event.clearInstanceListeners(autocomplete);
-					console.log("Unable to load Google Places API script");
+						addressField1.onchange = null;
-				});	
+						const pacContainer = document.querySelector(".pac-container");
+						pacContainer.remove();
+
+						}
+					})
+					.catch(() => {
+						// Failed to fetch script
+						console.log("Unable to load Google Places API script");
+					});	
 		}
 	},
 	mounted() {
@@ -308,4 +356,4 @@ export default ({
 		left: 0 !important;
 	}
 }
-</style>
+</style>

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

@@ -2,17 +2,39 @@
 	<addressQuestions ref="addressQuestions" v-model="customerModel.addressQuestions" :alertNotifications="alertNotifications" />
 	<div class="row mb-4">
 		<div class="col">
-			<textboxQuestion cmsWidgetName="FirstNameQuestionWidget" v-model="customerModel.firstName" ref="firstName" inputId="08497a2efd9a4a73a70360ab47b4838d" disableAutoFill validationRules="first-name-required" />
+			<textboxQuestion
+				cmsWidgetName="FirstNameQuestionWidget"
+				v-model="customerModel.firstName"
+				ref="firstName"
+				inputId="08497a2efd9a4a73a70360ab47b4838d"
+				disableAutoFill
+				validationRules="first-name-required"
+			/>
 		</div>
 	</div> 
 	<div class="row mb-4">
 		<div class="col">
-			<textboxQuestion cmsWidgetName="LastNameQuestionWidget" v-model="customerModel.lastName" ref="lastName" inputId="0030e56a57e74a4ab92de7fb8e97fec5" disableAutoFill validationRules="last-name-required" />
+			<textboxQuestion
+				cmsWidgetName="LastNameQuestionWidget"
+				v-model="customerModel.lastName"
+				ref="lastName"
+				inputId="0030e56a57e74a4ab92de7fb8e97fec5"
+				disableAutoFill
+				validationRules="last-name-required"
+			/>
 		</div>
 	</div>
 	<div class="row mb-5">
 		<div class="col">
-			<textboxQuestion cmsWidgetName="EmailAddressQuestionWidget" v-model="customerModel.emailAddress" ref="emailAddress" inputId="00450a91b8964a768ce3992e6feb890f" disableAutoFill validationRules="email-address-required|email-address-format"/>
+			<textboxQuestion
+				cmsWidgetName="EmailAddressQuestionWidget"
+				v-model="customerModel.emailAddress"
+				ref="emailAddress"
+				inputId="00450a91b8964a768ce3992e6feb890f"
+				disableAutoFill
+				validationRules="email-address-required|email-address-format"
+				semiAggressiveValidation
+			/>
 		</div>
 	</div>  
 </template>
@@ -29,7 +51,7 @@ import { errorMessages } from "@/constants/error-messages";
 defineRule("first-name-required", required(errorMessages.FIRST_NAME_REQUIRED));
 defineRule("last-name-required", required(errorMessages.LAST_NAME_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("email-address-format", regex(/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/, errorMessages.EMAIL_ADDRESS_FORMAT));
 
 export default ({
 	name: "customer-questions",

src/layouts/address-vehicles/address-vehicles.vue

@@ -10,7 +10,7 @@
       <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
       <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
       <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
-      <alert 
+      <alert
         ref="alertFoundMultipleVehicles"
 				class="my-5"
 				alertClass="alert-warning"
@@ -20,13 +20,13 @@
 			/>
       <addressVehiclesQuestion
         ref="addressVehiclesQuestion"
-        cmsWidgetName="VehicleConfirmationQuestion" 
+        cmsWidgetName="VehicleConfirmationQuestion"
         :vehicles="VehiclesForQuestions"
         validationRules="vehicle-required"
         v-model="selectedVehicleVin"
         :isCarIdDifferent="isCarIdDifferent"
       />
-      <div class="alert-provide-vin my-5" v-if="splitAlertProvideVinBodyForLink.length">
+      <div class="alert-provide-vin my-3" v-if="splitAlertProvideVinBodyForLink.length">
         <span v-for="copy in splitAlertProvideVinBodyForLink" :key="copy">
           <span v-if="copy.includes('routerLink:')" class="text-body">
             <router-link :to="{query: {fmgPage: `${copy.split(':')[1].split(',')[0]}`}, name: 'root'}">{{ copy.split(':')[1].split(',')[1] }}</router-link>
@@ -240,4 +240,4 @@ export default {
       line-height: inherit;
     }
   }
-</style>
+</style>

src/layouts/license-plate-lookup/license-plate-lookup.spec.js

@@ -13,6 +13,7 @@ import store from "@/store";
 
 jest.mock('@/assets/img/loader.gif', () => 'loader.gif')
 jest.mock('@/assets/img/windshield.png', () => 'windshield.png')
+jest.mock('@/assets/img/wiper-loader.gif', () => 'windshield.png')
 
 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({
@@ -86,7 +87,6 @@ describe("license-plate-lookup.vue", () => {
 
     //Assert
     expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
-
   });
 });
 

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

@@ -8,28 +8,69 @@
       <div class="fade-on-route-transition sub-container make-tall">
         <div class="row my-2">
           <div class="col">
-            <textboxQuestion cmsWidgetName="LicensePlateNumber" v-model="licensePlate" isRequired inputId="license_plate" validationRules="license-plate-required" />
+            <textboxQuestion
+              cmsWidgetName="LicensePlateNumber"
+              v-model="licensePlate"
+              isRequired
+              inputId="license_plate"
+              validationRules="license-plate-required"
+            />
           </div>
         </div>
         <div class="row my-2">
           <div class="col">
-            <textboxQuestion cmsWidgetName="RegistrationZip" v-model="registrationZip" inputId="zip" mask="#####" validationRules="zip-required" />
+            <textboxQuestion
+              cmsWidgetName="RegistrationZip"
+              v-model="registrationZip"
+              inputId="zip"
+              mask="#####"
+              validationRules="zip-required"
+            />
           </div>
         </div>
         <div class="row my-2">
           <div class="col">
-            <textboxQuestion cmsWidgetName="EmailAddress" v-model="email" inputId="email" validationRules="email-address-required|email-address-format" />
+            <textboxQuestion
+              cmsWidgetName="EmailAddress"
+              v-model="email"
+              inputId="email"
+              validationRules="email-address-required|email-address-format"
+              semiAggressiveValidation
+            />
           </div>
         </div>
-        <alert class="my-3" :manualHeadline="NoServiceZipHeader" :manualCopy="NoServiceZipBody" v-if="!isRegistrationZipServicable && isVinValid && !isCarIdDifferent" alertClass="alert-danger" />
+        <alert
+          class="my-3"
+          :manualHeadline="NoServiceZipHeader"
+          :manualCopy="NoServiceZipBody"
+          v-if="!isRegistrationZipServicable && isVinValid && !isCarIdDifferent"
+          alertClass="alert-danger"
+        />
         <div class="row my-2">
           <div class="col">
-            <textboxQuestion v-if="!isRegistrationZipServicable" cmsWidgetName="ServiceZip" v-model="serviceZip" inputId="serviceZip" validationRules="zip-required" />
+            <textboxQuestion
+              v-if="!isRegistrationZipServicable"
+              cmsWidgetName="ServiceZip"
+              v-model="serviceZip"
+              inputId="serviceZip"
+              validationRules="zip-required|zip-format"
+            />
           </div>
         </div>
         <alert class="my-3" cmsWidgetName="NoMatchAlertWidget" v-if="!isVinValid" />
-        <alert class="my-3" :manualHeadline="MatchedDifferentVehicleAlertHeader" :manualCopy="MatchedDifferentVehicleAlertBody" v-if="isCarIdDifferent" alertClass="alert-warning" />
+        <alert class="my-3"
-        <funnelFooter ref="funnelFooter" cmsWidgetName="FunnelFooterWidget" :isForwardActionDisabled="!meta.valid" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
+          :manualHeadline="MatchedDifferentVehicleAlertHeader"
+          :manualCopy="MatchedDifferentVehicleAlertBody"
+          v-if="isCarIdDifferent"
+          alertClass="alert-warning"
+        />
+        <funnelFooter
+          ref="funnelFooter"
+          cmsWidgetName="FunnelFooterWidget"
+          :isForwardActionDisabled="!meta.valid"
+          @back-clicked="backButtonAction"
+          @ForwardClicked="forwardButtonAction"
+        />
       </div>
     </div>
   </Form>
@@ -92,7 +133,7 @@ defineRule(
 defineRule(
   "email-address-format",
   regex(
-    /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+).([a-zA-Z]{2,})$/,
+    /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/,
     errorMessages.EMAIL_ADDRESS_FORMAT
   )
 );
@@ -188,12 +229,12 @@ export default {
     },
     attachCustomEvents() {
       this.prependActionToMethod(this, this.forwardButtonAction, () => {
-        this.pushEventToGA(
+      this.pushEventToGA(
           this.$route.query[this.queryStrings.FMG_PAGE],
           this.GaActions.SUBMITTED,
           this.GaLabels.LICENSE_PLATE_LOOKUP,
           true
-        );
+       );
       });
     },
     getLicensePlateFromStore() {
@@ -281,10 +322,7 @@ export default {
       });
     },
     lookupVin(plate, state) {
-      return baseMixin.methods.dispatchStoreAction(
+      return baseMixin.methods.dispatchStoreAction(storeActions.LOOKUP_VIN_BY_PLATE,{ licensePlate: plate, licenseState: state }, false);
-        storeActions.LOOKUP_VIN_BY_PLATE,
-        { licensePlate: plate, licenseState: state }
-      );
     },
     updateCustomerInfo(vin, vehicleInfo, registrationState) {
       if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {

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

@@ -14,7 +14,7 @@
       />
       <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
       <div class="fade-on-route-transition sub-container make-tall">
-        <div class="row my-2">
+        <div class="row mt-2">
           <div class="col">
             <textboxQuestion
               cmsWidgetName="VinNumber"
@@ -54,6 +54,7 @@
               isRequired
               disableAutoFill
               validationRules="email-address-required|email-address-format"
+              semiAggressiveValidation
             />
           </div>
         </div>
@@ -151,7 +152,7 @@ defineRule(
 defineRule(
   "email-address-format",
   regex(
-    /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+).([a-zA-Z]{2,})$/,
+    /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/,
     errorMessages.EMAIL_ADDRESS_FORMAT
   )
 );
@@ -161,7 +162,7 @@ defineRule(
 );
 defineRule(
   "vin-format",
-  regex(/^[A-HJ-NPR-Z0-9]{17}$/, errorMessages.VIN_FORMAT)
+  regex(/^[a-hA-Hj-nJ-NpPr-zR-Z0-9]{17}$/, errorMessages.VIN_FORMAT)
 );
 
 export default {
@@ -199,6 +200,9 @@ export default {
       vinPopulatedOnPageLoad: this.getVinFromStore()?.length > 0,
     };
   },
+  mounted() {
+    this.attachCustomEvents();
+  },
   watch: {
     vin() {
       this.$refs.funnelFooter.updateButtonText(
@@ -271,12 +275,12 @@ export default {
     getZipFromStore(){
       return store.getters.order.serviceLocation.zipCode;
     },
-    attachCustomEvents() {
+    attachCustomEvents() { 
       this.prependActionToMethod(this, this.forwardButtonAction, () => {
         this.pushEventToGA(
           this.$route.query[this.queryStrings.FMG_PAGE],
           this.GaActions.SUBMITTED,
-          this.GaLabels.VINLOOKUP,
+          this.GaLabels.VIN_LOOKUP,
           true
         );
       });

src/mixins/analytics-mixin.js

@@ -97,8 +97,9 @@ export default {
     },
     
     prependActionToMethod(object, method, actionToPrepend) {
-      const baseMethod = object[method.name];
+      const baseMethodName = method.name.startsWith('bound ') ? method.name.substring(6) : method.name ; 
-      object[method.name] = function () {
+      const baseMethod = object[baseMethodName]; 
+      object[baseMethodName] = function () {
         actionToPrepend.apply(this, arguments);
         return baseMethod.apply(object, arguments);
       };

src/mixins/analytics-mixin.spec.js

@@ -107,4 +107,17 @@ describe("analyticsMixin.js", () => {
     }]);
 
   });
+
+  test("Obj is not null after action prepended", () => {
+    //Arrange 
+    const obj = {baseMethodName:"testMethodName", data:"testData"}; 
+    const method = {name:"testMethodName", data:"testData" }
+    const action = "testAction"; 
+
+    //Act
+    analyticsMixin.methods.prependActionToMethod(obj, method, action);
+
+    //Assert
+    expect(obj!=null); 
+  });
 });

src/router/index.js

@@ -214,13 +214,6 @@ function navigateToUrl(url, optionalQuery = {}) {
     externalUrl.searchParams.append(queryKey, optionalQuery[queryKey]);
   }
 
-  /////////////////////////////////////////////////////
-  // TEMP CODE FOR TESTING WITH SPECIFIC EXPERIMENTS //
-  /////////////////////////////////////////////////////
-  if (externalUrl.search.indexOf("corid=") != -1)
-    externalUrl.search = externalUrl.search + '&experiments=CollectEmailOnQuote=CollectEmailOnQuote_V1=YesCollectEmail_TEST1=true,RemoveServiceAreaPage=ServAreaRemoval_V7=ServAreaNoRemove_V7_TEST=true,VINeducationV2=VINeducation_V2=NoShowVINmodalV2_CONTROL=true,ServicePackages=ServicePackages_V1=NoShowPackages_CONTROL=true,PhotoUploadRedesign=PhotoUploadRedesign_V1=CurrentPhotoUpload_CONTROL=true,ScheduleDetailsServiceType=ScheduleBeforeServiceType_V1=ServTypeThenSched_CONTROL=true';
-  ///////////// END TEMP CODE /////////////////////////
-
   window.location.assign(externalUrl);
 }
 

src/styles/common-error-styles.scss

@@ -1,8 +1,9 @@
 html {
   .has-error {
     &.list-button,
-    &.list-card, 
+    &.list-card,
     &.list-card.list-button {
+      border: none;
       color: $red;
       input[type=checkbox]:focus + label,
       input[type=radio]:focus + label {
@@ -13,15 +14,16 @@ html {
       }
       &:hover {
         box-shadow: 0px 0px 0px 4px $red-200;
-        border-radius: 10px;
+        border-radius: .5rem;
       }
       label {
-        border: 1px solid $red; 
+        border: 1px solid $red;
+        border-radius: .5rem;
       }
       label:hover {
         box-shadow: 0px 0px 0px 4px $red-200;
         border-radius: 10px;
-        border: 1px solid $red; 
+        border: 1px solid $red;
       }
     }
     &.list-button-horizontal {
@@ -51,12 +53,21 @@ html {
     }
     &.textbox-question,
     &.dropdown-question {
+      input:hover {
+        box-shadow: 0px 0px 0px 4px $red-200;
+        border-radius: .5rem;
+        border: 1px solid $red;
+      }
+      input:focus {
+        box-shadow: 0 0 0 2.5px $red;
+      }
       p {
         color: $red;
       }
       input,
       select {
-        border: 1px solid $red;
+        border: 1px solid transparent;
+        box-shadow: 0 0 0 1px $red;
         &:focus {
           border: 1px solid transparent;
         }
@@ -77,12 +88,14 @@ html {
         border: 1px solid $gray-500;
         input:not(:focus) {
           + label {
+            border: none;
             box-shadow: 0 0 0 1px $gray-500;
             border-radius: .5rem;
           }
         }
         input:checked:focus {
           + label {
+            border: none;
             box-shadow: 0 0 0 2.5px $blue;
             border-radius: .5rem;
           }
@@ -114,8 +127,6 @@ html {
     color: $red;
     font-size: .875rem;
     font-weight: 500;
-    height: 1.5rem; 
-    margin-top: .25rem !important; 
   }
 
   .form-test-invalid {
@@ -129,7 +140,6 @@ html {
     &.btn.btn-primary:hover,
     &.btn.btn-primary:focus,
     &.btn.btn-primary:focus-visible {
-      color: $gray !important;
       background: $gray-200;
       box-shadow: none;
     }