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

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"
@@ -19,7 +19,7 @@
 			:validationRules="validationRules"
 		/>
 		<div v-show="errorMessage" class="row my-2 form-test-error">
-			<span class="d-inline-flex mt-2" role="alert">{{ errorMessage }}</span>
+			<span class="d-inline-flex mt-0" role="alert">{{ errorMessage }}</span>
 		</div>
 	</div>
 </template>
@@ -71,7 +71,7 @@ export default {
 		const fieldOptions = {
 			type: "text",
 			value: modelValue,
-			initialValue: initialValue
+			initialValue: initialValue,
 		};
 
 		const {

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

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

@@ -77,6 +77,8 @@ export default ({
 			alertCopyVerificationWarning: "",
 			alertHeadlineNoMatchWarning: "",
 			alertCopyNoMatchWarning: "",
+			autocomplete: {},
+			autocompleteListener: {}
 		}
 	},
 	computed: {
@@ -165,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"] },
@@ -175,7 +177,7 @@ export default ({
 					);
 
 					// Standard place_changed event handling
-					const autocompleteListener = window.google.maps.event.addListener(autocomplete, '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
@@ -221,12 +223,10 @@ export default ({
 
 					function fillInAddress(place) {
 						if (!place) {
-							place = autocomplete.getPlace();
+							place = self.autocomplete.getPlace();
 						}
 
 						if (place && place.address_components) {
-							self.showAddressFields = true;
-
 							for (const component of place.address_components) {
 								const componentType = component.types[0];
 
@@ -257,18 +257,15 @@ export default ({
 
 							self.displayVerificationWarning = false;
 							self.displayNoMatchWarning = false; 
+
+							self.showAddressFields = true;
 						} 
 						else {
 							self.displayVerificationWarning = true;
 							self.displayNoMatchWarning = false;
 						}
 						
-						// after showing the address fields, disable the address autocomplete
+
-						window.google.maps.event.removeListener(autocompleteListener);
-						window.google.maps.event.clearInstanceListeners(autocomplete);
-						addressField1.onchange = null;
-						const pacContainer = document.querySelector(".pac-container");
-						pacContainer.remove();
 
 					}
 				})
@@ -296,6 +293,17 @@ export default ({
 				}				
 			},
 			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: {

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/vin-lookup/vin-information/vin-information.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="vin-information mt-2">
+  <div class="vin-information">
     <div class="vin-toggle d-inline-flex" :class="[isActive ? 'active' : '']" @click="toggleClass()">
       <textLink :text="HeadlineText" linkType="text" href="#!" />
     </div>

src/styles/common-error-styles.scss

@@ -125,10 +125,6 @@ html {
     color: $red;
     font-size: .875rem;
     font-weight: 500;
-    height: 1.5rem;
-    margin-top: .25rem !important;
-    display: initial;
-    padding-top: .5rem;
   }
 
   .form-test-invalid {