commit

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 };

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;

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

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"
   };
   

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"
   };

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: [

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()
       {