Before merging latest from develop

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

@@ -4,7 +4,9 @@
         :ref="inputId" 
         :id="inputId"
         class="form-control">
-        <option v-for="option in options" :value="option" :key="option.value">{{ option }}</option>
+        <option v-for="(value, name, index) in options" :value="name" :key="index">
+          {{ value }}       
+        </option>
     </select>
 </template>
 
@@ -22,10 +24,8 @@ export default {
       required: true
     },    
   },
-  data(){
+  data() {
-      return {
+
-          value: String,
-      }
   },
   computed: {
     selectedOption: {

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

@@ -1,6 +1,6 @@
 <template>
     <label :for="inputId">{{ labelText }}</label>
-    <input type="text"
+    <input v-model="value" type="text"
         :ref="inputId" 
         :id="inputId"
         :placeholder="placeholderText" 
@@ -19,8 +19,15 @@ export default {
         placeholderText: String,
         inputId: String,
     },
-    setup(props) {
+    computed: {
-
+        value: {
+            get: function() {
+                return this.modelValue;
+            },
+            set: function(newValue) {
+                this.$emit("update:modelValue", newValue);
+            }
+        },
     },
 };
 </script>

src/layouts/address-lookup/address-lookup.vue

@@ -26,56 +26,55 @@ import store from "@/store";
 export default {
   name: "address-lookup",
   async beforeRouteEnter(to, from, next) {
-    // Call APIs
+      // Call APIs
-    const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+      const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
 
-    // Settle promises and get results
+      // Settle promises and get results
-    const promiseResultMap = [
+      const promiseResultMap = [
-      {
+          {
-        resultKey: "cmsContent",
+              resultKey: "cmsContent",
-        promise: cmsContentPromise,
+              promise: cmsContentPromise,
-      },
+          },
-    ];
+      ];
 
-    const resultMap = await settleAllPromises(promiseResultMap);
+      const resultMap = await settleAllPromises(promiseResultMap);
 
-    // Call the "next" function to complete the transition to this page.
+      // Call the "next" function to complete the transition to this page.
-    next((vm) => {
+      next((vm) => {
-      vm.$refs.funnelHeader.initializeComponent(
+          vm.$refs.funnelHeader.initializeComponent(
-        resultMap.cmsContent.FunnelHeaderWidget
+            resultMap.cmsContent.FunnelHeaderWidget
-      );
+          );
-      vm.$refs.vehicleBanner.initializeComponent(
+          vm.$refs.vehicleBanner.initializeComponent(
-        resultMap.cmsContent.VehicleBannerWidget
+            resultMap.cmsContent.VehicleBannerWidget
-      );
+          );
-      vm.$refs.funnelSubHeader.initializeComponent(
+          vm.$refs.funnelSubHeader.initializeComponent(
-        resultMap.cmsContent.FunnelSubHeaderWidget
+            resultMap.cmsContent.FunnelSubHeaderWidget
-      );
+          );
-      vm.$refs.funnelFooter.initializeComponent(
+          vm.$refs.funnelFooter.initializeComponent(
-        resultMap.cmsContent.FunnelFooterWidget
+            resultMap.cmsContent.FunnelFooterWidget
-      );
+          );
-    });
+      });
   },
   data(){
-    return {
+      return {
-      selectedDamageLocations: [],
+
-      driverSideOptionsData: [],
+      }
-    }
   },
   methods: {
-    arePagePrerequisitesValid() {
+      arePagePrerequisitesValid() {
-      return store.getters.vehicle.carId !== null;
+        return store.getters.vehicle.carId !== null;
-    },
+      },
-    resetDependentState() {
+      resetDependentState() {
-      // Invokes
+        // Invokes
-      store.dispatch(storeActions.RESET_PARTS_AND_DEPS);
+        store.dispatch(storeActions.RESET_PARTS_AND_DEPS);
-    },
+      },
   },
   components: {
-    funnelHeader,
+      funnelHeader,
-    funnelFooter,
+      funnelFooter,
-    vehicleBanner,
+      vehicleBanner,
-    funnelSubHeader,
+      funnelSubHeader,
-    customerQuestions,
+      customerQuestions,
   },
 };
 </script>

src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue

@@ -2,7 +2,7 @@
     <form>
         <div class="row my-4">
             <div class="col">
-                <textQuestion v-model="streetAddress" ref="autocomplete" inputId="autocomplete" placeholderText="Search" labelText="Street address" />
+                <textQuestion v-model="address.streetAddress" ref="autocomplete" inputId="autocomplete" placeholderText="Search" labelText="Street address" />
             </div>
         </div>
     </form>
@@ -19,12 +19,7 @@
                 <dropdownQuestion v-model="state" ref="state" inputId="state" :options="stateOptions" labelText="State"  />
             </div>            
             <div class="col-6">
-                <label for="zip">Zip</label>
+                <textQuestion v-model="zip" ref="zip" inputId="zip" labelText="Zip" />
-                <input ref="zip" 
-                    id="zip"
-                    class="form-control"
-                    type="text" 
-                    autocomplete="off" />
             </div>      
         </div> 
     </form>
@@ -55,6 +50,9 @@ export default ({
             showAddressFields: false,
             displayVerificationWarning: false,
             displayNoMatchWarning: false,
+            address: {
+                streetAddress: "",
+            },
             streetAddress: "",
             city: "",
             state: "",
@@ -168,13 +166,9 @@ export default ({
                             });
                         }
                         else {
-                            let city = document.querySelector("#city");
+                            self.city = "";
-                            let state = document.querySelector("#state");
+                            self.state = "";
-                            let zip = document.querySelector("#zip");   
+                            self.zip = "";      
-
-                            city.value = "";
-                            state.value = "";
-                            zip.value = "";      
 
                             self.displayVerificationWarning = false;
                             self.displayNoMatchWarning = true;
@@ -190,10 +184,7 @@ export default ({
                     }
 
                     if (place && place.address_components) {
-                        let address1 = "";
+                        self.streetAddress= "";
-                        let city = document.querySelector("#city");
-                        let state = document.querySelector("#state");
-                        let zip = document.querySelector("#zip");
                         self.showAddressFields = true;
 
                         for (const component of place.address_components) {
@@ -201,15 +192,15 @@ export default ({
 
                             switch (componentType) {
                                 case "street_number": {
-                                    address1 = `${component.long_name} ${address1}`;
+                                    self.streetAddress  = component.long_name;
                                     break;
                                 }
                                 case "route": {
-                                    address1 += component.short_name;
+                                    self.streetAddress += ' ' + component.short_name;
                                     break;
                                 }
                                 case "locality": {
-                                    city.value = component.long_name;
+                                    self.city = component.long_name;
                                     break;
                                 }
                                 case "administrative_area_level_1": {
@@ -217,14 +208,13 @@ export default ({
                                     break;
                                 }
                                 case "postal_code": {
-                                    zip.value = component.long_name;
+                                    self.zip = component.long_name;
                                     break;
                                 }
 
                             }
                         }  
 
-                        addressField1.value = address1;
                         self.displayVerificationWarning = false;
                         self.displayNoMatchWarning = false; 
                     } 

src/layouts/address-lookup/customer-questions/customer-questions.vue

@@ -1,23 +1,13 @@
 <template>
-    <addressQuestions />
+    <addressQuestions v-model="address" />
     <div class="row my-4">
       <div class="col">
-        <label for="firstName">First name</label>
+          <textQuestion v-model="firstName" ref="firstName" inputId="firstName" labelText="First name" />
-        <input ref="firstName" 
-            id="firstName"
-            class="form-control"
-            type="text" 
-            autocomplete="off" />
       </div>
     </div> 
     <div class="row my-4">
       <div class="col">
-        <label for="lastName">Last name</label>
+          <textQuestion v-model="lastName" ref="lastName" inputId="lastName" labelText="Last name" />
-        <input ref="lastName" 
-            id="lastName"
-            class="form-control"
-            type="text" 
-            autocomplete="off" />
       </div>
     </div>
     <emailQuestion />  
@@ -27,6 +17,7 @@
 <script>
 import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions";
 import emailQuestion from "@/layouts/address-lookup/customer-questions/email-question/email-question";
+import textQuestion from "@/common-components/text-question/text-question";
 
 //import store from "@/store";
 
@@ -34,24 +25,32 @@ export default ({
     name: "customer-questions",
     data(){
         return {
-
+            address: {
+                streetAddress: "",
+            },
+            firstName: "",
+            lastName: "",
         }
     },
-    props: {
-        modelValue: Array,
-        groupName: String,
-    },
     methods: {
         initializeComponent(cmsContent, damageOptions){
 
         }
     },
     computed: {
-
+        value: {
+            get: function() {
+                return this.modelValue;
+            },
+            set: function(newValue) {
+                this.$emit("update:modelValue", newValue);
+            }
+        },
     },
     components: {
         addressQuestions,
         emailQuestion,
+        textQuestion,
     }
 })
 </script>

src/layouts/address-lookup/customer-questions/email-question/email-question.vue

@@ -1,12 +1,24 @@
 <template>
     <div class="row my-4">
       <div class="col">
-        <label for="email">Email address</label>
+        <textQuestion v-model="email" ref="email" inputId="email" labelText="Email address" />
-        <input ref="email" 
-            id="email"
-            class="form-control"
-            type="text" 
-            autocomplete="off" />
       </div>
     </div>   
 </template>
+
+<script>
+import textQuestion from "@/common-components/text-question/text-question";
+import store from "@/store";
+
+export default ({
+    name: "emailQuestion",
+    data(){
+        return {
+            email: "",
+        }
+    },
+    components: {
+        textQuestion,
+    },
+})
+</script>