From ae6c242f2d087c83cc8b3fd3556c7d2632c0e4ee Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Fri, 5 Aug 2022 15:31:07 -0400
Subject: [PATCH 1/3] CSR-658 skip style page when only 1 style

---
 src/layouts/vehicle-style/vehicle-style.vue | 28 ++++++++++++++++-----
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/layouts/vehicle-style/vehicle-style.vue b/src/layouts/vehicle-style/vehicle-style.vue
index c7589d32d..50f1b35f5 100644
--- a/src/layouts/vehicle-style/vehicle-style.vue
+++ b/src/layouts/vehicle-style/vehicle-style.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="page-container-grouped-styles">
+  <div class="page-container-grouped-styles" v-show="showStylePage">
     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
@@ -30,14 +30,17 @@ 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";
 
 export default {
   name: "vehicle-style",
   data() {
     return {
       selectedStyle: null,
+      showStylePage: false,
     };
   },
+
   computed: {},
 
   async beforeRouteEnter(to, from, next) {
@@ -61,11 +64,24 @@ export default {
     const resultMap = await settleAllPromises(promiseResultMap);
 
     // Call the "next" function to complete the transition to this page.
-    next((vm) => {
-      vm.setCmsContent(resultMap.cmsContent);
-      vm.$refs.styleQuestion.initializeComponent(
-        resultMap.styleQuestionInitialData
-      );
+    next((vm) => {     
+      //skip this style page if only 1 vehicle style returned and they have yet to visit vehicle damage
+      var visitedVehicleDamage = JSON.stringify(store.getters.applicationUser.pageData).indexOf(fmgPageValues.VEHICLE_DAMAGE) < 0 ? false : true;
+
+      if (resultMap.styleQuestionInitialData.lenghth > 1 || visitedVehicleDamage) {
+          vm.showStylePage = true;
+          vm.setCmsContent(resultMap.cmsContent);
+          vm.$refs.styleQuestion.initializeComponent(
+          resultMap.styleQuestionInitialData
+        );
+      }
+      else{
+        store.commit(storeMutations.UPDATE_STYLE, resultMap.styleQuestionInitialData[0]);
+        vm.setVehicle().then(() => {
+             vm.$router.navigateAfterSave(vm.navigationScenarios.SELECTED_STYLE,vm.$route);
+             return;
+        });
+      }
     });
   },
 

From 7d391266e7701d1ae01bf29cdf7338793395b5f2 Mon Sep 17 00:00:00 2001
From: FrankRua <frank.rua@safelite.com>
Date: Mon, 8 Aug 2022 10:07:37 -0400
Subject: [PATCH 2/3] Use 'next' function for skipping styles page

---
 src/layouts/vehicle-style/vehicle-style.vue | 56 +++++++++++++--------
 1 file changed, 34 insertions(+), 22 deletions(-)

diff --git a/src/layouts/vehicle-style/vehicle-style.vue b/src/layouts/vehicle-style/vehicle-style.vue
index 50f1b35f5..4fab2d499 100644
--- a/src/layouts/vehicle-style/vehicle-style.vue
+++ b/src/layouts/vehicle-style/vehicle-style.vue
@@ -1,9 +1,12 @@
 <template>
-  <div class="page-container-grouped-styles" v-show="showStylePage">
+  <div class="page-container-grouped-styles">
     <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>
@@ -36,8 +43,7 @@ export default {
   name: "vehicle-style",
   data() {
     return {
-      selectedStyle: null,
-      showStylePage: false,
+      selectedStyle: null
     };
   },
 
@@ -62,27 +68,33 @@ 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) => {     
-      //skip this style page if only 1 vehicle style returned and they have yet to visit vehicle damage
-      var visitedVehicleDamage = JSON.stringify(store.getters.applicationUser.pageData).indexOf(fmgPageValues.VEHICLE_DAMAGE) < 0 ? false : true;
 
-      if (resultMap.styleQuestionInitialData.lenghth > 1 || visitedVehicleDamage) {
-          vm.showStylePage = true;
-          vm.setCmsContent(resultMap.cmsContent);
-          vm.$refs.styleQuestion.initializeComponent(
-          resultMap.styleQuestionInitialData
-        );
-      }
-      else{
-        store.commit(storeMutations.UPDATE_STYLE, resultMap.styleQuestionInitialData[0]);
-        vm.setVehicle().then(() => {
-             vm.$router.navigateAfterSave(vm.navigationScenarios.SELECTED_STYLE,vm.$route);
-             return;
+    // If we have exactly one style
+    if(resultMap.styleQuestionInitialData.length === 1 || !visitedVehicleDamage) {
+      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,
         });
-      }
-    });
+
+      // ...GetNavigationMap(navigationScenarios.SELECTED_STYLE, to);
+      //... 
+      next({name: 'root', query: Object.assign(to.query, { fmgPage: '....destinationFmgPageValue' })});
+
+    } else{
+      next( (vm) => {
+          vm.setCmsContent(resultMap.cmsContent);
+          vm.$refs.styleQuestion.initializeComponent(resultMap.styleQuestionInitialData)
+      });
+    }
   },
 
   methods: {

From e4b2b702c692515c84b102dd1cd2825531f3f3c4 Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Mon, 8 Aug 2022 15:54:21 -0400
Subject: [PATCH 3/3] CSR-658 nav directly to vehicle-damage when 1 style

---
 src/layouts/vehicle-style/vehicle-style.spec.js |  9 +++++++++
 src/layouts/vehicle-style/vehicle-style.vue     | 12 ++++++------
 src/router/index.js                             |  6 ++++++
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/layouts/vehicle-style/vehicle-style.spec.js b/src/layouts/vehicle-style/vehicle-style.spec.js
index 3d62e8f15..1f7f24e07 100644
--- a/src/layouts/vehicle-style/vehicle-style.spec.js
+++ b/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": {}
+      }
+    }
   },
 }));
 
diff --git a/src/layouts/vehicle-style/vehicle-style.vue b/src/layouts/vehicle-style/vehicle-style.vue
index 4fab2d499..04ba83797 100644
--- a/src/layouts/vehicle-style/vehicle-style.vue
+++ b/src/layouts/vehicle-style/vehicle-style.vue
@@ -38,6 +38,8 @@ 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",
@@ -70,11 +72,10 @@ 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.
 
-    // If we have exactly one style
-    if(resultMap.styleQuestionInitialData.length === 1 || !visitedVehicleDamage) {
+    // If we have exactly one style then navigate directly to vehicle-damage
+    if(resultMap.styleQuestionInitialData.length === 1 && !visitedVehicleDamage) {
       store.commit(storeMutations.UPDATE_STYLE, resultMap.styleQuestionInitialData[0]);
 
       await store.dispatch(storeActions.SET_VEHICLE,
@@ -85,9 +86,8 @@ export default {
           style: store.getters.vehicle.style,
         });
 
-      // ...GetNavigationMap(navigationScenarios.SELECTED_STYLE, to);
-      //... 
-      next({name: 'root', query: Object.assign(to.query, { fmgPage: '....destinationFmgPageValue' })});
+      //emulate selecting the vehicle style
+      router.overrideNavigation(navigationScenarios.SELECTED_STYLE, to, next);
 
     } else{
       next( (vm) => {
diff --git a/src/router/index.js b/src/router/index.js
index 4b9af02e7..d55e9f680 100644
--- a/src/router/index.js
+++ b/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.