Merge branch 'develop' into bugfix/CSR-584

jest.config.js

@@ -27,6 +27,7 @@ module.exports = {
     "!src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue",
     "!src/common-components/dropdown-question/dropdown-question.vue",
     "!src/common-components/textbox-question/textbox-question.vue",
+    "!src/ux-components/alert\alert.vue",
     "!src/helpers/validation-rules.js",
     // END
   ], // ! means exclude from coverage.

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

@@ -1,5 +1,5 @@
 <template>
-	<div class="dropdown-question">
+	<div class="dropdown-question" :class="(errors && errors.length) || hasError ? 'has-error' : ''">
 		<label :for="inputId" :aria-label="questionText" class="form-label" v-html="labelText"></label>
 		<select v-model="selectedOption"
 				class="form-select" 
@@ -9,8 +9,7 @@
 				:disabled="isDisabled" 
 				:aria-required="isRequired"
 				:validationRules="validationRules" 
-				@input="handleChange"
+			>
-				@blur="handleBlur" >
 			<option v-for="(value, name, index) in options" :value="name" :key="index">
 				{{ value }}       
 			</option>
@@ -40,10 +39,23 @@ export default {
 		cmsWidgetName: String,
 	},
 	setup(props) {
+		const propsClone = Object.assign({}, props);
+		const modelValue = propsClone.modelValue;
+		let initialValue;
+
+		switch (typeof modelValue) {
+			case "number": 
+				initialValue = modelValue;
+				break;
+			default:
+				initialValue = (modelValue && modelValue.length > 0) ? modelValue : "";
+				break;
+		}
+
 		const fieldOptions = {
-			type: "text",
+			type: "select",
 			value: props.modelValue,
-			initialValue: props.modelValue, 
+			initialValue: initialValue, 
 		};
 
 		const {

src/common-components/funnel-footer/funnel-footer.spec.js

@@ -62,6 +62,7 @@ describe("funnel-footer.vue", () => {
 
 const mockMixin = {
   methods: {
-    getCmsContent: jest.fn()
+    getCmsContent: jest.fn(),
+    getFooterInfoBoxHeight: jest.fn(()=>80)
   }
 }

src/common-components/funnel-footer/funnel-footer.vue

@@ -63,7 +63,7 @@ export default {
     }
   },
   mounted() {
-    this.paddingHeight = document.querySelector(".footer #infoBox").offsetHeight + 24;
+    this.paddingHeight = this.getFooterInfoBoxHeight() + 24;
     this.$nextTick(() => {
       window.addEventListener('resize', this.onResize);
     })

src/common-components/loading-modal/loading-modal.vue

@@ -1,16 +1,9 @@
 <template>
-  <div v-show="isModalVisible" class="loading-modal-backdrop">
+  <div v-if="isModalVisible" class="loading-modal-backdrop">
     <div class="loading-modal">
       <section class="loading-modal-body">
         <div class="modal-icon-container text-center">
-            <img class="loader-gif" alt="Loading" src="@/assets/img/loader.gif">
+            <img alt="Loading" src="@/assets/img/FMGTransitionAnimation.svg">
-            <img class="modal-icon" alt="" src="@/assets/img/windshield.png">
-        </div>
-        <div class="text-center fw-bold fs-5 loading-modal-text">
-            Please wait...
-        </div>
-        <div class="text-center fs-5 loading-modal-text">
-            This process can take up to 20 seconds.
         </div>
        </section>
     </div>
@@ -60,23 +53,15 @@
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
     border-radius: 4px;
     top: 48px;
-    height: 246px;
+    height: 186px;
     width: 327px;
   }
 
-  .loading-modal-body {
-    position: relative;
-    padding: 20px 10px;
-  }
-
   .loading-modal-text {
       padding: 0 24px 0 24px;
   }
 
   .modal-icon-container {
-    position: relative;
-    width: 75px;
-    height: 75px;
     margin: 15px auto;
     padding-bottom: 26px;
   }
@@ -85,6 +70,8 @@
       position: absolute;
       vertical-align: middle;
       border: 0;
+      width: 327px;
+      height: 186px;
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);

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

@@ -2,8 +2,8 @@
 	<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 
+		<input
-			v-model="value"
+			v-model.trim="value"
 			v-maska="mask"
 			:type="type"
 			class="form-control"
@@ -14,12 +14,12 @@
 			:aria-disabled="isDisabled"
 			:disabled="isDisabled"
 			:aria-required="isRequired"
-			autocomplete="do-not-autofill" 
+			autocomplete="do-not-autofill"
 			:class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']"
 			:validationRules="validationRules"
 		/>
-		<div v-show="errorMessage" class="row mt-2 form-test-error">
+		<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>
@@ -60,7 +60,7 @@ export default {
 		let initialValue;
 
 		switch (typeof modelValue) {
-			case "number": 
+			case "number":
 				initialValue = modelValue;
 				break;
 			default:
@@ -71,7 +71,7 @@ export default {
 		const fieldOptions = {
 			type: "text",
 			value: modelValue,
-			initialValue: initialValue
+			initialValue: initialValue,
 		};
 
 		const {
@@ -159,6 +159,7 @@ export default {
 		border: 1px solid $gray-500;
 		border-radius: .5rem;
 		min-height: 3rem;
+		padding: 12px 16px;
 		&::placeholder {
 			color: $gray-500;
 		}
@@ -182,4 +183,4 @@ export default {
 		display: none;
 	}
 }
-</style>
+</style>

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

@@ -12,28 +12,28 @@
 			<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-show="displayVinNotFoundAlert"
+				<alert ref="alertVinNotFound" v-if="displayVinNotFoundAlert"
-					class="my-3"
+					class="mb-4"
 					cmsWidgetName="AlertVinNotFoundWidget"
 					alertClass="alert-danger"
 					v-bind:isDismissible="false"
 				/>
-				<alert ref="alertMatchedDifferentVehicle" v-show="displayMatchedDifferentVehicleAlert"
+				<alert ref="alertMatchedDifferentVehicle" v-if="displayMatchedDifferentVehicleAlert"
-					class="my-3"
+					class="mb-4"
 					:manualHeadline="AlertMatchedDifferentVehicleHeader"
 					:manualCopy="AlertMatchedDifferentVehicleBody"
 					alertClass="alert-warning"
 					v-bind:isDismissible="false"
 				/>			
-				<alert ref="alertNonServiceableZip" v-show="displayNonServiceableZipAlert"
+				<alert ref="alertNonServiceableZip" v-if="displayNonServiceableZipAlert"
-					class="my-3"
+					class="mb-4"
 					alertClass="alert-danger"
 					:manualHeadline="AlertNonServiceableZipHeader"
 					:manualCopy="AlertNonServiceableZipBody"
 					v-bind:isDismissible="false"
 				/>			
-				<alert ref="alertVinLookupsByHomeAddressNotAllowed" v-show="displayVinLookupByHomeAddressNotAllowedAlert"
+				<alert ref="alertVinLookupsByHomeAddressNotAllowed" v-if="displayVinLookupByHomeAddressNotAllowedAlert"
-					class="my-3"
+					class="mb-4"
 					cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
 					alertClass="alert-danger"
 					v-bind:isDismissible="false"
@@ -252,6 +252,15 @@ export default {
 					return;
 				}
 
+				// if multiple cars were found
+				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();
 			}
@@ -285,13 +294,17 @@ export default {
 					navigateAfterSaveToHeritageFunnel(this.$route);
 				}				
 			} else if (carsFound.length > 1) {
-				// if multiple cars were found 
+				// if multiple cars were found
-				if (carsFound.find(car => car.vehicle.carId === carEntered.carId)) {
+				let matchingCars = carsFound.filter(car => car.vehicle.carId === carEntered.carId);  
-					// and one of them matches the car id entered
+				if (matchingCars.length === 1) {
 					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 {
-					// and there is no match, navigate to "address-vehicles" page
+					// 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);
 				}
 			} 
@@ -334,8 +347,7 @@ export default {
 			store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, this.customerQuestions.lastName);
 			store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE, this.serviceZipCode);			
 			store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.customerQuestions.emailAddress);
-		},
+		},		
-		
 		updateServiceLocationIfNecessary() {
 			const serviceLocation = store.getters.order.serviceLocation;
 
@@ -360,13 +372,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,7 +1,7 @@
 <template>
 	<div class="row mt-2 mb-4">
 		<div class="col">
-			<textboxQuestion 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">
@@ -21,12 +21,14 @@
 			</div>
 		</div>
 	</transition>		
-	<alert ref="alertVerificationWarning" v-show="displayVerificationWarning"
+	<alert ref="alertVerificationWarning" v-if="displayVerificationWarning"
+		class="mb-4"
 		cmsWidgetName="AlertVerificationWarningWidget"
 		alertClass="alert-warning"
 		v-bind:isDismissible="false"
 	/>
-	<alert ref="alertNoMatchWarning" v-show="displayNoMatchWarning"
+	<alert ref="alertNoMatchWarning" v-if="displayNoMatchWarning"
+		class="mb-4"
 		cmsWidgetName="AlertNoMatchWarningWidget"
 		alertClass="alert-warning"
 		v-bind:isDismissible="false"
@@ -75,6 +77,8 @@ export default ({
 			alertCopyVerificationWarning: "",
 			alertHeadlineNoMatchWarning: "",
 			alertCopyNoMatchWarning: "",
+			autocomplete: {},
+			autocompleteListener: {}
 		}
 	},
 	computed: {
@@ -163,7 +167,7 @@ export default ({
 			this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`)
 				.then(() => {
 					// Script is loaded, initialize the autocomplete textbox
-					const autocomplete = new window.google.maps.places.Autocomplete(
+					self.autocomplete = new window.google.maps.places.Autocomplete(
 						addressField1,
 						{
 							componentRestrictions: { country: ["us"] },
@@ -173,7 +177,7 @@ export default ({
 					);
 
 					// Standard place_changed event handling
-					autocomplete.addListener('place_changed', fillInAddress);
+					self.autocompleteListener = window.google.maps.event.addListener(this.autocomplete, 'place_changed', fillInAddress);
 
 					// Wrapping the addressField1 element in the Google Address Autocomplete object 
 					// will cause "autocomplete='off'" which Chrome completely ignores. This event
@@ -181,6 +185,11 @@ export default ({
 					// https://stackoverflow.com/a/30976223
 					addressField1.addEventListener("focus", () => {
 						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);
 					})
 
 					addressField1.onchange = function() {
@@ -214,13 +223,10 @@ export default ({
 
 					function fillInAddress(place) {
 						if (!place) {
-							place = autocomplete.getPlace();
+							place = self.autocomplete.getPlace();
 						}
 
 						if (place && place.address_components) {
-							self.addressModel.streetAddress= "";
-							self.showAddressFields = true;
-
 							for (const component of place.address_components) {
 								const componentType = component.types[0];
 
@@ -251,11 +257,16 @@ export default ({
 
 							self.displayVerificationWarning = false;
 							self.displayNoMatchWarning = false; 
+
+							self.showAddressFields = true;
 						} 
 						else {
 							self.displayVerificationWarning = true;
 							self.displayNoMatchWarning = false;
-						}       
+						}
+						
+
+
 					}
 				})
 				.catch(() => {
@@ -269,10 +280,30 @@ export default ({
 	},
 	watch: {
 		addressModel: {
-			handler(newValue){
+			handler(newValue) {
-				this.displayNoMatchWarning = false;
+				// The first time the address model changes is w
+				if (!newValue.city && 
+					!newValue.state &&
+					!newValue.zipCode) {
+					return;
+				}
+
+				if (this.displayNoMatchWarning === true) {
+					this.displayNoMatchWarning = false;
+				}				
 			},
 			deep: true
+		},
+		showAddressFields: {
+			handler(newValue) {
+				// after showing the address fields, disable the address autocomplete
+				window.google.maps.event.removeListener(this.autocompleteListener);
+				window.google.maps.event.clearInstanceListeners(this.autocomplete);
+				const addressField1 = document.getElementById("autocomplete");
+				addressField1.onchange = null;
+				const pacContainer = document.querySelector(".pac-container");
+				pacContainer.remove();
+			}
 		}
 	},	
 	components: {
@@ -281,4 +312,15 @@ export default ({
 		alert,
 	}
 })
-</script>
+</script>
+
+<style lang="scss">
+#streetAddressField {
+	position: relative;
+
+	.pac-container {
+		top: 76px !important;	// Height of #streetAddressField
+		left: 0 !important;
+	}
+}
+</style>

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

@@ -10,7 +10,7 @@
 			<textboxQuestion cmsWidgetName="LastNameQuestionWidget" v-model="customerModel.lastName" ref="lastName" inputId="0030e56a57e74a4ab92de7fb8e97fec5" disableAutoFill validationRules="last-name-required" />
 		</div>
 	</div>
-	<div class="row mb-4">
+	<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"/>
 		</div>

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.vue

@@ -24,7 +24,7 @@
         <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|zip-format" />
+            <textboxQuestion v-if="!isRegistrationZipServicable" cmsWidgetName="ServiceZip" v-model="serviceZip" inputId="serviceZip" validationRules="zip-required" />
           </div>
         </div>
         <alert class="my-3" cmsWidgetName="NoMatchAlertWidget" v-if="!isVinValid" />
@@ -80,10 +80,6 @@ import {
 } from "vee-validate";
 
 // DEFINE VALIDATION RULES
-defineRule(
-  "zip-format",
-  regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT)
-);
 defineRule(
   "license-plate-required",
   required(errorMessages.LICENSE_PLATE_REQUIRED)

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

@@ -10,7 +10,7 @@
         <alert
             class="my-3"
             cmsWidgetName="NoReplacementAvailableError"
-            v-show="showNoReplacementAvailableError"
+            v-if="showNoReplacementAvailableError"
             alertClass="alert-danger"
             :isDismissible="false"
           />
@@ -32,7 +32,7 @@
         <alert
             class="my-3"
             cmsWidgetName="SplitSingleConflict"
-            v-show="hasSplitSingleConflict"
+            v-if="hasSplitSingleConflict"
             alertClass="alert-danger"
             :isDismissible="false"
           />

src/layouts/vehicle-make/vehicle-make.vue

@@ -88,6 +88,10 @@ export default {
       store.commit(storeMutations.UPDATE_STYLE, null);
       store.commit(storeMutations.UPDATE_CAR_ID, null);
       store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null);
+      store.commit(storeMutations.UPDATE_VEHICLE_VIN, null);
+      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, null);
+      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, null);
+      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, null);
 
       // Invokes
       store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);

src/layouts/vehicle-model/vehicle-model.vue

@@ -88,6 +88,10 @@ export default {
       store.commit(storeMutations.UPDATE_STYLE, null);
       store.commit(storeMutations.UPDATE_CAR_ID, null);
       store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null);
+      store.commit(storeMutations.UPDATE_VEHICLE_VIN, null);
+      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, null);
+      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, null);
+      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, null);
 
       // Invokes
       store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);

src/layouts/vehicle-style/vehicle-style.vue

@@ -101,6 +101,7 @@ export default {
       store.commit(storeMutations.UPDATE_IS_REPAIR, null);
       store.commit(storeMutations.UPDATE_NUMBER_OF_CHIPS, null);
       store.commit(storeMutations.UPDATE_GLASS_TO_REPLACE, []);
+      store.commit(storeMutations.UPDATE_VEHICLE_VIN, null);
     },
   },
 

src/layouts/vehicle-year/vehicle-year.vue

@@ -107,8 +107,11 @@ export default {
       store.commit(storeMutations.UPDATE_STYLE, null);
       store.commit(storeMutations.UPDATE_CAR_ID, null);
       store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null);
+      store.commit(storeMutations.UPDATE_VEHICLE_VIN, null);
+      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, null);
+      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, null);
+      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, null);
   
-
       // Invokes
       store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
       store.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);

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"
@@ -41,7 +41,7 @@
               mask="#####"
               isRequired
               disableAutoFill
-              validationRules="zip-required|zip-format"
+              validationRules="zip-required"
             />
           </div>
         </div>
@@ -58,14 +58,14 @@
           </div>
         </div>
         <alert
-          class="my-3"
+          class="my-4"
           v-model="customAlertData"
           v-if="noMatchAlert"
           alertClass="alert-warning"
           cmsWidgetName="NoMatchAlertWidget"
         />
         <alert
-          class="my-3"
+          class="my-4"
           :manualHeadline="PerfectMatchNewVinAlertReadOnlyHeader"
           :manualCopy="PerfectMatchNewVinAlertReadOnlyBody"
           v-model="customAlertData"
@@ -73,15 +73,15 @@
           alertClass="alert-success"
         />
         <alert
-          class="my-3"
+          class="my-4"
           :manualHeadline="MatchedDifferentVehicleAlertHeader"
           :manualCopy="MatchedDifferentVehicleAlertBody"
           v-model="customAlertData"
-          v-if="isCarIdDifferent"
+          v-if="isCarIdDifferent && !vinNotFound && !perfectMatchNewVinAlert"
           alertClass="alert-warning"
         />
         <alert
-          class="my-3"
+          class="my-4"
           :manualHeadline="NoServiceZipHeader"
           :manualCopy="NoServiceZipBody"
           v-model="customAlertData"
@@ -89,18 +89,18 @@
           alertClass="alert-danger"
         />
         <alert
-          class="my-3"
+          class="my-4"
           v-model="customAlertData"
           v-if="vinNotFound"
           alertClass="alert-danger"
           cmsWidgetName="VinNotFound"
         />
         <alert
-          class="my-3"
+          class="my-4"
           :manualHeadline="PerfectMatchNewVinAlertHeader"
           :manualCopy="PerfectMatchNewVinAlertBody"
           v-model="customAlertData"
-          v-if="perfectMatchNewVinAlert && !noServiceZip && meta.valid"
+          v-if="perfectMatchNewVinAlert && !noServiceZip && !vinNotFound && meta.valid"
           alertClass="alert-success"
         />
         <funnelFooter
@@ -144,10 +144,6 @@ defineRule(
   "zip-required",
   required(errorMessages.SERVICE_ZIP_REQUIRED)
 );
-defineRule(
-  "zip-format",
-  regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT)
-);
 defineRule(
   "email-address-required",
   required(errorMessages.EMAIL_ADDRESS_REQUIRED)

src/mixins/base-mixin.js

@@ -42,6 +42,9 @@ export default {
         el && el.focus();
       }
     },
+    getFooterInfoBoxHeight() {
+      return document.querySelector(".footer #infoBox").offsetHeight;
+    }
   },
   computed: {
     storeActions() {

src/store/index.js

@@ -190,6 +190,10 @@ export const mutations = {
     state.order.vehicle.style = null;
     state.order.vehicle.carId = null;
     state.order.vehicle.category = null;
+    state.order.vehicle.vin = null;
+    state.order.vehicle.imageUrl = null;
+    state.order.vehicle.imageVifNumber = null;
+    state.order.vehicle.imageColor = null;
   },
   resetDamageState(state) {
     state.order.damage.isRepair = null;

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;
         }
@@ -114,8 +125,6 @@ html {
     color: $red;
     font-size: .875rem;
     font-weight: 500;
-    height: 1.5rem; 
-    margin-top: .25rem !important; 
   }
 
   .form-test-invalid {
@@ -129,7 +138,6 @@ html {
     &.btn.btn-primary:hover,
     &.btn.btn-primary:focus,
     &.btn.btn-primary:focus-visible {
-      color: $gray !important;
       background: $gray-200;
       box-shadow: none;
     }

src/ux-components/alert/alert.spec.js

@@ -66,6 +66,7 @@ describe("alert.vue", () => {
 
 const mockMixin = {
   methods: {
-    getCmsContent: jest.fn()
+    getCmsContent: jest.fn(),
+    getFooterInfoBoxHeight: jest.fn(()=> 80),
   }
 }

src/ux-components/alert/alert.vue

@@ -52,6 +52,10 @@ export default {
     cmsWidgetName: String,
     manualHeadline: String,
     manualCopy: String,
+    shouldScrollToOnMount: {
+      type: Boolean,
+      default: true
+    },
   },
   computed: {
     alertHeadline(){
@@ -85,8 +89,35 @@ export default {
       // first split would return     'estimate,provide your VIN'
       // second split would return             'provide your VIN'
       return copy.split(':')[1].split(',')[1];
-    }
+    },
+    ensureAlertIsInViewPort() {
+      if (this.shouldScrollToOnMount && this.$el.style.display != 'none') {
+        var footerHeight = this.getFooterInfoBoxHeight();
+        if (!this.isAlertInViewport(footerHeight)) {
+          this.scrollContainerToAlert(footerHeight);
+        }
+      }
+    },
+    isAlertInViewport(footerHeight) {
+      const rect = this.$el.getBoundingClientRect();
+      return (
+          rect.top >= 0 &&
+          // remove footerHeight from window height to avoid items being hidden behind footer
+          rect.bottom <= (window.innerHeight - footerHeight || document.documentElement.clientHeight - footerHeight)
+      );
+    },
+    scrollContainerToAlert(footerHeight) {
+      // alert position on page + height of alert + footer height
+          var scrollToHeight = this.$el.scrollHeight + this.$el.offsetHeight + footerHeight;
+          // find the div wrapped by the form element - this is the scrollable container
+          // should be a more future-proof selector in case of CSS class changes
+          var pageContainerScrollable = document.querySelector('form > div');
+          pageContainerScrollable.scrollTo(0, scrollToHeight);
+    },
   },
+  mounted() {
+    this.ensureAlertIsInViewPort();
+  }
 };
 </script>