Multiple refactor / improving changes

jest.config.js

@@ -4,7 +4,7 @@ module.exports = {
   preset: "@vue/cli-plugin-unit-jest",
   transform: { "^.+\\.vue$": "vue-jest", },
   moduleFileExtensions: ['js', 'vue'],
-  collectCoverageFrom: ["src/**/*.{js,vue}", "!src/main.js", "!src/constants/*.js", "!src/router/*.js", "!src/helpers/*.js"], //! means exclude from coverage.
+  collectCoverageFrom: ["src/**/*.{js,vue}", "!src/main.js", "!src/constants/*.js", "!src/router/**/*.js", "!src/helpers/*.js"], //! means exclude from coverage.
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
   coverageThreshold: {
     global: {

src/constants/endpoints.js

@@ -11,15 +11,16 @@ const endpoints = {
         url: '/vehicle/api/v1/vehicle/Makes',
         method: 'POST'
     },
-    GetModels: {
+    GetVehicleModels: {
         url: '/vehicle/api/v1/vehicle/Models',
-        method: 'POST'
+        method: 'GET'
     },
     GetStyles: {
         url: '/vehicle/api/v1/vehicle/Styles',
         method: 'POST'
     },
     GetPageData: {
+        url: '/content/api/v1/content/{pageName}',
         method: 'GET'
     }
 }

src/constants/storeActions.js

@@ -1,7 +1,8 @@
 const storeActions = {
     GET_ROUTE_INFO_ACTION: "getRouteInfo",
     GET_YEARS: 'getYears',
-    GET_PAGE_DATA: 'getMockPageData',
+    GET_VEHICLE_MODELS: 'getVehicleModels',
+    GET_PAGE_DATA: 'getPageData',
 }
 
 export { storeActions }

src/constants/widgetNames.js

@@ -1,6 +1,7 @@
 const widgetNames = {
-    PAGE_HEADING_WIDGET: "PageHeadingWidget",
+    HEADER_TEXT_WIDGET: "HeaderTextWidget",
     RADIO_QUESTION_WIDGET: "RadioQuestionWidget"
 }
 
+
 export { widgetNames }

src/global-methods.js

@@ -16,7 +16,6 @@ export default {
         crossDomain: true,
         responseType: {},
       }).then((response) => {
-
           if (response.status == httpStatusCodes.OK) {
             resolve(response);
           } else {

src/layouts/selectMake/selectMake.spec.js

@@ -1 +0,0 @@
-test.todo('some test to be written in the future');

src/layouts/selectMake/selectMake.vue

@@ -1,48 +0,0 @@
-<template>
-  <div class="select-car overflow-hidden">
-    <div class="select-car-form rounded text-center">
-      <Header
-        :text="year"
-      />
-      <radioQuestion
-        questionText="What is the make of your vehicle?"
-        :answers="makes"
-        :chooseAnswer="selectMake"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import radioQuestion from "@/commonComponents/radioQuestion/radioQuestion";
-import Header from "@/uxComponents/header/header";
-import store from "@/store";
-import router from "@/router";
-import {
-    mapState
-} from "vuex";
-
-export default {
-    name: "SelectCar",
-    computed: {
-        ...mapState(["year", "makes"]),
-    },
-    methods: {
-        selectMake(make) {
-            this.dispatchNonBlockingStoreAction("selectMake", { make: make }).then( (response) => {
-        const models = response;
-        store.commit('updateMake', {make, models});
-        router.push(`/select-model?year=${store.year}&make=${make}`);
-      });
-        },
-        goBack() {
-            this.$store.state.slideTransition = "slide_reverse";
-            this.$router.push("/select-year");
-        },
-    },
-    components: {
-        radioQuestion,
-        Header,
-    },
-};
-</script>

src/layouts/selectModel/selectModel.spec.js

@@ -1 +0,0 @@
-test.todo('some test to be written in the future');

src/layouts/selectModel/selectModel.vue

@@ -1,46 +0,0 @@
-<template>
-  <div class="select-car overflow-hidden">
-    <div class="select-car-form rounded text-center">
-      <Header
-        :text="year + ' ' + make"
-      />
-      <radioQuestion
-        :questionText="'What is the model of your ' + make + '?'"
-        :answers="models"
-        :chooseAnswer="selectModel"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import radioQuestion from "@/commonComponents/radioQuestion/radioQuestion";
-import Header from "@/uxComponents/header/header";
-import store from "@/store";
-import router from "@/router";
-import { mapState } from "vuex";
-
-export default {
-  name: "SelectCar",
-  computed: {
-    ...mapState(["year", "make", "models"]),
-  },
-  methods: {
-    selectModel(model) {
-      this.dispatchNonBlockingStoreAction("selectModel", { model: model }).then( (response) => {
-          const styles = response;
-          store.commit("updateModel", { model, styles });
-          router.push(`/select-style?year=${store.year}&make=${store.make}&model=${model}`);
-        });
-    },
-    goBack() {
-      this.$store.state.slideTransition = "slide_reverse";
-      this.$router.push(`/select-make?year=${store.year}`);
-    },
-  },
-  components: {
-    radioQuestion,
-    Header,
-  },
-};
-</script>

src/layouts/selectStyle/selectStyle.spec.js

@@ -1 +0,0 @@
-test.todo('some test to be written in the future');

src/layouts/selectStyle/selectStyle.vue

@@ -1,47 +0,0 @@
-<template>
-  <div class="select-car overflow-hidden">
-    <div class="select-car-form rounded text-center">
-      <Header
-        :text="year + ' ' + make + ' ' + model"
-      />
-      <radioQuestion
-        :questionText="'What style is your ' + model + '?'"
-        :answers="styles"
-        :chooseAnswer="selectStyle"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import radioQuestion from "@/commonComponents/radioQuestion/radioQuestion";
-import Header from "@/uxComponents/header/header";
-import store from "@/store";
-import router from "@/router";
-import { mapState } from "vuex";
-
-export default {
-  name: "SelectCar",
-  computed: {
-    ...mapState(["year", "make", "model", "styles"]),
-  },
-  methods: {
-    selectStyle(style) {
-        store.commit("updateStyle", { style });
-        router.push(
-          `/select-damage?year=${store.year}&make=${store.make}&model=${store.model}&style=${style}`
-        );
-    },
-    goBack() {
-      this.$store.state.slideTransition = "slide_reverse";
-      this.$router.push(
-        `/select-model?year=${store.year}&make=${store.make}`
-      );
-    },
-  },
-  components: {
-    radioQuestion,
-    Header,
-  },
-};
-</script>

src/layouts/selectYear/selectYear.vue

@@ -1,78 +0,0 @@
-<template>
-  <div class="select-car">
-    <div class="select-car-form rounded text-center">
-      
-      <Header
-        :text="pageHeader.Text" class="Header"
-      />
-      <radioQuestion
-        class="radioQuestion"
-        :questionText="radioQuestion.Question"
-        :answers="this.years"
-        :chooseAnswer="selectYear"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import radioQuestion from "@/commonComponents/radioQuestion/radioQuestion";
-import Header from "@/uxComponents/header/header";
-import store from "@/store";
-import router from "@/router";
-import { mapState } from "vuex";
-
-export default {
-  name: "SelectYear",
-  data() {
-    return {
-      years: [],
-      pageHeader: {},
-      radioQuestion: {}
-    };
-  },
-  computed: {
-    ...mapState(["slideTransition", "carImg", "blurImg", "style"]),
-  },
-  mounted() {
-    // Mocking Sitefinity data to (For Page Header and Radio Question)
-    this.dispatchNonBlockingStoreAction(this.storeActions.GET_PAGE_DATA, {relativeUrl: 'https://mockey.qa.sagaws.net/service/content/selectYear'})
-    .then( (response) => {
-      response.data.Result.forEach((m) => {
-          switch (m.Type) {
-              case 'PageHeadingWidget': {
-                  this.pageHeader = m.Model;
-                  break;
-              }
-              case 'RadioQuestionWidget': {
-                  this.radioQuestion = m.Model;
-                  break;
-              }
-              default: {
-                  break;
-              }
-          }
-      })
-    });
-
-    // Getting Years list
-    this.dispatchNonBlockingStoreAction(this.storeActions.GET_YEARS)
-        .then( (response) => {
-          this.years = response.data;
-    });
-  },
-  methods: {
-    selectYear(year) {
-      this.dispatchNonBlockingStoreAction("selectYear", { year: year }).then( (response) => {
-        const makes = response;
-        store.commit('updateYear', {year, makes});
-        router.push(`select-make?year=${year}`);
-      });
-    }
-  },
-  components: {
-    radioQuestion,
-    Header,
-  },
-};
-</script>

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

@@ -0,0 +1,42 @@
+<template>
+<div class="select-car">
+    <div class="select-car-form rounded text-center">
+        <Header :text="headerTextWidgetModel.HeaderText" class="Header" />
+        <yearQuestion :questionText="radioQuestionWidgetModel.QuestionText" />
+    </div>
+</div>
+</template>
+
+<script>
+import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
+import Header from "@/uxComponents/header/header";
+import {
+    mapState
+} from "vuex";
+
+export default {
+    name: "vehicle-year",
+    data() {
+        return {
+            headerTextWidgetModel: {},
+            radioQuestionWidgetModel: {}
+        };
+    },
+    computed: {
+        ...mapState(["slideTransition", "carImg", "blurImg", "style"]),
+    },
+    created() {
+        this.dispatchNonBlockingStoreAction(this.storeActions.GET_VEHICLE_MODELS, {
+                year: '2020',
+                make: 'Alfa Romeo/Chrysler'
+            }, true)
+            .then((response) => {
+                console.log(response);
+            })
+    },
+    components: {
+        yearQuestion,
+        Header,
+    },
+};
+</script>

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

@@ -0,0 +1,44 @@
+<template>
+<radioQuestion class="radioQuestion" :questionText="questionText" :answers="years" :chooseAnswer="selectYear" />
+</template>
+
+<script>
+import radioQuestion from "@/commonComponents/radioQuestion/radioQuestion";
+import store from "@/store";
+import router from "@/router";
+
+export default {
+    name: 'year-question',
+    props: {
+        questionText: String
+    },
+    data() {
+        return {
+            years: []
+        }
+    },
+    created() {
+        this.dispatchNonBlockingStoreAction(this.storeActions.GET_YEARS)
+            .then((response) => {
+                this.years = response.data;
+            });
+    },
+    components: {
+        radioQuestion
+    },
+    methods: {
+        selectYear(year) {
+            this.dispatchNonBlockingStoreAction("selectYear", {
+                year: year
+            }).then((response) => {
+                const makes = response;
+                store.commit('updateYear', {
+                    year,
+                    makes
+                });
+                router.push(`select-make?year=${year}`);
+            });
+        }
+    }
+}
+</script>

src/mixins/baseMixin.js

@@ -11,16 +11,53 @@ export default {
                     // globalMethods.showWaitingModal(false);
                 });;
         },
-        dispatchNonBlockingStoreAction(type, payload) {
+        dispatchNonBlockingStoreAction(type, payload, encodePayload = false) {
+
+            // Encode the payload if required
+            if (encodePayload) {
+                encodeUriData(payload);
+            }
+
             return this.$store.dispatch(type, payload);
         },
+
+        GetContentFromCms() {
+            return this.dispatchNonBlockingStoreAction(this.storeActions.GET_PAGE_DATA, { pageName: this.$route.query.fmgPage })
+                .then((response) => {
+
+                    const pageDataFromCms = {};
+
+                    response.data.Result.forEach((widget) => {
+                        if (Object.values(this.widgetNames).includes(widget.Type)) {
+                            // If we already have this widget, push it on the collection
+                            if (widget.Type in pageDataFromCms) {
+                                pageDataFromCms[widget.Type].push(widget.Model);
+                                return;
+                            }
+                            
+                            pageDataFromCms[widget.Type] = [widget.Model];
+                        }
+                    });
+
+                    return pageDataFromCms;
+                });
+        }
     },
     computed: {
         storeActions() {
             return storeActions;
         },
-        widgetNames(){
+        widgetNames() {
             return widgetNames;
         }
     },
+}
+
+function encodeUriData(payload) {
+    if (payload && Object.keys(payload).length > 0) {
+        // Loop through the payload and encode the values
+        Object.keys(payload).forEach(key => {
+            payload[key] = encodeURIComponent(payload[key]);
+        });
+    }
 }

src/router/index.js

@@ -38,7 +38,7 @@ const routes = [
 
           // Add our dynamic route.
           router.addRoute({
-            path: '/', // Always the same path, because we control it with query strings.
+            path: routeData[0].path, // Always the same path, because we control it with query strings.
             name: routeData[0].name,
             component: routeData[0].component,
           });
@@ -81,7 +81,7 @@ function GetRouteInfoFromPageName(pageName) {
 
         Object.keys(jsonFromResponse).forEach((key) => {
           routeData.push({
-            path: `${jsonFromResponse[key].RelativeUrl}`,
+            path: '/',
             name: `${key}`,
             component: lazyLoadComponent(jsonFromResponse[key].LayoutName),
           });

src/store/index.js

@@ -10,103 +10,33 @@ export default createStore({
     }),
   ],
   state: {
-    makes: [],
-    models: [],
-    styles: [],
-    year: "",
-    make: "",
-    model: "",
-    style: "",
-    slideTransition: "none",
-    carImg:
-      "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg",
-    blurImg: true,
   },
   mutations: {
-    updateYear(state, data) {
-      state.year = data.year;
-      state.makes = data.makes.data;
-      state.slideTransition = "slide";
-    },
-    updateMake(state, data) {
-      state.make = data.make;
-      state.models = data.models.data;
-      state.slideTransition = "slide";
-    },
-    updateModel(state, data) {
-      state.model = data.model;
-      state.styles = data.styles.data;
-      state.slideTransition = "slide";
-    },
-    updateStyle(state, data) {
-      state.style = data.style;
-      state.carImg =
-        "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg";
-      state.blurImg = false;
-      state.slideTransition = "slide";
-    },
-    removeStyle(state) {
-      state.style = "";
-      state.blurImg = true;
-      state.carImg =
-        "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg";
-    },
   },
   actions: {
-      getYears(){
+    getVehicleModels({ commit, state }, { year, make }) {
-        return globalMethods.callHttpClient({
+      console.log(arguments);
-          method: endpoints.GetYears.method,
+      return globalMethods.callHttpClient({
-          endpoint: endpoints.GetYears.url,
+        method: endpoints.GetVehicleModels.method,
-          payload:{}
+        endpoint: `${endpoints.GetVehicleModels.url}/${year}/${encodeURI(make)}`,
-        });
+        payload: {}
-      },
+      });
-      selectYear(context, { year }) {
+    },
-        return globalMethods.callHttpClient({
+    getRouteInfo(context, { pageName }) {
-          method: endpoints.GetMakes.method,
+      return globalMethods.callHttpClient({
-          endpoint: endpoints.GetMakes.url,
+        method: endpoints.GetRouteInfoEndpoint.method,
-          payload:{
+        endpoint: endpoints.GetRouteInfoEndpoint.url,
-            "Year": year
+        payload: {
-          }
+          pageName: pageName,
-        });
+        },
-      },
+      });
-      selectMake({ commit, state }, { make }) {
+    },
-        return globalMethods.callHttpClient({
+    getPageData(context, { pageName }) {
-          method: endpoints.GetModels.method,
+      return globalMethods.callHttpClient({
-          endpoint: endpoints.GetModels.url,
+        method: endpoints.GetPageData.method,
-          payload:{
+        endpoint: endpoints.GetPageData.url.replace("{pageName}", pageName),
-            "Year": state.year,
+        payload: {},
-            "Make": make
+      });
-          }
+    },
-        });
-      },
-      selectModel({ commit, state }, { model }) {
-        return globalMethods.callHttpClient({
-          method: endpoints.GetStyles.method,
-          endpoint: endpoints.GetStyles.url,
-          payload:{
-            "Year": state.year,
-            "Make": state.make,
-            "Model": model
-          }
-        });
-      },
-      getRouteInfo(context, { relativeUrl }) {
-        return globalMethods.callHttpClient({
-          method: endpoints.GetRouteInfoEndpoint.method,
-          endpoint: endpoints.GetRouteInfoEndpoint.url,
-          payload: {
-            relativeUrl: relativeUrl,
-          },
-        });
-      },
-      // For mock data purposes only
-      getMockPageData(context, { relativeUrl }) {
-        return globalMethods.callMockHttpClient({
-          method: endpoints.GetPageData.method,
-          endpoint: relativeUrl,
-          payload: {
-          },
-        });
-      },
   },
 });

vue.config.js

@@ -3,16 +3,6 @@ process.env.VUE_APP_CONSUMER_API_GATEWAY = "https://consumerapidev.safelite.com"
 module.exports = {
   outputDir: "dist/fmg",
   publicPath: "/fmg",
-  devServer: {
-    port: 8080,
-    proxy: {
-      "api/v1/content*": {
-        target: "https://localhost:44360/",
-        ws: false,
-        changeOrigin: true,
-      },
-    },
-  },
   css: {
     loaderOptions: {
       sass: { // Load Order Matters!!!