From ad5f5310e34d0839858b26af6c92c31568f25205 Mon Sep 17 00:00:00 2001
From: Sneha <sneha.a@safelite.com>
Date: Mon, 15 May 2023 20:04:15 +0530
Subject: [PATCH 1/3] SLT-418

---
 .../vehicle-question/vehicle-question.vue     |  68 +++++++++++
 .../vehicle-selection/vehicle-selection.vue   | 114 ++++++++++--------
 2 files changed, 134 insertions(+), 48 deletions(-)
 create mode 100644 src/iss-components/vehicle-question/vehicle-question.vue

diff --git a/src/iss-components/vehicle-question/vehicle-question.vue b/src/iss-components/vehicle-question/vehicle-question.vue
new file mode 100644
index 00000000..201e0282
--- /dev/null
+++ b/src/iss-components/vehicle-question/vehicle-question.vue
@@ -0,0 +1,68 @@
+<template>
+  <dropdownQuestion
+  :options="Options"
+  disableAutoFill
+  placeHolderText="Select an option"
+  v-model="selectedValue"
+  />
+</template>
+
+<script>
+import { useMainStore } from '@/store';
+import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
+
+export default {
+  name: "vehicle-question",
+  data() {
+    return {
+      values: [],
+    };
+  },
+  props: {
+    modelValue: String,
+    updateValues: Function,
+    years:[]
+  },
+  components: {
+  dropdownQuestion
+},
+  computed: {
+    selectedValue: {
+      get: function() {    
+        return this.modelValue;
+      },
+      set: function(newValue) {
+        this.$emit("update:modelValue",newValue);
+      }
+    },
+    Options() {
+      if(this.years != null)
+      return this.years;
+
+          const Answers = this.values;
+          const AnswersObj ={};
+          if(Answers)
+          {
+              for (let answer of Object.values(Answers)) {
+                  if (answer) {
+                      AnswersObj[answer] = answer;
+                  }
+              }
+          }
+          return AnswersObj
+      },
+  },
+  methods: {
+    loadInitialData() {
+        return useMainStore().getVehicleYears();
+      },
+    async getNewValues() {
+      const results = await this.updateValues();
+      this.values = results?.data;
+    },
+    initializeComponent(initialData) {
+      this.values = initialData;
+    },
+  },
+};
+</script>
diff --git a/src/layouts/vehicle-selection/vehicle-selection.vue b/src/layouts/vehicle-selection/vehicle-selection.vue
index cb53c2ea..8796e7fb 100644
--- a/src/layouts/vehicle-selection/vehicle-selection.vue
+++ b/src/layouts/vehicle-selection/vehicle-selection.vue
@@ -8,12 +8,16 @@
                    <div class="row">
                        <div class="col">
                            <div class="select-car-form rounded">
-                               <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="subheader" />
-                               <yearQuestion class="px-4 mb-2 mt-4" v-model="selectedYear" ref="yearQuestion" />
+                               <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="mt-5" />
+                               <!-- <yearQuestion class="px-4 mb-2 mt-4" v-model="selectedYear" ref="yearQuestion" />
                                <makeQuestion class="px-4 mb-2 mt-4" v-model="selectedMake" :updateValues="updateMakeValues" ref="makeQuestion"/>
                                <modelQuestion v-model="selectedModel" :updateValues="updateModelValues"  ref="modelQuestion" class="px-4 mb-2 mt-4"/>
-                               <styleQuestion v-model="selectedStyle" :updateValues="updateStyleValues" ref="styleQuestion" class="px-4 mb-2 mt-4"/>
-                              <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mt-2 mb-3" />
+                               <styleQuestion v-model="selectedStyle" :updateValues="updateStyleValues" ref="styleQuestion" class="px-4 mb-2 mt-4"/> -->
+                               <VehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedYear" ref="VehicleyearQuestion" cmsWidgetName="VehicleYearQuestion" :options="years" validationRules="year-required" inputId="yearQuestionField"/>
+                               <VehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedMake" ref="VehiclemakeQuestion" :updateValues="updateMakeValues" cmsWidgetName="VehicleMakeQuestion" validationRules="make-required" inputId="makeQuestionField"/>
+                               <VehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedModel" ref="VehiclemodelQuestion" cmsWidgetName="VehicleModelQuestion" :updateValues="updateModelValues" validationRules="model-required" inputId="modelQuestionField"/>
+                               <VehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedStyle" ref="VehiclestyleQuestion" cmsWidgetName="VehicleStyleQuestion" :updateValues="updateStyleValues" validationRules="style-required" inputId="styleQuestionField"/>
+                              <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mt-5 mb-3" />
                                <siteFooter
                                  cmsWidgetName="SiteFooterWidget"
                                  @ForwardClicked="forwardButtonAction"
