Merge pull request #99 from Safelite/feautre/CSR-224

Implement router.navigate

src/layouts/loader-demo/loader-demo.vue

@@ -1,24 +0,0 @@
-<template>
-  <div class="container-fluid container-shadow p-2 rounded-3">
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Loader</h4>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <loader sizeInRem="10" loaderColor="blue" loaderPosition="center" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import loader from "@/ux-components/loader/loader";
-export default {
-  name: "App",
-  components: {
-    loader,
-  },
-};
-</script>

src/layouts/vehicle-make/vehicle-make.vue

@@ -0,0 +1,3 @@
+<template>
+<p> Vehicle Make Layout - Do Something Cool Here </p>
+</template>

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

@@ -73,7 +73,6 @@ function setupMocks({
             "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
         },
       ],
-      isCmsContentReady: true,
     },
     yearQuestionInitialData: yearQuestionInitialData,
   };

src/layouts/vehicle-year/vehicle-year.vue

@@ -1,4 +1,4 @@
-<template v-if="isCmsContentReady">
+<template>
   <div class="container-fluid shadow rounded-3 p-0">
     <siteHeader :imageSrc="siteHeaderWidget.LogoImage" />
     <div class="select-car">
@@ -17,9 +17,12 @@ import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
 import pageHeader from "@/ux-components/header/header";
 import siteHeader from "@/common-components/site-header/site-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";
+import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
+
 export default {
   name: "vehicle-year",
   data() {
@@ -64,7 +67,7 @@ export default {
   watch: {
     selectedYear(year) {
       this.$store.commit(this.storeMutations.UPDATE_YEAR, year);
-      this.$router.push('?fmgPage=vehicle-make');
+      this.$router.navigate(navigationScenarios.SELECTED_YEAR, this.$route);
     }
   },
 

src/router/index.js

@@ -3,7 +3,6 @@ import { storeActions } from "@/constants/store-actions.js";
 import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
 import { routingTable } from "@/router/router-constants/routing-table.js";
 import ComponentTest from "@/layouts/component-test/component-test.vue";
-import LoaderDemo from "@/layouts/loader-demo/loader-demo.vue";
 import NotFound from "@/layouts/not-found/not-found.vue";
 import store from "@/store";
 
@@ -18,11 +17,6 @@ const routes = [
     name: "ComponentTest",
     component: ComponentTest,
   },
-  {
-    path: "/loader-demo", // This is a temporary route for testing.
-    name: "LoaderDemo",
-    component: LoaderDemo,
-  },
   {
     path: "/",
     beforeEnter(to, from, next) {

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

@@ -1,6 +1,8 @@
 const fmgPageValues = {
   VEHICLE_YEAR: "vehicle-year",
   VEHICLE_MAKE: "vehicle-make",
+  VEHICLE_MODEL: "vehicle-model",
+  VEHICLE_STYLE: "vehicle-style",
 };
 
 export { fmgPageValues };

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

@@ -1,5 +1,8 @@
 const navigationScenarios = {
   SELECTED_YEAR: "SELECTED_YEAR",
+  SELECTED_MODEL: "SELECTED_MODEL",
+  SELECTED_MAKE: "SELECTED_MAKE",
+  CLICKED_BACK: "CLICKED_BACK",
 };
 
 export { navigationScenarios };

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

@@ -11,6 +11,32 @@ const routingTable = [
       },
     ],
   },
+  {
+    fmgPageValue: fmgPageValues.VEHICLE_MAKE,
+    maps: [
+      {
+        scenario: navigationScenarios.SELECTED_MAKE,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_MODEL,
+      },
+      {
+        scenario: navigationScenarios.CLICKED_BACK,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_YEAR,
+      }
+    ],
+  },
+  {
+    fmgPageValue: fmgPageValues.VEHICLE_MODEL,
+    maps: [
+      {
+        scenario: navigationScenarios.SELECTED_MODEL,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE,
+      },
+      {
+        scenario: navigationScenarios.CLICKED_BACK,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_MAKE,
+      }
+    ],
+  },
 ];
 
 export { routingTable };