From 934248dbce0998232cf800f0faff190fb6fcc216 Mon Sep 17 00:00:00 2001
From: Jason Wheeler <jason.wheeler@safelite.com>
Date: Thu, 27 Oct 2022 16:58:59 -0400
Subject: [PATCH] started vehicle-make layout and fixed bug in
 cms-content-helper

---
 .../vehicle-banner/vehicle-banner.vue         |  6 +-
 src/helpers/cms-content-helper.js             |  2 +-
 src/layouts/vehicle-make/vehicle-make.vue     | 78 +++++++++++++++++--
 src/layouts/vehicle-year/vehicle-year.vue     |  2 +-
 4 files changed, 75 insertions(+), 13 deletions(-)

diff --git a/src/common-components/vehicle-banner/vehicle-banner.vue b/src/common-components/vehicle-banner/vehicle-banner.vue
index 534313df..9fffd974 100644
--- a/src/common-components/vehicle-banner/vehicle-banner.vue
+++ b/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:
diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js
index 5dd0c87f..45f7943c 100644
--- a/src/helpers/cms-content-helper.js
+++ b/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) {
diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue
index b886840f..8b1785e1 100644
--- a/src/layouts/vehicle-make/vehicle-make.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index 676c1e33..86f06484 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/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