@@ -37,16 +41,25 @@ import siteHeader from "@/iss-components/site-header/site-header";
 import siteFooter from "@/iss-components/site-footer/site-footer";
 import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
 import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
-import yearQuestion from "@/layouts/vehicle-selection/year-question/year-question";
-import makeQuestion from "@/layouts/vehicle-selection/make-question/make-question";
-import modelQuestion from "@/layouts/vehicle-selection/model-question/model-question";
-import styleQuestion from "@/layouts/vehicle-selection/style-question/style-question";
+import VehicleQuestion from "@/iss-components/vehicle-question/vehicle-question";
+// import yearQuestion from "@/layouts/vehicle-selection/year-question/year-question";
+// import makeQuestion from "@/layouts/vehicle-selection/make-question/make-question";
+// import modelQuestion from "@/layouts/vehicle-selection/model-question/model-question";
+// import styleQuestion from "@/layouts/vehicle-selection/style-question/style-question";
 
 // Supporting files
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
-import {Form} from "vee-validate";
+import { Form, defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+
+//define validation rules
+defineRule("year-required", required(errorMessages.YEAR_REQUIRED));
+defineRule("make-required", required(errorMessages.MAKE_REQUIRED));
+defineRule("model-required", required(errorMessages.MODEL_REQUIRED));
+defineRule("style-required", required(errorMessages.STYLE_REQUIRED));
 
 export default {
    name: "vehicle-selection",
@@ -60,14 +73,17 @@ export default {
            years: []
        };
    },
-
+props:{
+    cmsWidgetName:String,
+    validationRules:String,
+},
    async beforeRouteEnter(to, from, next) {
        // Call APIs
        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-       const yearQuestionInitialDataPromise = yearQuestion.methods.loadInitialData();
-       const makeQuestionInitialDataPromise = makeQuestion.methods.getNewValues();
-        const modelQuestionInitialDataPromise = modelQuestion.methods.getNewValues();
-       const styleQuestionInitialDataPromise = styleQuestion.methods.getNewValues();
+       const yearQuestionInitialDataPromise = VehicleQuestion.methods.loadInitialData();
+    //    const makeQuestionInitialDataPromise = makeQuestion.methods.getNewValues();
+    //     const modelQuestionInitialDataPromise = modelQuestion.methods.getNewValues();
+    //    const styleQuestionInitialDataPromise = styleQuestion.methods.getNewValues();
 
        // Settle promises and get results
        const promiseResultMap = [
@@ -79,18 +95,18 @@ export default {
                resultKey: "yearQuestionInitialData",
                promise: yearQuestionInitialDataPromise,
            },
-           {
-               resultKey: "makeQuestionInitialData",
-               promise: makeQuestionInitialDataPromise,
-           },
-           {
-               resultKey: "modelQuestionInitialData",
-               promise: modelQuestionInitialDataPromise,
-           },
-           {
-               resultKey: "styleQuestionInitialData",
-               promise: styleQuestionInitialDataPromise,
-           },
+        //    {
+        //        resultKey: "makeQuestionInitialData",
+        //        promise: makeQuestionInitialDataPromise,
+        //    },
+        //    {
+        //        resultKey: "modelQuestionInitialData",
+        //        promise: modelQuestionInitialDataPromise,
+        //    },
+        //    {
+        //        resultKey: "styleQuestionInitialData",
+        //        promise: styleQuestionInitialDataPromise,
+        //    },
 
        ];
 
@@ -100,19 +116,19 @@ export default {
        next((vm) => {
         vm.years = resultMap.yearQuestionInitialData;
            vm.setCmsContent(resultMap.cmsContent);
-           vm.$refs.yearQuestion.initializeComponent(
-               resultMap.yearQuestionInitialData
-           );
-           vm.$refs.makeQuestion.initializeComponent(
-               resultMap.makeQuestionInitialData
-           );
+        //    vm.$refs.VehicleQuestion.initializeComponent(
+        //        resultMap.yearQuestionInitialData
+        //    );
+        //    vm.$refs.makeQuestion.initializeComponent(
+        //        resultMap.makeQuestionInitialData
+        //    );
        
-           vm.$refs.modelQuestion.initializeComponent(
-               resultMap.modelQuestionInitialData
-           );
-           vm.$refs.styleQuestion.initializeComponent(
-               resultMap.styleQuestionInitialData
-               );
+        //    vm.$refs.modelQuestion.initializeComponent(
+        //        resultMap.modelQuestionInitialData
+        //    );
+        //    vm.$refs.styleQuestion.initializeComponent(
+        //        resultMap.styleQuestionInitialData
+        //        );
     });
       
   },
@@ -121,16 +137,18 @@ export default {
            const parsedYearIndex = parseInt(yearIndex);
            this.mainStore.updateVehicleYear( this.years[parsedYearIndex] );
 
-           this.$refs["makeQuestion"].getNewValues();
+           this.$refs["VehicleQuestion"].getNewValues();
 
        },
        selectedMake(make) {
            this.mainStore.updateVehicleMake( make );
-           this.$refs["modelQuestion"].getNewValues();           
+           this.$refs["VehicleQuestion"].getNewValues();
+           //this.$refs["modelQuestion"].getNewValues();           
        },
        selectedModel(model) {
            this.mainStore.updateVehicleModel( model );
-           this.$refs["styleQuestion"].getNewValues(); 
+           this.$refs["VehicleQuestion"].getNewValues();
+           //this.$refs["styleQuestion"].getNewValues(); 
        },
        selectedStyle(style) {
            this.mainStore.updateVehicleStyle( style );
@@ -165,19 +183,19 @@ export default {
      },
      async updateStyleValues() {
         return await this.mainStore.getVehicleStyles();
-     }
-   },
-
+     },
+    },
    components: {
-       yearQuestion,
-       makeQuestion,
-       modelQuestion,
+    //    yearQuestion,
+    //    makeQuestion,
+    //    modelQuestion,
        siteHeader,
        siteSubHeader,
        vehicleBanner,
        siteFooter,
        Form,
-       styleQuestion,
+       VehicleQuestion
+       //styleQuestion,
    },
 };
 </script>

