From bfbe8aa5f024ced970d00a934aa8c9c88031d551 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Wed, 16 Mar 2022 11:46:27 -0400
Subject: [PATCH] CMS related coding changes for textbox-question and
 dropdown-question

---
 .../dropdown-question/dropdown-question.vue   | 23 ++++++--
 .../textbox-question/textbox-question.vue     | 34 +++++++++--
 src/layouts/address-lookup/address-lookup.vue | 16 ++++-
 .../address-questions/address-questions.vue   | 58 +++++++++----------
 .../customer-questions/customer-questions.vue | 15 +++--
 5 files changed, 98 insertions(+), 48 deletions(-)

diff --git a/src/common-components/dropdown-question/dropdown-question.vue b/src/common-components/dropdown-question/dropdown-question.vue
index 91924c1db..d5050f74b 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">{{labelText}}</label>
+    <label :for="inputId" :aria-label="ariaLabelText" class="form-label" v-html="labelText"></label>
     <select v-model="selectedOption"
             class="form-select" 
             :id="inputId"
@@ -25,7 +25,6 @@ export default {
   name: "dropdown-question",
   props: {
     modelValue: String,
-    labelText: String,
     inputId: String,
     options: {
       type: Object,
@@ -33,11 +32,27 @@ export default {
     },
     isDisabled: Boolean,
     isRequired: Boolean,
-    ariaLabelText: String,
+    disableAutoFill: Boolean,
   },
   data() {
-
+      return {
+          labelText: "",
+          ariaLabelText: "",
+      }
   },
+  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;
+      }
+  },    
   computed: {
     selectedOption: {
       get: function() {
diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue
index ce45d0ff4..7b71fe185 100644
--- a/src/common-components/textbox-question/textbox-question.vue
+++ b/src/common-components/textbox-question/textbox-question.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="textbox-question" :class="hasError ? 'has-error' : ''">
-    <label :for="inputId" :aria-label="ariaLabelText" class="form-label">{{labelText}}</label>
-    <input v-model="value" v-maska="mask"
+    <label :for="inputId" :aria-label="ariaLabelText" class="form-label" v-html="labelText"></label>
+    <input v-model="value" 
+      v-maska="mask"
       :type="type" 
       class="form-control" 
       :ref="inputId" 
@@ -28,13 +29,15 @@ export default {
       type: String,
       default: 'text',
     },
+    placeholderText: {
+      type: String,
+      default: '',
+    },
     modelValue: String,
-    labelText: String,
-    ariaLabelText: String,
-    placeholderText: 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,
@@ -43,6 +46,25 @@ export default {
       default: '',
     },
   },
+  data() {
+      return {
+          labelText: "",
+          ariaLabelText: "",
+      }
+  },
+  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;
+      }
+  },  
   computed: {
       value: {
           get: function() {
@@ -51,7 +73,7 @@ export default {
           set: function(newValue) {
               this.$emit("update:modelValue", newValue);
           }
-      },
+      },     
   },
 };
 </script>
diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index 097d35c0e..b3a4fa97f 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -3,8 +3,10 @@
         <funnelHeader ref="funnelHeader" />
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
         <funnelSubHeader ref="funnelSubHeader" />
-        <customerQuestions ref="customerQuestions" />
-        <funnelFooter ref="funnelFooter" />
+        <form autocomplete="off">
+          <customerQuestions ref="customerQuestions" />
+          <funnelFooter ref="funnelFooter" /> 
+        </form>
     </div>
 </template>
 
@@ -54,8 +56,16 @@ export default {
             resultMap.cmsContent.FunnelFooterWidget
           );
           vm.$refs.customerQuestions.initializeComponent([
+              resultMap.cmsContent.StreetAddressQuestionWidget,
+              resultMap.cmsContent.CityQuestionWidget,
+              resultMap.cmsContent.StateQuestionWidget,
+              resultMap.cmsContent.ZipQuestionWidget,
               resultMap.cmsContent.AlertVerificationWarningWidget,
-              resultMap.cmsContent.AlertNoMatchWarningWidget
+              resultMap.cmsContent.AlertNoMatchWarningWidget,
+              resultMap.cmsContent.FirstNameQuestionWidget,
+              resultMap.cmsContent.LastNameQuestionWidget,
+              resultMap.cmsContent.EmailAddressQuestionWidget,
+
             ]
           );
       });
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 4e4971f12..f347264b4 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,28 +1,26 @@
 <template>
-    <form autocomplete="off">
-        <div class="row my-4">
-            <div class="col">
-                <textboxQuestion v-model="streetAddress" ref="autocomplete" inputId="autocomplete" placeholderText="Search" labelText="S&NoBreak;treet address" ariaLabelText="Street address" aria-haspopup="" hasIcon />
-            </div>
+    <div class="row my-4">
+        <div class="col">
+            <textboxQuestion v-model="streetAddress" ref="autocomplete" inputId="autocomplete" placeholderText="Search" aria-haspopup="" hasIcon disableAutoFill />
         </div>
-        <transition name="fade" mode="out-in">
-            <div class="address-fields" v-if="showAddressFields" aria-live="polite">
-                <div class="row my-4">
-                    <div class="col">
-                        <textboxQuestion v-model="city" ref="city" inputId="cbf28188fdf2436688fd735915f7ee56" labelText="C&NoBreak;ity" ariaLabelText="City" />
-                    </div>
+    </div>
+    <transition name="fade" mode="out-in">
+        <div class="address-fields" v-show="showAddressFields" aria-live="polite">
+            <div class="row my-4">
+                <div class="col">
+                    <textboxQuestion v-model="city" ref="city" inputId="cbf28188fdf2436688fd735915f7ee56" disableAutoFill />
                 </div>
