From 7711842ae45f13f2e299930864938eb02fb5709f Mon Sep 17 00:00:00 2001
From: Sneha <sneha.a@safelite.com>
Date: Wed, 10 May 2023 19:36:38 +0530
Subject: [PATCH 1/2] SSR-418

Vehicle selection
---
 src/constants/error-messages.js               |   7 +-
 .../make-question/make-question.vue           |  76 ++++++++
 .../model-question/model-question.vue         |  77 ++++++++
 .../style-question/style-question.vue         |  76 ++++++++
 .../vehicle-selection/vehicle-selection.vue   | 183 ++++++++++++++++++
 .../year-question/year-question.vue           |  63 ++++++
 src/router/router-constants/issPage-values.js |   1 +
 src/router/router-constants/routing-table.js  |  17 +-
 8 files changed, 497 insertions(+), 3 deletions(-)
 create mode 100644 src/layouts/vehicle-selection/make-question/make-question.vue
 create mode 100644 src/layouts/vehicle-selection/model-question/model-question.vue
 create mode 100644 src/layouts/vehicle-selection/style-question/style-question.vue
 create mode 100644 src/layouts/vehicle-selection/vehicle-selection.vue
 create mode 100644 src/layouts/vehicle-selection/year-question/year-question.vue

diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js
index 3fcd5848..11e1d050 100644
--- a/src/constants/error-messages.js
+++ b/src/constants/error-messages.js
@@ -37,7 +37,12 @@ const errorMessages = {
 
     POLICYHOLDER_FIRST_NAME_REQUIRED: "Please enter the policyholder first name",
     POLICYHOLDER_LAST_NAME_REQUIRED: "Please enter the policyholder last name",
-    ACKNOWLEDGEMENT_REQUIRED: "You must agree to the terms to continue"
+    ACKNOWLEDGEMENT_REQUIRED: "You must agree to the terms to continue",
+
+    YEAR_REQUIRED: "Please select your vehicle year",
+    MAKE_REQUIRED: "Please select your vehicle make",
+    MODEL_REQUIRED: "Please select your vehicle model",
+    STYLE_REQUIRED: "Please select your vehicle style"
 
 };
 
