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] 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>