Merge remote-tracking branch 'origin/feature/dynamic-routing' into features/funnel-transitions

package.json

@@ -14,6 +14,7 @@
     "bootstrap": "^5.1.1",
     "canvas-confetti": "^1.4.0",
     "core-js": "^3.6.5",
+    "http-status-codes": "^2.1.4",
     "vue": "^3.0.0",
     "vue-router": "^4.0.11",
     "vuex": "^4.0.2",

src/commonComponents/carAttributes/carAttributes.vue

@@ -1,28 +1,24 @@
 <template>
-  <form class="list-view d-flex">
+<form class="list-view d-flex">
     <div class="car_list">
-      <div v-for="attritbute in attritbutes" :key="attritbute" class="mb-2">
-        <buttonPrimary
-          :buttonText="attritbute"
-          v-on:click="selectAttribute(attritbute)"
-          buttonType="btn-funnel"
-        />
-      </div>
+        <div v-for="attritbute in attritbutes" :key="attritbute" class="mb-2">
+            <buttonPrimary :buttonText="attritbute" v-on:click="selectAttribute(attritbute)" buttonType="btn-funnel" />
+        </div>
     </div>
-  </form>
+</form>
 </template>
 
 <script>
 import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary";
 
 export default {
-  name: "CarAttributes",
-  props: {
-    attritbutes: Array,
-    selectAttribute: Function,
-  },
-  components: {
-    buttonPrimary,
-  },
+    name: "CarAttributes",
+    props: {
+        attritbutes: Array,
+        selectAttribute: Function,
+    },
+    components: {
+        buttonPrimary,
+    },
 };
 </script>

src/constants/endpoints.js

@@ -0,0 +1,8 @@
+const endpoints = {
+    GetRouteInfoEndpoint: {
+        url: '/content/api/v1/content/RouteInfo',
+        method: 'POST'
+    }
+}
+
+export { endpoints }

src/constants/storeActions.js

@@ -0,0 +1,5 @@
+const storeActions = {
+    GET_ROUTE_INFO_ACTION: "getRouteInfo",
+}
+
+export { storeActions }

src/global-methods.js

@@ -0,0 +1,31 @@
+import axios from "axios";
+
+export default {
+  callHttpClient({ method, endpoint, payload, responseType = {} }) {
+    return new Promise((resolve, reject) => {
+      const apiGatewayUrl = "https://consumerapidev.safelite.com"; // TODO: Some environment variable
+      const payloadAndAnalyticsData = Object.assign({}, payload, {
+        AppName: "FixMyGlass",
+      });
+
+      axios({
+        method: method,
+        url: `${apiGatewayUrl}${endpoint}`,
+        data: payloadAndAnalyticsData,
+        crossDomain: true,
+        responseType: responseType,
+      }).then(
+        (response) => {
+          if (response.data.isSuccess || response.status == 200) {
+            resolve(response);
+          } else {
+            reject(response);
+          }
+        },
+        (error) => {
+          return reject(error.response);
+        }
+      );
+    });
+  },
+};

src/layouts/home/home.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="home">
-    <h1>Home</h1>
-    <router-link to="/select-car">SelectCar</router-link>
-  </div>
+    <div class="home">
+        <h1>Home</h1>
+        <router-link to="/testc">Test</router-link>
+    </div>
 </template>

src/layouts/selectMake/selectMake.vue

@@ -1,37 +1,35 @@
 <template>
-  <div>
-    <baseTemplate
-      :currentCarInfo="year"
-      neededCarInfo="What make is your vehicle?"
-      :backFunction="goBack"
-    >
-      <carAttributes :attritbutes="makes" :selectAttribute="selectMake" />
+<div>
+    <baseTemplate :currentCarInfo="year" neededCarInfo="What make is your vehicle?" :backFunction="goBack">
+        <carAttributes :attritbutes="makes" :selectAttribute="selectMake" />
     </baseTemplate>
-  </div>
+</div>
 </template>
 
 <script>
 import baseTemplate from "@/commonComponents/baseTemplate/baseTemplate";
 import carAttributes from "@/commonComponents/carAttributes/carAttributes";
