lint + correcting some actions

jest.config.js

@@ -1,14 +1,20 @@
 module.exports = {
   verbose: true,
-  coverageReporters: ['html', 'text', 'jest-junit'],
+  coverageReporters: ["html", "text", "jest-junit"],
   preset: "@vue/cli-plugin-unit-jest",
-  transform: { "^.+\\.vue$": "vue-jest", },
+  transform: { "^.+\\.vue$": "vue-jest" },
-  moduleFileExtensions: ['js', 'vue'],
+  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: {
       statements: 90,
-    }
+    },
   },
 };

src/App.vue

@@ -1,4 +1,3 @@
 <template>
   <router-view></router-view>
 </template>
-

src/commonComponents/radioQuestion/radioQuestion.spec.js

@@ -1,22 +1,26 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount } from "@vue/test-utils";
-import radioQuestion from './radioQuestion';
+import radioQuestion from "./radioQuestion";
 
-describe('radioQuestion.vue', () => {
+describe("radioQuestion.vue", () => {
-    it("Should render the 'questionText' prop value as a span value for the radio question and  the 'answer' values should render as text values for radio components.", () => {
+  it("Should render the 'questionText' prop value as a span value for the radio question and  the 'answer' values should render as text values for radio components.", () => {
-        // Act
+    // Act
-        const wrapper = shallowMount(radioQuestion, {
+    const wrapper = shallowMount(radioQuestion, {
-            propsData: {
+      propsData: {
-                questionText: 'Question Text',
+        questionText: "Question Text",
-                answers: ['2023', '2022', '2021'],
+        answers: ["2023", "2022", "2021"],
-                chooseAnswer: function(test){ console.log(test) }
+        chooseAnswer: function (test) {
-            }
+          console.log(test);
-        });
+        },
+      },
+    });
 
-        // Assert
+    // Assert
-        expect(wrapper.find('.needed_car_info-text').text()).toEqual('Question Text');
+    expect(wrapper.find(".needed_car_info-text").text()).toEqual(
-        const radioButtons = wrapper.findAllComponents('[data-test="radio"]');
+      "Question Text"
-        expect(radioButtons[0].attributes('text')).toEqual('2023');
+    );
-        expect(radioButtons[2].attributes('text')).toEqual('2021');
+    const radioButtons = wrapper.findAllComponents('[data-test="radio"]');
-        expect(typeof wrapper.props().chooseAnswer).toBe('function');
+    expect(radioButtons[0].attributes("text")).toEqual("2023");
-    })
+    expect(radioButtons[2].attributes("text")).toEqual("2021");
-})
+    expect(typeof wrapper.props().chooseAnswer).toBe("function");
+  });
+});

src/commonComponents/radioQuestion/radioQuestion.vue

@@ -1,13 +1,20 @@
 <template>
   <div class="radio_question">
     <div class="needed_car_info d-flex mt-4 mb-3">
-      <span class="text-center fs-6 fw-bold w-100 needed_car_info-text">{{ questionText }}</span>
+      <span class="text-center fs-6 fw-bold w-100 needed_car_info-text">{{
+        questionText
+      }}</span>
     </div>
-      <div class="car_list overflow-scroll position-absolute">
+    <div class="car_list overflow-scroll position-absolute">
-          <div v-for="answer in answers" :key="answer" class="mb-2">
+      <div v-for="answer in answers" :key="answer" class="mb-2">
-              <radio :text="answer" :value="answer" @click="chooseAnswer(answer)" data-test="radio" />
+        <radio
-          </div>
+          :text="answer"
+          :value="answer"
+          @click="chooseAnswer(answer)"
+          data-test="radio"
+        />
       </div>
+    </div>
   </div>
 </template>
 
@@ -18,10 +25,10 @@ export default {
   props: {
     questionText: String,
     answers: Array,
-    chooseAnswer: Function
+    chooseAnswer: Function,
   },
   components: {
-    radio
+    radio,
-  }
+  },
 };
 </script>

src/constants/applicationConfig.js

@@ -1,5 +1,5 @@
 const applicationConfig = {
-CONSUMER_APIGATEWAY_URL: process.env.VUE_APP_CONSUMER_API_GATEWAY
+  CONSUMER_APIGATEWAY_URL: process.env.VUE_APP_CONSUMER_API_GATEWAY,
-}
+};
 
-export { applicationConfig }
+export { applicationConfig };

src/constants/endpoints.js