From e29445bb8354126aa31f3bb2323093547d823b93 Mon Sep 17 00:00:00 2001
From: Sneha <sneha.a@safelite.com>
Date: Mon, 15 May 2023 20:15:49 +0530
Subject: [PATCH 2/3] Vehicle question

---
 .../vehicle-question/vehicle-question.vue     |  3 -
 .../make-question/make-question.vue           | 76 ------------------
 .../model-question/model-question.vue         | 77 -------------------
 .../style-question/style-question.vue         | 76 ------------------
 .../vehicle-selection/vehicle-selection.vue   | 49 +-----------
 .../year-question/year-question.vue           | 63 ---------------
 6 files changed, 3 insertions(+), 341 deletions(-)
 delete mode 100644 src/layouts/vehicle-selection/make-question/make-question.vue
 delete mode 100644 src/layouts/vehicle-selection/model-question/model-question.vue
 delete mode 100644 src/layouts/vehicle-selection/style-question/style-question.vue
 delete mode 100644 src/layouts/vehicle-selection/year-question/year-question.vue

diff --git a/src/iss-components/vehicle-question/vehicle-question.vue b/src/iss-components/vehicle-question/vehicle-question.vue
index 201e0282..7161173c 100644
--- a/src/iss-components/vehicle-question/vehicle-question.vue
+++ b/src/iss-components/vehicle-question/vehicle-question.vue
@@ -60,9 +60,6 @@ export default {
       const results = await this.updateValues();
       this.values = results?.data;
     },
-    initializeComponent(initialData) {
-      this.values = initialData;
-    },
   },
 };
 </script>
