vehicle-style page will skip to damage if only one style and they haven't visited the damage page yet.

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

@@ -96,6 +96,62 @@ describe("vehicle-style.vue", () => {
         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"],
+        });
+
+        useMainStore().applicationUser.pageData = {
+            "part-questions": null,
+            "vehicle-make": {},
+            "vehicle-model": {},
+            "vehicle-style": {},
+        }
+
+        useMainStore().updateVehicleStyle = jest.fn();
+        useMainStore().setVehicle = jest.fn().mockReturnValue(Promise.resolve())
+        
+        // Act
+        await vehicleStyle.beforeRouteEnter.call(
+            wrapper.vm,
+            { query: { issPage: "vehicle-style" } },
+            undefined,
+            (c) => c(wrapper.vm)
+        );
+
+        // Assert
+        expect(useMainStore().updateVehicleStyle).toHaveBeenCalledWith("2 door sedan");
+    });
+
+    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"],
+        });
+
+        useMainStore().updateVehicleStyle = jest.fn();
+        useMainStore().setVehicle = jest.fn().mockReturnValue(Promise.resolve())
+
+        useMainStore().applicationUser.pageData = {
+            "part-questions": null,
+            "vehicle-make": {},
+            "vehicle-model": {},
+            "vehicle-style": {},
+            "vehicle-damage": {},
+        }
+
+        // Act
+        await vehicleStyle.beforeRouteEnter.call(
+            wrapper.vm,
+            { query: { issPage: "vehicle-style" } },
+            undefined,
+            (c) => c(wrapper.vm)
+        );
+
+        // Assert
+        expect(useMainStore().updateVehicleStyle).not.toHaveBeenCalledWith("2 door sedan");
+    });
 });
 
 function setupMocks({

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

@@ -30,6 +30,10 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
+import { issPageValues } from "@/router/router-constants/issPage-values"
+import { useMainStore } from "@/store";
+import router from "@/router";
+import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
 
 export default {
     name: "vehicle-style",
@@ -57,10 +61,23 @@ export default {
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
-        next((vm) => {
+        
-            vm.setCmsContent(resultMap.cmsContent);
+        const visitedVehicleDamage = useMainStore().pageData(issPageValues.VEHICLE_DAMAGE) ? true : false;
-            vm.$refs.styleQuestion.initializeComponent(resultMap.styleQuestionInitialData);
+
-        });
+        // If we have exactly one style then navigate directly to vehicle-damage
+        if (resultMap.styleQuestionInitialData.length === 1 && !visitedVehicleDamage) {
+            useMainStore().updateVehicleStyle(resultMap.styleQuestionInitialData[0]);
+
+            useMainStore().setVehicle().then(() => {
+                router.overrideNavigation(navigationScenarios.SELECTED_STYLE, to, next, true);
+            });
+
+        } else {
+            next((vm) => {
+                vm.setCmsContent(resultMap.cmsContent);
+                vm.$refs.styleQuestion.initializeComponent(resultMap.styleQuestionInitialData);
+            });
+        }
     },
 
     methods: {

src/router/index.js

@@ -106,6 +106,27 @@ async function GetRouteInfoFromPageName(pageName) {
     return routeData;
 };
 
+//Use this navigation when you need to call next() explicitly. beforeRouteEnter is a good example.
+router.overrideNavigation = (
+    scenario,
+    currentRoute,
+    next,
+    isSavingNavigation,
+    optionalQuery = {},
+    optionalParams = {},
+    optionalPageData
+) => {
+    navigate(
+        scenario,
+        currentRoute,
+        isSavingNavigation,
+        optionalQuery,
+        optionalParams,
+        optionalPageData
+    );
+    next();
+};
+
 router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) => {
 
     navigate(scenario, currentRoute, false, optionalQuery, optionalParams, optionalPageData);