@@ -1,28 +1,28 @@
 const endpoints = {
-    GetRouteInfoEndpoint: {
+  GetRouteInfo: {
-        url: '/content/api/v1/content/RouteInfo',
+    url: "/content/api/v1/content/RouteInfo",
-        method: 'POST'
+    method: "POST",
-    },
+  },
-    GetYears: {
+  GetVehicleYears: {
-        url: '/vehicle/api/v1/vehicle/years',
+    url: "/vehicle/api/v1/vehicle/years",
-        method: 'GET'
+    method: "GET",
-    },
+  },
-    GetMakes: {
+  GetVehicleMakes: {
-        url: '/vehicle/api/v1/vehicle/Makes',
+    url: "/vehicle/api/v1/vehicle/Makes",
-        method: 'POST'
+    method: "GET",
-    },
+  },
-    GetVehicleModels: {
+  GetVehicleModels: {
-        url: '/vehicle/api/v1/vehicle/Models',
+    url: "/vehicle/api/v1/vehicle/Models",
-        method: 'GET'
+    method: "GET",
-    },
+  },
-    GetStyles: {
+  GetVehicleStyles: {
-        url: '/vehicle/api/v1/vehicle/Styles',
+    url: "/vehicle/api/v1/vehicle/Styles",
-        method: 'POST'
+    method: "GET",
-    },
+  },
-    GetPageData: {
+  GetPageData: {
-        url: '/content/api/v1/content/{pageName}',
+    url: "/content/api/v1/content",
-        method: 'GET'
+    method: "GET",
-    }
+  },
-}
+};
 
-export { endpoints }
+export { endpoints };

src/constants/storeActions.js

@@ -1,8 +1,10 @@
 const storeActions = {
-    GET_ROUTE_INFO_ACTION: "getRouteInfo",
+  GET_ROUTE_INFO_ACTION: "getRouteInfo",
-    GET_YEARS: 'getYears',
+  GET_PAGE_DATA: "getPageData",
-    GET_VEHICLE_MODELS: 'getVehicleModels',
+  GET_VEHICLE_YEARS: "getVehicleYears",
-    GET_PAGE_DATA: 'getPageData',
+  GET_VEHICLE_MAKES: "getVehicleMakes",
-}
+  GET_VEHICLE_MODELS: "getVehicleModels",
+  GET_VEHICLE_STYLES: "getVehicleStyles",
+};
 
-export { storeActions }
+export { storeActions };

src/constants/widgetNames.js

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

src/global-methods.js