-import { mapState } from "vuex";
+import {
+    mapState
+} from "vuex";
 
 export default {
-  name: "SelectCar",
-  computed: {
-    ...mapState(["year", "makes"]),
-  },
-  methods: {
-    selectMake(make) {
-      this.$store.dispatch("selectMake", make);
+    name: "SelectCar",
+    computed: {
+        ...mapState(["year", "makes"]),
     },
-    goBack() {
-      this.$store.state.slideTransition = "slide_reverse";
-      this.$router.push("/select-year");
+    methods: {
+        selectMake(make) {
+            this.$store.dispatch("selectMake", make);
+        },
+        goBack() {
+            this.$store.state.slideTransition = "slide_reverse";
+            this.$router.push("/select-year");
+        },
+    },
+    components: {
+        baseTemplate,
+        carAttributes,
     },
-  },
-  components: {
-    baseTemplate,
-    carAttributes,
-  },
 };
 </script>

src/main.js

@@ -1,12 +1,20 @@
 import { createApp } from "vue";
 import App from "./App.vue";
-import router from "./router";
-import store from "@/store";
-
+import router from './router';
+import store from '@/store';
+import baseMixin from "@/mixins/baseMixin.js";
 //Bootstrap JavaScript
 import "../node_modules/bootstrap/dist/js/bootstrap.js";
 
 //Get Bootstrap and Custom Styles
 import "./assets/scss/custom.scss";
 
-createApp(App).use(router).use(store).mount("#app");
+// Vue App Setup
+const vueApp = createApp(App);
+
+vueApp.use(router);
+vueApp.use(store);
+
+vueApp.mixin(baseMixin);
+
+vueApp.mount("#app");

src/mixins/baseMixin.js

@@ -0,0 +1,22 @@
+import { storeActions } from "@/constants/storeActions.js";
+
+export default {
+    methods: {
+        dispatchBlockingStoreAction(type, payload) {
+            // globalMethods.showWaitingModal(true);
+
+            return this.dispatchNonBlockingStoreAction(type, payload)
+                .finally(() => {
+                    // globalMethods.showWaitingModal(false);
+                });;
+        },
+        dispatchNonBlockingStoreAction(type, payload) {
+            return this.$store.dispatch(type, payload);
+        },
+    },
+    computed: {
+        storeActions() {
+            return storeActions;
+        },
+    },
+}

src/router/dynamic-routing/component-loader.js

@@ -1,3 +1,3 @@
 export function lazyLoadComponent(componentName) {
-  return () => import(`@/layouts/${componentName}.vue`);
+  return () => import(`@/layouts/${componentName}.vue`); // /selectModel/SelectModel
 }

src/router/dynamic-routing/route-compile.js

@@ -1,30 +0,0 @@
-import axios from "axios";
-import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
-
-export function getRouteData(relativeUrl) {
-  return axios
-    .post("/api/v1/content/RouteInfo", {
-      relativeUrl: relativeUrl,
-    })
-    .then((response) => {
-      // This is really only for Mockey. In a real case, this would just be a 404 and we would check status code.
-      if (response.data.Result === undefined) {
-        return Promise.reject("Could not find any details about given route.");
-      }
-
-      // Get our route data
-      let json = JSON.parse(response.data.Result);
-      let routeData = [];
-
-      // Push the item onto the array
-      Object.keys(json).forEach((key) => {
-        routeData.push({
-          path: `${json[key].RelativeUrl}`,
-          name: `${key}`,
-          component: lazyLoadComponent(json[key].LayoutName),
-        });
-      });
-
-      return Promise.resolve(routeData);
-    });
-}

src/router/index.js

@@ -1,7 +1,9 @@
 import { createWebHistory, createRouter } from "vue-router";
-import { getRouteData } from "@/router/dynamic-routing/route-compile.js";
+import { storeActions } from "@/constants/storeActions.js";
+import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
 import NotFound from "@/layouts/notFound/notFound.vue";
 import Home from "@/layouts/home/home.vue";
+import store from "@/store";
 
 const routes = [
   {
@@ -22,31 +24,61 @@ const router = createRouter({
 });
 
 router.beforeEach(async (to, from, next) => {
-  await GoToDynamicRoute(to, next);
+  NavigateToDynamicCmsRoute(to, next);
 });
 
-async function GoToDynamicRoute(to, next) {
+// Go to route if page exists in the CMS.
+// If not, go to 404 page.
+function NavigateToDynamicCmsRoute(to, next) {
   let doesRouteResolve = router.resolve(to.path).matched.length > 0;
 
-  console.log("Does route resolve?" + " " + (doesRouteResolve ? "Yes" : "No"));
-
   if (!doesRouteResolve) {
-    let routeData = await getRouteData(to.path).catch((exp) => {
-      console.log(exp);
-      next({ name: "NotFound" }); // Go to 404.
-    });
+    GetRouteInfoForUrl(to.path)
+      .then((routeData) => {
+        // Add our dynamic route.
+        router.addRoute({
+          path: routeData[0].path,
+          name: routeData[0].name,
+          component: routeData[0].component,
+        });
 
-    // Add our dynamic route.
-    router.addRoute({
-      path: routeData[0].path,
-      name: routeData[0].name,
-      component: routeData[0].component,
-    });
-
-    next(to.fullPath);
+        next(to.fullPath);
+      })
+      .catch((error) => {
+        // Check status code, go to 404 page if 404.
+        console.log(error);
+      });
   } else {
     next(); // Home (/) and NotFound (/not-found) will always resolve.
   }
 }
 
+// Get the route info for the given url.
+// This will hit the content service and eventually the Cms.
+// If the route is not found, reject Promise.
+function GetRouteInfoForUrl(url) {
+  return new Promise((resolve, reject) => {
+    store
+      .dispatch(storeActions.GET_ROUTE_INFO_ACTION, { relativeUrl: url })
+      .then((response) => {
+        // Add our route data and return our array.
+        let jsonFromResponse = JSON.parse(response.data.Result);
+        let routeData = [];
+
+        Object.keys(jsonFromResponse).forEach((key) => {
+          routeData.push({
+            path: `${jsonFromResponse[key].RelativeUrl}`,
+            name: `${key}`,
+            component: lazyLoadComponent(jsonFromResponse[key].LayoutName),
+          });
+        });
+
+        resolve(routeData);
+      })
+      .catch((error) => {
+        reject(error);
+      });
+  });
+}
+
 export default router;

src/store/index.js

@@ -1,6 +1,8 @@
 import { createStore } from "vuex";
+import { endpoints } from "@/constants/endpoints.js";
 import createPersistedState from "vuex-persistedstate";
 import axios from "axios";
+import globalMethods from "@/global-methods";
 import router from "@/router";
 
 export default createStore({
@@ -25,7 +27,7 @@ export default createStore({
   mutations: {
     updateYear(state, data) {
       state.year = data.year;
-      state.makes = data.makes.data.Result;
+      state.makes = data.makes;
       state.slideTransition = "slide";
     },
     updateMake(state, data) {
@@ -54,9 +56,16 @@ export default createStore({
   },
   actions: {
     async selectYear(context, year) {
-      const makes = await axios.get(
-        `https://mockey.qa.sagaws.net/service/makes/year=${year}`
-      );
+      let makes = [];
+      await globalMethods
+        .callHttpClient({
+          method: "GET",
+          endpoint: `https://mockey.qa.sagaws.net/service/makes/year=${year}`,
+          payload: {},
+        })
+        .then(function (response) {
+          makes = response.data.Result;
+        });
       context.commit("updateYear", { year, makes });
       router.push(`/select-make?year=${year}`);
     },
@@ -82,5 +91,14 @@ export default createStore({
         `/damage?year=${state.year}&make=${state.make}&model=${state.model}&style=${style}`
       );
     },
+    getRouteInfo(context, { relativeUrl }) {
+      return globalMethods.callHttpClient({
+        method: endpoints.GetRouteInfoEndpoint.method,
+        endpoint: endpoints.GetRouteInfoEndpoint.url,
+        payload: {
+          relativeUrl: relativeUrl,
+        },
+      });
+    },
   },
 });