Merge pull request #641 from Safelite/feature/CSR-658

CSR-658 skip style page when only 1 style

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

@@ -27,6 +27,15 @@ jest.mock("@/store", () => ({
     vehicle: {
       model: "TL",
     },
+    applicationUser:{
+      pageData: {
+        "part-questions": null,
+        "vehicle-make": {},
+        "vehicle-model": {},
+        "vehicle-style": {},
+        "vehicle-damage": {}
+      }
+    }
   },
 }));
 

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

@@ -3,7 +3,10 @@
     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
-        <vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
+        <vehicleBanner
+          cmsWidgetName="VehicleBannerWidget"
+          displayGenericVehicleImage
+        />
         <funnelSubHeader
           cmsWidgetName="FunnelSubHeaderWidget"
           :hasBackButton="true"
@@ -11,7 +14,11 @@
           @click-event="backButtonAction"
         />
         <div class="fade-on-route-transition">
-          <styleQuestion v-model="selectedStyle" ref="styleQuestion" cmsWidgetName="VehicleStyleQuestion" />
+          <styleQuestion
+            v-model="selectedStyle"
+            ref="styleQuestion"
+            cmsWidgetName="VehicleStyleQuestion"
+          />
         </div>
       </div>
     </div>
@@ -30,14 +37,18 @@ import { settleAllPromises } from "@/helpers/layout-helper";
 import { storeActions } from "@/constants/store-actions";
 import store from "@/store";
 import { storeMutations } from "@/constants/store-mutations";
+import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
+import router from "@/router";
+import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
 
 export default {
   name: "vehicle-style",
   data() {
     return {
-      selectedStyle: null,
+      selectedStyle: null
     };
   },
+
   computed: {},
 
   async beforeRouteEnter(to, from, next) {
@@ -59,14 +70,31 @@ export default {
     ];
 
     const resultMap = await settleAllPromises(promiseResultMap);
+    const visitedVehicleDamage = JSON.stringify(store.getters.applicationUser.pageData).indexOf(fmgPageValues.VEHICLE_DAMAGE) < 0 ? false : true;
 
     // Call the "next" function to complete the transition to this page.
-    next((vm) => {
+
-      vm.setCmsContent(resultMap.cmsContent);
+    // If we have exactly one style then navigate directly to vehicle-damage
-      vm.$refs.styleQuestion.initializeComponent(
+    if(resultMap.styleQuestionInitialData.length === 1 && !visitedVehicleDamage) {
-        resultMap.styleQuestionInitialData
+      store.commit(storeMutations.UPDATE_STYLE, resultMap.styleQuestionInitialData[0]);
-      );
+
-    });
+      await store.dispatch(storeActions.SET_VEHICLE,
+        {
+          year: store.getters.vehicle.year,
+          make: store.getters.vehicle.make,
+          model: store.getters.vehicle.model,
+          style: store.getters.vehicle.style,
+        });
+
+      //emulate selecting the vehicle style
+      router.overrideNavigation(navigationScenarios.SELECTED_STYLE, to, next);
+
+    } else{
+      next( (vm) => {
+          vm.setCmsContent(resultMap.cmsContent);
+          vm.$refs.styleQuestion.initializeComponent(resultMap.styleQuestionInitialData)
+      });
+    }
   },
 
   methods: {

src/router/index.js

@@ -155,6 +155,12 @@ router.navigateToExternalUrl = (url, optionalQuery = {}) => {
   navigateToUrl(url, optionalQuery);
 }
 
+//Use this navigation when you need to call next() explicitly. beforeRouteEnter is a good example.
+router.overrideNavigation = (scenario, currentRoute, next, optionalQuery = {}, optionalParams = {}, optionalPageData) => {
+  router.navigate(scenario, currentRoute, optionalQuery, optionalParams, optionalPageData);
+  next();
+}
+
 // PRIVATE FUNCTIONS
 
 // Navigate to the next route, depending on the scenario.