@@ -3,11 +3,12 @@ import { applicationConfig } from "@/constants/applicationConfig.js";
 import httpStatusCodes from "http-status-codes";
 
 export default {
-  callHttpClient({ method, endpoint, payload}) {
+  callHttpClient({ method, endpoint, payload }) {
     return new Promise((resolve, reject) => {
-
       const apiGatewayUrl = applicationConfig.CONSUMER_APIGATEWAY_URL;
-      const payloadAndAnalyticsData = Object.assign({}, payload, {AppName: "FixMyGlass"});
+      const payloadAndAnalyticsData = Object.assign({}, payload, {
+        AppName: "FixMyGlass",
+      });
 
       axios({
         method: method,
@@ -15,7 +16,8 @@ export default {
         data: payloadAndAnalyticsData,
         crossDomain: true,
         responseType: {},
-      }).then((response) => {
+      }).then(
+        (response) => {
           if (response.status == httpStatusCodes.OK) {
             resolve(response);
           } else {
@@ -29,19 +31,17 @@ export default {
     });
   },
 
-  
   /* istanbul ignore next */
-  callMockHttpClient({ method, endpoint}) {
+  callMockHttpClient({ method, endpoint }) {
     // For Mock use only!
     return new Promise((resolve, reject) => {
-
       axios({
         method: method,
         url: endpoint,
         crossDomain: true,
         responseType: {},
-      }).then((response) => {
+      }).then(
-
+        (response) => {
           if (response.status == httpStatusCodes.OK) {
             resolve(response);
           } else {
@@ -53,5 +53,5 @@ export default {
         }
       );
     });
-  }
+  },
 };

src/global-methods.spec.js

@@ -1,73 +1,76 @@
 import globalMethods from "@/global-methods";
-import axios from 'axios';
+import axios from "axios";
 
 //Mock external dependencies
-jest.mock('axios');
+jest.mock("axios");
 
 it("Global Methods - Call Http Client - Should Resolve Promise", () => {
-    //Arrange
+  //Arrange
-    const endpoint = 'https://mock.safelite.com';
+  const endpoint = "https://mock.safelite.com";
-    const httpArgs = setupMocksForHttpClient({ endpoint: endpoint });
+  const httpArgs = setupMocksForHttpClient({ endpoint: endpoint });
 
-    //Act
+  //Act
-    globalMethods.callHttpClient(httpArgs)
+  globalMethods.callHttpClient(httpArgs).then((response) => {
-        .then((response) => {
+    //Assert
-
+    expect(axios.mock.calls[0][0].url).toContain(endpoint);
-            //Assert
+    expect(response.data.message).toContain("Success");
-            expect(axios.mock.calls[0][0].url).toContain(endpoint);
+    expect(response.status).toEqual(200);
-            expect(response.data.message).toContain('Success');
+  });
-            expect(response.status).toEqual(200);
-        });
 });
 
 it("Global Methods - Call Http Client - Should Reject Promise", () => {
-    //Arrange
+  //Arrange
-    const endpoint = 'https://mock.safelite.com';
+  const endpoint = "https://mock.safelite.com";
-    const httpArgs = setupMocksForHttpClient({ endpoint: endpoint, isError: true });
+  const httpArgs = setupMocksForHttpClient({
+    endpoint: endpoint,
+    isError: true,
+  });
 
-    //Act
+  //Act
-    globalMethods.callHttpClient(httpArgs)
+  globalMethods.callHttpClient(httpArgs).catch((err) => {
-        .catch((err) => {
+    //Assert
-            //Assert
+    expect(axios.mock.calls[0][0].url).toContain(endpoint);
-            expect(axios.mock.calls[0][0].url).toContain(endpoint);
+    expect(err.data.message).toContain("Error");
-            expect(err.data.message).toContain('Error');
+    expect(err.status).toEqual(500);
-            expect(err.status).toEqual(500);
+  });
-        });
 });
 
-function setupMocksForHttpClient({ endpoint = null, isError = false, additionalData = null }) {
+function setupMocksForHttpClient({
+  endpoint = null,
+  isError = false,
+  additionalData = null,
+}) {
+  //Clear node module
+  axios.mockClear();
 
-    //Clear node module
+  // Success Response
-    axios.mockClear();
+  const response = {
+    status: 200,
+    data: {
+      message: "Success",
+      additionalData: additionalData,
+    },
+  };
 
-    // Success Response
+  // Error Response
-    const response = { 
+  const error = {
-        status: 200,
+    response: {
-        data: {
+      status: 500,
-            message: 'Success',
+      data: {
-            additionalData: additionalData
+        message: "Error",
-        }
+        additionalData: additionalData,
-    };
+      },
+    },
+  };
 
-    // Error Response
+  // Error interceptor on Axios returns a different object, so we need to mimic that.
-    const error = {
+  if (isError) {
-        response: { 
+    axios.mockRejectedValue(error);
-            status: 500,
+  } else {
-            data: {
+    axios.mockResolvedValue(response);
-                message: 'Error',
+  }
-                additionalData: additionalData
-            }
-        }
-    }
 
-    // Error interceptor on Axios returns a different object, so we need to mimic that.
+  return {
-    if (isError) {
+    endpoint: endpoint,
-        axios.mockRejectedValue(error);
+  };
-    } else {
+}
-        axios.mockResolvedValue(response);
-    }
-
-    return {
-        endpoint: endpoint
-    }
-}

src/helpers/unitTestHelper.js

@@ -1,26 +1,26 @@
 import { storeActions } from "@/constants/storeActions";
 
 export function getMountOptions(mockData) {
-    // Define our mocks to attached to the 'global' object for Vue/Jest.
+  // Define our mocks to attached to the 'global' object for Vue/Jest.
-    const mocks = {};
+  const mocks = {};
 
-    mocks.dispatchNonBlockingStoreAction = jest.fn();
+  mocks.dispatchNonBlockingStoreAction = jest.fn();
-    mocks.dispatchNonBlockingStoreAction.mockImplementation((actionName) => {
+  mocks.dispatchNonBlockingStoreAction.mockImplementation((actionName) => {
-    
+    let actionFilterResult = mockData.actionList.filter(
-        let actionFilterResult = mockData.actionList.filter(x => x.actionName == actionName);
+      (x) => x.actionName == actionName
-        
+    );
-        if (actionFilterResult.length > 0 && actionFilterResult.length === 1) {
 
-            return Promise.resolve({
+    if (actionFilterResult.length > 0 && actionFilterResult.length === 1) {
-                data: actionFilterResult[0].data
+      return Promise.resolve({
-            });
+        data: actionFilterResult[0].data,
-        }
+      });
-    });
+    }
-    // Mock store actions from js file
+  });
-    mocks.storeActions = storeActions;
+  // Mock store actions from js file
-    const global = {
+  mocks.storeActions = storeActions;
-        mocks: mocks
+  const global = {
-    };
+    mocks: mocks,
+  };
 
-    return { global }
+  return { global };
-}
+}

src/layouts/componentTest/componentTest.vue

@@ -1,4 +1,4 @@
-  <template>
+<template>
   <div class="container-fluid container-shadow p-2 rounded-3">
     <div class="row g-2">
       <radioCard
@@ -25,31 +25,30 @@
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonPrimary
+        <buttonPrimary buttonText="Primary" />
-          buttonText="Primary"
-        />
       </div>
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonSecondary
+        <buttonSecondary buttonText="Secondary" />
-          buttonText="Secondary"
-        />
       </div>
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <listButton
+        <listButton buttonText="List Button" errorText="Test error message" />
-          buttonText="List Button"
-          errorText="Test error message"
-        />
       </div>
     </div>
     <div class="row">
       <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
-      <div role="radiogroup" aria-labelledby="select-year-radio-group" class="col my-3 d-flex align-items-center flex-column">
+      <div
+        role="radiogroup"
+        aria-labelledby="select-year-radio-group"
+        class="col my-3 d-flex align-items-center flex-column"
+      >
         <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
-        <h3 class="visually-hidden" id="select-year-radio-group">Select Vehicle Year</h3>
+        <h3 class="visually-hidden" id="select-year-radio-group">
+          Select Vehicle Year
+        </h3>
         <radioList
           groupName="demo"
           ariaLabelBy="vehicle-year"
@@ -78,8 +77,12 @@
     <div class="row my-2">
       <div class="col">
         <p>This is default body copy font size/weight</p>
-        <p class="small">This is small body copy using <code>.small</code> class</p>
+        <p class="small">
-        <p><small>This is also small using <code>&lt;small&gt;</code> tag</small></p>
+          This is small body copy using <code>.small</code> class
+        </p>
+        <p>
+          <small>This is also small using <code>&lt;small&gt;</code> tag</small>
+        </p>
       </div>
     </div>
     <div class="row my-2">
@@ -138,12 +141,12 @@ export default {
     buttonSecondary,
     radioCard,
     listButton,
-    radioList
+    radioList,
   },
   data() {
     return {
       years: [2023, 2022, 2021, 2020],
     };
-  }
+  },
 };
 </script>

src/layouts/notFound/notFound.vue

@@ -1,3 +1,3 @@
 <template>
-    <p> Not Found .... :( </p>
+  <p>Not Found .... :(</p>
-</template>
+</template>

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

@@ -1,55 +1,52 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount } from "@vue/test-utils";
-import { nextTick } from 'vue'
+import { nextTick } from "vue";
-import { getMountOptions } from '@/helpers/unitTestHelper.js';
+import { getMountOptions } from "@/helpers/unitTestHelper.js";
-import { storeActions } from '@/constants/storeActions.js'
+import { storeActions } from "@/constants/storeActions.js";
-import selectYear from './selectYear.vue';
+import selectYear from "./selectYear.vue";
 
-describe('selectYear.vue', () => {
+describe("selectYear.vue", () => {
-    test("Should render the 'pageHeader.Text' data value 'text' prop value for the Header component, 'radioQuestion.Question' data value as 'questionText' prop value for the 'radioQuestion' component and 'years' values for 'answers' prop values for the 'radioQuestion' component.", async () => {
+  test("Should render the 'pageHeader.Text' data value 'text' prop value for the Header component, 'radioQuestion.Question' data value as 'questionText' prop value for the 'radioQuestion' component and 'years' values for 'answers' prop values for the 'radioQuestion' component.", async () => {
-        
+    // Arrange
-        // Arrange
+    const mockDataAndAction = {
-        const mockDataAndAction = {
+      actionList: [
-            actionList: [
+        {
-                {
+          actionName: storeActions.GET_PAGE_DATA,
-                    actionName: storeActions.GET_PAGE_DATA,
+          data: {
-                    data: {
+            Result: [
-                        "Result": [
+              {
-                            {
+                Type: "PageHeadingWidget",
-                                Type: "PageHeadingWidget",
+                Model: {
-                                Model: {
+                  Text: "Mock Data",
-                                    Text: "Mock Data"
-                                }
-                            },
-                            {
-                                Type: "RadioQuestionWidget",
-                                Model: {
-                                    Question: "Mock Data"
-                                }
-                            }
-                        ]
-                    }
                 },
-                {
+              },
-                    actionName: storeActions.GET_YEARS,
+              {
-                    data: ['2023', '2022', '2021']
+                Type: "RadioQuestionWidget",
-                }
+                Model: {
-            ]
+                  Question: "Mock Data",
-        };
+                },
+              },
+            ],
+          },
+        },
+        {
+          actionName: storeActions.GET_VEHICLE_YEARS,
+          data: ["2023", "2022", "2021"],
+        },
+      ],
+    };
 
-        const mountOptions = getMountOptions(mockDataAndAction);
+    const mountOptions = getMountOptions(mockDataAndAction);
 
-        // Act
+    // Act
-        const wrapper = shallowMount(selectYear, mountOptions);
+    const wrapper = shallowMount(selectYear, mountOptions);
-        await nextTick()
+    await nextTick();
 
-        // Assert
+    // Assert
-        const header = await wrapper.find('.Header');
+    const header = await wrapper.find(".Header");
-        expect(header.attributes('text')).toEqual("Mock Data");
+    expect(header.attributes("text")).toEqual("Mock Data");
 
-        const radioQuestion = await wrapper.findComponent('.radioQuestion');
+    const radioQuestion = await wrapper.findComponent(".radioQuestion");
-        expect(radioQuestion.attributes('answers')).toEqual('2023,2022,2021');
+    expect(radioQuestion.attributes("answers")).toEqual("2023,2022,2021");
-        expect(radioQuestion.attributes('questiontext')).toEqual("Mock Data");
+    expect(radioQuestion.attributes("questiontext")).toEqual("Mock Data");
-    });
+  });
-
+});
-
-})

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

@@ -1,8 +1,8 @@
 <template>
 <div class="select-car">
     <div class="select-car-form rounded text-center">
-        <Header :text="headerTextWidgetModel.HeaderText" class="Header" />
+        <!-- <Header :text="headerTextWidgetModel.HeaderText" class="Header" />
-        <yearQuestion :questionText="radioQuestionWidgetModel.QuestionText" />
+      <yearQuestion :questionText="radioQuestionWidgetModel.QuestionText" /> -->
     </div>
 </div>
 </template>
@@ -10,33 +10,25 @@
 <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: {},
+            headerTextWidgets: {},
-            radioQuestionWidgetModel: {}
+            radioQuestionWidgets: {},
         };
     },
-    computed: {
+    computed: {},
-        ...mapState(["slideTransition", "carImg", "blurImg", "style"]),
+    async mounted() {
-    },
+
-    created() {
+        const content = await this.GetContentFromCms();
-        this.dispatchNonBlockingStoreAction(this.storeActions.GET_VEHICLE_MODELS, {
+        this.headerTextWidgets = content.HeaderTextWidget;
-                year: '2020',
+        console.log(content);
-                make: 'Alfa Romeo/Chrysler'
-            }, true)
-            .then((response) => {
-                console.log(response);
-            })
     },
     components: {
-        yearQuestion,
+        // yearQuestion,
-        Header,
+        // Header,
     },
 };
 </script>

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

@@ -8,37 +8,25 @@ import store from "@/store";
 import router from "@/router";
 
 export default {
-    name: 'year-question',
+    name: "year-question",
     props: {
-        questionText: String
+        questionText: String,
     },
     data() {
         return {
-            years: []
+            years: [],
-        }
+        };
     },
-    created() {
+    mounted() {
-        this.dispatchNonBlockingStoreAction(this.storeActions.GET_YEARS)
+        this.dispatchNonBlockingStoreAction(this.storeActions.GET_VEHICLE_YEARS, {}
-            .then((response) => {
+        ).then((response) => {
-                this.years = response.data;
+            this.years = response.data;
-            });
+        });
     },
     components: {
-        radioQuestion
+        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/main.js

@@ -1,7 +1,7 @@
 import { createApp } from "vue";
 import App from "./App.vue";
-import router from './router';
+import router from "./router";
-import store from '@/store';
+import store from "@/store";
 import baseMixin from "@/mixins/baseMixin.js";
 //Bootstrap JavaScript
 import "../node_modules/bootstrap/dist/js/bootstrap.js";

src/mixins/baseMixin.js

@@ -2,62 +2,61 @@ import { storeActions } from "@/constants/storeActions.js";
 import { widgetNames } from "@/constants/widgetNames.js";
 
 export default {
-    methods: {
+  methods: {
-        dispatchBlockingStoreAction(type, payload) {
+    dispatchBlockingStoreAction(type, payload) {
-            // globalMethods.showWaitingModal(true);
+      // globalMethods.showWaitingModal(true);
 
-            return this.dispatchNonBlockingStoreAction(type, payload)
+      return this.dispatchNonBlockingStoreAction(type, payload).finally(() => {
-                .finally(() => {
+        // globalMethods.showWaitingModal(false);
-                    // globalMethods.showWaitingModal(false);
+      });
-                });;
+    },
-        },
+    dispatchNonBlockingStoreAction(type, payload, encodePayload = false) {
-        dispatchNonBlockingStoreAction(type, payload, encodePayload = false) {
+      // Encode the payload if required
+      if (encodePayload) {
+        encodeUriData(payload);
+      }
 
-            // Encode the payload if required
+      return this.$store.dispatch(type, payload);
-            if (encodePayload) {
+    },
-                encodeUriData(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;
             }
 
-            return this.$store.dispatch(type, payload);
+            pageDataFromCms[widget.Type] = [widget.Model];
-        },
+          }
+        });
 
-        GetContentFromCms() {
+        return pageDataFromCms;
-            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() {
+  computed: {
-            return storeActions;
+    storeActions() {
-        },
+      return storeActions;
-        widgetNames() {
-            return widgetNames;
-        }
     },
-}
+    widgetNames() {
+      return widgetNames;
+    },
+  },
+};
 
 function encodeUriData(payload) {
-    if (payload && Object.keys(payload).length > 0) {
+  if (payload && Object.keys(payload).length > 0) {
-        // Loop through the payload and encode the values
+    // Loop through the payload and encode the values
-        Object.keys(payload).forEach(key => {
+    Object.keys(payload).forEach((key) => {
-            payload[key] = encodeURIComponent(payload[key]);
+      payload[key] = encodeURIComponent(payload[key]);
-        });
+    });
-    }
+  }
-}
+}

src/router/index.js

@@ -7,9 +7,9 @@ import store from "@/store";
 
 const routes = [
   {
-    path: '/:pathMatch(.*)*',
+    path: "/:pathMatch(.*)*",
     component: NotFound,
-    name: "NotFound"
+    name: "NotFound",
   },
   {
     path: "/component-test", // This is a temporary route for testing.
@@ -19,12 +19,10 @@ const routes = [
   {
     path: "/",
     beforeEnter(to, from, next) {
-
       // If we have no query string, or we don't have the FmgPage query string.
       if (to.query.fmgPage === undefined) {
         RetainStructureAndGoTo404(to, next);
       } else {
-
         // If we already have our route, go to it.
         if (router.hasRoute(to.query.fmgPage)) {
           return next({
@@ -34,24 +32,22 @@ const routes = [
         }
 
         // Get route info for the given url. Names will have a 1:1 relationship with names in the Cms.
-        GetRouteInfoFromPageName(to.query.fmgPage).then((routeData) => {
+        GetRouteInfoFromPageName(to.query.fmgPage)
+          .then((routeData) => {
+            // Add our dynamic route.
+            router.addRoute({
+              path: routeData[0].path, // Always the same path, because we control it with query strings.
+              name: routeData[0].name,
+              component: routeData[0].component,
+            });
 
-          // Add our dynamic route.
+            // Assign current query string parameters, as well as our fmgPage one.
-          router.addRoute({
+            next({
-            path: routeData[0].path, // Always the same path, because we control it with query strings.
+              name: routeData[0].name,
-            name: routeData[0].name,
+              query: Object.assign(to.query, { fmgPage: routeData[0].name }),
-            component: routeData[0].component,
+            });
-          });
+          })
-
-          // Assign current query string parameters, as well as our fmgPage one.
-          next({
-            name: routeData[0].name,
-            query: Object.assign(to.query, { fmgPage: routeData[0].name })
-          });
-
-        })
           .catch((error) => {
-
             // If we can't find the route, go to the 404 page.
             RetainStructureAndGoTo404(to, next);
 
@@ -68,7 +64,7 @@ const router = createRouter({
   routes,
 });
 
-// Get route information by page name. 
+// Get route information by page name.
 // This will reach out to the Cms and there is a 1:1 relationship between page names and route names.
 function GetRouteInfoFromPageName(pageName) {
   return new Promise((resolve, reject) => {
@@ -81,14 +77,13 @@ function GetRouteInfoFromPageName(pageName) {
 
         Object.keys(jsonFromResponse).forEach((key) => {
           routeData.push({
-            path: '/',
+            path: "/",
             name: `${key}`,
             component: lazyLoadComponent(jsonFromResponse[key].LayoutName),
           });
         });
 
         resolve(routeData);
-
       })
       .catch((error) => {
         reject(error);
@@ -99,10 +94,10 @@ function GetRouteInfoFromPageName(pageName) {
 // Go to our 404 page but retain our structure when we go there (path, queryString, hash).
 function RetainStructureAndGoTo404(to, next) {
   next({
-    name: 'NotFound',
+    name: "NotFound",
-    params: { pathMatch: to.path.split('/').slice(1) },
+    params: { pathMatch: to.path.split("/").slice(1) },
     query: to.query,
-    hash: to.hash
+    hash: to.hash,
   });
 }
 

src/store/index.js

@@ -9,23 +9,44 @@ export default createStore({
       storage: window.sessionStorage,
     }),
   ],
-  state: {
+  state: {},
-  },
+  mutations: {},
-  mutations: {
-  },
   actions: {
-    getVehicleModels({ commit, state }, { year, make }) {
+    // Vehicle API Actions
-      console.log(arguments);
+    getVehicleYears(context) {
       return globalMethods.callHttpClient({
-        method: endpoints.GetVehicleModels.method,
+        method: endpoints.GetVehicleYears.method,
-        endpoint: `${endpoints.GetVehicleModels.url}/${year}/${encodeURI(make)}`,
+        endpoint: endpoints.GetVehicleYears.url,
-        payload: {}
+        payload: {},
       });
     },
+    getVehicleMakes(context, { year }) {
+      return globalMethods.callHttpClient({
+        method: endpoints.GetVehicleMakes.method,
+        endpoint: `${endpoints.GetVehicleMakes.url}/${year}`,
+        payload: {},
+      });
+    },
+    getVehicleModels(context, { year, make }) {
+      return globalMethods.callHttpClient({
+        method: endpoints.GetVehicleModels.method,
+        endpoint: `${endpoints.GetVehicleModels.url}/${year}/${make}`,
+        payload: {},
+      });
+    },
+    getVehicleStyles(context, { year, make, model }) {
+      return globalMethods.callHttpClient({
+        method: endpoints.GetVehicleStyles.method,
+        endpoint: `${endpoints.GetVehicleStyles.url}/${year}/${make}/${model}`,
+        payload: {},
+      });
+    },
+
+    // Content API Actions
     getRouteInfo(context, { pageName }) {
       return globalMethods.callHttpClient({
-        method: endpoints.GetRouteInfoEndpoint.method,
+        method: endpoints.GetRouteInfo.method,
-        endpoint: endpoints.GetRouteInfoEndpoint.url,
+        endpoint: endpoints.GetRouteInfo.url,
         payload: {
           pageName: pageName,
         },
@@ -34,7 +55,7 @@ export default createStore({
     getPageData(context, { pageName }) {
       return globalMethods.callHttpClient({
         method: endpoints.GetPageData.method,
-        endpoint: endpoints.GetPageData.url.replace("{pageName}", pageName),
+        endpoint: `${endpoints.GetPageData.url}/${pageName}`,
         payload: {},
       });
     },

src/uxComponents/buttonPrimary/buttonPrimary.spec.js

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

src/uxComponents/buttonPrimary/buttonPrimary.vue

@@ -5,7 +5,7 @@
     class="btn btn-primary d-flex align-items-center"
     v-on:click="showLoader()"
     v-bind:class="[this.isLoading ? 'button-loader' : 'not-loading']"
-    >
+  >
     {{ this.buttonText }}
   </button>
 </template>
@@ -15,11 +15,11 @@ export default {
   name: "buttonPrimary",
   props: {
     buttonText: String,
-    isDisabled: Boolean
+    isDisabled: Boolean,
   },
   data() {
     return {
-      isLoading: false
+      isLoading: false,
     };
   },
   methods: {

src/uxComponents/buttonSecondary/buttonSecondary.spec.js

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

src/uxComponents/buttonSecondary/buttonSecondary.vue

@@ -5,7 +5,7 @@
     class="btn btn-secondary d-flex align-items-center"
     v-on:click="showLoader()"
     v-bind:class="[this.isLoading ? 'button-loader' : 'not-loading']"
-    >
+  >
     {{ this.buttonText }}
   </button>
 </template>
@@ -14,7 +14,7 @@
 export default {
   name: "buttonSecondary",
   props: {
-    buttonText: String
+    buttonText: String,
   },
   data() {
     return {

src/uxComponents/confetti/confetti.spec.js

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

src/uxComponents/header/header.spec.js

@@ -1,16 +1,16 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount } from "@vue/test-utils";
-import Header from './header';
+import Header from "./header";
 
-describe('Header.vue', () => {
+describe("Header.vue", () => {
-    it("Should render the 'text' prop value as a span value for the header span text value.", () => {
+  it("Should render the 'text' prop value as a span value for the header span text value.", () => {
-        // Act
+    // Act
-        const wrapper = shallowMount(Header, {
+    const wrapper = shallowMount(Header, {
-            propsData: {
+      propsData: {
-                text: 'Header Content'
+        text: "Header Content",
-            }
+      },
-        });
+    });
 
-        // Assert
+    // Assert
-        expect(wrapper.find('span').text()).toContain("Header Content");
+    expect(wrapper.find("span").text()).toContain("Header Content");
-    })
+  });
-});
+});

src/uxComponents/header/header.vue

@@ -1,16 +1,16 @@
 <template>
-    <div class="current_car_info-text">
+  <div class="current_car_info-text">
-        <div class="d-flex align-items-center justify-content-center">
+    <div class="d-flex align-items-center justify-content-center">
-            <span class="text-center text-dark fs-5 d-block">{{ text }}</span>
+      <span class="text-center text-dark fs-5 d-block">{{ text }}</span>
-        </div>
     </div>
+  </div>
 </template>
 
 <script>
 export default {
   name: "Header",
   props: {
-    text: String
+    text: String,
-  }
+  },
 };
-</script>
+</script>

src/uxComponents/listButton/listButton.spec.js

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

src/uxComponents/listButton/listButton.vue

@@ -3,8 +3,11 @@
     <button
       class="btn list-button d-flex align-items-center"
       v-on:click="showLoader()"
-      v-bind:class="[this.isLoading ? 'button-loader' : 'not-loading',this.isError ? 'error' : '']"
+      v-bind:class="[
-      >
+        this.isLoading ? 'button-loader' : 'not-loading',
+        this.isError ? 'error' : '',
+      ]"
+    >
       {{ this.buttonText }}
     </button>
     <label class="small mt-1">{{ this.errorText }}</label>
@@ -16,12 +19,12 @@ export default {
   name: "listButton",
   props: {
     buttonText: String,
-    errorText: String
+    errorText: String,
   },
   data() {
     return {
       isLoading: false,
-      isError: false
+      isError: false,
     };
   },
   methods: {

src/uxComponents/radio/radio.spec.js

@@ -1,23 +1,23 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount } from "@vue/test-utils";
-import radio from './radio';
+import radio from "./radio";
 
-describe('radio.vue', () => {
+describe("radio.vue", () => {
-    it("Should render the 'text' prop value as a span value for the radio button label and add the 'value' prop value as the radio button value and id.", () => {
+  it("Should render the 'text' prop value as a span value for the radio button label and add the 'value' prop value as the radio button value and id.", () => {
-        // Act
+    // Act
-        const wrapper = shallowMount(radio, {
+    const wrapper = shallowMount(radio, {
-            propsData: {
+      propsData: {
-                value: '2023',
+        value: "2023",
-                text: '12'
+        text: "12",
-            }
+      },
-        });
+    });
 
-        // Assert
+    // Assert
-        expect(wrapper.find('span').text()).toEqual('12');
+    expect(wrapper.find("span").text()).toEqual("12");
-        expect(wrapper.find('input').attributes()).toEqual({
+    expect(wrapper.find("input").attributes()).toEqual({
-            class: 'position-absolute opacity-0',
+      class: "position-absolute opacity-0",
-            id: '2023',
+      id: "2023",
-            type: 'radio',
+      type: "radio",
-            value: '2023'
+      value: "2023",
-        });
+    });
-    })
+  });
-})
+});

src/uxComponents/radio/radio.vue

@@ -1,30 +1,26 @@
 <template>
-<div>
+  <div>
     <input
-        type="radio"
+      type="radio"
-        :id="this.value"
+      :id="this.value"
-        :value="this.value"
+      :value="this.value"
-        class="position-absolute opacity-0"
+      class="position-absolute opacity-0"
-        v-on:click="showLoader()"
+      v-on:click="showLoader()"
     />
     <label
-        :for="this.value"
+      :for="this.value"
-        class="btn list-button d-flex align-items-center"
+      class="btn list-button d-flex align-items-center"
-        v-bind:class="[this.isLoading ? 'button-loader' : '']"
+      v-bind:class="[this.isLoading ? 'button-loader' : '']"
     >
-        <span>{{ text }}</span>
+      <span>{{ text }}</span>
     </label>
-</div>
+  </div>
-  
 </template>
 
 <script>
 export default {
   name: "radio",
-  props: [
+  props: ["value", "text"],
-    "value",
-    "text"
-  ],
   data() {
     return {
       isLoading: false,

src/uxComponents/radioCard/radioCard.spec.js

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

src/uxComponents/radioCard/radioCard.vue

@@ -47,7 +47,7 @@ export default {
 </script>
 <style lang="scss">
 .radio-card {
-  input[type=radio] {
+  input[type="radio"] {
     &:focus + label {
       background-color: $white;
       box-shadow: 0px 0px 0px 4px $blue;
@@ -74,5 +74,4 @@ export default {
     }
   }
 }
-
+</style>
-</style>

src/uxComponents/radioList/radioList.spec.js

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

src/uxComponents/radioList/radioList.vue

@@ -1,28 +1,36 @@
 <template>
   <div class="radiogroup radio-list-button d-flex flex-column w-100">
-    <input type="radio" v-bind:id="radioID" v-bind:name="groupName" v-bind:value="radioID">
+    <input
-    <label role="radio" tabindex="0" aria-checked="false" v-bind:for="radioID" class="mb-2 d-flex align-items-center p-2"
+      type="radio"
-    v-on:click="showLoader()"
+      v-bind:id="radioID"
-    v-bind:class="[this.isLoading ? 'button-loader' : 'not-loading',this.isError ? 'error' : '']"
+      v-bind:name="groupName"
-    >{{radioID}}</label>
+      v-bind:value="radioID"
-    <p class="small">{{errorMessage}}</p>
+    />
+    <label
+      role="radio"
+      tabindex="0"
+      aria-checked="false"
+      v-bind:for="radioID"
+      class="mb-2 d-flex align-items-center p-2"
+      v-on:click="showLoader()"
+      v-bind:class="[
+        this.isLoading ? 'button-loader' : 'not-loading',
+        this.isError ? 'error' : '',
+      ]"
+      >{{ radioID }}</label
+    >
+    <p class="small">{{ errorMessage }}</p>
   </div>
 </template>
 
 <script>
 export default {
   name: "radioList",
-  props: [
+  props: ["groupName", "ariaLabelBy", "radioID", "errorMessage"],
-    "groupName",
-    "ariaLabelBy",
-    "radioID",
-    "errorMessage"
-
-  ],
   data() {
     return {
       isLoading: false,
-      isError: false
+      isError: false,
     };
   },
   methods: {

vue.config.js

@@ -1,11 +1,13 @@
-process.env.VUE_APP_CONSUMER_API_GATEWAY = "https://consumerapidev.safelite.com";
+process.env.VUE_APP_CONSUMER_API_GATEWAY =
+  "https://consumerapidev.safelite.com";
 
 module.exports = {
   outputDir: "dist/fmg",
   publicPath: "/fmg",
   css: {
     loaderOptions: {
-      sass: { // Load Order Matters!!!
+      sass: {
+        // Load Order Matters!!!
         prependData: `
         @import "./node_modules/bootstrap/scss/functions";
         @import "@/styles/uxVariables.scss";
@@ -17,8 +19,8 @@ module.exports = {
         @import "@/styles/commonRadioStyles.scss";
         @import "@/styles/commonTypographyStyles.scss";
         @import "@/styles/commonComponentStyles/ymmsCommonStyles.scss";
-        `
+        `,
-      }
+      },
-    }
+    },
-  }
+  },
 };

vue.release.config.js

@@ -5,7 +5,8 @@ module.exports = {
   publicPath: "/fmg",
   css: {
     loaderOptions: {
-      sass: { // Load Order Matters!!!
+      sass: {
+        // Load Order Matters!!!
         prependData: `
         @import "./node_modules/bootstrap/scss/functions";
         @import "@/styles/uxVariables.scss";
@@ -17,8 +18,8 @@ module.exports = {
         @import "@/styles/commonRadioStyles.scss";
         @import "@/styles/commonTypographyStyles.scss";
         @import "@/styles/commonComponentStyles/ymmsCommonStyles.scss";
-        `
+        `,
-      }
+      },
-    }
+    },
-  }
+  },
 };