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

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/textbox-question/textbox-question.vue

@@ -2,7 +2,7 @@
 	<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-maska="mask"
 			:type="type"
@@ -14,11 +14,11 @@
 			: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>
 		</div>
 	</div>
@@ -60,7 +60,7 @@ export default {
 		let initialValue;
 
 		switch (typeof modelValue) {
-			case "number": 
+			case "number":
 				initialValue = modelValue;
 				break;
 			default:
@@ -182,4 +182,4 @@ export default {
 		display: none;
 	}
 }
-</style>
+</style>

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

@@ -13,27 +13,27 @@
 			<div class="fade-on-route-transition sub-container make-tall">
 				<customerQuestions ref="customerQuestions" v-model="customerQuestions" />
 				<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-if="displayMatchedDifferentVehicleAlert"
-					class="my-3"
+					class="mb-4"
 					:manualHeadline="AlertMatchedDifferentVehicleHeader"
 					:manualCopy="AlertMatchedDifferentVehicleBody"
 					alertClass="alert-warning"
 					v-bind:isDismissible="false"
 				/>			
 				<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-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,15 +294,15 @@ export default {
 					navigateAfterSaveToHeritageFunnel(this.$route);
 				}				
 			} else if (carsFound.length > 1) {
-				// if multiple cars were found 
-				const matchingCar = carsFound.find(car => car.vehicle.carId === carEntered.carId);
-				if (matchingCar) {
-					// and one of them matches the car id entered
+				// 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();
 					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);
 				}
 			} 
@@ -336,8 +345,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;
 

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">
@@ -22,11 +22,13 @@
 		</div>
 	</transition>		
 	<alert ref="alertVerificationWarning" v-if="displayVerificationWarning"
+		class="mb-4"
 		cmsWidgetName="AlertVerificationWarningWidget"
 		alertClass="alert-warning"
 		v-bind:isDismissible="false"
 	/>
 	<alert ref="alertNoMatchWarning" v-if="displayNoMatchWarning"
+		class="mb-4"
 		cmsWidgetName="AlertNoMatchWarningWidget"
 		alertClass="alert-warning"
 		v-bind:isDismissible="false"
@@ -181,6 +183,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() {
@@ -269,8 +276,17 @@ export default ({
 	},
 	watch: {
 		addressModel: {
-			handler(newValue){
-				this.displayNoMatchWarning = false;
+			handler(newValue) {
+				// 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
 		}
@@ -281,4 +297,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/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

@@ -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,7 +73,7 @@
           alertClass="alert-success"
         />
         <alert
-          class="my-3"
+          class="my-4"
           :manualHeadline="MatchedDifferentVehicleAlertHeader"
           :manualCopy="MatchedDifferentVehicleAlertBody"
           v-model="customAlertData"
@@ -81,7 +81,7 @@
           alertClass="alert-warning"
         />
         <alert
-          class="my-3"
+          class="my-4"
           :manualHeadline="NoServiceZipHeader"
           :manualCopy="NoServiceZipBody"
           v-model="customAlertData"
@@ -89,14 +89,14 @@
           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"

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;