From 882e8c011094349247ce49277b51f17d52e31989 Mon Sep 17 00:00:00 2001
From: Kulbhushan Kaushik <kulbhushan.kaushik@safelite.com>
Date: Tue, 1 Nov 2022 12:58:01 -0400
Subject: [PATCH 1/5] commit

---
 .../model-question/model-question.vue         | 62 +++++++++++++++++++
 src/layouts/vehicle-model/vehicle-model.vue   |  0
 2 files changed, 62 insertions(+)
 create mode 100644 src/layouts/vehicle-model/model-question/model-question.vue
 create mode 100644 src/layouts/vehicle-model/vehicle-model.vue

diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue
new file mode 100644
index 00000000..5259e0fd
--- /dev/null
+++ b/src/layouts/vehicle-model/model-question/model-question.vue
@@ -0,0 +1,62 @@
+<template>
+    <buttonQuestion
+      class="radioQuestion"
+      isOverflowScrollable
+      selectingInitiatesLoad
+      :questionText="questionText"
+      :answers="models"
+      groupName="ChooseVehicleModel"
+      textPosition="text-start"
+      v-model="selectedValue"
+      isRequired
+    />
+  </template>
+  
+  <script>
+  import buttonQuestion from "@/common-components/button-question/button-question";
+  // Supporting files
+  import store from "@/store";
+  import { storeActions } from "@/constants/store-actions.js";
+  import baseMixin from "@/mixins/base-mixin.js";
+  
+  export default {
+    name: "model-question",
+    data() {
+      return {
+        models: Array,
+      };
+    },
+    props: {
+      modelValue: String,
+      cmsWidgetName: String,
+    },
+    computed: {
+      questionText(){
+        return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
+      },
+      selectedValue: {
+        get: function() {
+          return this.modelValue
+        },
+        set: function(newValue) {
+          this.$emit("update:modelValue", newValue);
+        }
+      }
+    },
+    components: {
+      buttonQuestion,
+    },
+    methods: {
+      loadInitialData() {
+        return baseMixin.methods.dispatchStoreAction(
+          storeActions.GET_VEHICLE_MODELS,
+          { year: store.getters.vehicle.year, make: store.getters.vehicle.make }
+        );
+      },
+      initializeComponent(initialData) {
+        this.models = initialData;
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue
new file mode 100644
index 00000000..e69de29b

From f74ee61231531d536367a3dbda91888d54e8d352 Mon Sep 17 00:00:00 2001
From: Kulbhushan Kaushik <kulbhushan.kaushik@safelite.com>
Date: Tue, 1 Nov 2022 15:09:43 -0400
Subject: [PATCH 2/5] commit

---
 src/constants/endpoints.js                    |  4 +
 .../model-question/model-question.vue         | 10 +-
 src/layouts/vehicle-model/vehicle-model.vue   | 97 +++++++++++++++++++
 src/router/router-constants/issPage-values.js |  1 +
 .../router-constants/navigation-scenarios.js  |  2 +
 src/router/router-constants/routing-table.js  | 15 ++-
 src/store/index.js                            | 15 +++
 7 files changed, 135 insertions(+), 9 deletions(-)

diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js
index 89e1f1fc..642fc752 100644
--- a/src/constants/endpoints.js
+++ b/src/constants/endpoints.js
@@ -19,6 +19,10 @@ const endpoints = {
     url: "/vehicle/api/v1/vehicle/makes/",
     method: "GET",
   },
+  GetVehicleModels: {
+    url: "/vehicle/api/v1/vehicle/Models",
+    method: "GET",
+  }
 };
   
 export { endpoints };
diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue
index 5259e0fd..064007e0 100644
--- a/src/layouts/vehicle-model/model-question/model-question.vue
+++ b/src/layouts/vehicle-model/model-question/model-question.vue
@@ -14,10 +14,7 @@
   
   <script>
   import buttonQuestion from "@/common-components/button-question/button-question";
-  // Supporting files
-  import store from "@/store";
-  import { storeActions } from "@/constants/store-actions.js";
-  import baseMixin from "@/mixins/base-mixin.js";
+  import { useMainStore } from '@/store';
   
   export default {
     name: "model-question",
@@ -48,10 +45,7 @@
     },
     methods: {
       loadInitialData() {
-        return baseMixin.methods.dispatchStoreAction(
-          storeActions.GET_VEHICLE_MODELS,
-          { year: store.getters.vehicle.year, make: store.getters.vehicle.make }
-        );
+        return useMainStore().getVehicleModels();
       },
       initializeComponent(initialData) {
         this.models = initialData;
diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue
index e69de29b..6640f9cc 100644
--- a/src/layouts/vehicle-model/vehicle-model.vue
+++ b/src/layouts/vehicle-model/vehicle-model.vue
@@ -0,0 +1,97 @@
+<template>
+    <div class="page-container-grouped-styles">
+      <siteHeader cmsWidgetName="SiteHeaderWidget" />
+      <div class="select-car">
+        <div class="select-car-form rounded text-center">
+          <vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
+          <siteSubHeader
+            cmsWidgetName="SiteSubHeaderWidget"
+            :hasBackButton="true"
+            @click-event="backButtonAction"
+          />
+          <div class="fade-on-route-transition">
+            <modelQuestion v-model="selectedModel" ref="modelQuestion" cmsWidgetName="VehicleModelQuestion" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  // Components
+  import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
+  import siteHeader from "@/common-components/site-header/site-header";
+  import siteSubHeader from "@/common-components/site-sub-header/site-sub-header";
+  import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+  // Supporting files
+      // Supporting files
+  import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+  import { settleAllPromises } from "@/helpers/layout-helper";
+  
+  export default {
+    name: "vehicle-model",
+    data() {
+      return {
+        selectedModel: null,
+      };
+    },
+    computed: {},
+  
+    async beforeRouteEnter(to, from, next) {
+      // Call APIs
+      const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+      const modelQuestionInitialDataPromise =
+        modelQuestion.methods.loadInitialData();
+  
+      // Settle promises and get results
+      const promiseResultMap = [
+        {
+          resultKey: "cmsContent",
+          promise: cmsContentPromise,
+        },
+        {
+          resultKey: "modelQuestionInitialData",
+          promise: modelQuestionInitialDataPromise,
+        },
+      ];
+  
+      const resultMap = await settleAllPromises(promiseResultMap);
+  
+      // Call the "next" function to complete the transition to this page.
+      next((vm) => {
+        vm.setCmsContent(resultMap.cmsContent);
+        vm.$refs.modelQuestion.initializeComponent(
+          resultMap.modelQuestionInitialData
+        );
+      });
+    },
+  
+    methods: {
+      backButtonAction() {
+        // route to move backwards
+        this.$router.navigate(
+          this.navigationScenarios.CLICKED_BACK,
+          this.$route
+        );
+      },
+    },
+  
+    watch: {
+      selectedModel(model) {
+        this.mainStore.updateVehicleYear(model);
+        this.$router.navigate(
+          this.navigationScenarios.SELECTED_MODEL,
+          this.$route
+        );
+      },
+    },
+  
+    components: {
+      modelQuestion,
+      siteHeader,
+      siteSubHeader,
+      vehicleBanner,
+    },
+  };
+  </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 8bdc935c..1fe10c52 100644
--- a/src/router/router-constants/issPage-values.js
+++ b/src/router/router-constants/issPage-values.js
@@ -3,5 +3,6 @@ export const issPageValues = {
     WELCOME_PAGE: "welcome-page",
     VEHICLE_MAKE: "vehicle-make",
     VEHICLE_YEAR: "vehicle-year",
+    VEHICLE_MODEL: "vehicle-model"
   };
   
\ No newline at end of file
diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js
index bcfd87d4..01a1d7a8 100644
--- a/src/router/router-constants/navigation-scenarios.js
+++ b/src/router/router-constants/navigation-scenarios.js
@@ -6,6 +6,8 @@ const navigationScenarios = {
     // YMMS
     SELECTED_YEAR: "SELECTED_YEAR",
     SELECTED_MAKE: "SELECTED_MAKE",
+    SELECTED_MODEL: "SELECTED_MODEL",
+    
     // TESTING
     CLICKED_TEST: "CLICKED_TEST"
   };
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index 5b56837d..1f5a87d5 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -26,10 +26,23 @@ const routingTable = function(store) {
         },
         {
           scenario: navigationScenarios.SELECTED_MAKE,
-          destinationIssPageValue: issPageValues.WELCOME_PAGE
+          destinationIssPageValue: issPageValues.VEHICLE_MODEL
         },
       ],
     },
+    {
+      issPageValue: issPageValues.VEHICLE_MODEL,
+      maps: [
+        {
+          scenario: navigationScenarios.CLICKED_BACK,
+          destinationIssPageValue: issPageValues.VEHICLE_MAKE,
+        },
+        {
+          scenario: navigationScenarios.SELC,
+          destinationUrl: "https://www.google.com"
+        }
+      ]
+    },
     {
       issPageValue: issPageValues.WELCOME_PAGE,
       maps: [
diff --git a/src/store/index.js b/src/store/index.js
index 7d3dca5b..a9c9acd8 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -91,6 +91,14 @@ export const useMainStore = defineStore({
         });
       },
 
+      getVehicleModels() {
+        return globalMethods.callHttpClient({
+          method: endpoints.GetVehicleModels.method,
+          endpoint: endpoints.GetVehicleModels.url + this.order.vehicle.year + this.order.vehicle.make,
+          payload: {},
+        });
+      },
+
       // Vehicle API Actions
       updateVehicleYear(year) 
       {
@@ -106,6 +114,13 @@ export const useMainStore = defineStore({
         }
       },
 
+      updateVehicleModel(model) 
+      {
+        if (this.order.vehicle.model !== model) {
+          this.order.vehicle.model = model;
+        }
+      },
+
       // populate initial state
       populateInitialState()
       {

From 75eef92707cb5f674725dc74720435bc79964bdf Mon Sep 17 00:00:00 2001
From: Kulbhushan Kaushik <kulbhushan.kaushik@safelite.com>
Date: Wed, 2 Nov 2022 09:01:53 -0400
Subject: [PATCH 3/5] commit

---
 src/layouts/vehicle-model/vehicle-model.vue  | 22 +++++++++++++-------
 src/router/router-constants/routing-table.js |  2 +-
 src/store/index.js                           |  4 ++--
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue
index 6640f9cc..374909d3 100644
--- a/src/layouts/vehicle-model/vehicle-model.vue
+++ b/src/layouts/vehicle-model/vehicle-model.vue
@@ -8,6 +8,7 @@
             cmsWidgetName="SiteSubHeaderWidget"
             :hasBackButton="true"
             @click-event="backButtonAction"
+            backButtonAccessibleText = "Change vehicle make"
           />
           <div class="fade-on-route-transition">
             <modelQuestion v-model="selectedModel" ref="modelQuestion" cmsWidgetName="VehicleModelQuestion" />
@@ -35,8 +36,6 @@
         selectedModel: null,
       };
     },
-    computed: {},
-  
     async beforeRouteEnter(to, from, next) {
       // Call APIs
       const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
@@ -67,13 +66,20 @@
     },
   
     methods: {
-      backButtonAction() {
+        backButtonAction() {
         // route to move backwards
-        this.$router.navigate(
-          this.navigationScenarios.CLICKED_BACK,
-          this.$route
-        );
-      },
+            this.$router.navigate(
+            this.navigationScenarios.CLICKED_BACK,
+            this.$route
+            );
+        },
+        arePagePrerequisitesValid() 
+        {
+            if(this.mainStore.order.vehicle.make){
+                return true;
+            }
+            return false;
+        },
     },
   
     watch: {
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index 67c7c284..106a103f 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -38,7 +38,7 @@ const routingTable = function(store) {
           destinationIssPageValue: issPageValues.VEHICLE_MAKE,
         },
         {
-          scenario: navigationScenarios.SELC,
+          scenario: navigationScenarios.SELECTED_MODEL,
           destinationUrl: "https://www.google.com"
         }
       ]
diff --git a/src/store/index.js b/src/store/index.js
index a9c9acd8..769a36fd 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,4 +1,4 @@
-import { defineStore, createPinia } from "pinia";
+import { defineStore } from "pinia";
 import { endpoints } from "@/constants/endpoints.js";
 import globalMethods from "@/global-methods";
 import { applicationConfig } from "@/constants/application-config";
@@ -94,7 +94,7 @@ export const useMainStore = defineStore({
       getVehicleModels() {
         return globalMethods.callHttpClient({
           method: endpoints.GetVehicleModels.method,
-          endpoint: endpoints.GetVehicleModels.url + this.order.vehicle.year + this.order.vehicle.make,
+          endpoint: `${endpoints.GetVehicleModels.url}/${this.order.vehicle.year}/${this.order.vehicle.make}`,
           payload: {},
         });
       },

From a8e44a6fa9de89133fc2fa3eabb48a4d7db69461 Mon Sep 17 00:00:00 2001
From: Kulbhushan Kaushik <kulbhushan.kaushik@safelite.com>
Date: Wed, 2 Nov 2022 09:16:03 -0400
Subject: [PATCH 4/5] commit

---
 src/helpers/cms-content-helper.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js
index 45f7943c..356ffb76 100644
--- a/src/helpers/cms-content-helper.js
+++ b/src/helpers/cms-content-helper.js
@@ -89,7 +89,7 @@ function mapStringToState(str) {
     const regexMatches = [...str.matchAll(regexExp)];
     const globalStateMatches = regexMatches.filter(match => {
       return match[1] === dynamicStrings.GLOBAL_STATE;
-    })
+    });
   
     // Our final string value that will be built from the matches.
     let stringBuilder = "";

From d4adc7910d8d6b8d774d37bdb95508ab3e412947 Mon Sep 17 00:00:00 2001
From: Kulbhushan Kaushik <kulbhushan.kaushik@safelite.com>
Date: Wed, 2 Nov 2022 09:30:38 -0400
Subject: [PATCH 5/5] commit

---
 src/layouts/vehicle-model/vehicle-model.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue
index 374909d3..76bb35b2 100644
--- a/src/layouts/vehicle-model/vehicle-model.vue
+++ b/src/layouts/vehicle-model/vehicle-model.vue
@@ -24,8 +24,8 @@
   import siteHeader from "@/common-components/site-header/site-header";
   import siteSubHeader from "@/common-components/site-sub-header/site-sub-header";
   import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+  
   // Supporting files
-      // Supporting files
   import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
   import { settleAllPromises } from "@/helpers/layout-helper";