Lookup Pages

src/helpers/damage-helper.js

@@ -54,10 +54,11 @@ export function includesWindshieldReplacement() {
     return windshieldMatches.length > 0;
 }
 
-export async function isGlassAvailableForCarId(carId) {
+export async function isGlassAvailableForCarId(carId, pageNameToLog) {
-    const newGlassOptions = await baseMixin.methods.dispatchStoreAction(
+    const newGlassOptions = await baseMixin.methods.dispatchStoreActionWithLogging(
         storeActions.GET_DAMAGE_OPTIONS,
-        { carId: carId }
+        { carId: carId },
+        pageNameToLog
     );
 
     const currentGlassOptions = store.getters.damage.glassToReplace;

src/helpers/damage-helper.spec.js

@@ -11,6 +11,13 @@ jest.mock("@/mixins/base-mixin.js", () => ({
                 },
             };
         }),
+        dispatchStoreActionWithLogging: jest.fn().mockImplementation(() => {
+            return {
+                data: {
+                    windshieldOptions: { availableReplacementOptions: ["windshield"] },
+                },
+            };
+        }),
     },
 }));
 
@@ -77,7 +84,7 @@ describe("damage-helper.js", () => {
         ];
 
         // Act
-        const isGlassAvailable = await isGlassAvailableForCarId();
+        const isGlassAvailable = await isGlassAvailableForCarId("id", "testName");
 
         // Assert
         expect(isGlassAvailable).toEqual(true);
@@ -91,7 +98,7 @@ describe("damage-helper.js", () => {
             { glassLocation: "Windshield", glassName: "sideWindow" },
         ];
 
-        const isGlassAvailable = await isGlassAvailableForCarId();
+        const isGlassAvailable = await isGlassAvailableForCarId("id", "testName");
 
         // Assert
         expect(isGlassAvailable).toEqual(false);

src/helpers/unit-test-helper.js

@@ -44,6 +44,16 @@ export function getMountOptions(mockData) {
             });
         }
     });
+    mocks.dispatchStoreActionWithLogging = jest.fn();
+    mocks.dispatchStoreActionWithLogging.mockImplementation((actionName) => {
+        let actionFilterResult = mockData.actionList?.filter((x) => x.actionName == actionName);
+
+        if (actionFilterResult?.length === 1) {
+            return Promise.resolve({
+                data: actionFilterResult[0].data,
+            });
+        }
+    });
 
     // Mock const files
     mocks.storeActions = storeActions;
@@ -141,5 +151,16 @@ function setupBaseMixinDispatchStoreAction(mockData) {
                 });
             }
         });
+
+        baseMixin.methods.dispatchStoreActionWithLogging = jest.fn();
+        baseMixin.methods.dispatchStoreActionWithLogging.mockImplementation((actionName) => {
+            let actionFilterResult = mockData.actionList.filter((x) => x.actionName == actionName);
+
+            if (actionFilterResult.length > 0 && actionFilterResult.length === 1) {
+                return Promise.resolve({
+                    data: actionFilterResult[0].data,
+                });
+            }
+        });
     }
 }

src/layouts/address-lookup/address-lookup.spec.js