diff --git a/src/layouts/vehicle-selection/make-question/make-question.vue b/src/layouts/vehicle-selection/make-question/make-question.vue
deleted file mode 100644
index 1ab0e45d..00000000
--- a/src/layouts/vehicle-selection/make-question/make-question.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-    <dropdownQuestion
-    cmsWidgetName="VehicleMakeQuestion"
-    ref="makeQuestion"
-    :options="makeOptions"
-    disableAutoFill
-    placeHolderText="Select an option"
-    validationRules="make-required"
-    inputId="makeQuestionField"
-    v-model="selectedValue"
-    />
-  </template>
-  
-  <script>
-
-  import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
-
-  import { errorMessages } from "@/constants/error-messages";
-import { required } from "@/helpers/validation-rules";
-import { defineRule } from "vee-validate";
-
-defineRule("make-required", required(errorMessages.MAKE_REQUIRED));
-  
-  export default {
-    name: "make-question",
-    data() {
-      return {
-        values: [],
-      };
-    },
-    props: {
-      modelValue: String,
-      cmsWidgetName: String,
-      validationRules: String,
-      updateValues: Function,
-    },
-    components: {
-    dropdownQuestion
-},
-    computed: {
-      questionText(){
-        return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
-      },
-      selectedValue: {
-        get: function() {    
-          return this.modelValue;
-        },
-        set: function(newValue) {
-          this.$emit("update:modelValue",newValue);
-        }
-      },
-       makeOptions() {
-             const makeAnswers = this.values;
-             const makeAnswersObj ={};
-             if(makeAnswers)
-             {
-                for (let answer of Object.values(makeAnswers)) {
-                    if (answer) {
-                         makeAnswersObj[answer] = answer;
-                     }
-                 }
-             }
-             return makeAnswersObj
-         },
-    },
-    methods: {
-      async getNewValues() {
-        const results = await this.updateValues();
-        this.values = results?.data;
-      },
-      initializeComponent(initialData) {
-        this.values = initialData;
-      },
-    },
-  };
-  </script>
diff --git a/src/layouts/vehicle-selection/model-question/model-question.vue b/src/layouts/vehicle-selection/model-question/model-question.vue
deleted file mode 100644
index e1cb2a75..00000000
--- a/src/layouts/vehicle-selection/model-question/model-question.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-    <dropdownQuestion
-    cmsWidgetName="VehicleModelQuestion"
-    ref="modelQuestion"
-    :options="modelOptions"
-    disableAutoFill
-    placeHolderText="Select an option"
-    validationRules="model-required"
-    inputId="modelQuestionField"
-    v-model="selectedValue"
-    />
-  </template>
-  
-  <script>
-
-  import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
-
-  import { errorMessages } from "@/constants/error-messages";
-import { required } from "@/helpers/validation-rules";
-import { defineRule } from "vee-validate";
-
-defineRule("model-required", required(errorMessages.MODEL_REQUIRED));
-
-  
-  export default {
-    name: "model-question",
-    data() {
-      return {
-        values: Array,
-      };
-    },
-    props: {
-      modelValue: String,
-      cmsWidgetName: String,
-      validationRules: String,
-      updateValues: Function,
-    },
-    components: {
-    dropdownQuestion
-},
-    computed: {
-      questionText(){
-        return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
-      },
-      modelOptions() {
-            const modelAnswers = this.values;
-            const modelAnswersObj ={};
-            if(modelAnswers)
-            {
-                for (let answer of Object.values(modelAnswers)) {
-                    if (answer) {
-                        modelAnswersObj[answer] = answer;
-                    }
-                }
-            }
-            return modelAnswersObj
-        },
-      selectedValue: {
-        get: function() {
-          return this.modelValue
-        },
-        set: function(newValue) {
-          this.$emit("update:modelValue", newValue);
-        }
-      }
-    },
-    methods: {
-      async getNewValues() {
-        const results = await this.updateValues();
-        this.values = results?.data;
-      },
-      initializeComponent(initialData) {
-        this.values = initialData;
-      },
-    },
-  };
-  </script>
diff --git a/src/layouts/vehicle-selection/style-question/style-question.vue b/src/layouts/vehicle-selection/style-question/style-question.vue
deleted file mode 100644
index b957d923..00000000
--- a/src/layouts/vehicle-selection/style-question/style-question.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-    <dropdownQuestion
-    cmsWidgetName="VehicleStyleQuestion"
-    ref="styleQuestion"
-    :options="styleOptions"
-    disableAutoFill
-    placeHolderText="Select an option"
-    validationRules="style-required"
-    inputId="styleQuestionField"
-    v-model="selectedValue"
-    />
-  </template>
-  
-  <script>
-
-  import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
-  import { errorMessages } from "@/constants/error-messages";
-import { required } from "@/helpers/validation-rules";
-import { defineRule } from "vee-validate";
-
-defineRule("style-required", required(errorMessages.STYLE_REQUIRED));
-
-  
-  export default {
-    name: "style-question",
-    data() {
-      return {
-        values: [],
-      };
-    },
-    props: {
-      modelValue: String,
-      cmsWidgetName: String,
-      validationRules: String,
-      updateValues: Function,
-    },
-    components: {
-    dropdownQuestion
-},
-    computed: {
-      questionText(){
-        return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
-      },
-      styleOptions() {
-            const styleAnswers = this.values;
-            const styleAnswersObj ={};
-            if(styleAnswers)
-            {
-                for (let answer of Object.values(styleAnswers)) {
-                    if (answer) {
-                        styleAnswersObj[answer] = answer;
-                    }
-                }
-            }
-            return styleAnswersObj
-        },
-      selectedValue: {
-        get: function() {
-          return this.modelValue
-        },
-        set: function(newValue) {
-          this.$emit("update:modelValue", newValue);
-        }
-      }
-    },
-    methods: {
-      async getNewValues() {
-        const results = await this.updateValues();
-        this.values = results?.data;
-      },
-      initializeComponent(initialData) {
-        this.values = initialData;
-      },
-    },
-  };
-  </script>
diff --git a/src/layouts/vehicle-selection/vehicle-selection.vue b/src/layouts/vehicle-selection/vehicle-selection.vue
index 8796e7fb..bf8e3952 100644
--- a/src/layouts/vehicle-selection/vehicle-selection.vue
+++ b/src/layouts/vehicle-selection/vehicle-selection.vue
@@ -9,10 +9,6 @@
                        <div class="col">
                            <div class="select-car-form rounded">
                                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="mt-5" />
