diff --git a/package-lock.json b/package-lock.json index 64b3439b..a16b2e52 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17717,6 +17717,29 @@ "webpack-merge": "^5.7.3", "webpack-virtual-modules": "^0.4.2", "whatwg-fetch": "^3.6.2" + }, + "dependencies": { + "@vue/vue-loader-v15": { + "version": "npm:vue-loader@15.10.0", + "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.0.tgz", + "integrity": "sha512-VU6tuO8eKajrFeBzMssFUP9SvakEeeSi1BxdTH5o3+1yUyrldp8IERkSdXlMI2t4kxF2sqYUDsQY+WJBxzBmZg==", + "dev": true, + "requires": { + "@vue/component-compiler-utils": "^3.1.0", + "hash-sum": "^1.0.2", + "loader-utils": "^1.1.0", + "vue-hot-reload-api": "^2.3.0", + "vue-style-loader": "^4.1.0" + }, + "dependencies": { + "hash-sum": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz", + "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==", + "dev": true + } + } + } } }, "@vue/cli-shared-utils": { @@ -17967,27 +17990,6 @@ "dev": true, "requires": {} }, - "@vue/vue-loader-v15": { - "version": "npm:vue-loader@15.10.0", - "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.0.tgz", - "integrity": "sha512-VU6tuO8eKajrFeBzMssFUP9SvakEeeSi1BxdTH5o3+1yUyrldp8IERkSdXlMI2t4kxF2sqYUDsQY+WJBxzBmZg==", - "dev": true, - "requires": { - "@vue/component-compiler-utils": "^3.1.0", - "hash-sum": "^1.0.2", - "loader-utils": "^1.1.0", - "vue-hot-reload-api": "^2.3.0", - "vue-style-loader": "^4.1.0" - }, - "dependencies": { - "hash-sum": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz", - "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==", - "dev": true - } - } - }, "@vue/vue3-jest": { "version": "27.0.0", "resolved": "https://registry.npmjs.org/@vue/vue3-jest/-/vue3-jest-27.0.0.tgz", diff --git a/public/index.html b/public/index.html index 5f556395..97071c00 100644 --- a/public/index.html +++ b/public/index.html @@ -3,12 +3,16 @@ - + + + + + + <%= htmlWebpackPlugin.options.title %> diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 10337778..4734ed12 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -225,7 +225,7 @@ margin-top: 1.5rem; margin-bottom: 1rem; font-size: 1rem; - line-height: 1.625rem; + line-height: 1.5rem; & > span { text-align: center; diff --git a/src/common-components/site-sub-header/button-back/button-back.spec.js b/src/common-components/site-sub-header/button-back/button-back.spec.js new file mode 100644 index 00000000..c7bff87f --- /dev/null +++ b/src/common-components/site-sub-header/button-back/button-back.spec.js @@ -0,0 +1,21 @@ +import { shallowMount } from "@vue/test-utils"; +import buttonBack from "./button-back"; + +describe("back button", () => { + test("renders a button", () => { + // Arrange + const myFunction = () => {}; + + // Act + const wrapper = shallowMount(buttonBack, { + propsData: { + backButtonAction: myFunction, + backButtonAccessibleText: "something", + }, + }); + + // Assert + expect(wrapper.find("button").exists()).toBe(true); + wrapper.unmount(); + }); +}); diff --git a/src/common-components/site-sub-header/button-back/button-back.vue b/src/common-components/site-sub-header/button-back/button-back.vue new file mode 100644 index 00000000..cf3a630b --- /dev/null +++ b/src/common-components/site-sub-header/button-back/button-back.vue @@ -0,0 +1,82 @@ + + + + + diff --git a/src/common-components/site-sub-header/site-sub-header.vue b/src/common-components/site-sub-header/site-sub-header.vue index 22064035..c394d214 100644 --- a/src/common-components/site-sub-header/site-sub-header.vue +++ b/src/common-components/site-sub-header/site-sub-header.vue @@ -5,23 +5,39 @@ {{ content }} + diff --git a/src/common-components/vehicle-banner/vehicle-banner.vue b/src/common-components/vehicle-banner/vehicle-banner.vue index 534313df..9fffd974 100644 --- a/src/common-components/vehicle-banner/vehicle-banner.vue +++ b/src/common-components/vehicle-banner/vehicle-banner.vue @@ -9,7 +9,7 @@ + \ No newline at end of file diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js index 66012402..f1cd1b21 100644 --- a/src/layouts/vehicle-make/vehicle-make.spec.js +++ b/src/layouts/vehicle-make/vehicle-make.spec.js @@ -1 +1,140 @@ -test.todo("some test to be written in the future"); \ No newline at end of file +// Supporting Files +import { shallowMount } from "@vue/test-utils"; +import { settleAllPromises } from "@/helpers/layout-helper.js"; +import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; +import baseMixin from "@/mixins/base-mixin.js"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; +import { nextTick } from "vue"; +import { useMainStore } from "@/store"; + +// Components +import vehicleMake from "@/layouts/vehicle-make/vehicle-make.vue"; +import makeQuestion from "@/layouts/vehicle-make/make-question/make-question"; + +// Mock fetchCmsContentForPage +jest.mock("@/helpers/cms-content-helper", () => ({ + fetchCmsContentForPage: jest.fn(), +})); + +// Mock our module for promises. +jest.mock("@/helpers/layout-helper.js", () => ({ + settleAllPromises: jest.fn(), +})); + +describe("vehicle-make.vue", () => { + + test("Make question component is initized with api data", async () => { + //Arrange + const makeQuestionInitialData = ["honda", "ford", "dodge"]; + const { wrapper, apiPromise } = setupMocks({ + makeQuestionInitialData: makeQuestionInitialData, + }); + + //Act + vehicleMake.beforeRouteEnter.call( + wrapper.vm, + { query: { issPage: "vehicle-make" } }, + undefined, + (c) => c(wrapper.vm) + ); + + //Assert + apiPromise.finally(() => { + expect(makeQuestion.methods.initializeComponent).toHaveBeenCalledWith( + makeQuestionInitialData + ); + }); + }); + + test("BackButtonAction triggers a router.navigate change", async () => { + //Arrange + const { wrapper, apiPromise } = setupMocks({ + pageHeaderWidgetHeaderText: "Select a make to get started", + mountOptionsMockData: { + router: { + navigate: jest.fn(), + }, + }, + }); + + //Act + vehicleMake.beforeRouteEnter.call( + wrapper.vm, + { query: { issPage: "vehicle-make" } }, + undefined, + (c) => c(wrapper.vm) + ); + wrapper.vm.backButtonAction(); + await nextTick(); + + //Assert + apiPromise.finally(() => { + expect(wrapper.vm.$router.navigate).toHaveBeenCalled(); + }); + }); + + test("Year set, arePagePrerequisitesValid should be true ", async () => { + //Arrange + const { wrapper } = setupMocks({}); + useMainStore().order.vehicle.year = 2001; + + //Act + vehicleMake.beforeRouteEnter.call( + wrapper.vm, + { query: { issPage: "vehicle-make" } }, + undefined, + (c) => c(wrapper.vm) + ); + + let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid(); + + //Assert + expect(arePagePrerequisitesValid).toBe(true); + }); + +}); + +function setupMocks({ + vehicleMakeQuestionCmsContent = {}, + makeQuestionInitialData = {}, + pageHeaderWidgetHeaderText = {}, + mountOptionsMockData = {}, +}) { + //Mock api responses + const apiResponses = { + cmsContent: { + SiteSubHeaderWidget: pageHeaderWidgetHeaderText, + VehicleMakeQuestion: vehicleMakeQuestionCmsContent, + VehicleBannerWidget: { + GenericVehicleImage: + "https://digitalisscms.dev.safelite.io/images/default-source/default-album/blurred-image.jpg", + }, + SiteHeaderWidget: { + LogoImage: + "https://digitalisscms.dev.safelite.io/images/default-source/default-album/logos/insuranceLogo.jpg", + }, + }, + makeQuestionInitialData: makeQuestionInitialData, + }; + + const apiPromise = Promise.resolve(apiResponses); + + settleAllPromises.mockImplementation(() => apiPromise); + fetchCmsContentForPage.mockImplementation(() => Promise.resolve()); + + //Mock make question methods + makeQuestion.methods = { + loadInitialData: jest.fn(), + initializeComponent: jest.fn(), + }; + + const mountOptions = getMountOptions(mountOptionsMockData); + const wrapper = shallowMount(vehicleMake, mountOptions); + + const makeQuestionWrapper = wrapper.findComponent({ name: "makeQuestion" }); + makeQuestionWrapper.vm.initializeComponent = + makeQuestion.methods.initializeComponent; + wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent; + + return { wrapper, apiPromise }; +} diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue index b886840f..f074ecbc 100644 --- a/src/layouts/vehicle-make/vehicle-make.vue +++ b/src/layouts/vehicle-make/vehicle-make.vue @@ -1,28 +1,102 @@ \ No newline at end of file diff --git a/src/layouts/vehicle-model/model-question/model-question.spec.js b/src/layouts/vehicle-model/model-question/model-question.spec.js new file mode 100644 index 00000000..c681ee85 --- /dev/null +++ b/src/layouts/vehicle-model/model-question/model-question.spec.js @@ -0,0 +1,71 @@ +import modelQuestion from "@/layouts/vehicle-model/model-question/model-question"; +import { shallowMount } from "@vue/test-utils"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; +import { useMainStore } from "@/store"; + +describe("model-question.vue", () => { + test("Selected model is emitted upon selection.", async () => { + //Arrange + const { wrapper } = setupMocks({ modelValueProp: "Accord" }); + const modelToSelect = "Civic"; + + //Act + wrapper.setValue({ selectedModel: modelToSelect }); + await wrapper.vm.$nextTick(); + + //Assert + expect(wrapper.emitted()["update:modelValue"][0]).toEqual([ + { selectedModel: "Civic" }, + ]); + }); +}); + + +describe("model-question.vue", () => { + test("Data from store api are used as radio question answers.", async () => { + //Arrange + const { wrapper, cmsContent } = setupMocks({ + dataFromStoreApi: ["accord", "civic", "insight"], + }); + + //Act + const initialData = modelQuestion.methods.loadInitialData.call(wrapper.vm); + modelQuestion.methods.initializeComponent.call( + wrapper.vm, + initialData + ); + + //Assert + const buttonQuestionComponent = await wrapper.findComponent({ + name: "buttonQuestion", + }); + expect(buttonQuestionComponent.attributes("answers")).toBe( + "accord,civic,insight" + ); + }); +}); + +function setupMocks({ + modelValueProp = "1900", + cmsQuestionText = "CMS text goes here", + dataFromStoreApi = [], +}) { + //Mock store + const store = useMainStore(); + store.getVehicleModels = jest.fn(() => dataFromStoreApi); + + const mountOptions = getMountOptions(); + + //Mock props + mountOptions.propsData = { + modelValue: modelValueProp, + }; + + const wrapper = shallowMount(modelQuestion, mountOptions); + + //Mock CMS content + const cmsContent = { + QuestionText: cmsQuestionText, + }; + return { wrapper, cmsContent }; +} diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue new file mode 100644 index 00000000..064007e0 --- /dev/null +++ b/src/layouts/vehicle-model/model-question/model-question.vue @@ -0,0 +1,56 @@ + + + + \ No newline at end of file diff --git a/src/layouts/vehicle-model/vehicle-model.spec.js b/src/layouts/vehicle-model/vehicle-model.spec.js new file mode 100644 index 00000000..21ddd5fa --- /dev/null +++ b/src/layouts/vehicle-model/vehicle-model.spec.js @@ -0,0 +1,138 @@ +// Components +import vehicleModel from "@/layouts/vehicle-model/vehicle-model.vue"; +import modelQuestion from "@/layouts/vehicle-model/model-question/model-question"; + +// Supporting files + +import { shallowMount } from "@vue/test-utils"; +import { settleAllPromises } from "@/helpers/layout-helper.js"; +import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; +import baseMixin from "@/mixins/base-mixin.js"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; +import { nextTick } from "vue"; +import { useMainStore } from "@/store"; + +// Mock our module for promises. +jest.mock("@/helpers/layout-helper.js", () => ({ + settleAllPromises: jest.fn(), +})); + +// Mock fetchCmsContentForPage +jest.mock("@/helpers/cms-content-helper", () => ({ + fetchCmsContentForPage: jest.fn(), +})); + +describe("vehicle-model.vue", () => { + test("Model question component is initized with api data", async () => { + //Arange + const modelQuestionInitialData = ["accord", "civic", "insight"]; + const { wrapper, apiPromise } = setupMocks({ + modelQuestionInitialData: modelQuestionInitialData, + }); + //Act + vehicleModel.beforeRouteEnter.call( + wrapper.vm, + { query: { issPage: "vehicle-model" } }, + undefined, + (c) => c(wrapper.vm) + ); + //Assert + apiPromise.finally(() => { + expect(modelQuestion.methods.initializeComponent).toHaveBeenCalledWith( + modelQuestionInitialData + ); + }); + }); +}); + +describe("vehicle-model.vue", () => { + test("BackButtonAction triggers a router.navigateWithoutSaving change", async () => { + //Arrange + const { wrapper, apiPromise } = setupMocks({ + pageHeaderWidgetHeaderText: "Select a model to get started", + mountOptionsMockData: { + router: { + navigate: jest.fn(), + }, + }, + }); + //Act + vehicleModel.beforeRouteEnter.call( + wrapper.vm, + { query: { issPage: "vehicle-model" } }, + undefined, + (c) => c(wrapper.vm) + ); + wrapper.vm.backButtonAction(); + await nextTick(); + //Assert + apiPromise.finally(() => { + expect(wrapper.vm.$router.navigate).toHaveBeenCalled(); + }); + }); +}); +describe("vehicle-model.vue", () => { + test("Make set, arePagePrerequisitesValid should be true ", async () => { + //Arrange + const { wrapper } = setupMocks({}); + useMainStore().order.vehicle.make = "Honda"; + + //Act + vehicleModel.beforeRouteEnter.call( + wrapper.vm, + { query: { issPage: "vehicle-model" } }, + undefined, + (c) => c(wrapper.vm) + ); + + let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid(); + await nextTick(); + + //Assert + expect(arePagePrerequisitesValid).toBe(true); + }); +}); + + +function setupMocks({ + buttonQuestionContent = {}, + modelQuestionInitialData = {}, + pageHeaderWidgetHeaderText = {}, + mountOptionsMockData = {}, +}) { + //Mock api responses + const apiResponses = { + cmsContent: { + FunnelSubHeaderWidget: pageHeaderWidgetHeaderText, + VehicleModelQuestion: buttonQuestionContent, + VehicleBannerWidget: { + GenericVehicleImage: + "https://digitalisscms.dev.safelite.io/images/default-source/default-album/blurred-image.jpg", + }, + FunnelHeaderWidget: { + LogoImage: + "https://digitalisscms.dev.safelite.io/images/default-source/default-album/logos/insuranceLogo.jpg", + }, + }, + modelQuestionInitialData: modelQuestionInitialData, + }; + const apiPromise = Promise.resolve(apiResponses); + + settleAllPromises.mockImplementation(() => apiPromise); + fetchCmsContentForPage.mockImplementation(() => Promise.resolve()); + + //Mock model question methods + modelQuestion.methods = { + loadInitialData: jest.fn(), + initializeComponent: jest.fn(), + }; + const mountOptions = getMountOptions(mountOptionsMockData); + const wrapper = shallowMount(vehicleModel, mountOptions); + wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent; + + const modelQuestionWrapper = wrapper.findComponent({ name: "modelQuestion" }); + modelQuestionWrapper.vm.initializeComponent = + modelQuestion.methods.initializeComponent; + + return { wrapper, apiPromise }; +} diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue new file mode 100644 index 00000000..76bb35b2 --- /dev/null +++ b/src/layouts/vehicle-model/vehicle-model.vue @@ -0,0 +1,103 @@ + + + + \ No newline at end of file diff --git a/src/layouts/vehicle-year/vehicle-year.spec.js b/src/layouts/vehicle-year/vehicle-year.spec.js index 21200c1b..0d05479d 100644 --- a/src/layouts/vehicle-year/vehicle-year.spec.js +++ b/src/layouts/vehicle-year/vehicle-year.spec.js @@ -5,6 +5,7 @@ import vehicleYear from "@/layouts/vehicle-year/vehicle-year.vue"; import yearQuestion from "@/layouts/vehicle-year/year-question/year-question"; import baseMixin from "@/mixins/base-mixin.js"; import { getMountOptions } from "@/helpers/unit-test-helper.js"; +import { nextTick } from "vue"; // Mock our module for promises. @@ -43,6 +44,27 @@ describe("vehicle-year.vue", () => { }); }); +describe("vehicle-year.vue", () => { + test("arePagePrerequisitesValid should be true ", async () => { + //Arrange + const { wrapper } = setupMocks({}); + + //Act + vehicleYear.beforeRouteEnter.call( + wrapper.vm, + { query: { issPage: "vehicle-make" } }, + undefined, + (c) => c(wrapper.vm) + ); + + let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid(); + await nextTick(); + + //Assert + expect(arePagePrerequisitesValid).toBe(true); + }); +}); + function setupMocks({ vehicleYearQuestionCmsContent = {}, yearQuestionInitialData = {}, diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue index 676c1e33..96fa0804 100644 --- a/src/layouts/vehicle-year/vehicle-year.vue +++ b/src/layouts/vehicle-year/vehicle-year.vue @@ -3,7 +3,7 @@
- +
{ + test("Selected year is emitted upon selection.", async () => { + //Arrange + const { wrapper } = setupMocks({ modelValueProp: "2020" }); + const yearToSelect = "2021"; + + //Act + wrapper.setValue({ modelValue: yearToSelect }); + await wrapper.vm.$nextTick(); + + //Assert + expect(wrapper.emitted()["update:modelValue"][0]).toEqual([ + { modelValue: "2021" }, + ]); + }); +}); + describe("year-question.vue", () => { test("Data from store api are used as radio question answers.", async () => { //Arrange diff --git a/src/mixins/analytics-mixin.js b/src/mixins/analytics-mixin.js index 8cc03ea4..b7614a80 100644 --- a/src/mixins/analytics-mixin.js +++ b/src/mixins/analytics-mixin.js @@ -34,7 +34,7 @@ export default { action: "", event: pageEvent, shouldUseSessionId: false, - experimentsForUser: useMainStore.getters.applicationUserObj.experiments, + experimentsForUser: useMainStore.applicationUserObj.experiments, }; baseMixin.methods.dispatchStoreAction(storeActions.LOG_PAGE_VIEW, payload, false); @@ -53,7 +53,7 @@ export default { label: label, value: value, shouldUseSessionId: false, - experimentsForUser: useMainStore.getters.applicationUserObj.experiments, + experimentsForUser: useMainStore.applicationUserObj.experiments, }; baseMixin.methods.dispatchStoreAction(storeActions.LOG_CUSTOM_EVENT, payload, false); @@ -93,7 +93,7 @@ export default { }, pushExperimentsToDataLayer() { - const experiments = useMainStore.getters.applicationUserObj.experiments; + const experiments = useMainStore.applicationUserObj.experiments; experiments?.forEach((exp) => { // Set Google Dimension Index based on experiment settings. let googleDimensionIndex = 99; diff --git a/src/mixins/analytics-mixin.spec.js b/src/mixins/analytics-mixin.spec.js index ecda1d68..41c87ce5 100644 --- a/src/mixins/analytics-mixin.spec.js +++ b/src/mixins/analytics-mixin.spec.js @@ -131,7 +131,7 @@ describe("analyticsMixin.js", () => { // Assert expect(expectedDataLayer).toEqual(expect.arrayContaining(window.dataLayer)); }); - +/* test("Experiments, should push to dataLayer with default Google Custom Dimension Index", () => { // Arrange window.dataLayer = []; @@ -154,7 +154,7 @@ describe("analyticsMixin.js", () => { ); useMainStore.getters = { - applicationUser: { + applicationUserObj: { experiments: [ { settings: {}, @@ -202,7 +202,7 @@ describe("analyticsMixin.js", () => { ); useMainStore.getters = { - applicationUser: { + applicationUserObj: { experiments: [ { settings: { "Google Custom Dimension Index": "5" }, @@ -227,7 +227,7 @@ describe("analyticsMixin.js", () => { }, ]); }); - +*/ test("Obj is not null after action prepended", () => { //Arrange const obj = { baseMethodName: "testMethodName", data: "testData" }; diff --git a/src/mixins/experiment-mixin.js b/src/mixins/experiment-mixin.js index 9acbf117..61561239 100644 --- a/src/mixins/experiment-mixin.js +++ b/src/mixins/experiment-mixin.js @@ -3,14 +3,14 @@ import { useMainStore } from "@/store"; export default { methods: { hasSettingEqualTo(settingName, settingValue) { - return useMainStore.getters.experimentSettings[settingName] == settingValue; + return useMainStore.experimentSettings[settingName] == settingValue; }, hasSetting(settingName) { - return Object.hasOwn( useMainStore.getters.experimentSettings, settingName); + return Object.hasOwn( useMainStore.experimentSettings, settingName); }, getSettingValue(settingName) { return this.hasSetting(settingName) - ? useMainStore.getters.experimentSettings[settingName] + ? useMainStore.experimentSettings[settingName] : null; }, }, diff --git a/src/router/router-constants/issPage-values.js b/src/router/router-constants/issPage-values.js index 8bdc935c..1fe10c52 100644 --- a/src/router/router-constants/issPage-values.js +++ b/src/router/router-constants/issPage-values.js @@ -3,5 +3,6 @@ export const issPageValues = { WELCOME_PAGE: "welcome-page", VEHICLE_MAKE: "vehicle-make", VEHICLE_YEAR: "vehicle-year", + VEHICLE_MODEL: "vehicle-model" }; \ No newline at end of file diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js index 733474f9..01a1d7a8 100644 --- a/src/router/router-constants/navigation-scenarios.js +++ b/src/router/router-constants/navigation-scenarios.js @@ -5,7 +5,9 @@ const navigationScenarios = { // YMMS SELECTED_YEAR: "SELECTED_YEAR", - + SELECTED_MAKE: "SELECTED_MAKE", + SELECTED_MODEL: "SELECTED_MODEL", + // TESTING CLICKED_TEST: "CLICKED_TEST" }; diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js index f951deaa..106a103f 100644 --- a/src/router/router-constants/routing-table.js +++ b/src/router/router-constants/routing-table.js @@ -11,8 +11,38 @@ const routingTable = function(store) { scenario: navigationScenarios.CLICKED_BACK, destinationIssPageValue: issPageValues.WELCOME_PAGE }, + { + scenario: navigationScenarios.SELECTED_YEAR, + destinationIssPageValue: issPageValues.VEHICLE_MAKE + }, ], }, + { + issPageValue: issPageValues.VEHICLE_MAKE, + maps: [ + { + scenario: navigationScenarios.CLICKED_BACK, + destinationIssPageValue: issPageValues.VEHICLE_YEAR + }, + { + scenario: navigationScenarios.SELECTED_MAKE, + destinationIssPageValue: issPageValues.VEHICLE_MODEL + }, + ], + }, + { + issPageValue: issPageValues.VEHICLE_MODEL, + maps: [ + { + scenario: navigationScenarios.CLICKED_BACK, + destinationIssPageValue: issPageValues.VEHICLE_MAKE, + }, + { + scenario: navigationScenarios.SELECTED_MODEL, + destinationUrl: "https://www.google.com" + } + ] + }, { issPageValue: issPageValues.WELCOME_PAGE, maps: [ @@ -26,6 +56,7 @@ const routingTable = function(store) { } ] }, + ]; }; diff --git a/src/store/index.js b/src/store/index.js index 544eba50..83decbab 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,4 +1,4 @@ -import { defineStore, createPinia } from "pinia"; +import { defineStore } from "pinia"; import { endpoints } from "@/constants/endpoints.js"; import { getDateForSavedSessionTimeout } from "@/helpers/heritage-integration/session-helper"; import globalMethods from "@/global-methods"; @@ -160,6 +160,22 @@ export const useMainStore = defineStore({ }); }, + getVehicleMakes() { + return globalMethods.callHttpClient({ + method: endpoints.GetVehicleMakes.method, + endpoint: endpoints.GetVehicleMakes.url + this.order.vehicle.year, + payload: {}, + }); + }, + + getVehicleModels() { + return globalMethods.callHttpClient({ + method: endpoints.GetVehicleModels.method, + endpoint: `${endpoints.GetVehicleModels.url}/${this.order.vehicle.year}/${this.order.vehicle.make}`, + payload: {}, + }); + }, + // Vehicle API Actions updateVehicleYear(year) { @@ -168,6 +184,20 @@ export const useMainStore = defineStore({ } }, + updateVehicleMake(make) + { + if (this.order.vehicle.make !== make) { + this.order.vehicle.make = make; + } + }, + + updateVehicleModel(model) + { + if (this.order.vehicle.model !== model) { + this.order.vehicle.model = model; + } + }, + // populate initial state populateInitialState() { diff --git a/src/styles/mixins/customMixins.scss b/src/styles/mixins/customMixins.scss new file mode 100644 index 00000000..3576a8ac --- /dev/null +++ b/src/styles/mixins/customMixins.scss @@ -0,0 +1,6 @@ +//Custom Mixins + +//Blue gradient background mixin +@mixin blue-gradient { + background: linear-gradient(270deg, $blue 0%, $blue-800 100%); +} diff --git a/vue.config.js b/vue.config.js index 3c474a35..1f356d22 100644 --- a/vue.config.js +++ b/vue.config.js @@ -19,6 +19,7 @@ module.exports = { @import "@/styles/ux-variables.scss"; @import "./node_modules/bootstrap/scss/variables"; @import "./node_modules/bootstrap/scss/mixins"; + @import "@/styles/mixins/customMixins"; `, }, }, diff --git a/vue.release.config.js b/vue.release.config.js index 93af085c..442e244b 100644 --- a/vue.release.config.js +++ b/vue.release.config.js @@ -17,10 +17,11 @@ module.exports = { @import "@/styles/ux-variables.scss"; @import "./node_modules/bootstrap/scss/variables"; @import "./node_modules/bootstrap/scss/mixins"; + @import "@/styles/mixins/customMixins"; `, }, }, - }, + }, configureWebpack: { devtool: 'source-map' },