diff --git a/src/layouts/vehicle-selection/make-question/make-question.vue b/src/layouts/vehicle-selection/make-question/make-question.vue
new file mode 100644
index 00000000..1ab0e45d
--- /dev/null
+++ b/src/layouts/vehicle-selection/make-question/make-question.vue
@@ -0,0 +1,76 @@
+<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
new file mode 100644
index 00000000..e1cb2a75
--- /dev/null
+++ b/src/layouts/vehicle-selection/model-question/model-question.vue
@@ -0,0 +1,77 @@
+<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
new file mode 100644
index 00000000..b957d923
--- /dev/null
+++ b/src/layouts/vehicle-selection/style-question/style-question.vue
@@ -0,0 +1,76 @@
+<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
new file mode 100644
index 00000000..cb53c2ea
--- /dev/null
+++ b/src/layouts/vehicle-selection/vehicle-selection.vue
@@ -0,0 +1,183 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >  
+   <div class="page-container-grouped-styles position-relative">
+       <div class="fade-on-route-transition position-relative">
+           <siteHeader cmsWidgetName="SiteHeaderWidget" />
+           <div class="select-car">
+               <div class="container-fluid pb-2">
+                   <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" />
+                               <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" />
+                               <siteFooter
+                                 cmsWidgetName="SiteFooterWidget"
+                                 @ForwardClicked="forwardButtonAction"
+                                 :isForwardActionDisabled="!meta.valid"
+                                 @back-clicked="backButtonAction"
+                                 ref="siteFooter"
+                                 />
+                           </div>
+                       </div>
+                   </div>
+               </div>
+           </div>
+       </div>
+   </div>
+</Form>
+</template>
+
+<script>
+// Components
+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";
+
+// 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";
+
+export default {
+   name: "vehicle-selection",
+   mixins: [BaseFormMixin],
+   data() {
+       return {
+           selectedYear: null,
+           selectedMake: null,
+           selectedModel: null,
+           selectedStyle: null,
+           years: []
+       };
+   },
+
+   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();
+
+       // Settle promises and get results
+       const promiseResultMap = [
+           {
+               resultKey: "cmsContent",
+               promise: cmsContentPromise,
+           },
+           {
+               resultKey: "yearQuestionInitialData",
+               promise: yearQuestionInitialDataPromise,
+           },
+           {
+               resultKey: "makeQuestionInitialData",
+               promise: makeQuestionInitialDataPromise,
+           },
+           {
+               resultKey: "modelQuestionInitialData",
+               promise: modelQuestionInitialDataPromise,
+           },
+           {
+               resultKey: "styleQuestionInitialData",
+               promise: styleQuestionInitialDataPromise,
+           },
+
+       ];
+
+       let resultMap = await settleAllPromises(promiseResultMap);
+
+       // Call the "next" function to complete the transition to this page.
+       next((vm) => {
+        vm.years = resultMap.yearQuestionInitialData;
+           vm.setCmsContent(resultMap.cmsContent);
+           vm.$refs.yearQuestion.initializeComponent(
+               resultMap.yearQuestionInitialData
+           );
+           vm.$refs.makeQuestion.initializeComponent(
+               resultMap.makeQuestionInitialData
+           );
+       
+           vm.$refs.modelQuestion.initializeComponent(
+               resultMap.modelQuestionInitialData
+           );
+           vm.$refs.styleQuestion.initializeComponent(
+               resultMap.styleQuestionInitialData
+               );
+    });
+      
+  },
+   watch: {
+       selectedYear(yearIndex) {
+           const parsedYearIndex = parseInt(yearIndex);
+           this.mainStore.updateVehicleYear( this.years[parsedYearIndex] );
+
+           this.$refs["makeQuestion"].getNewValues();
+
+       },
+       selectedMake(make) {
+           this.mainStore.updateVehicleMake( make );
+           this.$refs["modelQuestion"].getNewValues();           
+       },
+       selectedModel(model) {
+           this.mainStore.updateVehicleModel( model );
+           this.$refs["styleQuestion"].getNewValues(); 
+       },
+       selectedStyle(style) {
+           this.mainStore.updateVehicleStyle( style );
+       },
+   },
+
+   methods: {
+       arePagePrerequisitesValid() {
+
+           return true;
+       },
+       backButtonAction() {
+           this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+       },
+       async forwardButtonAction() {
+         return this.navigateForward();
+     },
+
+     navigateForward() {
+        this.mainStore.setVehicle().then(() => {
+                this.$router.navigate(
+                    this.navigationScenarios.CLICKED_FORWARD,
+                    this.$route
+                );
+            });
+     },
+     async updateMakeValues() {
+        return await this.mainStore.getVehicleMakes();
+     },
+     async updateModelValues() {
+        return await this.mainStore.getVehicleModels();
+     },
+     async updateStyleValues() {
+        return await this.mainStore.getVehicleStyles();
+     }
+   },
+
+   components: {
+       yearQuestion,
+       makeQuestion,
+       modelQuestion,
+       siteHeader,
+       siteSubHeader,
+       vehicleBanner,
+       siteFooter,
+       Form,
+       styleQuestion,
+   },
+};
+</script>
diff --git a/src/layouts/vehicle-selection/year-question/year-question.vue b/src/layouts/vehicle-selection/year-question/year-question.vue
new file mode 100644
index 00000000..97ba0090
--- /dev/null
+++ b/src/layouts/vehicle-selection/year-question/year-question.vue
@@ -0,0 +1,63 @@
+<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
diff --git a/src/router/router-constants/issPage-values.js b/src/router/router-constants/issPage-values.js
index 9cbbdfbc..763994ac 100644
--- a/src/router/router-constants/issPage-values.js
+++ b/src/router/router-constants/issPage-values.js
@@ -29,6 +29,7 @@ export const issPageValues = {
     VEHICLE_PARTS: 'vehicle-parts',
     VEHICLE_STYLE: 'vehicle-style',
     VEHICLE_YEAR: 'vehicle-year',
+    VEHICLE_SELECTION: 'vehicle-selection',
     VIN_LOOKUP: 'vin-lookup',
     TPA_SUBMIT: 'tpa-submit',
     BAILOUT_PAGE: 'bailout-page',
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index e6c25ae6..d9df9162 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -4,6 +4,19 @@ import { navigationScenarios } from '@/router/router-constants/navigation-scenar
 // Get store from router/index.js instead of importing it here to get updated values
 const routingTable = function(store) {
   return [
+    {
+      issPageValue: issPageValues.VEHICLE_SELECTION,
+      maps: [
+        {
+          scenario: navigationScenarios.CLICKED_BACK,
+          destinationIssPageValue: issPageValues.POLICY_HOLDER_DETAILS
+        },
+        {
+          scenario: navigationScenarios.CLICKED_FORWARD,
+          destinationIssPageValue: issPageValues.VEHICLE_DAMAGE
+        }
+      ]
+    },
     {
       issPageValue: issPageValues.VEHICLE_YEAR,
       maps: [
@@ -61,7 +74,7 @@ const routingTable = function(store) {
       maps: [
           {
               scenario: navigationScenarios.CLICKED_BACK,
-              destinationIssPageValue: issPageValues.VEHICLE_STYLE
+              destinationIssPageValue: issPageValues.VEHICLE_SELECTION
           },
           {
               scenario: navigationScenarios.CLICKED_FORWARD_WITH_REPAIR,
@@ -389,7 +402,7 @@ const routingTable = function(store) {
         },
         {
           scenario: navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
-          destinationIssPageValue: issPageValues.VEHICLE_YEAR
+          destinationIssPageValue: issPageValues.VEHICLE_SELECTION
         },
         {
           scenario: navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED,

From ca2181c2da036a56eaacf45d13bc006c61c39056 Mon Sep 17 00:00:00 2001
From: Sneha <sneha.a@safelite.com>
Date: Wed, 10 May 2023 20:02:18 +0530
Subject: [PATCH 2/2] Update routing-table.js

---
 src/router/router-constants/routing-table.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index d9df9162..65dcf571 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -74,7 +74,7 @@ const routingTable = function(store) {
       maps: [
           {
               scenario: navigationScenarios.CLICKED_BACK,
-              destinationIssPageValue: issPageValues.VEHICLE_SELECTION
+              destinationIssPageValue: issPageValues.VEHICLE_STYLE
           },
           {
               scenario: navigationScenarios.CLICKED_FORWARD_WITH_REPAIR,
@@ -402,7 +402,7 @@ const routingTable = function(store) {
         },
         {
           scenario: navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
-          destinationIssPageValue: issPageValues.VEHICLE_SELECTION
+          destinationIssPageValue: issPageValues.VEHICLE_YEAR
         },
         {
           scenario: navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED,