page functions

src/common-components/site-sub-header/site-sub-header.vue

@@ -45,6 +45,7 @@ import buttonBack from "@/common-components/site-sub-header/button-back/button-b
 <style lang="scss" scoped>
 h5 {
   line-height: 32px;
+  max-width: 300px;
 
   button {
     color: inherit;

src/constants/endpoints.js

@@ -20,7 +20,11 @@ const endpoints = {
     method: "GET",
   },
   GetVehicleModels: {
-    url: "/vehicle/api/v1/vehicle/Models",
+    url: "/vehicle/api/v1/vehicle/models",
+    method: "GET",
+  },
+  GetVehicleStyles: {
+    url: "/vehicle/api/v1/vehicle/styles",
     method: "GET",
   }
 };

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

@@ -84,7 +84,7 @@
   
     watch: {
       selectedModel(model) {
-        this.mainStore.updateVehicleYear(model);
+        this.mainStore.updateVehicleModel(model);
         this.$router.navigate(
           this.navigationScenarios.SELECTED_MODEL,
           this.$route

src/layouts/vehicle-style/style-question/style-question.spec.js

@@ -0,0 +1,79 @@
+import styleQuestion from "@/layouts/vehicle-style/style-question/style-question";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+jest.mock(
+    "@/store",
+    () => {
+        return {};
+    },
+    { virtual: true }
+);
+
+describe("style-question.vue", () => {
+    test("Selected style is emitted upon selection.", async () => {
+        //Arrange
+        const { wrapper } = setupMocks({ modelValueProp: "2 Door" });
+        const styleToSelect = "4 Door";
+
+        //Act
+        wrapper.setValue({ selectedStyle: styleToSelect });
+        await wrapper.vm.$nextTick();
+
+        //Assert
+        expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ selectedStyle: "4 Door" }]);
+    });
+});
+
+describe("style-question.vue", () => {
+    test("Data from store api are used as radio question answers.", async () => {
+        //Arrange
+        const { wrapper, cmsContent } = setupMocks({
+            dataFromStoreApi: ["2 Door", "4 Door"],
+        });
+
+        //Act
+        const initialData = styleQuestion.methods.loadInitialData.call(wrapper.vm);
+        styleQuestion.methods.initializeComponent.call(wrapper.vm, initialData);
+
+        //Assert
+        const buttonQuestionComponent = await wrapper.findComponent({
+            name: "buttonQuestion",
+        });
+        expect(buttonQuestionComponent.attributes("answers")).toBe("2 Door,4 Door");
+    });
+});
+
+function setupMocks({
+    modelValueProp = "1900",
+    cmsQuestionText = "CMS text goes here",
+    dataFromStoreApi = [],
+}) {
+    //Mock store
+    store.dispatch = jest.fn(() => dataFromStoreApi);
+    store.getters = { vehicle: { year: 2019, make: "honda", model: "civc" } };
+    const mountOptions = getMountOptions({
+        store: {
+            dispatch: store.dispatch,
+            getters: store.getters,
+        },
+    });
+
+    //Mock props
+    const mockMixin = {
+        methods: {
+            getCmsContent: jest.fn(),
+        },
+    };
+    mountOptions.propsData = {
+        modelValue: modelValueProp,
+    };
+    mountOptions.mixins = [mockMixin];
+    const wrapper = shallowMount(styleQuestion, mountOptions);
+
+    //Mock CMS content
+    const cmsContent = {
+        QuestionText: cmsQuestionText,
+    };
+    return { wrapper, cmsContent };
+}

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

@@ -0,0 +1,54 @@
+<template>
+    <buttonQuestion
+        class="radioQuestion"
+        isOverflowScrollable
+        selectingInitiatesLoad
+        :questionText="questionText"
+        :answers="styles"
+        groupName="ChooseVehicleStyle"
+        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: "style-question",
+    data() {
+        return {
+            styles: [],
+        };
+    },
+    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().getVehicleStyles();
+        },
+        initializeComponent(initialData) {
+            this.styles = initialData;
+        },
+    },
+};
+</script>

src/layouts/vehicle-style/vehicle-style.spec.js

@@ -0,0 +1,256 @@
+// Components
+import vehicleStyle from "@/layouts/vehicle-style/vehicle-style.vue";
+import styleQuestion from "@/layouts/vehicle-style/style-question/style-question";
+
+// Supporting files
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import { nextTick } from "vue";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { storeActions } from "@/constants/store-actions";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import baseMixin from "@/mixins/base-mixin.js";
+import router from "@/router";
+import store from "@/store";
+import { storeMutations } from "@/constants/store-mutations";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+    settleAllPromises: jest.fn(),
+}));
+
+// Mock fetchCmsContentForPage
+jest.mock("@/helpers/cms-content-helper", () => ({
+    fetchCmsContentForPage: jest.fn(),
+}));
+
+// Mock fetchCmsContentForPage
+jest.mock("@/router", () => ({
+    overrideNavigation: jest.fn(),
+}));
+
+describe("vehicle-style.vue", () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    test("Style question component is initized with api data", async (done) => {
+        //Arrange
+        const styleQuestionInitialData = ["2 Door", "4 Door"];
+        const { wrapper, apiPromise } = setupMocks({
+            styleQuestionInitialData: styleQuestionInitialData,
+        });
+
+        //Act
+        vehicleStyle.beforeRouteEnter.call(
+            wrapper.vm,
+            { query: { fmgPage: "vehicle-style" } },
+            undefined,
+            (c) => c(wrapper.vm)
+        );
+
+        //Assert
+        apiPromise.finally(() => {
+            expect(styleQuestion.methods.initializeComponent).toHaveBeenCalledWith(
+                styleQuestionInitialData
+            );
+            done();
+        });
+    });
+
+    test("BackButtonAction triggers a router.navigateWithoutSaving change", async (done) => {
+        //Arrange
+        const { wrapper, apiPromise } = setupMocks({
+            pageHeaderWidgetHeaderText: "Select a style to get started",
+            mountOptionsMockData: {
+                router: {
+                    navigate: jest.fn(),
+                    navigateWithSaving: jest.fn(),
+                    navigateWithoutSaving: jest.fn(),
+                },
+            },
+        });
+
+        //Act
+        vehicleStyle.beforeRouteEnter.call(
+            wrapper.vm,
+            { query: { fmgPage: "vehicle-style" } },
+            undefined,
+            (c) => c(wrapper.vm)
+        );
+        wrapper.vm.backButtonAction();
+        await nextTick();
+
+        //Assert
+        apiPromise.finally(() => {
+            expect(wrapper.vm.$router.navigateWithoutSaving).toHaveBeenCalled();
+            done();
+        });
+    });
+
+    test("setVehicle triggers a dispatchStoreAction commit", async (done) => {
+        //Arrange
+        const { wrapper, apiPromise } = setupMocks({
+            pageHeaderWidgetHeaderText: "Select a style to get started",
+            mountOptionsMockData: {
+                actionList: [
+                    {
+                        actionName: storeActions.SET_VEHICLE,
+                        data: "mockData",
+                    },
+                ],
+            },
+        });
+
+        //Act
+        vehicleStyle.beforeRouteEnter.call(
+            wrapper.vm,
+            { query: { fmgPage: "vehicle-style" } },
+            undefined,
+            (c) => c(wrapper.vm)
+        );
+        wrapper.vm.setVehicle();
+        await nextTick();
+
+        //Assert
+        apiPromise.finally(() => {
+            expect(wrapper.vm.dispatchStoreAction).toHaveBeenCalled();
+            done();
+        });
+    });
+
+    test("Model set, arePagePrerequisitesValid should be true ", async () => {
+        //Arrange
+        const { wrapper } = setupMocks({});
+
+        //Act
+        vehicleStyle.beforeRouteEnter.call(
+            wrapper.vm,
+            { query: { fmgPage: "vehicle-style" } },
+            undefined,
+            (c) => c(wrapper.vm)
+        );
+
+        let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+        await nextTick();
+
+        //Assert
+        expect(arePagePrerequisitesValid).toBe(true);
+    });
+
+    test("there is only one vehicle style => autoselect and move to vehicle damage", async () => {
+        //Arrange
+        const { wrapper } = setupMocks({
+            styleQuestionInitialData: ["2 door sedan"],
+        });
+
+        // Act
+        await vehicleStyle.beforeRouteEnter.call(
+            wrapper.vm,
+            { query: { fmgPage: "vehicle-style" } },
+            undefined,
+            (c) => c(wrapper.vm)
+        );
+
+        // Assert
+        expect(store.commit).toHaveBeenCalledWith(storeMutations.UPDATE_STYLE, "2 door sedan");
+        expect(router.overrideNavigation).toHaveBeenCalled();
+    });
+
+    test("there is only one vehicle style and vehicle-damage was visited => don't autoselect or move to vehicle damage", async () => {
+        //Arrange
+        const { wrapper } = setupMocks({
+            styleQuestionInitialData: ["2 door sedan"],
+            mountOptionsMockData: {
+                store: {
+                    getters: {
+                        applicationUser: {
+                            pageData: {
+                                "part-questions": null,
+                                "vehicle-make": {},
+                                "vehicle-model": {},
+                                "vehicle-style": {},
+                                "vehicle-damage": {},
+                            },
+                        },
+                    },
+                },
+            },
+        });
+
+        // Act
+        await vehicleStyle.beforeRouteEnter.call(
+            wrapper.vm,
+            { query: { fmgPage: "vehicle-style" } },
+            undefined,
+            (c) => c(wrapper.vm)
+        );
+
+        // Assert
+        expect(store.commit).not.toHaveBeenCalledWith(storeMutations.UPDATE_STYLE, "2 door sedan");
+        expect(router.overrideNavigation).not.toHaveBeenCalled();
+    });
+});
+
+function setupMocks({
+    vehicleStyleQuestionCmsContent = {},
+    styleQuestionInitialData = {},
+    pageHeaderWidgetHeaderText = {},
+    mountOptionsMockData = {},
+}) {
+    //Mock api responses
+    const apiResponses = {
+        cmsContent: {
+            FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
+            VehicleStyleQuestion: vehicleStyleQuestionCmsContent,
+            VehicleBannerWidget: {
+                GenericVehicleImage:
+                    "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
+            },
+            FunnelHeaderWidget: {
+                LogoImage:
+                    "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
+            },
+        },
+        styleQuestionInitialData: styleQuestionInitialData,
+    };
+
+    const apiPromise = Promise.resolve(apiResponses);
+
+    settleAllPromises.mockImplementation(() => apiPromise);
+    fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
+
+    //Mock style question methods
+    styleQuestion.methods = {
+        loadInitialData: jest.fn(),
+        initializeComponent: jest.fn(),
+    };
+
+    store.commit = jest.fn();
+    store.dispatch = jest.fn();
+    store.getters = mountOptionsMockData.store?.getters ?? {
+        vehicle: {
+            model: "TL",
+        },
+        applicationUser: {
+            pageData: {
+                "part-questions": null,
+                "vehicle-make": {},
+                "vehicle-model": {},
+                "vehicle-style": {},
+            },
+        },
+    };
+
+    const mountOptions = getMountOptions({
+        ...mountOptionsMockData,
+        store,
+    });
+    const wrapper = shallowMount(vehicleStyle, mountOptions);
+    wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
+
+    const styleQuestionWrapper = wrapper.findComponent({ name: "styleQuestion" });
+    styleQuestionWrapper.vm.initializeComponent = styleQuestion.methods.initializeComponent;
+
+    return { wrapper, apiPromise };
+}

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

@@ -0,0 +1,98 @@
+<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">
+                    <styleQuestion
+                        v-model="selectedStyle"
+                        ref="styleQuestion"
+                        cmsWidgetName="VehicleStyleQuestion" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+// Components
+import styleQuestion from "@/layouts/vehicle-style/style-question/style-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-style",
+    data() {
+        return {
+            selectedStyle: null,
+        };
+    },
+
+    computed: {},
+
+    async beforeRouteEnter(to, from, next) {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+        const styleQuestionInitialDataPromise = styleQuestion.methods.loadInitialData();
+
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+            {
+                resultKey: "styleQuestionInitialData",
+                promise: styleQuestionInitialDataPromise,
+            },
+        ];
+
+        const resultMap = await settleAllPromises(promiseResultMap);
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+            vm.$refs.styleQuestion.initializeComponent(resultMap.styleQuestionInitialData);
+        });
+    },
+
+    methods: {
+        backButtonAction() {
+            // route to move backwards
+            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
+        arePagePrerequisitesValid() {
+            if (this.mainStore.order.vehicle.model) {
+                return true;
+            }
+            return false;
+        },
+    },
+
+    watch: {
+        selectedStyle(style) {
+            this.mainStore.updateVehicleStyle(style);
+            this.$router.navigate(
+                this.navigationScenarios.SELECTED_STYLE,
+                this.$route
+            );
+        },
+    },
+
+    components: {
+        styleQuestion,
+        siteHeader,
+        siteSubHeader,
+        vehicleBanner,
+    },
+};
+</script>

