CSR-1418

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);
 

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:

src/layouts/vehicle/vehicle.vue

@@ -58,7 +58,9 @@
                                 <vehicleBanner
                                     cmsWidgetName="VehicleBannerWidget"
                                     :displayGenericVehicleImage="displayGeneric"
-                                    :displayVehicleImage="vehicle.imageUrl"
+                                    :displayVehicleImage="imageUrl"
+                                    :vehicleCategory="category"
+                                    :displayUnmatchedVehicleIcon="unmatchedVehicleIcon"
                                     class="mt-5 mb-3"
                                     ref="banner" />
 
@@ -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,

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(

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", () => {