Merge pull request #1297 from Safelite/feature/CSR-1418.01

CSR-1418

src/constants/store-actions.js

@@ -9,7 +9,7 @@ const storeActions = {
     GET_VEHICLE_MAKES: "getVehicleMakes",
     GET_VEHICLE_MODELS: "getVehicleModels",
     GET_VEHICLE_STYLES: "getVehicleStyles",
-    SET_VEHICLE: "setVehicle",
+    GET_VEHICLE: "getVehicle",
     GET_DAMAGE_OPTIONS: "getDamageOptions",
     GET_EVOX_IMAGE: "getEvoxImage",
     IS_VIN_OPTIONAL_VEHICLE: "isVinOptionalVehicle",

src/fmg-components/vehicle-banner/vehicle-banner.vue

@@ -13,13 +13,20 @@ export default {
             required: true,
         },
         cmsWidgetName: String,
+        displayVehicleImage: {
+            type: String,
+            required: false,
+            default: null,
+        },
     },
     computed: {
         vehicleImageToDisplay() {
+            if (this.displayVehicleImage !== null) {
+                return this.displayVehicleImage;
+            }
             if (this.displayGenericVehicleImage) {
                 return this.genericVehicleImage;
             }
-
             if (
                 this.$store.getters.vehicle.imageUrl === null ||
                 this.$store.getters.vehicle.imageUrl === "NULL"

src/layouts/vehicle/vehicle.spec.js

@@ -1,19 +1,17 @@
 // Components
 import vehicle from "@/layouts/vehicle/vehicle.vue";
 
-// Supporting files
+// Supporting Files
+import { shallowMount } from "@vue/test-utils";
 import { nextTick } from "vue";
-import { mount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+    settleAllPromises: jest.fn(),
+}));
 
 describe("vehicle.vue", () => {
-    test('"Continue" button is enabled after YMMS is selected.', async () => {
-        const { wrapper } = setupMocks();
-
-        const continueButton = wrapper.get('[data-test-id="funnel-footer-main-button"]');
-
-        expect(continueButton.attributes()["aria-disabled"]).toBe("false");
-    });
-
     test("arePagePrerequisitesValid should be true ", async () => {
         //Arrange
         const { wrapper } = setupMocks();
@@ -26,66 +24,33 @@ describe("vehicle.vue", () => {
         expect(arePagePrerequisitesValid).toBe(true);
     });
 });
+describe("vehicle.vue", () => {
+    describe("navigation", () => {
+        test("if the continue button is clicked, navigate forward", async () => {
+            // Arrange
+            const { wrapper } = setupMocks();
 
-describe("navigation", () => {
+            // Act
-    test("forwardButtonAction should trigger navigateForward", async () => {
+            await wrapper.vm.forwardButtonAction();
-        // Arrange
-        const { wrapper } = setupMocks();
-        wrapper.vm.navigateForward = jest.fn();
 
-        // Act
+            // Assert
-        await wrapper.vm.forwardButtonAction();
+            expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalled();
-
+        });
-        //Assert
-        expect(wrapper.vm.navigateForward).toHaveBeenCalled();
     });
 });
 
-const FunnelFooterWidgetMockData = {
-    ForwardButtonText: "Continue",
-};
-
 function setupMocks() {
-    const mockRoute = {
+    const wrapper = shallowMount(
-        query: {
+        vehicle,
-            fmgPage: "vehicle",
+        getMountOptions({
-        },
+            router: {
-    };
+                navigate: jest.fn(),
-
+                navigate: jest.fn(),
-    const mockRouter = {
+                navigateWithSaving: jest.fn(),
-        navigate: jest.fn(),
+                navigateWithoutSaving: jest.fn(),
-    };
-
-    const wrapper = mount(vehicle, {
-        global: {
-            mixins: [
-                {
-                    methods: {
-                        getCmsContent: jest.fn((cmsWidgetName, fieldName) => {
-                            if (cmsWidgetName === "FunnelFooterWidget") {
-                                if (fieldName === "ForwardButtonText") {
-                                    return FunnelFooterWidgetMockData.ForwardButtonText;
-                                }
-                            }
-                            return "";
-                        }),
-                        getFooterInfoBoxHeight: jest.fn(() => 80),
-                    },
-                },
-            ],
-
-            mocks: {
-                $route: mockRoute,
-                $router: mockRouter,
             },
+        })
+    );
 
-            stubs: {
+    return { wrapper };
-                FunnelHeader: true,
-                FunnelSubHeader: true,
-                VehicleBanner: true,
-            },
-        },
-    });
-
-    return { mockRoute, mockRouter, wrapper };
 }

src/layouts/vehicle/vehicle.vue

@@ -58,6 +58,7 @@
                                 <vehicleBanner
                                     cmsWidgetName="VehicleBannerWidget"
                                     :displayGenericVehicleImage="displayGeneric"
+                                    :displayVehicleImage="vehicle.imageUrl"
                                     class="mt-5 mb-3"
                                     ref="banner" />
 
@@ -109,6 +110,13 @@ export default {
             selectedMake: this.selectedMakefromStore(),
             selectedModel: this.selectedModelfromStore(),
             selectedStyle: this.selectedStylefromStore(),
+            vehicle: {
+                carId: null,
+                category: null,
+                imageUrl: null,
+                imageVifNumber: null,
+                imageVifColor: null,
+            },
             yearOptions: [],
             makeOptions: [],
             modelOptions: [],
@@ -116,11 +124,6 @@ export default {
         };
     },
 
-    props: {
-        cmsWidgetName: String,
-        validationRules: String,
-    },
-
     async beforeRouteEnter(to, from, next) {
         // Call APIs
 
@@ -244,7 +247,8 @@ export default {
                 const result = await this.getModelOptions(this.selectedYear, make);
                 this.modelOptions = result?.data;
                 if (this.selectedMakefromStore() !== make) {
-                    this.selectedModel = null;
+                    if (this.modelOptions.length === 1) this.selectedModel = this.modelOptions[0];
+                    else this.selectedModel = null;
                     this.selectedStyle = null;
                 }
             } else {
@@ -260,36 +264,40 @@ export default {
                 );
                 this.styleOptions = result?.data;
                 if (this.selectedModelfromStore() !== model) {
-                    this.selectedStyle = null;
+                    if (this.styleOptions.length === 1) this.selectedStyle = this.styleOptions[0];
+                    else this.selectedStyle = null;
                 }
             } else {
                 this.styleOptions = [];
             }
         },
-        selectedStyle(style) {
+        async selectedStyle(style) {
-            this.setVehicle(this.selectedYear, this.selectedMake, this.selectedModel, style);
+            if (style) {
+                const result = await this.getVehicle(
+                    this.selectedYear,
+                    this.selectedMake,
+                    this.selectedModel,
+                    style
+                );
+                this.vehicle = result?.data;
+            }
         },
     },
 
     methods: {
-        setVehicle(year, make, model, style) {
+        getVehicle(year, make, model, style) {
-            return this.dispatchStoreAction(this.storeActions.SET_VEHICLE, {
+            return this.dispatchStoreAction(this.storeActions.GET_VEHICLE, {
                 year: year,
                 make: make,
                 model: model,
                 style: style,
             });
         },
-
         arePagePrerequisitesValid() {
             return true;
         },
 
         async forwardButtonAction() {
-            return this.navigateForward();
-        },
-
-        navigateForward() {
             this.dispatchStoreAction(
                 storeActions.SAVE_VEHICLE,
                 {
@@ -297,12 +305,12 @@ export default {
                     make: this.selectedMake,
                     model: this.selectedModel,
                     style: this.selectedStyle,
+                    vehicle: this.vehicle,
                 },
                 false
             );
             this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_FORWARD, this.$route);
         },
-
         initializeYearComponent(initialData) {
             this.yearOptions = initialData;
         },

src/store/index.js

@@ -739,7 +739,7 @@ export const actions = {
         });
     },
 
-    setVehicle(context, { year, make, model, style }) {
+    getVehicle(context, { year, make, model, style }) {
         return globalMethods
             .callHttpClient({
                 methods: endpoints.GetVehicle.method,
@@ -747,17 +747,6 @@ export const actions = {
                 payload: {},
             })
             .then((response) => {
-                context.commit(storeMutations.UPDATE_CAR_ID, response.data.carId);
-                context.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, response.data.category);
-                context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, response.data.imageUrl);
-                context.commit(
-                    storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER,
-                    response.data.imageVifNumber
-                );
-                context.commit(
-                    storeMutations.UPDATE_VEHICLE_IMAGE_COLOR,
-                    response.data.imageVifColor
-                );
                 return response;
             });
     },
@@ -1624,9 +1613,7 @@ export const actions = {
         }
     },
 
-    saveVehicle(context, { year, make, model, style }) {
+    saveVehicle(context, { year, make, model, style, vehicle }) {
-        context.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
-        context.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);
         context.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
 
         if (context.state.order.vehicle.year !== year) {
@@ -1641,6 +1628,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);
     },
 
     saveVehicleDamage(

src/store/store.spec.js

@@ -484,12 +484,9 @@ describe("Actions", () => {
         expect(response.data).toEqual({ style: "4 DOOR SEDAN" });
     });
 
-    it("setVehicle action, should get vehicle data and set carId and vehicle category", async () => {
+    it("getVehicle action, should get vehicle data ", async () => {
         // Arrange
         const context = state;
-        const commit = jest.fn();
-
-        context.commit = commit;
 
         // Act
         globalMethods.callHttpClient.mockImplementation(() => {
@@ -497,10 +494,8 @@ describe("Actions", () => {
         });
 
         // Assert
-        const response = await actions.setVehicle(context, "C00000000");
+        const response = await actions.getVehicle(context, "C00000000");
 
-        expect(commit).toBeCalledWith(storeMutations.UPDATE_CAR_ID, "C00000000");
-        expect(commit).toBeCalledWith(storeMutations.UPDATE_VEHICLE_CATEGORY, "CAR");
         expect(response.data).toEqual({ carId: "C00000000", category: "CAR" });
     });
 
@@ -1729,18 +1724,14 @@ describe("Actions", () => {
             make: "Honda",
             model: "Civic",
             style: "Sedan",
+            vehicle: {
+                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);
         }
@@ -1753,6 +1744,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);
     });
 
     it("saveVehicleDamage, should wipe out damage if different", () => {