diff --git a/src/helpers/unit-test-helper.js b/src/helpers/unit-test-helper.js index 770dd893e..6577ed6ff 100644 --- a/src/helpers/unit-test-helper.js +++ b/src/helpers/unit-test-helper.js @@ -23,6 +23,7 @@ export function getMountOptions(mockData) { mocks.pushPageViewToGA = jest.fn(); mocks.logEvent = jest.fn(); mocks.pushExperimentsToDataLayer = jest.fn(); + mocks.prependActionToMethod = jest.fn(); mocks.dispatchStoreAction = jest.fn(); mocks.dispatchStoreAction.mockImplementation((actionName) => { diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue index 59be19cbd..7ca539b78 100644 --- a/src/layouts/license-plate-lookup/license-plate-lookup.vue +++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue @@ -5,23 +5,60 @@ ref="theForm" v-slot="{ meta }" > -
+
- +
- +
- + +
- + +
- +
{ + this.pushEventToGA( + this.$route.query[this.queryStrings.FMG_PAGE], + this.GaActions.SUBMITTED, + this.GaLabels.LICENSE_PLATE_LOOKUP, + true + ); + }); }, - getRegistrationZipFromStore(){ - return store.getters.vehicle.registration.zipCode + getLicensePlateFromStore() { + return store.getters.vehicle.registration.licensePlate; }, - getEmailFromStore(){ - return store.getters.order.customer.emailAddress + getRegistrationZipFromStore() { + return store.getters.vehicle.registration.zipCode; }, - getServiceZipFromStore(){ - return store.getters.order.serviceLocation.zip + getEmailFromStore() { + return store.getters.order.customer.emailAddress; + }, + getServiceZipFromStore() { + return store.getters.order.serviceLocation.zip; }, backButtonAction() { this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route); }, async forwardButtonAction() { - - this.pushEventToGA(this.$route.query[this.queryStrings.FMG_PAGE], this.GaActions.SUBMITTED, this.GaLabels.LICENSE_PLATE_LOOKUP , true); - - const zipValidation = this.serviceZip ? await this.validateZip(this.serviceZip) : await this.validateZip(this.registrationZip); + const zipValidation = this.serviceZip + ? await this.validateZip(this.serviceZip) + : await this.validateZip(this.registrationZip); if (!zipValidation.data.isServiceable) { this.$refs.funnelFooter.removeLoader(); this.isVinValid = true; @@ -186,53 +277,75 @@ export default { return; } - const vinLookup = await this.lookupVin(this.licensePlate, zipValidation.data.state).catch(() => { + const vinLookup = await this.lookupVin( + this.licensePlate, + zipValidation.data.state + ).catch(() => { this.$refs.funnelFooter.removeLoader(); this.isVinValid = false; this.isCarIdDifferent = false; return; }); - this.isCarIdDifferent = vinLookup.data.vehicle.carId !== store.getters.vehicle.carId; + this.isCarIdDifferent = + vinLookup.data.vehicle.carId !== store.getters.vehicle.carId; - if (this.isCarIdDifferent && (vinLookup.data.vehicle.carId !== this.previouslyEnteredCarId)) { + if ( + this.isCarIdDifferent && + vinLookup.data.vehicle.carId !== this.previouslyEnteredCarId + ) { this.previouslyEnteredCarId = vinLookup.data.vehicle.carId; this.customAlertData.vehicleInfo = vinLookup.data.vehicle; - this.$refs.funnelFooter.updateButtonText(`Continue with ${vinLookup.data.vehicle.year} ${vinLookup.data.vehicle.make} ${vinLookup.data.vehicle.model}`); + this.$refs.funnelFooter.updateButtonText( + `Continue with ${vinLookup.data.vehicle.year} ${vinLookup.data.vehicle.make} ${vinLookup.data.vehicle.model}` + ); this.isVinValid = true; - this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vinLookup.data.vehicle.carId); + this.isSelectedGlassAvailableForVehicle = + await isGlassAvailableForCarId(vinLookup.data.vehicle.carId); this.$refs.funnelFooter.removeLoader(); return; } - this.updateCustomerInfo(vinLookup.data.vin, vinLookup.data.vehicle, zipValidation.data.state); + this.updateCustomerInfo( + vinLookup.data.vin, + vinLookup.data.vehicle, + zipValidation.data.state + ); const partsData = await baseMixin.methods.dispatchStoreAction( this.storeActions.GET_PARTS_OR_QUESTIONS, { carId: vinLookup.data.vehicle.carId, - glassArray: this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle ? [] : store.getters.damage.glassToReplace, + glassArray: + this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle + ? [] + : store.getters.damage.glassToReplace, zipCode: this.serviceZip ? this.serviceZip : this.registrationZip, - vin: vinLookup.data.vin + vin: vinLookup.data.vin, }, false ); this.navigateForward(partsData); }, - navigateForward(partsData){ - if(this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle){ - this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD, this.$route, {}, { displayVehicleChangeAlert: true }, partsData.data); - return; - } else { - navigateAfterSaveToHeritageFunnel(this.$route); - return; - } + navigateForward(partsData) { + if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) { + this.$router.navigateAfterSave( + this.navigationScenarios.CLICKED_FORWARD, + this.$route, + {}, + { displayVehicleChangeAlert: true }, + partsData.data + ); + return; + } else { + navigateAfterSaveToHeritageFunnel(this.$route); + return; + } }, validateZip(zip) { - return baseMixin.methods.dispatchStoreAction( - storeActions.VALIDATE_ZIP, - { zip } - ); + return baseMixin.methods.dispatchStoreAction(storeActions.VALIDATE_ZIP, { + zip, + }); }, lookupVin(plate, state) { return baseMixin.methods.dispatchStoreAction( @@ -241,8 +354,8 @@ export default { ); }, updateCustomerInfo(vin, vehicleInfo, registrationState) { - if(this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle){ - store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES); + if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) { + store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES); } store.commit(storeMutations.UPDATE_VEHICLE_VIN, vin); store.commit(storeMutations.UPDATE_YEAR, vehicleInfo.year); @@ -250,28 +363,34 @@ export default { store.commit(storeMutations.UPDATE_MODEL, vehicleInfo.model); store.commit(storeMutations.UPDATE_STYLE, vehicleInfo.style); store.commit(storeMutations.UPDATE_CAR_ID, vehicleInfo.carId); - store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, vehicleInfo.category); - store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, vehicleInfo.imageUrl); - store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, vehicleInfo.imageVifNumber); - store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, vehicleInfo.imageColor); - store.commit(storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE, this.licensePlate); + store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY,vehicleInfo.category); + store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL,vehicleInfo.imageUrl); + store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER,vehicleInfo.imageVifNumber); + store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR,vehicleInfo.imageColor); + store.commit(storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE,this.licensePlate); store.commit(storeMutations.UPDATE_REGISTRATION_STATE, registrationState); - store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, this.registrationZip); + store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE,this.registrationZip); store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP, this.serviceZip); store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.email); }, }, watch: { - licensePlate() { - this.$refs.funnelFooter.updateButtonText(this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")); - }, - registrationZip(){ - this.$refs.funnelFooter.updateButtonText(this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")); - }, - serviceZip(){ - this.$refs.funnelFooter.updateButtonText(this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")); - } + licensePlate() { + this.$refs.funnelFooter.updateButtonText( + this.getCmsContent("FunnelFooterWidget", "ForwardButtonText") + ); }, + registrationZip() { + this.$refs.funnelFooter.updateButtonText( + this.getCmsContent("FunnelFooterWidget", "ForwardButtonText") + ); + }, + serviceZip() { + this.$refs.funnelFooter.updateButtonText( + this.getCmsContent("FunnelFooterWidget", "ForwardButtonText") + ); + }, + }, components: { Form, funnelHeader, @@ -282,4 +401,4 @@ export default { funnelFooter, }, }; - \ No newline at end of file + diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index 862abaced..b099ca091 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -134,6 +134,8 @@ export default { vm.$refs.backGlassOptions.initializeComponent( resultMap.damageOptions.backGlassOptions.availableReplacementOptions ); + + }); }, data(){ @@ -149,10 +151,7 @@ export default { } }, mounted(){ - if(this.$store.getters.vehicle.imageVifNumber){ - this.pushEventToGA(this.GaCategories.EVOX, `${this.GaActions.VIF}_${this.$store.getters.vehicle.imageVifNumber}`, - this.$store.getters.vehicle.carId, true); - } + this.attachCustomEvents(); }, methods: { arePagePrerequisitesValid() { @@ -166,6 +165,13 @@ export default { store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES); }, + attachCustomEvents(){ + if(this.$store.getters.vehicle.imageVifNumber){ + this.pushEventToGA(this.GaCategories.EVOX, `${this.GaActions.VIF}_${this.$store.getters.vehicle.imageVifNumber}`, + this.$store.getters.vehicle.carId, true); + } + }, + backButtonAction() { // route to move backwards this.$router.navigate( diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue index fec51eafd..37becf5a7 100644 --- a/src/layouts/vehicle-year/vehicle-year.vue +++ b/src/layouts/vehicle-year/vehicle-year.vue @@ -24,7 +24,7 @@ import { settleAllPromises } from "@/helpers/layout-helper"; import { storeMutations } from "@/constants/store-mutations"; import { storeActions } from "@/constants/store-actions"; import { experimentUniverses } from "@/constants/experiments"; -import { getDeviceIdValue, getSessionIdValue, getSessionKeyValue } from "@/helpers/heritage-integration/cookie-helper"; +import { getDeviceIdValue, getSessionKeyValue } from "@/helpers/heritage-integration/cookie-helper"; import baseMixin from "@/mixins/base-mixin"; import store from "@/store"; @@ -94,7 +94,6 @@ export default { return true; }, resetDependentState() { - // Set store.commit(storeMutations.UPDATE_MAKE, null); store.commit(storeMutations.UPDATE_MODEL, null); @@ -106,7 +105,7 @@ export default { // Invokes store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES); store.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES); - } + }, }, components: { yearQuestion, diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue index 36dfaf137..b836454bc 100644 --- a/src/layouts/vin-lookup/vin-lookup.vue +++ b/src/layouts/vin-lookup/vin-lookup.vue @@ -5,13 +5,26 @@ ref="theForm" v-slot="{ meta }" > -
+
- +
- +
@@ -21,12 +34,27 @@
- +
- +
@@ -109,10 +137,22 @@ import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integratio // DEFINE VALIDATION RULES defineRule("zip-required", required(errorMessages.ZIP_REQUIRED)); -defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED)); -defineRule("email-address-format", regex(/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+).([a-zA-Z]{2,})$/, errorMessages.EMAIL_ADDRESS_FORMAT)); +defineRule( + "email-address-required", + required(errorMessages.EMAIL_ADDRESS_REQUIRED) +); +defineRule( + "email-address-format", + regex( + /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+).([a-zA-Z]{2,})$/, + errorMessages.EMAIL_ADDRESS_FORMAT + ) +); defineRule("vin-required", required(errorMessages.VIN_REQUIRED)); -defineRule("vin-format", regex(/^[A-HJ-NPR-Z0-9]{17}$/, errorMessages.VIN_FORMAT)); +defineRule( + "vin-format", + regex(/^[A-HJ-NPR-Z0-9]{17}$/, errorMessages.VIN_FORMAT) +); export default { name: "vin-lookup", @@ -120,7 +160,6 @@ export default { // Call APIs const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage); - // Settle promises and get results const promiseResultMap = [ { @@ -211,12 +250,20 @@ export default { getZipFromStore(){ return store.getters.vehicle.registration.zipCode }, + attachCustomEvents() { + this.prependActionToMethod(this, this.forwardButtonAction, () => { + this.pushEventToGA( + this.$route.query[this.queryStrings.FMG_PAGE], + this.GaActions.SUBMITTED, + this.GaLabels.VINLOOKUP, + true + ); + }); + }, backButtonAction() { this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route); }, async forwardButtonAction() { - this.pushEventToGA(this.$route.query[this.queryStrings.FMG_PAGE], this.GaActions.SUBMITTED, this.GaLabels.VINLOOKUP , true); - const zipValidation = await this.validateZip(this.zip); if (!zipValidation.data.isServiceable) { this.customAlertData.zip = this.zip; @@ -257,10 +304,9 @@ export default { } }, validateZip(zip) { - return baseMixin.methods.dispatchStoreAction( - storeActions.VALIDATE_ZIP, - { zip } - ); + return baseMixin.methods.dispatchStoreAction(storeActions.VALIDATE_ZIP, { + zip, + }); }, lookupVehicle(vin) { return baseMixin.methods.dispatchStoreAction( diff --git a/src/mixins/analytics-mixin.js b/src/mixins/analytics-mixin.js index c2c86c2dd..85402c8cb 100644 --- a/src/mixins/analytics-mixin.js +++ b/src/mixins/analytics-mixin.js @@ -81,7 +81,15 @@ export default { // Push to the data layer with the Google Custom Dimension Index. pushToDataLayerIfDefined(experimentWithDimension); }); - } + }, + + prependActionToMethod(object, method, actionToPrepend) { + const baseMethod = object[method.name]; + object[method.name] = function () { + actionToPrepend.apply(this, arguments); + return baseMethod.apply(object, arguments); + }; + }, }, computed: { analyticsPageEvents() { @@ -96,7 +104,7 @@ export default { GaLabels() { return GaLabels; } - } + }, }; function pushToDataLayerIfDefined(data) { diff --git a/src/mixins/analytics-mixin.spec.js b/src/mixins/analytics-mixin.spec.js index b4ec2a5b5..ae1ba00a7 100644 --- a/src/mixins/analytics-mixin.spec.js +++ b/src/mixins/analytics-mixin.spec.js @@ -79,5 +79,4 @@ describe("analyticsMixin.js", () => { expect(window.dataLayer).toEqual([ { settings_5: {"Google Custom Dimension Index": "5"}, variationName_5: 'test', universeName_5: 'testUniverse' } ]); }); - }); \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 9ffd28522..1af18ec1b 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -126,6 +126,7 @@ const router = createRouter({ router.afterEach(async (to, from) => { // Push page view to GA analyticsMixin.methods.pushPageViewToGA(to.query[queryStrings.FMG_PAGE]); + const assignedExperiments = await baseMixin.methods.dispatchStoreAction(storeActions.GET_EXPERIMENTS_BY_USER_FOR_GA, { userId: getDeviceIdValue() }); analyticsMixin.methods.pushExperimentsToDataLayer(assignedExperiments); });