src/router/router-constants/issPage-values.js

@@ -3,6 +3,7 @@ export const issPageValues = {
     WELCOME_PAGE: "welcome-page",
     VEHICLE_MAKE: "vehicle-make",
     VEHICLE_YEAR: "vehicle-year",
-    VEHICLE_MODEL: "vehicle-model"
+    VEHICLE_MODEL: "vehicle-model",
+    VEHICLE_STYLE: "vehicle-style",
   };
   

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

@@ -7,6 +7,7 @@ const navigationScenarios = {
     SELECTED_YEAR: "SELECTED_YEAR",
     SELECTED_MAKE: "SELECTED_MAKE",
     SELECTED_MODEL: "SELECTED_MODEL",
+    SELECTED_STYLE: "SELECTED_STYLE",
     
     // TESTING
     CLICKED_TEST: "CLICKED_TEST"

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

@@ -39,7 +39,20 @@ const routingTable = function(store) {
         },
         {
           scenario: navigationScenarios.SELECTED_MODEL,
-          destinationUrl: "https://www.google.com"
+          destinationIssPageValue: issPageValues.VEHICLE_STYLE,
+        }
+      ]
+    },
+    {
+      issPageValue: issPageValues.VEHICLE_STYLE,
+      maps: [
+        {
+          scenario: navigationScenarios.CLICKED_BACK,
+          destinationIssPageValue: issPageValues.VEHICLE_MODEL,
+        },
+        {
+          scenario: navigationScenarios.SELECTED_STYLE,
+          destinationIssPageValue: issPageValues.WELCOME_PAGE,
         }
       ]
     },

src/store/index.js

@@ -99,6 +99,14 @@ export const useMainStore = defineStore({
         });
       },
 
+      getVehicleStyles() {
+        return globalMethods.callHttpClient({
+          method: endpoints.GetVehicleStyles.method,
+          endpoint: `${endpoints.GetVehicleStyles.url}/${this.order.vehicle.year}/${this.order.vehicle.make}/${this.order.vehicle.model}`,
+          payload: {},
+        });
+      },
+
       // Vehicle API Actions
       updateVehicleYear(year) 
       {
@@ -121,6 +129,13 @@ export const useMainStore = defineStore({
         }
       },
 
+      updateVehicleStyle(style) 
+      {
+        if (this.order.vehicle.style !== style) {
+          this.order.vehicle.style = style;
+        }
+      },
+
       // populate initial state
       populateInitialState()
       {