From 36a98936f21406054f03dc68fbc16a95c6a479bf Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Tue, 22 Mar 2022 13:34:33 -0400
Subject: [PATCH] Post code review related refactoring

---
 .../dropdown-question/dropdown-question.vue   |  29 ++--
 .../textbox-question/textbox-question.vue     |  29 ++--
 .../address-questions/address-questions.vue   | 126 +++++++++---------
 3 files changed, 98 insertions(+), 86 deletions(-)

diff --git a/src/common-components/dropdown-question/dropdown-question.vue b/src/common-components/dropdown-question/dropdown-question.vue
index f5fdf1983..08ed368cf 100644
--- a/src/common-components/dropdown-question/dropdown-question.vue
+++ b/src/common-components/dropdown-question/dropdown-question.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="dropdown-question">
-		<label :for="inputId" :aria-label="ariaLabelText" class="form-label" v-html="labelText"></label>
+		<label :for="inputId" :aria-label="questionText" class="form-label" v-html="labelText"></label>
 		<select v-model="selectedOption"
 				class="form-select" 
 				:id="inputId"
@@ -60,21 +60,12 @@ export default {
 	},
 	data() {
 		return {
-			labelText: "",
-			ariaLabelText: "",
+			questionText: "",
 		}
 	},
 	methods: {
 		initializeComponent(cmsContent) {
-			var labelText = cmsContent;
-			if (this.disableAutoFill) {
-				var noBreakChar = "&NoBreak;";
-				var position = 1;
-				labelText = [labelText.slice(0, position), noBreakChar, labelText.slice(position)].join('');
-			}
-
-			this.labelText = labelText;
-			this.ariaLabelText = cmsContent;
+			this.questionText = cmsContent;
 		}
 	},    
 	computed: {
@@ -85,7 +76,19 @@ export default {
 			set: function(newValue) {
 				this.$emit("update:modelValue", newValue);
 			}
-		},
+		}, 
+		labelText: {
+			get: function () {
+				let labelText = this.questionText;
+				if (this.disableAutoFill) {
+					const noBreakChar = "&NoBreak;";
+					const position = 1;
+					labelText = [labelText.slice(0, position), noBreakChar, labelText.slice(position)].join('');
+				}
+
+				return labelText;
+			}
+		}
 	},
 	watch: {
 		selectedOption(newValue) {
diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue
index f857ff7f2..f4a7d2afc 100644
--- a/src/common-components/textbox-question/textbox-question.vue
+++ b/src/common-components/textbox-question/textbox-question.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="textbox-question" :class="hasError ? 'has-error' : ''">
-		<label :for="inputId" :aria-label="ariaLabelText" class="form-label" v-html="labelText"></label>
+		<label :for="inputId" :aria-label="questionText" class="form-label" v-html="labelText"></label>
 		<input v-model="value" 
 			v-maska="mask"
 			:type="type" 
@@ -76,21 +76,12 @@ export default {
 	},
 	data() {
 		return {
-			labelText: "",
-			ariaLabelText: "",
+			questionText: "",
 		}
 	},
 	methods: {
 		initializeComponent(cmsContent){
-			var labelText = cmsContent;
-			if (this.disableAutoFill) {
-				var noBreakChar = "&NoBreak;";
-				var position = 1;
-				labelText = [labelText.slice(0, position), noBreakChar, labelText.slice(position)].join('');
-			}
-
-			this.labelText = labelText;
-			this.ariaLabelText = cmsContent;
+			this.questionText = cmsContent;
 		},
 	},  
 	computed: {
@@ -101,7 +92,19 @@ export default {
 			set: function(newValue) {
 				this.$emit("update:modelValue", newValue);
 			}
-		},     
+		}, 
+		labelText: {
+			get: function () {
+				let labelText = this.questionText;
+				if (this.disableAutoFill) {
+					var noBreakChar = "&NoBreak;";
+					var position = 1;
+					labelText = [labelText.slice(0, position), noBreakChar, labelText.slice(position)].join('');
+				}
+
+				return labelText;
+			}
+		}    
 	},
 	watch: {
 		value(newValue) {
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 3939b2665..0954caf34 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
@@ -85,65 +85,71 @@ export default ({
 			showAddressFields: false,
 			displayVerificationWarning: false,
 			displayNoMatchWarning: false,
-			stateOptions: {
-				'AL': 'Alabama',
-				'AK': 'Alaska',
-				'AZ': 'Arizona',
-				'AR': 'Arkansas',
-				'CA': 'California',
-				'CO': 'Colorado',
-				'CT': 'Connecticut',
-				'DE': 'Delaware',
-				'DC': 'District Of Columbia',
-				'FL': 'Florida',
-				'GA': 'Georgia',
-				'HI': 'Hawaii',
-				'ID': 'Idaho',
-				'IL': 'Illinois',
-				'IN': 'Indiana',
-				'IA': 'Iowa',
-				'KS': 'Kansas',
-				'KY': 'Kentucky',
-				'LA': 'Louisiana',
-				'ME': 'Maine',
-				'MD': 'Maryland',
-				'MA': 'Massachusetts',
-				'MI': 'Michigan',
-				'MN': 'Minnesota',
-				'MS': 'Mississippi',
-				'MO': 'Missouri',
-				'MT': 'Montana',
-				'NE': 'Nebraska',
-				'NV': 'Nevada',
-				'NH': 'New Hampshire',
-				'NJ': 'New Jersey',
-				'NM': 'New Mexico',
-				'NY': 'New York',
-				'NC': 'North Carolina',
-				'ND': 'North Dakota',
-				'OH': 'Ohio',
-				'OK': 'Oklahoma',
-				'OR': 'Oregon',
-				'PA': 'Pennsylvania',
-				'RI': 'Rhode Island',
-				'SC': 'South Carolina',
-				'SD': 'South Dakota',
-				'TN': 'Tennessee',
-				'TX': 'Texas',
-				'UT': 'Utah',
-				'VT': 'Vermont',
-				'VA': 'Virginia',
-				'WA': 'Washington',
-				'WV': 'West Virginia',
-				'WI': 'Wisconsin',
-				'WY': 'Wyoming',            
-			},
 			alertHeadlineVerificationWarning: "",
 			alertCopyVerificationWarning: "",
 			alertHeadlineNoMatchWarning: "",
 			alertCopyNoMatchWarning: "",
 		}
 	},
+	computed: {
+		stateOptions: {
+			get: function () {
+				return {
+					'AL': 'Alabama',
+					'AK': 'Alaska',
+					'AZ': 'Arizona',
+					'AR': 'Arkansas',
+					'CA': 'California',
+					'CO': 'Colorado',
+					'CT': 'Connecticut',
+					'DE': 'Delaware',
+					'DC': 'District Of Columbia',
+					'FL': 'Florida',
+					'GA': 'Georgia',
+					'HI': 'Hawaii',
+					'ID': 'Idaho',
+					'IL': 'Illinois',
+					'IN': 'Indiana',
+					'IA': 'Iowa',
+					'KS': 'Kansas',
+					'KY': 'Kentucky',
+					'LA': 'Louisiana',
+					'ME': 'Maine',
+					'MD': 'Maryland',
+					'MA': 'Massachusetts',
+					'MI': 'Michigan',
+					'MN': 'Minnesota',
+					'MS': 'Mississippi',
+					'MO': 'Missouri',
+					'MT': 'Montana',
+					'NE': 'Nebraska',
+					'NV': 'Nevada',
+					'NH': 'New Hampshire',
+					'NJ': 'New Jersey',
+					'NM': 'New Mexico',
+					'NY': 'New York',
+					'NC': 'North Carolina',
+					'ND': 'North Dakota',
+					'OH': 'Ohio',
+					'OK': 'Oklahoma',
+					'OR': 'Oregon',
+					'PA': 'Pennsylvania',
+					'RI': 'Rhode Island',
+					'SC': 'South Carolina',
+					'SD': 'South Dakota',
+					'TN': 'Tennessee',
+					'TX': 'Texas',
+					'UT': 'Utah',
+					'VT': 'Vermont',
+					'VA': 'Virginia',
+					'WA': 'Washington',
+					'WV': 'West Virginia',
+					'WI': 'Wisconsin',
+					'WY': 'Wyoming',            
+				}
+			}
+		}
+	},
 	methods: {
 		initializeComponent(cmsContent) {
 			this.$refs.autocomplete.initializeComponent(cmsContent[0].QuestionText);
@@ -161,10 +167,10 @@ export default ({
 	},
 	mounted() {
 
-		let addressField1 = document.getElementById("autocomplete");
-		let self = this;
+		const addressField1 = document.getElementById("autocomplete");
+		const self = this;
 
-		let apiKey = applicationConfig.GOOGLE_PLACES_API_KEY;
+		const apiKey = applicationConfig.GOOGLE_PLACES_API_KEY;
 
 		this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`)
 			.then(() => {
@@ -182,14 +188,14 @@ export default ({
 				autocomplete.addListener('place_changed', fillInAddress);
 
 				addressField1.onblur = function() {
-					var 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 (hover === null) {
-						var item = document.querySelector(".pac-container .pac-item");
+						const item = document.querySelector(".pac-container .pac-item");
 						if (item != null) {
-							var firstResult = item.textContent;
-							var geocoder = new window.google.maps.Geocoder();
+							const firstResult = item.textContent;
+							const geocoder = new window.google.maps.Geocoder();
 							geocoder.geocode({
 								address: firstResult
 							}, function (results, status) {