Creating vehicle styles

src/constants/store-mutations.js

@@ -2,6 +2,7 @@ const storeMutations = {
   UPDATE_YEAR: "updateYear",
   UPDATE_MAKE: "updateMake",
   UPDATE_MODEL: "updateModel",
+  UPDATE_STYLE: "updateStyle",
 };
 
 export { storeMutations };

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

@@ -0,0 +1,46 @@
+<template>
+<buttonQuestion class="radioQuestion"
+    :questionText="questionText"
+    :answers="styles"
+    groupName="Choose Vehicle Style"
+    v-model="selectedStyle"
+  />
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+// Supporting files
+import store from "@/store";
+import { storeActions } from "@/constants/store-actions.js";
+
+export default {
+  name: "style-question",
+  data() {
+    return {
+      questionText: null,
+      selectedStyle: null,
+      styles: Array,
+    }
+  },
+  props: {
+    modelValue: String,
+  },
+  components: {
+    buttonQuestion,
+  },
+  methods: {
+    loadInitialData() {
+      return store.dispatch(storeActions.GET_VEHICLE_STYLES, {year: store.getters.vehicle.year, make: encodeURIComponent(store.getters.vehicle.make), model: encodeURIComponent(store.getters.vehicle.model)});
+    },
+    initializeComponent(cmsContent, initialData) {
+      this.questionText = cmsContent.QuestionText;
+      this.styles = initialData;
+    }
+  },
+  watch: {
+    selectedStyle(val) {
+      this.$emit("update:modelValue", val);
+    }
+  },
+};
+</script>

src/layouts/vehicle-style/vehicle-style.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="container-fluid shadow rounded-3 p-0">
+    <funnelHeader :imageSrc="siteHeaderWidget.LogoImage" />
+    <div class="select-car">
+      <div class="select-car-form rounded text-center">
+        <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
+        <funnelSubHeader 
+          :text="pageHeaderWidgets.HeaderText"
+          :hasBackButton="true"
+          backButtonAccessibleText="Change Vehicle Model"
+          :backButtonAction="backButtonAction"
+          class="Header"
+        />
+        <styleQuestion v-model="selectedStyle" ref="styleQuestion" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// Components
+import styleQuestion from "@/layouts/vehicle-style/style-question/style-question";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-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-style",
+  data() {
+    return {
+      pageHeaderWidgets: {},
+      siteHeaderWidget: {},
+      vehicleBannerWidget: {},
+      selectedStyle: null,
+    };
+  },
+  computed: {},
+
+  beforeRouteEnter(to, from, next) {
+    
+    // Call APIs
+    const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+    const styleQuestionInitialDataPromise = styleQuestion.methods.loadInitialData();
+
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+      {
+        resultKey: "styleQuestionInitialData",
+        promise: styleQuestionInitialDataPromise,
+      },
+    ];
+    settleAllPromises(promiseResultMap).then((resultMap) => {
+      // Call the "next" function to complete the transition to this page.
+      next((vm) => {
+        vm.pageHeaderWidgets = resultMap.cmsContent.PageHeaderWidget[0];
+        vm.siteHeaderWidget = resultMap.cmsContent.SiteHeaderWidget[0];
+        vm.vehicleBannerWidget = resultMap.cmsContent.VehicleBannerWidget[0];
+        vm.$refs.styleQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.styleQuestionInitialData);
+      });
+    });
+  },
+
+  methods: {
+    backButtonAction: function () {
+      // route to move backwards
+      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    }
+  },
+
+  watch: {
+    selectedStyle(style) {
+      this.$store.commit(this.storeMutations.UPDATE_STYLE, style);
+      this.$router.navigate(this.navigationScenarios.SELECTED_STYLE, this.$route);
+    }
+  },
+
+  components: {
+    styleQuestion,
+    funnelHeader,
+    funnelSubHeader,
+    vehicleBanner,
+  },
+};
+</script>

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

@@ -2,6 +2,7 @@ const navigationScenarios = {
   SELECTED_YEAR: "SELECTED_YEAR",
   SELECTED_MODEL: "SELECTED_MODEL",
   SELECTED_MAKE: "SELECTED_MAKE",
+  SELECTED_STYLE: "SELECTED_STYLE",
   CLICKED_BACK: "CLICKED_BACK",
 };
 

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

@@ -37,6 +37,19 @@ const routingTable = [
       }
     ],
   },
+  {
+    fmgPageValue: fmgPageValues.VEHICLE_STYLE,
+    maps: [
+      {
+        scenario: navigationScenarios.SELECTED_STYLE,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE,
+      },
+      {
+        scenario: navigationScenarios.CLICKED_BACK,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_MODEL,
+      }
+    ],
+  },
 ];
 
 export { routingTable };

src/store/index.js

@@ -70,6 +70,9 @@ export default createStore({
     updateModel(state, model) {
       state.order.vehicle.model = model;
     },
+    updateStyle(state, style) {
+      state.order.vehicle.style = style;
+    },
   },
   getters: {
     vehicle: state => state.order.vehicle