-                               <!-- <yearQuestion class="px-4 mb-2 mt-4" v-model="selectedYear" ref="yearQuestion" />
-                               <makeQuestion class="px-4 mb-2 mt-4" v-model="selectedMake" :updateValues="updateMakeValues" ref="makeQuestion"/>
-                               <modelQuestion v-model="selectedModel" :updateValues="updateModelValues"  ref="modelQuestion" class="px-4 mb-2 mt-4"/>
-                               <styleQuestion v-model="selectedStyle" :updateValues="updateStyleValues" ref="styleQuestion" class="px-4 mb-2 mt-4"/> -->
                                <VehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedYear" ref="VehicleyearQuestion" cmsWidgetName="VehicleYearQuestion" :options="years" validationRules="year-required" inputId="yearQuestionField"/>
                                <VehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedMake" ref="VehiclemakeQuestion" :updateValues="updateMakeValues" cmsWidgetName="VehicleMakeQuestion" validationRules="make-required" inputId="makeQuestionField"/>
                                <VehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedModel" ref="VehiclemodelQuestion" cmsWidgetName="VehicleModelQuestion" :updateValues="updateModelValues" validationRules="model-required" inputId="modelQuestionField"/>
@@ -42,10 +38,6 @@ import siteFooter from "@/iss-components/site-footer/site-footer";
 import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
 import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
 import VehicleQuestion from "@/iss-components/vehicle-question/vehicle-question";
