Created make-question and finished vehicle-make template

src/constants/endpoints.js

@@ -15,6 +15,10 @@ const endpoints = {
     url: "/vehicle/api/v1/vehicle/years",
     method: "GET",
   },
+  GetVehicleMakes: {
+    url: "/vehicle/api/v1/vehicle/makes/",
+    method: "GET",
+  },
 };
   
 export { endpoints };

src/layouts/vehicle-make/make-question/make-question.vue

@@ -0,0 +1,59 @@
+<template>
+    <buttonQuestion
+      class="radioQuestion"
+      isOverflowScrollable
+      selectingInitiatesLoad
+      :questionText="questionText"
+      :answers="makes"
+      groupName="ChooseVehicleMake"
+      textPosition="text-start"
+      v-model="selectedValue"
+      isRequired
+    />
+  </template>
+  
+  <script>
+  import buttonQuestion from "@/common-components/button-question/button-question";
+  import { useMainStore } from '@/store';
+  
+  export default {
+    name: "make-question",
+    data() {
+      return {
+        makes: Array,
+      };
+    },
+    props: {
+      modelValue: String,
+      cmsWidgetName: String,
+    },
+    components: {
+      buttonQuestion,
+    },
+    computed: {
+      questionText(){
+        return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
+      },
+      selectedValue: {
+        get: function() {
+          return this.modelValue
+        },
+        set: function(newValue) {
+          this.$emit("update:modelValue", newValue);
+          this.mainStore.updateVehicleMake(newValue);
+          console.log(this.mainStore.order.vehicle.make)
+          this.$router.navigate(this.navigationScenarios.SELECTED_MAKE, this.$route)
+        }
+      }
+    },
+    methods: {
+      loadInitialData() {
+        return useMainStore().getVehicleMakes();
+      },
+      initializeComponent(initialData) {
+        this.makes = initialData;
+      },
+    },
+  };
+  </script>
+  

src/layouts/vehicle-make/vehicle-make.vue

@@ -6,11 +6,11 @@
           <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true"/>
           <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
           <div class="fade-on-route-transition">
-            <yearQuestion 
+            <makeQuestion 
               class="fade-on-route-transition"
-              v-model="selectedYear" 
-              ref="yearQuestion" 
-              cmsWidgetName="VehicleYearQuestion" 
+              v-model="selectedMake" 
+              ref="makeQuestion" 
+              cmsWidgetName="VehicleMakeQuestion" 
             />
           </div>
         </div>
@@ -20,7 +20,7 @@
 
 <script>
       // Components
-    import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
+    import makeQuestion from "@/layouts/vehicle-make/make-question/make-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";
@@ -33,28 +33,14 @@
         name: 'vehicle-make',
         data() {
             return {
-                selectedYear: null,
+                selectedMake: null,
             };
         },
-        methods:
-        {
-            updateVehicleYear(item) 
-            {
-                useMainStore().updateVehicleYear(item);
-            }
-        },
-        computed:
-        {
-            returnVehicleYear()
-            {
-                return useMainStore().order.vehicle.year;
-            }
-        },
 
         async beforeRouteEnter(to, from, next) {            
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-        const yearQuestionInitialDataPromise = yearQuestion.methods.loadInitialData();
+        const makeQuestionInitialDataPromise = makeQuestion.methods.loadInitialData();
     
         // Settle promises and get results
         const promiseResultMap = [
@@ -63,25 +49,24 @@
             promise: cmsContentPromise,
             },
             {
-            resultKey: "yearQuestionInitialData",
-            promise: yearQuestionInitialDataPromise,
+            resultKey: "makeQuestionInitialData",
+            promise: makeQuestionInitialDataPromise,
             },
         ];
     
         let resultMap = await settleAllPromises(promiseResultMap);
-        console.log(resultMap)
     
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
-            vm.$refs.yearQuestion.initializeComponent(
-                resultMap.yearQuestionInitialData
+            vm.$refs.makeQuestion.initializeComponent(
+                resultMap.makeQuestionInitialData
             );
         });
         },
 
         components: {
-            yearQuestion,
+            makeQuestion,
             siteHeader,
             siteSubHeader,
             vehicleBanner,

src/layouts/vehicle-year/year-question/year-question.vue

@@ -40,6 +40,8 @@
         },
         set: function(newValue) {
           this.$emit("update:modelValue", newValue);
+          this.mainStore.updateVehicleYear(newValue);
+          this.$router.navigate(this.navigationScenarios.SELECTED_YEAR, this.$route)
         }
       }
     },

src/router/router-constants/navigation-scenarios.js

@@ -5,7 +5,7 @@ const navigationScenarios = {
   
     // YMMS
     SELECTED_YEAR: "SELECTED_YEAR",
-
+    SELECTED_MAKE: "SELECTED_MAKE",
     // TESTING
     CLICKED_TEST: "CLICKED_TEST"
   };

src/router/router-constants/routing-table.js

@@ -11,6 +11,23 @@ const routingTable = function(store) {
           scenario: navigationScenarios.CLICKED_BACK,
           destinationIssPageValue: issPageValues.WELCOME_PAGE
         },
+        {
+          scenario: navigationScenarios.SELECTED_YEAR,
+          destinationIssPageValue: issPageValues.VEHICLE_MAKE
+        },
+      ],
+    },
+    {
+      issPageValue: issPageValues.VEHICLE_MAKE,
+      maps: [
+        {
+          scenario: navigationScenarios.CLICKED_BACK,
+          destinationIssPageValue: issPageValues.VEHICLE_YEAR
+        },
+        {
+          scenario: navigationScenarios.SELECTED_MAKE,
+          destinationIssPageValue: issPageValues.WELCOME_PAGE
+        },
       ],
     },
     {
@@ -18,7 +35,7 @@ const routingTable = function(store) {
       maps: [
         {
           scenario: navigationScenarios.CLICKED_FORWARD,
-          destinationIssPageValue: issPageValues.VEHICLE_YEAR,
+          destinationIssPageValue: issPageValues.VEHICLE_MAKE,
         },
         {
           scenario: navigationScenarios.CLICKED_TEST,
@@ -26,6 +43,7 @@ const routingTable = function(store) {
         }
       ]
     },
+    
   ];
 };
 

src/store/index.js

@@ -83,6 +83,14 @@ export const useMainStore = defineStore({
         });
       },
 
+      getVehicleMakes() {
+        return globalMethods.callHttpClient({
+          method: endpoints.GetVehicleMakes.method,
+          endpoint: endpoints.GetVehicleMakes.url + this.order.vehicle.year,
+          payload: {},
+        });
+      },
+
       // Vehicle API Actions
       updateVehicleYear(year) 
       {
@@ -91,6 +99,13 @@ export const useMainStore = defineStore({
         }
       },
 
+      updateVehicleMake(make) 
+      {
+        if (this.order.vehicle.make !== make) {
+          this.order.vehicle.make = make;
+        }
+      },
+
       // populate initial state
       populateInitialState()
       {