Merge pull request #27 from Safelite/feature/SSR-96

Feature/ssr 96

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/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 = "";

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

@@ -0,0 +1,56 @@
+<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";
+  import { useMainStore } from '@/store';
+  
+  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 useMainStore().getVehicleModels();
+      },
+      initializeComponent(initialData) {
+        this.models = initialData;
+      },
+    },
+  };
+  </script>
+  

src/layouts/vehicle-model/vehicle-model.vue

@@ -0,0 +1,103 @@
+<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"
+            backButtonAccessibleText = "Change vehicle make"
+          />
+          <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
+  import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+  import { settleAllPromises } from "@/helpers/layout-helper";
+  
+  export default {
+    name: "vehicle-model",
+    data() {
+      return {
+        selectedModel: null,
+      };
+    },
+    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
+            );
+        },
+        arePagePrerequisitesValid() 
+        {
+            if(this.mainStore.order.vehicle.make){
+                return true;
+            }
+            return false;
+        },
+    },
+  
+    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.SELECTED_MODEL,
+          destinationUrl: "https://www.google.com"
+        }
+      ]
+    },
     {
       issPageValue: issPageValues.WELCOME_PAGE,
       maps: [

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";
@@ -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()
       {