started vehicle-make layout and fixed bug in cms-content-helper

src/common-components/vehicle-banner/vehicle-banner.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-
+import { useMainStore } from "@/store";
 export default {
   name: "vehicle-banner",
   props: {
@@ -25,7 +25,7 @@ export default {
           return this.genericVehicleImage;  
         }
   
-        const imageUrl = this.mainStore.order.vehicle.imageUrl;
+        const imageUrl = useMainStore().order.vehicle.imageUrl;
         if (!imageUrl || imageUrl === "NULL"){
           return this.getUnmatchedVehicleIcon();
         }
@@ -53,7 +53,7 @@ export default {
   },
   methods: {
     getUnmatchedVehicleIcon(){
-       switch(this.mainStore.order.vehicle.category){
+       switch(useMainStore().order.vehicle.category){
           case this.vehicleCategories.CAR:
             return this.carUnmatchedVehicleIcon;
           case this.vehicleCategories.SUV:

src/helpers/cms-content-helper.js

@@ -96,7 +96,7 @@ function mapStringToState(str) {
   
     for (const match of globalStateMatches) {
       // Reset store state for each match.
-      let storeState = useMainStore().state;
+      let storeState = useMainStore();
   
       for (const s of match[2].split(".")) {
         if (storeState[s] != undefined) {

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

@@ -1,28 +1,90 @@
 <template>
-    <div>
-        <input type="text" v-model="year"/>
-        <span> Vehicle Make Placeholder </span>
-        <span>{{returnVehicleYear}}</span> 
-        <button @click="updateVehicleYear(year)">Add</button>
+    <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="true"/>
+          <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+          <div class="fade-on-route-transition">
+            <yearQuestion 
+              class="fade-on-route-transition"
+              v-model="selectedYear" 
+              ref="yearQuestion" 
+              cmsWidgetName="VehicleYearQuestion" 
+            />
+          </div>
+        </div>
+      </div>
     </div>
 </template>
 
 <script>
+      // Components
+    import yearQuestion from "@/layouts/vehicle-year/year-question/year-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
+    import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+    import { settleAllPromises } from "@/helpers/layout-helper";
+
     export default {
         name: 'vehicle-make',
+        data() {
+            return {
+                selectedYear: null,
+            };
+        },
         methods:
         {
             updateVehicleYear(item) 
             {
-               this.mainStore.updateVehicleYear(item);
+                useMainStore().updateVehicleYear(item);
             }
         },
         computed:
         {
             returnVehicleYear()
             {
-               return this.mainStore.order.vehicle.year;
+                return useMainStore().order.vehicle.year;
             }
-        }
+        },
+
+        async beforeRouteEnter(to, from, next) {            
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+        const yearQuestionInitialDataPromise = yearQuestion.methods.loadInitialData();
+    
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+            resultKey: "cmsContent",
+            promise: cmsContentPromise,
+            },
+            {
+            resultKey: "yearQuestionInitialData",
+            promise: yearQuestionInitialDataPromise,
+            },
+        ];
+    
+        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
+            );
+        });
+        },
+
+        components: {
+            yearQuestion,
+            siteHeader,
+            siteSubHeader,
+            vehicleBanner,
+        },
     }
 </script>

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

@@ -3,7 +3,7 @@
       <siteHeader cmsWidgetName="SiteHeaderWidget" />
       <div class="select-car">
         <div class="select-car-form rounded text-center">
-          <vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage="true"/>
+          <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true"/>
           <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
           <div class="fade-on-route-transition">
             <yearQuestion