@@ -471,7 +471,7 @@ describe("address-lookup.vue", () => {
                 await wrapper.vm.forwardButtonAction();
 
                 // Assert
-                expect(wrapper.vm.dispatchStoreAction).toHaveBeenCalledWith(
+                expect(wrapper.vm.dispatchStoreActionWithLogging).toHaveBeenCalledWith(
                     "lookupVinByAddress",
                     {
                         licenseLastName: undefined,
@@ -479,12 +479,17 @@ describe("address-lookup.vue", () => {
                         licenseStreetAddress: "1234 Main St",
                         licenseZip: "43215",
                     },
+                    "address-lookup",
                     false
                 );
 
-                expect(wrapper.vm.dispatchStoreAction).toHaveBeenCalledWith("validateZip", {
+                expect(wrapper.vm.dispatchStoreActionWithLogging).toHaveBeenCalledWith(
+                    "validateZip",
+                    {
                         zip: "43215",
-                });
+                    },
+                    "address-lookup"
+                );
             });
         });
 

src/layouts/address-lookup/address-lookup.vue

@@ -207,7 +207,7 @@ export default {
             // Vehicle info change in the flow, use a variable to keep track and commit to state at the end.
             let vehicleInfoToCommit = {};
 
-            const vinLookupResponse = this.dispatchStoreAction(
+            const vinLookupResponse = this.dispatchStoreActionWithLogging(
                 storeActions.LOOKUP_VIN_BY_ADDRESS,
                 {
                     licenseLastName: this.customerQuestions.lastName,
@@ -215,6 +215,7 @@ export default {
                     licenseZip: this.customerQuestions.addressQuestions.zipCode,
                     licenseState: this.customerQuestions.addressQuestions.state,
                 },
+                "address-lookup",
                 false
             );
 
@@ -227,12 +228,20 @@ export default {
                 {
                     resultKey: "serviceZipValidationResponse",
                     promise: this.serviceZipCode
-                        ? this.dispatchStoreAction(storeActions.VALIDATE_ZIP, {
+                        ? this.dispatchStoreActionWithLogging(
+                              storeActions.VALIDATE_ZIP,
+                              {
                                   zip: this.serviceZipCode,
-                          })
+                              },
-                        : this.dispatchStoreAction(storeActions.VALIDATE_ZIP, {
+                              "address-lookup"
+                          )
+                        : this.dispatchStoreActionWithLogging(
+                              storeActions.VALIDATE_ZIP,
+                              {
                                   zip: this.customerQuestions.addressQuestions.zipCode,
-                          }),
+                              },
+                              "address-lookup"
+                          ),
                 },
             ];
 
@@ -267,7 +276,8 @@ export default {
                     this.displayMatchedDifferentVehicleAlert = true;
 
                     this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
-                        carFound.carId
+                        carFound.carId,
+                        "address-lookup"
                     );
 
                     // Update button "Continue with..."

src/layouts/address-vehicles/address-vehicles.vue

@@ -162,9 +162,13 @@ export default {
             this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
         async forwardButtonAction() {
-            const vinLookup = await this.dispatchStoreAction(storeActions.LOOKUP_VEHICLE_BY_VIN, {
+            const vinLookup = await this.dispatchStoreActionWithLogging(
+                storeActions.LOOKUP_VEHICLE_BY_VIN,
+                {
                     vin: this.selectedVehicle.vin,
-            }).catch(() => {
+                },
+                "address-vehicles"
+            ).catch(() => {
                 this.$refs.funnelFooter.removeLoader();
             });
 
@@ -173,7 +177,8 @@ export default {
             }
 
             this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
-                vinLookup.data.carId
+                vinLookup.data.carId,
+                "address-vehicles"
             );
 
             await this.dispatchStoreAction(

src/layouts/license-plate-lookup/license-plate-lookup.spec.js

@@ -120,7 +120,7 @@ describe("license-plate-lookup.vue", () => {
 
                 wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => "");
                 wrapper.vm.navigateForward = jest.fn();
-                wrapper.vm.dispatchStoreAction = jest.fn().mockImplementation(() =>
+                wrapper.vm.dispatchStoreActionWithLogging = jest.fn().mockImplementation(() =>
                     Promise.resolve({
                         data: {
                             vehicle: {
@@ -157,7 +157,7 @@ describe("license-plate-lookup.vue", () => {
                 });
 
                 // Mock store action call
-                wrapper.vm.dispatchStoreAction = jest.fn().mockImplementation(() =>
+                wrapper.vm.dispatchStoreActionWithLogging = jest.fn().mockImplementation(() =>
                     Promise.resolve({
                         data: {
                             vehicle: {
@@ -201,7 +201,7 @@ describe("license-plate-lookup.vue", () => {
                 wrapper.vm.navigateForward = jest.fn();
 
                 // Mock store action call
-                wrapper.vm.dispatchStoreAction = jest.fn().mockImplementation(() =>
+                wrapper.vm.dispatchStoreActionWithLogging = jest.fn().mockImplementation(() =>
                     Promise.resolve({
                         data: {
                             vehicle: {
@@ -242,7 +242,7 @@ describe("license-plate-lookup.vue", () => {
                 wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
                     return "";
                 });
-                wrapper.vm.dispatchStoreAction = jest.fn();
+                wrapper.vm.dispatchStoreActionWithLogging = jest.fn();
 
                 await wrapper.vm.navigateForward();
 
@@ -379,7 +379,7 @@ describe("license-plate-lookup.vue", () => {
                 return { data: { vehicle: { carId: "C00000" } } };
             });
 
-            wrapper.vm.dispatchStoreAction = jest.fn().mockImplementation(() =>
+            wrapper.vm.dispatchStoreActionWithLogging = jest.fn().mockImplementation(() =>
                 Promise.resolve({
                     data: {
                         vehicle: {
@@ -417,7 +417,7 @@ describe("license-plate-lookup.vue", () => {
             await wrapper.setData({ registrationZip: "00000" });
             navigateToHeritage.navigateToHeritageFunnel = jest.fn();
 
-            wrapper.vm.dispatchStoreAction = jest.fn().mockImplementation(() =>
+            wrapper.vm.dispatchStoreActionWithLogging = jest.fn().mockImplementation(() =>
                 Promise.resolve({
                     data: {
                         vehicle: {
@@ -449,7 +449,7 @@ describe("license-plate-lookup.vue", () => {
             await wrapper.setData({ registrationZipCode: "00000" });
             navigateToHeritage.navigateToHeritageFunnel = jest.fn();
 
-            wrapper.vm.dispatchStoreAction = jest.fn().mockImplementation(() =>
+            wrapper.vm.dispatchStoreActionWithLogging = jest.fn().mockImplementation(() =>
                 Promise.resolve({
                     data: {
                         vehicle: {

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -199,9 +199,10 @@ export default {
         async forwardButtonAction() {
             this.resetWarningsAndErrors();
 
-            const registrationZipValidationResponse = this.dispatchStoreAction(
+            const registrationZipValidationResponse = this.dispatchStoreActionWithLogging(
                 storeActions.VALIDATE_ZIP,
-                { zip: this.registrationZipCode }
+                { zip: this.registrationZipCode },
+                "license-plate-lookup"
             );
 
             // Settle promises and get results
@@ -214,9 +215,13 @@ export default {
                     // If serviceZipCode is not set, then sets the response to the registrationZipValidationResponse. Calls VALIDATE_ZIP if the serviceZipCode is set.
                     resultKey: "serviceZipValidationResponse",
                     promise: this.serviceZipCode
-                        ? this.dispatchStoreAction(storeActions.VALIDATE_ZIP, {
+                        ? this.dispatchStoreActionWithLogging(
+                              storeActions.VALIDATE_ZIP,
+                              {
                                   zip: this.serviceZipCode,
-                          })
+                              },
+                              "license-plate-lookup"
+                          )
                         : registrationZipValidationResponse,
                 },
             ];
@@ -260,7 +265,8 @@ export default {
                 this.displayMatchedDifferentVehicleAlert = true;
 
                 this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
-                    vinLookup.data.vehicle.carId
+                    vinLookup.data.vehicle.carId,
+                    "license-plate-lookup"
                 );
 
                 // Update button "Continue with..."
@@ -312,9 +318,10 @@ export default {
             return await this.navigateForward();
         },
         lookupVin(plate, state) {
-            return this.dispatchStoreAction(
+            return this.dispatchStoreActionWithLogging(
                 storeActions.LOOKUP_VIN_BY_PLATE,
                 { licensePlate: plate, licenseState: state },
+                "license-plate-lookup",
                 false
             );
         },

src/layouts/vin-lookup/vin-lookup.vue

@@ -255,9 +255,10 @@ export default {
 
             // If this is a new VIN Lookup, do both a Vehicle Lookup and a Zip Validation
             if (!this.vinPopulatedOnPageLoad) {
-                const vehicleLookupResponse = this.dispatchStoreAction(
+                const vehicleLookupResponse = this.dispatchStoreActionWithLogging(
                     storeActions.LOOKUP_VEHICLE_BY_VIN,
-                    { vin: this.vin }
+                    { vin: this.vin },
+                    "vin-lookup"
                 );
 
                 // Settle promises and get results
@@ -311,7 +312,8 @@ export default {
                     this.displayMatchedDifferentVehicleAlert = true;
 
                     this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
-                        resultMap.vehicleLookupResponse.carId
+                        resultMap.vehicleLookupResponse.carId,
+                        "vin-lookup"
                     );
 
                     // Update button "Continue with..."
@@ -399,7 +401,11 @@ export default {
         },
         getVinFromImage(image) {
             return new Promise((resolve, reject) => {
-                this.dispatchStoreAction(storeActions.LOOKUP_VIN_BY_IMAGE, image)
+                this.dispatchStoreActionWithLogging(
+                    storeActions.LOOKUP_VIN_BY_IMAGE,
+                    image,
+                    "vin-lookup"
+                )
                     .then((response) => {
                         if (response.data.length > 0) {
                             resolve(response.data[0]);

src/mixins/base-mixin.js

@@ -64,9 +64,12 @@ export default {
             return footerInfoBox ? footerInfoBox.offsetHeight : 0;
         },
         async getZipCodeData(zipCode) {
-            const serviceZipValidationResponse = await this.dispatchStoreAction(
+            const pageName = this.$options?.name;
+
+            const serviceZipValidationResponse = await this.dispatchStoreActionWithLogging(
                 storeActions.VALIDATE_ZIP,
-                { zip: zipCode }
+                { zip: zipCode },
+                pageName
             );
 
             return {

src/store/index.js

@@ -661,17 +661,19 @@ export const actions = {
         });
     },
 
-    lookupVehicleByVin(context, { vin }) {
+    lookupVehicleByVin(context, { payload: { vin }, pageNameToLog }) {
         return globalMethods.callHttpClient({
             method: endpoints.LookupVehicleByVin.method,
             endpoint: endpoints.LookupVehicleByVin.url,
             payload: {
                 vin: vin, // EX "1J4GW58S4XC541166"
             },
+            logApiCall: true,
+            pageNameToLog: pageNameToLog,
         });
     },
 
-    lookupVinByPlate(context, { licensePlate, licenseState }) {
+    lookupVinByPlate(context, { payload: { licensePlate, licenseState }, pageNameToLog }) {
         return globalMethods.callHttpClient({
             method: endpoints.LookupVinByPlate.method,
             endpoint: endpoints.LookupVinByPlate.url,
@@ -679,12 +681,17 @@ export const actions = {
                 licensePlate: licensePlate,
                 licenseState: licenseState,
             },
+            logApiCall: true,
+            pageNameToLog: pageNameToLog,
         });
     },
 
     lookupVinByAddress(
         context,
-        { licenseLastName, licenseStreetAddress, licenseZip, licenseState }
+        {
+            payload: { licenseLastName, licenseStreetAddress, licenseZip, licenseState },
+            pageNameToLog,
+        }
     ) {
         return globalMethods.callHttpClient({
             method: endpoints.LookupVinByAddress.method,
@@ -695,10 +702,14 @@ export const actions = {
                 licenseZip: licenseZip,
                 licenseState: licenseState,
             },
+            logApiCall: true,
+            pageNameToLog: pageNameToLog,
         });
     },
 
-    lookupVinByImage(context, image) {
+    lookupVinByImage(context, { payload, pageNameToLog }) {
+        const image = payload;
+
         return new Promise((resolve, reject) => {
             let reader = new FileReader();
             reader.onload = (e) => {
@@ -720,6 +731,8 @@ export const actions = {
                 method: endpoints.LookupVinByImage.method,
                 endpoint: endpoints.LookupVinByImage.url,
                 payload: data,
+                logApiCall: true,
+                pageNameToLog: pageNameToLog,
             });
         });
     },
@@ -790,10 +803,12 @@ export const actions = {
         });
     },
 
-    validateZip(context, { zip }) {
+    validateZip(context, { payload: { zip }, pageNameToLog }) {
         return globalMethods.callHttpClient({
             methods: endpoints.ValidateZip.method,
             endpoint: `${endpoints.ValidateZip.url}/${zip}`,
+            logApiCall: true,
+            pageNameToLog: pageNameToLog,
         });
     },
 

src/store/store.spec.js

@@ -428,7 +428,10 @@ describe("Actions", () => {
         });
 
         // Assert
-        const response = await actions.lookupVinByPlate(context, "12345678901234567");
+        const response = await actions.lookupVinByPlate(context, {
+            payload: { licensePlate: "12345678901234567", licenseState: "OH" },
+            pageNameToLog: "test",
+        });
 
         expect(response.data).toEqual({ carId: "C00000001" });
     });
@@ -445,7 +448,10 @@ describe("Actions", () => {
         });
 
         // Act
-        const response = await actions.lookupVinByImage(context, image);
+        const response = await actions.lookupVinByImage(context, {
+            payload: image,
+            pageNameToLog: "test",
+        });
 
         // Assert
         expect(response.data).toEqual(["1C6JJTAG3NL134044"]);
@@ -465,7 +471,9 @@ describe("Actions", () => {
         // Act
 
         // Assert
-        await expect(actions.lookupVinByImage(context, image)).rejects.toEqual("An error occurred");
+        await expect(
+            actions.lookupVinByImage(context, { payload: image, pageNameToLog: "test" })
+        ).rejects.toEqual("An error occurred");
     });
 
     it("getVehicleMakes action, should return makes list", async () => {
@@ -574,7 +582,10 @@ describe("Actions", () => {
             });
         });
 
-        const response = await actions.validateZip(context, "43212");
+        const response = await actions.validateZip(context, {
+            payload: { zip: "43212" },
+            pageNameToLog: "test",
+        });
 
         // Assert
         expect(response.data).toEqual({