CMS related coding changes for textbox-question and dropdown-question

2022-03-16 11:46:27 -04:00 · 2022-03-16 11:46:27 -04:00 · bfbe8aa5f0
commit bfbe8aa5f0
parent e26e20a7bf
5 changed files with 98 additions and 48 deletions
--- 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() {
--- 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>
--- 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,
+
            ]
          );
      });
--- 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(() => {
--- 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: {