-                <div class="row my-4">
-                    <div class="col-6">
-                        <dropdownQuestion v-model="state" ref="state" inputId="8fdf9dc2e13e430eb57529499dceb3eb" :options="stateOptions" labelText="S&NoBreak;tate" ariaLabelText="State"  />
-                    </div>            
-                    <div class="col-6">
-                        <textboxQuestion v-model="zip" ref="zip" inputId="01a9a1c2de0b4c9da8e023c9ae3be498" labelText="Z&NoBreak;IP code" ariaLabelText="ZIP code" mask="#####" />
-                    </div>      
-                </div> 
             </div>
-        </transition> 
-    </form>
+            <div class="row my-4">
+                <div class="col-6">
+                    <dropdownQuestion v-model="state" ref="state" inputId="8fdf9dc2e13e430eb57529499dceb3eb" :options="stateOptions" disableAutoFill />
+                </div>            
+                <div class="col-6">
+                    <textboxQuestion v-model="zip" ref="zip" inputId="01a9a1c2de0b4c9da8e023c9ae3be498" mask="#####" disableAutoFill />
+                </div>      
+            </div> 
+        </div>
+    </transition>
     <alert ref="alertVerificationWarning" v-show="displayVerificationWarning"
         alertClass="alert-warning"
         :alertHeadline="alertHeadlineVerificationWarning"
@@ -119,12 +117,17 @@ export default ({
     },
     methods: {
         initializeComponent(cmsContent) {
-          // assign alert texts to this component
-          this.alertHeadlineVerificationWarning = cmsContent[0].HeadlineText;
-          this.alertCopyVerificationWarning = cmsContent[0].BodyText;
+            this.$refs.autocomplete.initializeComponent(cmsContent[0].QuestionText);
+            this.$refs.city.initializeComponent(cmsContent[1].QuestionText);
+            this.$refs.state.initializeComponent(cmsContent[2].QuestionText);
+            this.$refs.zip.initializeComponent(cmsContent[3].QuestionText);
 
-          this.alertHeadlineNoMatchWarning = cmsContent[1].HeadlineText;
-          this.alertCopyNoMatchWarning = cmsContent[1].BodyText;
+            // assign alert texts to this component
+            this.alertHeadlineVerificationWarning = cmsContent[4].HeadlineText;
+            this.alertCopyVerificationWarning = cmsContent[4].BodyText;
+
+            this.alertHeadlineNoMatchWarning = cmsContent[5].HeadlineText;
+            this.alertCopyNoMatchWarning = cmsContent[5].BodyText;
         }
     },
     computed: {
@@ -136,9 +139,6 @@ export default ({
         let self = this;
 
         let apiKey = applicationConfig.GOOGLE_PLACES_API_KEY;
-        // Lets keep these here for the moment for easy reference. Actual value comes from env variable.
-        //"AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo"; // localhost:8080
-        //"AIzaSyBji_2ApAj2vE_XNGyV-LaUEKrmuElpJ1w"; // Dev and above
 
         this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`)
             .then(() => {
diff --git a/src/layouts/address-lookup/customer-questions/customer-questions.vue b/src/layouts/address-lookup/customer-questions/customer-questions.vue
index ec8fe9fee..9135c461a 100644
--- a/src/layouts/address-lookup/customer-questions/customer-questions.vue
+++ b/src/layouts/address-lookup/customer-questions/customer-questions.vue
@@ -2,17 +2,17 @@
     <addressQuestions ref="addressQuestions"/>
     <div class="row my-4">
       <div class="col">
-        <textboxQuestion v-model="firstName" ref="firstName" inputId="08497a2efd9a4a73a70360ab47b4838d" labelText="First name" />
+        <textboxQuestion v-model="firstName" ref="firstName" inputId="08497a2efd9a4a73a70360ab47b4838d" disableAutoFill />
       </div>
     </div> 
     <div class="row my-4">
       <div class="col">
-        <textboxQuestion v-model="lastName" ref="lastName" inputId="0030e56a57e74a4ab92de7fb8e97fec5" labelText="Last name" />
+        <textboxQuestion v-model="lastName" ref="lastName" inputId="0030e56a57e74a4ab92de7fb8e97fec5" disableAutoFill />
       </div>
     </div>
     <div class="row my-4">
       <div class="col">
-        <textboxQuestion v-model="emailAddress" ref="emailAddress" inputId="00450a91b8964a768ce3992e6feb890f" labelText="Email address" />
+        <textboxQuestion v-model="emailAddress" ref="emailAddress" inputId="00450a91b8964a768ce3992e6feb890f" disableAutoFill />
       </div>
     </div>  
 </template>
@@ -20,7 +20,6 @@
 <script>
 import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions";
 import textboxQuestion from "@/common-components/textbox-question/textbox-question";
-
 //import store from "@/store";
 
 export default ({
@@ -34,8 +33,12 @@ export default ({
     },
     methods: {
         initializeComponent(cmsContent){
-          // pass alert texts to addressQuestions component
-          this.$refs.addressQuestions.initializeComponent(cmsContent);
+            // pass alert texts to addressQuestions component
+            this.$refs.addressQuestions.initializeComponent(cmsContent);
+
+            this.$refs.firstName.initializeComponent(cmsContent[6].QuestionText);
+            this.$refs.lastName.initializeComponent(cmsContent[7].QuestionText);
+            this.$refs.emailAddress.initializeComponent(cmsContent[8].QuestionText);
         }
     },
     computed: {