From aac13a76bff0a5a2206aa9045f9dd8141a14efae Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Wed, 18 May 2022 14:54:18 -0400
Subject: [PATCH] CSR-584: add semiAggressive option to validation

---
 .../textbox-question/textbox-question.vue     | 173 +++++++++---------
 src/layouts/address-lookup/address-lookup.vue |   6 +-
 .../address-questions/address-questions.vue   | 144 +++++++++------
 .../customer-questions/customer-questions.vue |  28 ++-
 .../license-plate-lookup.vue                  |  55 +++++-
 src/layouts/vin-lookup/vin-lookup.vue         |   1 +
 6 files changed, 256 insertions(+), 151 deletions(-)

diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue
index 849d99ab5..1c92c6b82 100644
--- a/src/common-components/textbox-question/textbox-question.vue
+++ b/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,39 +27,39 @@
 </template>
 
 <script>
-
-import { useField } from "vee-validate";
+import { useField, validate } from "vee-validate";
 
 export default {
-	name: "textbox-question",
-	props: {
-		type: {
-			type: String,
-			default: 'text',
-		},
-		placeholderText: {
-			type: String,
-			default: '',
-		},
-		modelValue: String,
-		inputId: String,
-		isDisabled: Boolean,
-		isRequired: Boolean,
-		disableAutoFill: Boolean,
-		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
-		hasError: Boolean,
-		mask: {
-			type: String,
-			default: '',
-		},
-		validationRules: String,
-		cmsWidgetName: String
-	},
-	setup(props) {
-		const propsClone = Object.assign({}, props);
-		const modelValue = propsClone.modelValue;
-		let initialValue;
+  name: "textbox-question",
+  props: {
+    type: {
+      type: String,
+      default: "text",
+    },
+    placeholderText: {
+      type: String,
+      default: "",
+    },
+    modelValue: String,
+    inputId: String,
+    isDisabled: Boolean,
+    isRequired: Boolean,
+    disableAutoFill: Boolean,
+    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
+    hasError: Boolean,
+    mask: {
+      type: String,
+      default: "",
+    },
+    validationRules: String,
+    semiAggressiveValidation: Boolean,
+    cmsWidgetName: String,
+  },
+  setup(props) {
+    const propsClone = Object.assign({}, props);
+    const modelValue = propsClone.modelValue;
+    let initialValue;
 
 		switch (typeof modelValue) {
 			case "number":
@@ -74,62 +76,65 @@ export default {
 			initialValue: initialValue,
 		};
 
-		const {
-			errorMessage,
-			handleBlur,
-			handleChange,
-			meta,
-			validate,
-			errors,
-		} = useField(props.inputId, props.validationRules, fieldOptions);
+    const { errorMessage, handleBlur, handleChange, meta, validate, errors } =
+      useField(props.inputId, props.validationRules, fieldOptions);
 
-		return {
-			errorMessage,
-			handleBlur,
-			handleChange,
-			validate,
-			meta,
-			errors,
-		};
-	},
-	computed: {
-		questionText(){
-			return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
-		},
-		value: {
-			get: function() {
-				return this.modelValue;
-			},
-			set: function(newValue) {
-				this.$emit("update:modelValue", newValue);
-			}
-		},
-		labelText: {
-			get: function () {
-				const noBreakChar = "&NoBreak;";
-				var questionText = "";
-				if (this.disableAutoFill) {
-					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('');
-						questionText += `${word} `;
-					});
+    return {
+      errorMessage,
+      handleBlur,
+      handleChange,
+      validate,
+      meta,
+      errors,
+    };
+  },
+  computed: {
+    questionText() {
+      return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+    },
+    value: {
+      get: function () {
+        return this.modelValue;
+      },
+      set: function (newValue) {
+        this.$emit("update:modelValue", newValue);
+      },
+    },
+    labelText: {
+      get: function () {
+        const noBreakChar = "&NoBreak;";
+        var questionText = "";
+        if (this.disableAutoFill) {
+          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("");
+            questionText += `${word} `;
+          });
 
-					questionText = questionText.trimEnd();
-				} else {
-					questionText = this.questionText.toString();
-				}
+          questionText = questionText.trimEnd();
+        } else {
+          questionText = this.questionText.toString();
+        }
 
-				return questionText;
-			}
-		}
-	},
-	watch: {
-		value(newValue) {
-			this.handleChange(newValue);
-		}
-	}
+        return questionText;
+      },
+    },
+  },
+  watch: {
+    async value(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>
 
diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index 454a17b83..445bddf16 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/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 { defineRule } from "vee-validate";
-import { required } from "@/helpers/validation-rules";
-import { regex } from "@/helpers/validation-rules";
+import { Form, defineRule } from "vee-validate";
+import { required, regex } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
 
 // Supporting files
diff --git a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
index 8a677c14c..98c0ca927 100644
--- a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
+++ b/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 { regex } from "@/helpers/validation-rules";
+import { required, 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");
@@ -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 
-					// will cause "autocomplete='off'" which Chrome completely ignores. This event
-					// handler will set the value to something arbitrary so autofill doesn't work. 
-					// https://stackoverflow.com/a/30976223
-					addressField1.addEventListener("focus", () => {
-						addressField1.setAttribute("autocomplete", "do-not-autofill");
+						// Wrapping the addressField1 element in the Google Address Autocomplete object 
+						// will cause "autocomplete='off'" which Chrome completely ignores. This event
+						// handler will set the value to something arbitrary so autofill doesn't work. 
+						// 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");
@@ -193,34 +230,34 @@ export default ({
 						
 					})
 
-					addressField1.onchange = function() {
-						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 (hover === null) {
-							const item = document.querySelector(".pac-container .pac-item");
-							if (item != null) {
-								const firstResult = item.textContent;
-								const geocoder = new window.google.maps.Geocoder();
-								geocoder.geocode({
-									address: firstResult
-								}, function (results, status) {
-									if (status === window.google.maps.GeocoderStatus.OK) {
-										fillInAddress(results[0]);
-										self.displayVerificationWarning = true;
-										self.displayNoMatchWarning = false;
-									}
-								});
+						addressField1.onchange = function() {
+							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 (hover === null) {
+								const item = document.querySelector(".pac-container .pac-item");
+								if (item != null) {
+									const firstResult = item.textContent;
+									const geocoder = new window.google.maps.Geocoder();
+									geocoder.geocode({
+										address: firstResult
+									}, function (results, status) {
+										if (status === window.google.maps.GeocoderStatus.OK) {
+											fillInAddress(results[0]);
+											self.displayVerificationWarning = true;
+											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,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; 
@@ -273,12 +311,12 @@ export default ({
 						const pacContainer = document.querySelector(".pac-container");
 						pacContainer.remove();
 
-					}
-				})
-				.catch(() => {
-					// Failed to fetch script
-					console.log("Unable to load Google Places API script");
-				});	
+						}
+					})
+					.catch(() => {
+						// Failed to fetch script
+						console.log("Unable to load Google Places API script");
+					});	
 		}
 	},
 	mounted() {
@@ -318,4 +356,4 @@ export default ({
 		left: 0 !important;
 	}
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/layouts/address-lookup/customer-questions/customer-questions.vue b/src/layouts/address-lookup/customer-questions/customer-questions.vue
index 9dbedaabc..51bb2b770 100644
--- a/src/layouts/address-lookup/customer-questions/customer-questions.vue
+++ b/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>
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index 0ebf6f6ec..de5500a59 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/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" />
-        <funnelFooter ref="funnelFooter" cmsWidgetName="FunnelFooterWidget" :isForwardActionDisabled="!meta.valid" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
+        <alert class="my-3"
+          :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>
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index b832b39fb..56da4301d 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -54,6 +54,7 @@
               isRequired
               disableAutoFill
               validationRules="email-address-required|email-address-format"
+              semiAggressiveValidation
             />
           </div>
         </div>