From 1f6a18dcaf21e9a8cbe7c8f45c5e91eeac50ea12 Mon Sep 17 00:00:00 2001 From: Sneha Date: Mon, 21 Aug 2023 12:36:42 +0530 Subject: [PATCH] CSR-1418 --- .../vehicle-banner/vehicle-banner.spec.js | 13 ++++- .../vehicle-banner/vehicle-banner.vue | 16 +++++- src/layouts/vehicle/vehicle.vue | 52 +++++++++++++------ src/store/index.js | 18 ++++--- src/store/store.spec.js | 18 ++++--- 5 files changed, 84 insertions(+), 33 deletions(-) diff --git a/src/fmg-components/vehicle-banner/vehicle-banner.spec.js b/src/fmg-components/vehicle-banner/vehicle-banner.spec.js index b4d723e18..1a9222299 100644 --- a/src/fmg-components/vehicle-banner/vehicle-banner.spec.js +++ b/src/fmg-components/vehicle-banner/vehicle-banner.spec.js @@ -18,6 +18,7 @@ describe("vehicleBanner", () => { const { wrapper } = setupMocks({ displayGenericVehicleImageProp: true, imageUrlValue: "NULL", + displayUnmatchedVehicleIconProp: true, }); // Assert @@ -87,7 +88,12 @@ describe("vehicleBanner", () => { ); }); -function setupMocks({ displayGenericVehicleImageProp, imageUrlValue, categoryValue = "CAR" }) { +function setupMocks({ + displayGenericVehicleImageProp, + displayUnmatchedVehicleIconProp, + imageUrlValue, + categoryValue = "CAR", +}) { const mockGetCmsContent = jest.fn(); mockGetCmsContent((cmsWidget, field) => { return field; @@ -108,7 +114,10 @@ function setupMocks({ displayGenericVehicleImageProp, imageUrlValue, categoryVal }); //Mock props - mountOptions.propsData = { displayGenericVehicleImage: displayGenericVehicleImageProp }; + mountOptions.propsData = { + displayGenericVehicleImage: displayGenericVehicleImageProp, + displayUnmatchedVehicleIconProp: displayUnmatchedVehicleIconProp, + }; mountOptions.mixins = [mockMixin]; const wrapper = shallowMount(vehicleBanner, mountOptions); diff --git a/src/fmg-components/vehicle-banner/vehicle-banner.vue b/src/fmg-components/vehicle-banner/vehicle-banner.vue index 3354db13c..8bff4e9e2 100644 --- a/src/fmg-components/vehicle-banner/vehicle-banner.vue +++ b/src/fmg-components/vehicle-banner/vehicle-banner.vue @@ -18,6 +18,16 @@ export default { required: false, default: null, }, + displayUnmatchedVehicleIcon: { + type: Boolean, + required: false, + default: false, + }, + vehicleCategory: { + type: String, + required: false, + default: null, + }, }, computed: { vehicleImageToDisplay() { @@ -29,7 +39,8 @@ export default { } if ( this.$store.getters.vehicle.imageUrl === null || - this.$store.getters.vehicle.imageUrl === "NULL" + this.$store.getters.vehicle.imageUrl === "NULL" || + this.displayUnmatchedVehicleIcon ) { return this.getUnmatchedVehicleIcon(); } @@ -57,7 +68,8 @@ export default { }, methods: { getUnmatchedVehicleIcon() { - switch (this.$store.getters.vehicle.category) { + const category = this.vehicleCategory ?? this.$store.getters.vehicle.category; + switch (category) { case this.vehicleCategories.CAR: return this.carUnmatchedVehicleIcon; case this.vehicleCategories.SUV: diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue index 13001e2fd..37e813bed 100644 --- a/src/layouts/vehicle/vehicle.vue +++ b/src/layouts/vehicle/vehicle.vue @@ -58,7 +58,9 @@ @@ -110,17 +112,17 @@ export default { selectedMake: this.selectedMakefromStore(), selectedModel: this.selectedModelfromStore(), selectedStyle: this.selectedStylefromStore(), - vehicle: { - carId: null, - category: null, - imageUrl: null, - imageVifNumber: null, - imageVifColor: null, - }, + carId: null, + category: null, + imageUrl: null, + imageVifNumber: null, + imageVifColor: null, yearOptions: [], makeOptions: [], modelOptions: [], styleOptions: [], + displayGeneric: this.displayGenericFromStore(), + unmatchedVehicleIcon: false, }; }, @@ -279,7 +281,18 @@ export default { this.selectedModel, style ); - this.vehicle = result?.data; + this.carId = result?.data.carId; + this.category = result?.data.category; + this.imageUrl = result?.data.imageUrl; + this.imageVifNumber = result?.data.imageVifNumber; + this.imageVifColor = result?.data.imageVifColor; + if (this.imageUrl == null) { + this.displayGeneric = false; + this.unmatchedVehicleIcon = true; + } else this.unmatchedVehicleIcon = false; + } else { + this.imageUrl = null; + this.displayGeneric = true; } }, }, @@ -293,6 +306,15 @@ export default { style: style, }); }, + displayGenericFromStore() { + if (store.getters.vehicle.imageUrl !== null) return false; + else if ( + store.getters.vehicle.imageUrl === null && + store.getters.vehicle.carId !== null + ) + return false; + else return true; + }, arePagePrerequisitesValid() { return true; }, @@ -305,7 +327,11 @@ export default { make: this.selectedMake, model: this.selectedModel, style: this.selectedStyle, - vehicle: this.vehicle, + carId: this.carId, + category: this.category, + imageUrl: this.imageUrl, + imageVifNumber: this.imageVifNumber, + imageVifColor: this.imageVifColor, }, false ); @@ -353,12 +379,6 @@ export default { }, }, - computed: { - displayGeneric() { - return !this.selectedStyle; - }, - }, - components: { funnelHeader, funnelFooter, diff --git a/src/store/index.js b/src/store/index.js index 2116e1658..b8a20b25b 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1637,8 +1637,12 @@ export const actions = { } }, - saveVehicle(context, { year, make, model, style, vehicle }) { - context.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES); + saveVehicle( + context, + { year, make, model, style, carId, category, imageUrl, imageVifNumber, imageVifColor } + ) { + context.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES); + context.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES); if (context.state.order.vehicle.year !== year) { context.commit(storeMutations.UPDATE_YEAR, year); @@ -1652,11 +1656,11 @@ export const actions = { if (context.state.order.vehicle.style !== style) { context.commit(storeMutations.UPDATE_STYLE, style); } - context.commit(storeMutations.UPDATE_CAR_ID, vehicle.carId); - context.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, vehicle.category); - context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, vehicle.imageUrl); - context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, vehicle.imageVifNumber); - context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, vehicle.imageVifColor); + context.commit(storeMutations.UPDATE_CAR_ID, carId); + context.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, category); + context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, imageUrl); + context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, imageVifNumber); + context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, imageVifColor); }, saveVehicleDamage( diff --git a/src/store/store.spec.js b/src/store/store.spec.js index f70bbd3d1..0bb1d72c9 100644 --- a/src/store/store.spec.js +++ b/src/store/store.spec.js @@ -1762,14 +1762,20 @@ describe("Actions", () => { make: "Honda", model: "Civic", style: "Sedan", - vehicle: { - carId: "C00000000", - category: "CAR", - }, + carId: "C00000000", + category: "CAR", }; actions.saveVehicle(context, payload); //Assert + expect(dispatch).toHaveBeenNthCalledWith( + 1, + storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES + ); + expect(dispatch).toHaveBeenNthCalledWith( + 2, + storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES + ); if (context.state.order.vehicle.year !== payload.year) { expect(commit).toBeCalledWith(storeMutations.UPDATE_YEAR, payload.year); } @@ -1782,8 +1788,8 @@ describe("Actions", () => { if (context.state.order.vehicle.style !== payload.style) { expect(commit).toBeCalledWith(storeMutations.UPDATE_STYLE, payload.style); } - context.commit(storeMutations.UPDATE_CAR_ID, payload.vehicle.carId); - context.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, payload.vehicle.category); + context.commit(storeMutations.UPDATE_CAR_ID, payload.carId); + context.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, payload.category); }); it("saveVehicleDamage, should wipe out damage if different", () => {