Merge branch 'develop' into feature/CSR-514

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,14 +3,21 @@
     <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"
           @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>
@@ -29,14 +36,19 @@ import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 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) {
@@ -58,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

@@ -154,6 +154,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.
@@ -170,10 +176,9 @@ async function navigate(scenario, currentRoute, optionalQuery = {}, optionalPara
   if (destinationFmgPageValue !== undefined) {
     // We're always pushing the same path, just changing query strings. Make sure our optional query strings get combined with our fmgPage one.
 
-    // Update page data to the store for next page if provided. Otherwise, keep existing page data
+    // Update page data to the store for next page if provided. Otherwise, keep existing page data or set to empty object
-    if (optionalPageData !== undefined) {
+    const existingPageDataForPage = store.getters.pageData(destinationFmgPageValue);
-      baseMixin.methods.savePageDataToStore(destinationFmgPageValue, optionalPageData);
+    baseMixin.methods.savePageDataToStore(destinationFmgPageValue, optionalPageData ? optionalPageData : existingPageDataForPage ?? {});
-    }
 
     // if cookie and referralNumber/Date exists OR an emailAddress has been saved
     if ((getFunnelCookie()?.ReferralNumber && getFunnelCookie()?.ReferralDate) || store.getters.order.customer?.emailAddress) {