-// import yearQuestion from "@/layouts/vehicle-selection/year-question/year-question";
-// import makeQuestion from "@/layouts/vehicle-selection/make-question/make-question";
-// import modelQuestion from "@/layouts/vehicle-selection/model-question/model-question";
-// import styleQuestion from "@/layouts/vehicle-selection/style-question/style-question";
 
 // Supporting files
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
@@ -81,9 +73,6 @@ props:{
        // Call APIs
        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
        const yearQuestionInitialDataPromise = VehicleQuestion.methods.loadInitialData();
-    //    const makeQuestionInitialDataPromise = makeQuestion.methods.getNewValues();
-    //     const modelQuestionInitialDataPromise = modelQuestion.methods.getNewValues();
-    //    const styleQuestionInitialDataPromise = styleQuestion.methods.getNewValues();
 
        // Settle promises and get results
        const promiseResultMap = [
@@ -95,18 +84,6 @@ props:{
                resultKey: "yearQuestionInitialData",
                promise: yearQuestionInitialDataPromise,
            },
-        //    {
-        //        resultKey: "makeQuestionInitialData",
-        //        promise: makeQuestionInitialDataPromise,
-        //    },
-        //    {
-        //        resultKey: "modelQuestionInitialData",
-        //        promise: modelQuestionInitialDataPromise,
-        //    },
-        //    {
-        //        resultKey: "styleQuestionInitialData",
-        //        promise: styleQuestionInitialDataPromise,
-        //    },
 
        ];
 
@@ -116,19 +93,6 @@ props:{
        next((vm) => {
         vm.years = resultMap.yearQuestionInitialData;
            vm.setCmsContent(resultMap.cmsContent);
-        //    vm.$refs.VehicleQuestion.initializeComponent(
-        //        resultMap.yearQuestionInitialData
-        //    );
-        //    vm.$refs.makeQuestion.initializeComponent(
-        //        resultMap.makeQuestionInitialData
-        //    );
-       
-        //    vm.$refs.modelQuestion.initializeComponent(
-        //        resultMap.modelQuestionInitialData
-        //    );
-        //    vm.$refs.styleQuestion.initializeComponent(
-        //        resultMap.styleQuestionInitialData
-        //        );
     });
       
   },
@@ -137,18 +101,16 @@ props:{
            const parsedYearIndex = parseInt(yearIndex);
            this.mainStore.updateVehicleYear( this.years[parsedYearIndex] );
 
-           this.$refs["VehicleQuestion"].getNewValues();
+           this.$refs["VehiclemakeQuestion"].getNewValues();
 
        },
        selectedMake(make) {
            this.mainStore.updateVehicleMake( make );
-           this.$refs["VehicleQuestion"].getNewValues();
-           //this.$refs["modelQuestion"].getNewValues();           
+           this.$refs["VehiclemodelQuestion"].getNewValues();         
        },
        selectedModel(model) {
            this.mainStore.updateVehicleModel( model );
-           this.$refs["VehicleQuestion"].getNewValues();
-           //this.$refs["styleQuestion"].getNewValues(); 
+           this.$refs["VehiclestyleQuestion"].getNewValues(); 
        },
        selectedStyle(style) {
            this.mainStore.updateVehicleStyle( style );
@@ -157,7 +119,6 @@ props:{
 
    methods: {
        arePagePrerequisitesValid() {
-
            return true;
        },
        backButtonAction() {
@@ -186,16 +147,12 @@ props:{
      },
     },
    components: {
-    //    yearQuestion,
-    //    makeQuestion,
-    //    modelQuestion,
        siteHeader,
        siteSubHeader,
        vehicleBanner,
        siteFooter,
        Form,
        VehicleQuestion
-       //styleQuestion,
    },
 };
 </script>
diff --git a/src/layouts/vehicle-selection/year-question/year-question.vue b/src/layouts/vehicle-selection/year-question/year-question.vue
deleted file mode 100644
index 97ba0090..00000000
--- a/src/layouts/vehicle-selection/year-question/year-question.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-    <dropdownQuestion
-    cmsWidgetName="VehicleYearQuestion"
-    ref="yearQuestion"
-    :options="years"
-    disableAutoFill
-    inputId="yearQuestionField"
-    placeHolderText="Select an option"
-    validationRules="year-required"
-    v-model="selectedValue"
-    />
-  </template>
-  
-  <script>
-
-  import { useMainStore } from '@/store';
-  import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
-
-  import { errorMessages } from "@/constants/error-messages";
-import { required } from "@/helpers/validation-rules";
-import { defineRule } from "vee-validate";
-
-defineRule("year-required", required(errorMessages.YEAR_REQUIRED));
-
-
-  
-  export default {
-    name: "year-question",
-    data() {
-      return {
-        years : Array,
-      };
-    },
-    props: {
-      modelValue: Number,
-      cmsWidgetName: String,
-    },
-    components: {
-    dropdownQuestion
-},
-    computed: {
-      questionText(){
-        return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
-      },
-      selectedValue: {
-        get: function() {
-          return this.modelValue;
-        },
-        set: function(newValue) {
-          this.$emit("update:modelValue",newValue);
-        },
-      }
-    },
-    methods: {
-      loadInitialData() {
-        return useMainStore().getVehicleYears();
-      },
-      initializeComponent(initialData) {       
-        this.years = initialData;
-      },
-    },
-  };
-  </script>
\ No newline at end of file

From 3ac9d786d3a82cb7d2ab70edf18879bb425837d4 Mon Sep 17 00:00:00 2001
From: Sneha <sneha.a@safelite.com>
Date: Tue, 16 May 2023 15:06:32 +0530
Subject: [PATCH 3/3] SLT-418

---
 .../vehicle-question/vehicle-question.vue     | 33 ++------
 .../vehicle-selection/vehicle-selection.vue   | 78 +++++++++++--------
 2 files changed, 55 insertions(+), 56 deletions(-)

diff --git a/src/iss-components/vehicle-question/vehicle-question.vue b/src/iss-components/vehicle-question/vehicle-question.vue
index 7161173c..b599d138 100644
--- a/src/iss-components/vehicle-question/vehicle-question.vue
+++ b/src/iss-components/vehicle-question/vehicle-question.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { useMainStore } from '@/store';
+
 import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
 
 export default {
@@ -20,8 +20,7 @@ export default {
   },
   props: {
     modelValue: String,
-    updateValues: Function,
-    years:[]
+    updateValues: Function,    
   },
   components: {
   dropdownQuestion
@@ -29,36 +28,20 @@ export default {
   computed: {
     selectedValue: {
       get: function() {    
-        return this.modelValue;
+        return this.modelValue?.toString();
       },
       set: function(newValue) {
-        this.$emit("update:modelValue",newValue);
+        this.$emit("update:modelValue",newValue?.toString());
       }
     },
-    Options() {
-      if(this.years != null)
-      return this.years;
-
-          const Answers = this.values;
-          const AnswersObj ={};
-          if(Answers)
-          {
-              for (let answer of Object.values(Answers)) {
-                  if (answer) {
-                      AnswersObj[answer] = answer;
-                  }
-              }
-          }
-          return AnswersObj
+    Options() {      
+          return this.values;
       },
   },
-  methods: {
-    loadInitialData() {
-        return useMainStore().getVehicleYears();
-      },
+  methods: {  
     async getNewValues() {
       const results = await this.updateValues();
-      this.values = results?.data;
+      this.values = results?.data;      
     },
   },
 };
diff --git a/src/layouts/vehicle-selection/vehicle-selection.vue b/src/layouts/vehicle-selection/vehicle-selection.vue
index bf8e3952..736d4520 100644
--- a/src/layouts/vehicle-selection/vehicle-selection.vue
+++ b/src/layouts/vehicle-selection/vehicle-selection.vue
@@ -9,10 +9,10 @@
                        <div class="col">
                            <div class="select-car-form rounded">
                                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="mt-5" />
-                               <VehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedYear" ref="VehicleyearQuestion" cmsWidgetName="VehicleYearQuestion" :options="years" validationRules="year-required" inputId="yearQuestionField"/>
-                               <VehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedMake" ref="VehiclemakeQuestion" :updateValues="updateMakeValues" cmsWidgetName="VehicleMakeQuestion" validationRules="make-required" inputId="makeQuestionField"/>
-                               <VehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedModel" ref="VehiclemodelQuestion" cmsWidgetName="VehicleModelQuestion" :updateValues="updateModelValues" validationRules="model-required" inputId="modelQuestionField"/>
-                               <VehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedStyle" ref="VehiclestyleQuestion" cmsWidgetName="VehicleStyleQuestion" :updateValues="updateStyleValues" validationRules="style-required" inputId="styleQuestionField"/>
+                               <vehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedYear" ref="vehicleYearQuestion" cmsWidgetName="VehicleYearQuestion" :updateValues="updateYearValues" validationRules="year-required" inputId="yearQuestionField"/>
+                               <vehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedMake" ref="vehicleMakeQuestion" :updateValues="updateMakeValues" cmsWidgetName="VehicleMakeQuestion" validationRules="make-required" inputId="makeQuestionField"/>
+                               <vehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedModel" ref="vehicleModelQuestion" cmsWidgetName="VehicleModelQuestion" :updateValues="updateModelValues" validationRules="model-required" inputId="modelQuestionField"/>
+                               <vehicleQuestion class="px-4 mb-2 mt-4" v-model="selectedStyle" ref="vehicleStyleQuestion" cmsWidgetName="VehicleStyleQuestion" :updateValues="updateStyleValues" validationRules="style-required" inputId="styleQuestionField"/>
                               <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mt-5 mb-3" />
                                <siteFooter
                                  cmsWidgetName="SiteFooterWidget"
@@ -37,7 +37,8 @@ import siteHeader from "@/iss-components/site-header/site-header";
 import siteFooter from "@/iss-components/site-footer/site-footer";
 import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
 import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
-import VehicleQuestion from "@/iss-components/vehicle-question/vehicle-question";
+import vehicleQuestion from "@/iss-components/vehicle-question/vehicle-question";
+import { useMainStore } from '@/store';
 
 // Supporting files
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
@@ -61,62 +62,74 @@ export default {
            selectedYear: null,
            selectedMake: null,
            selectedModel: null,
-           selectedStyle: null,
-           years: []
+           selectedStyle: null,           
        };
    },
 props:{
     cmsWidgetName:String,
     validationRules:String,
 },
+  
+   mounted(){     
+     this.Years.getNewValues();
+   },
+
    async beforeRouteEnter(to, from, next) {
        // Call APIs
-       const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-       const yearQuestionInitialDataPromise = VehicleQuestion.methods.loadInitialData();
+       const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);       
 
        // Settle promises and get results
        const promiseResultMap = [
            {
                resultKey: "cmsContent",
                promise: cmsContentPromise,
-           },
-           {
-               resultKey: "yearQuestionInitialData",
-               promise: yearQuestionInitialDataPromise,
-           },
-
+           },        
        ];
 
        let resultMap = await settleAllPromises(promiseResultMap);
 
        // Call the "next" function to complete the transition to this page.
-       next((vm) => {
-        vm.years = resultMap.yearQuestionInitialData;
+       next((vm) => {         
            vm.setCmsContent(resultMap.cmsContent);
     });
       
   },
    watch: {
        selectedYear(yearIndex) {
-           const parsedYearIndex = parseInt(yearIndex);
-           this.mainStore.updateVehicleYear( this.years[parsedYearIndex] );
-
-           this.$refs["VehiclemakeQuestion"].getNewValues();
-
+           const parsedYearIndex = parseInt(yearIndex);           
+           this.mainStore.updateVehicleYear(this.Years.values[parsedYearIndex]);
+           this.Makes.getNewValues();
        },
-       selectedMake(make) {
-           this.mainStore.updateVehicleMake( make );
-           this.$refs["VehiclemodelQuestion"].getNewValues();         
+       selectedMake(makeIndex) {
+        const parsedMakeIndex = parseInt(makeIndex);    
+           this.mainStore.updateVehicleMake(this.Makes.values[parsedMakeIndex]);
+           this.Models.getNewValues();      
        },
-       selectedModel(model) {
-           this.mainStore.updateVehicleModel( model );
-           this.$refs["VehiclestyleQuestion"].getNewValues(); 
+       selectedModel(modelIndex) {
+        const parsedModelIndex = parseInt(modelIndex); 
+           this.mainStore.updateVehicleModel(this.Models.values[parsedModelIndex]);
+            this.Styles.getNewValues();           
        },
-       selectedStyle(style) {
-           this.mainStore.updateVehicleStyle( style );
+       selectedStyle(styleIndex) {
+        const parsedStyleIndex = parseInt(styleIndex); 
+           this.mainStore.updateVehicleStyle(this.Styles.values[parsedStyleIndex]);
        },
    },
+computed:{
+    Years(){
+        return this.$refs["vehicleYearQuestion"];
+    },
+    Makes(){
+        return this.$refs["vehicleMakeQuestion"];
+    },
+    Models(){
+        return this.$refs["vehicleModelQuestion"];
+    },
+    Styles(){
+        return this.$refs["vehicleStyleQuestion"];
+    }
 
+},
    methods: {
        arePagePrerequisitesValid() {
            return true;
@@ -135,6 +148,9 @@ props:{
                     this.$route
                 );
             });
+     },    
+     async updateYearValues() {
+        return await useMainStore().getVehicleYears();
      },
      async updateMakeValues() {
         return await this.mainStore.getVehicleMakes();
@@ -152,7 +168,7 @@ props:{
        vehicleBanner,
        siteFooter,
        Form,
-       VehicleQuestion
+       vehicleQuestion
    },
 };
 </script>