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

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

@@ -27,7 +27,18 @@ const FMGAnimatedTransition = require("@/assets/img/FMGTransitionAnimation.svg")
     },
     methods: {
       showModal() {
+
+        //Display modal
         this.isModalVisible = true;
+
+        //Force page reload on back button
+        window.addEventListener("pageshow", function(evt) {
+          if(evt.persisted){
+          setTimeout(function(){
+              window.location.reload();
+        }, 10);
+    }
+}, false);
       },
     },
   };

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

@@ -17,6 +17,8 @@
 			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 class="d-inline-flex mt-0" role="alert">{{ errorMessage }}</span>
@@ -25,34 +27,34 @@
 </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);
@@ -74,14 +76,8 @@ export default {
 			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>
 

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

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));
@@ -177,12 +214,12 @@ export default ({
 					// Standard place_changed event handling
 					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");
@@ -193,34 +230,34 @@ export default ({
 						
 					})
 
-					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) {
@@ -233,13 +270,14 @@ export default ({
 							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": {
@@ -248,13 +286,13 @@ 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;
 									}
-
 								}
 							}
 
@@ -273,12 +311,12 @@ export default ({
 						const pacContainer = document.querySelector(".pac-container");
 						pacContainer.remove();
 
-					}
+						}
-				})
+					})
-				.catch(() => {
+					.catch(() => {
-					// Failed to fetch script
+						// Failed to fetch script
-					console.log("Unable to load Google Places API script");
+						console.log("Unable to load Google Places API script");
-				});	
+					});	
 		}
 	},
 	mounted() {

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/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
   )
 );
@@ -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

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

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);
 }