diff --git a/azure-pipelines.yml b/azure-pipelines.yml index e6fa6d0ff..816a6746f 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -79,6 +79,7 @@ stages: __VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__) __VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__) __VUE_APP_HERITAGE_FUNNEL__: $(__VUE_APP_HERITAGE_FUNNEL__) + __VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__) indexDeployVariables: __VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__) __VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__: $(__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__) @@ -119,4 +120,5 @@ stages: __VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__) __VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__) __VUE_APP_HERITAGE_FUNNEL__: $(__VUE_APP_HERITAGE_FUNNEL__) + __VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__) cfDistributionId: $(cfDistributionId) \ No newline at end of file diff --git a/jest.config.js b/jest.config.js index 7f7516934..e75fc82ab 100644 --- a/jest.config.js +++ b/jest.config.js @@ -21,13 +21,15 @@ module.exports = { "!src/layouts/part-questions/**/*.vue", "!src/layouts/reveal/**/*.vue", "!src/layouts/estimate/**/*.vue", - // REMOVE THESE AFTER WRITING UNIT TESTS + // REMOVE THESE AFTER WRITING UNIT TESTS "!src/layouts/address-lookup/address-lookup.vue", "!src/layouts/address-lookup/customer-questions/customer-questions.vue", "!src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue", - "!src/common-components/dropdown-question/dropdown-question.vue", - "!src/common-components/textbox-question/textbox-question.vue", - // END + "!src/common-components/dropdown-question/dropdown-question.vue", + "!src/common-components/textbox-question/textbox-question.vue", + "!src/helpers/validation-rules.js", + "!src/helpers/damage-helper.js", + // END ], //! means exclude from coverage. testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"], coverageThreshold: { diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue index 062ceb683..00dcdfb88 100644 --- a/src/common-components/textbox-question/textbox-question.vue +++ b/src/common-components/textbox-question/textbox-question.vue @@ -15,7 +15,7 @@ autocomplete="off" :class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']" :validationRules="validationRules" - @input="handleChange" + @change="handleChange" @blur="handleBlur" />
{{ errorMessage }} @@ -110,11 +110,6 @@ export default { } } }, - watch: { - value(newValue) { - this.handleChange(newValue); - } - } }; diff --git a/src/constants/application-config.js b/src/constants/application-config.js index b1ab342a7..0d173db19 100644 --- a/src/constants/application-config.js +++ b/src/constants/application-config.js @@ -4,7 +4,8 @@ const applicationConfig = { GOOGLE_PLACES_API_KEY: process.env.VUE_APP_GOOGLE_PLACES_API_KEY, ANALYTICS_SESSION_TIMEOUT_MINUTES: 30, SAVED_SESSION_TIMEOUT_DAYS: 45, - COOKIE_PATH: "/" + COOKIE_PATH: "/", + CURRENT_ENVIRONMENT: process.env.VUE_APP_CURRENT_ENVIRONMENT // "Localhost", "Dev", "QA", and "Prod" }; export { applicationConfig }; \ No newline at end of file diff --git a/src/constants/cookie-names.js b/src/constants/cookie-names.js index c52debc2a..f4b4aaa9d 100644 --- a/src/constants/cookie-names.js +++ b/src/constants/cookie-names.js @@ -1,5 +1,7 @@ +import { applicationConfig } from "@/constants/application-config.js" + const cookieNames = { - FUNNEL_SESSION_INFO: "FunnelSessionInfo", + FUNNEL_SESSION_INFO: `FunnelSessionInfo-${applicationConfig.CURRENT_ENVIRONMENT}`, // Existing Safelite.com cookies DXDEV: "dxdev", diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js index ca1555e7b..059693773 100644 --- a/src/constants/endpoints.js +++ b/src/constants/endpoints.js @@ -71,12 +71,16 @@ const endpoints = { url: "/analytics/api/v1/analytics/log-experiment-exposure", method: "POST", }, - LogActivity:{ - url: "/analytics/api/v1/analytics/activity", + LogPageView:{ + url: "/analytics/api/v1/analytics/log-page-view", method: "POST", }, - GetExperimentsByUserForGa: { - url: "/analytics/api/v1/analytics/get-experiments-for-GA", + LogCustomEvent:{ + url: "/analytics/api/v1/analytics/log-custom-event", + method: "POST", + }, + GetExperimentsByUser: { + url: "/analytics/api/v1/analytics/get-experiments", method: "GET", } }; diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js index 17012ab68..963ba0b5d 100644 --- a/src/constants/error-messages.js +++ b/src/constants/error-messages.js @@ -21,6 +21,7 @@ const errorMessages = { SERVICE_ZIP_FORMAT: "Please enter a valid Service ZIP", VIN_REQUIRED: "Please enter your VIN", VIN_FORMAT: "Please enter a valid VIN", + OPTION_REQUIRED: "Please select an option", }; export { errorMessages }; diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js index 74dac5043..2a0a7f29d 100644 --- a/src/constants/store-actions.js +++ b/src/constants/store-actions.js @@ -19,8 +19,9 @@ const storeActions = { SET_REFERRAL_INFORMATION: "setReferralInformation", VALIDATE_ZIP: "validateZip", LOG_EXPERIMENT_EXPOSURE: "logExperimentExposure", - LOG_ACTIVITY: "logActivity", - GET_EXPERIMENTS_BY_USER_FOR_GA: "getExperimentsByUserForGa", + LOG_PAGE_VIEW: "logPageView", + LOG_CUSTOM_EVENT: "logCustomEvent", + GET_EXPERIMENTS_BY_USER: "GetExperimentsByUser", // DEPENDENCY MUTATIONS RESET_VEHICLE_STATE_AND_DEPENDENCIES: "resetVehicleAndDependencies", diff --git a/src/constants/store-mutations.js b/src/constants/store-mutations.js index 3f42f9a5f..65f4719ec 100644 --- a/src/constants/store-mutations.js +++ b/src/constants/store-mutations.js @@ -22,7 +22,7 @@ const storeMutations = { UPDATE_REGISTRATION_ZIP_CODE: "updateRegistrationZipCode", UPDATE_REGISTRATION_FIRST_NAME: "updateRegistrationFirstName", UPDATE_REGISTRATION_LAST_NAME: "updateRegistrationLastName", - UPDATE_SERVICE_LOCATION_ZIP: "updateServiceLocationZip", + UPDATE_SERVICE_LOCATION_ZIP_CODE: "updateServiceLocationZipCode", UPDATE_CUSTOMER_EMAIL_ADDRESS: "updateCustomerEmailAddress", // ORDER MUTATIONS diff --git a/src/constants/vin-lookup-method-selections.js b/src/constants/vin-lookup-method-selections.js new file mode 100644 index 000000000..46f1e2044 --- /dev/null +++ b/src/constants/vin-lookup-method-selections.js @@ -0,0 +1,7 @@ +const vinLookupMethodSelections = { + MANUALVIN: "ManualVin", + LICENSEPLATE: "LicensePlate", + HOMEADDRESS: "HomeAddress", +}; + +export { vinLookupMethodSelections }; \ No newline at end of file diff --git a/src/helpers/damage-helper.js b/src/helpers/damage-helper.js index cf363e4d9..e56761dc5 100644 --- a/src/helpers/damage-helper.js +++ b/src/helpers/damage-helper.js @@ -24,8 +24,8 @@ export async function isGlassAvailableForCarId(carId){ for(const option of currentGlassOptions){ if(!newGlassOptions.data[optionsMap[option.location]].availableReplacementOptions.includes(option.name)){ return false; - } + } } return true; - } \ No newline at end of file + } diff --git a/src/helpers/damage-helper.spec.js b/src/helpers/damage-helper.spec.js index 96cbdd0d4..ad5f8f878 100644 --- a/src/helpers/damage-helper.spec.js +++ b/src/helpers/damage-helper.spec.js @@ -13,30 +13,4 @@ jest.mock("@/store", () => ({ const damage = getDamageString(); expect(damage).toEqual("Windshield") }); - }); - - // describe("damage-helper.js", () => { - // it("Should return false if no mismatches between each array", async () => { - // const updatedOptions = { - // data: { - // windshieldOptions: {availableReplacementOptions: ["windshield"]} - // } - // } - // baseMixin.methods.dispatchStoreAction = jest.fn().mockImplementation(()=> { - // return updatedOptions; - // }); - // const misMatch = await isGlassAvailableForCarId(); - // expect(misMatch).toEqual(false); - // }); - // }); - - // describe("damage-helper.js", () => { - // it("Should return true if there are any mismatches between arrays", () => { - // const newOptions = { - // windshieldOptions: {availableReplacementOptions: ["window"]} - // } - // const currentOptions = [{location: "Windshield", name: "windshield"}]; - // const misMatch = compareGlassOptions(newOptions, currentOptions); - // expect(misMatch).toEqual(true); - // }); - // }); \ No newline at end of file + }); \ No newline at end of file diff --git a/src/helpers/heritage-integration/navigation-helper.js b/src/helpers/heritage-integration/navigation-helper.js index 989dec817..61c07203d 100644 --- a/src/helpers/heritage-integration/navigation-helper.js +++ b/src/helpers/heritage-integration/navigation-helper.js @@ -93,7 +93,7 @@ async function getLatestPageForRedirection() { return fmgPageValues.VEHICLE_DAMAGE; } else { if (store.getters.vehicle.vin) { - return fmgPageValues.LICENSE_PLATE_LOOKUP; + return fmgPageValues.VIN_LOOKUP; } else { return fmgPageValues.ESTIMATE; } @@ -134,7 +134,7 @@ function overrideYmmsDirectionIfNeeded(toRoute) { /* istanbul ignore next */ function isVinRelatedPage(toRoute) { const fmgPageValue = toRoute.query[queryStrings.FMG_PAGE]; - + return fmgPageValue === fmgPageValues.VIN_LOOKUP || fmgPageValue === fmgPageValues.LICENSE_PLATE_LOOKUP || fmgPageValue === fmgPageValues.ADDRESS_LOOKUP || diff --git a/src/helpers/heritage-integration/navigation-helper.spec.js b/src/helpers/heritage-integration/navigation-helper.spec.js index 17561ba52..fd06920c2 100644 --- a/src/helpers/heritage-integration/navigation-helper.spec.js +++ b/src/helpers/heritage-integration/navigation-helper.spec.js @@ -175,7 +175,7 @@ describe("getPageToRouteExistingOrderTo", () => { expect(result).toBe('vehicle-damage'); }); - test("getPageToRouteExistingOrderTo, should return license-plate-lookup", async () => { + test("getPageToRouteExistingOrderTo, should return vin-lookup", async () => { // Arrange const toRoute = { query: {} @@ -228,7 +228,7 @@ describe("getPageToRouteExistingOrderTo", () => { const result = await getPageToRouteExistingOrderTo(toRoute, false); //Assert - expect(result).toBe('license-plate-lookup'); + expect(result).toBe('vin-lookup'); }); test("getPageToRouteExistingOrderTo, should return estimate", async () => { 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/address-lookup/address-lookup.spec.js1 b/src/layouts/address-lookup/address-lookup.spec.js1 index 43f3649b0..4443100c3 100644 --- a/src/layouts/address-lookup/address-lookup.spec.js1 +++ b/src/layouts/address-lookup/address-lookup.spec.js1 @@ -118,7 +118,7 @@ describe("address-lookup.vue", () => { }, }) { //Mock api responses - baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn(); + baseMixin.methods.dispatchStoreAction = jest.fn(); const apiResponses = { cmsContent: { FunnelSubHeaderWidget: pageHeaderWidgetHeaderText, diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue index c18ee545e..032b42268 100644 --- a/src/layouts/address-lookup/address-lookup.vue +++ b/src/layouts/address-lookup/address-lookup.vue @@ -81,7 +81,7 @@ import store from "@/store"; import { storeActions } from "@/constants/store-actions"; import { storeMutations } from "@/constants/store-mutations"; import baseMixin from "@/mixins/base-mixin"; -import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper"; +import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper"; import { getDamageString, isGlassAvailableForCarId } from "@/helpers/damage-helper"; defineRule("service-zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED)); @@ -167,7 +167,7 @@ export default { return store.getters.order.customer.emailAddress; }, getServiceZipFromStore() { - return store.getters.order.serviceLocation.zip; + return store.getters.order.serviceLocation.zipCode; }, async forwardButtonAction() { this.resetWarningsAndErrors(); @@ -243,7 +243,7 @@ export default { if (carsFound.length == 1) { // get the damage options for the car that was found const carFound = carsFound[0].vehicle; - const glassOptions = await baseMixin.methods.dispatchNonBlockingStoreAction( + const glassOptions = await baseMixin.methods.dispatchStoreAction( storeActions.GET_DAMAGE_OPTIONS, { carId: carFound.carId } ); @@ -268,12 +268,12 @@ export default { }, validateZip(zip) { - return baseMixin.methods.dispatchNonBlockingStoreAction( + return baseMixin.methods.dispatchStoreAction( storeActions.VALIDATE_ZIP, { zip }); }, lookupVin(lastName, streetAddress, zip, state) { - return baseMixin.methods.dispatchNonBlockingStoreAction( + return baseMixin.methods.dispatchStoreAction( storeActions.LOOKUP_VIN_BY_ADDRESS, { licenseLastName: lastName, @@ -302,7 +302,7 @@ export default { store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, this.customerQuestions.addressQuestions.zipCode); store.commit(storeMutations.UPDATE_REGISTRATION_FIRST_NAME, this.customerQuestions.firstName); store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, this.customerQuestions.lastName); - store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP, this.serviceZip); + store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE, this.serviceZip); store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.customerQuestions.email); }, diff --git a/src/layouts/estimate/estimate.vue b/src/layouts/estimate/estimate.vue index 0e41b24ed..b46c38801 100644 --- a/src/layouts/estimate/estimate.vue +++ b/src/layouts/estimate/estimate.vue @@ -1,13 +1,131 @@ + + \ No newline at end of file diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.spec.js b/src/layouts/license-plate-lookup/license-plate-lookup.spec.js index 8253a97b5..6e6de9349 100644 --- a/src/layouts/license-plate-lookup/license-plate-lookup.spec.js +++ b/src/layouts/license-plate-lookup/license-plate-lookup.spec.js @@ -33,7 +33,7 @@ jest.mock("@/store", () => ({ emailAddress: "test@test.com" }, serviceLocation: { - zip: "43443" + zipCode: "43443" } }, vehicle: { @@ -51,7 +51,7 @@ jest.mock("@/store", () => ({ }, eventBusItem: jest.fn(), damage: { - glassToReplace: [] + glassToReplace: [] }, }, })); @@ -144,4 +144,4 @@ function setupMocks({ wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent; return { wrapper, apiPromise }; -} \ No newline at end of file +} diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue index ecee25f79..34507bda2 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; + }, + getEmailFromStore() { + return store.getters.order.customer.emailAddress; }, getServiceZipFromStore(){ - return store.getters.order.serviceLocation.zip + return store.getters.order.serviceLocation.zipCode }, 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_SERVICE_LOCATION_ZIP, this.serviceZip); + store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE, 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, diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js index 9a9f7e6d7..b722fccbf 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.spec.js +++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js @@ -182,66 +182,6 @@ describe("vehicle-damage.vue", () => { }); }); -describe("vehicle-damage.vue", () => { - test("Windshield replace with single part on ForwardButtonAction triggers a router.navigate and saves selections to store", async () => { - //Arrange - const partsData = { partsOrQuestions: [ - { - glassLocation: "Windshield", - glassName: "Single", - partQuestions: null, - parts: [ - { - color: "Green Tint, Green Shade", - description: "rain sensor, solar", - partNumber: "FW02728GGYN", - requiresCapabilityQuestions: false, - requiresRecalibration: false - } - ]}]}; - - const { wrapper } = setupMocks({ - pageHeaderWidgetHeaderText: "", - mountOptionsMockData: { - router: { navigate: jest.fn(), }, - actionList: [{ actionName: storeActions.GET_PARTS_OR_QUESTIONS, data: partsData, },], - store: { - getters: { - vehicle: {}, - payment: { insuranceCoverage: { isVerified: false } }, - }, - }, - }, - }); - - wrapper.vm.selectedDamageLocations = ["Windshield"]; - wrapper.vm.selectedWindshieldOptions = { - selectedWindshieldChipCount : null, - selectedWindshieldReplaceOptions : ["Single"], - selectedWindshieldDamageType: ["Replace"] - }; - - const expectedGlassToReplace = [{location: "Windshield", name: "Single"},]; - - //Act - vehicleDamage.beforeRouteEnter.call( - wrapper.vm, - { query: { fmgPage: "vehicle-damage" } }, - undefined, - (c) => c(wrapper.vm) - ); - - await wrapper.vm.forwardButtonAction(); - - //Assert - expect(wrapper.vm.$router.navigate).toHaveBeenCalled(); - expect(wrapper.vm.selectedGlassToReplace()).toEqual(expectedGlassToReplace); - expect(store.commit).toBeCalledWith(storeMutations.UPDATE_IS_REPAIR, false); - expect(store.commit).toBeCalledWith(storeMutations.UPDATE_GLASS_TO_REPLACE, expectedGlassToReplace); - expect(store.commit).toBeCalledWith(storeMutations.UPDATE_PARTS, partsData.partsOrQuestions[0].parts); - }); -}); - describe("vehicle-damage.vue", () => { test("Windshield replace with multiple parts on ForwardButtonAction triggers a router.navigateAfterSave and saves selections to store", async () => { //Arrange @@ -332,48 +272,6 @@ describe("vehicle-damage.vue", () => { }); }); - -describe("vehicle-damage.vue", () => { - test("Windshield repair on ForwardButtonAction triggers a router.navigate and saves selection to store", async () => { - //Arrange - const partsData = { partsOrQuestions: []}; - const { wrapper } = setupMocks({ - pageHeaderWidgetHeaderText: "", - mountOptionsMockData: { - router: { navigate: jest.fn(), }, - actionList: [{ actionName: storeActions.GET_PARTS_OR_QUESTIONS, data: partsData, },], - store: { - getters: { - vehicle: {}, - payment: { insuranceCoverage: { isVerified: false } }, - }, - }, - }, - }); - - wrapper.vm.selectedDamageLocations = ["Windshield"]; - wrapper.vm.selectedWindshieldOptions = { - selectedWindshieldChipCount : [2], - selectedWindshieldDamageType: ["Repair"] - }; - - //Act - vehicleDamage.beforeRouteEnter.call( - wrapper.vm, - { query: { fmgPage: "vehicle-damage" } }, - undefined, - (c) => c(wrapper.vm) - ); - - await wrapper.vm.forwardButtonAction(); - - //Assert - expect(wrapper.vm.$router.navigate).toHaveBeenCalled(); - expect(store.commit).toBeCalledWith(storeMutations.UPDATE_IS_REPAIR, true); - expect(store.commit).toBeCalledWith(storeMutations.UPDATE_NUMBER_OF_CHIPS, 2); - }); -}); - describe("vehicle-damage.vue", () => { test("isWindshieldDamageLocation is true when windshield is selected", async () => { diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index 862abaced..b3f89f833 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( @@ -287,55 +293,20 @@ export default { store.commit(this.storeMutations.UPDATE_GLASS_TO_REPLACE, this.selectedGlassToReplace()); - const partsData = await baseMixin.methods.dispatchStoreAction(this.storeActions.GET_PARTS_OR_QUESTIONS, - { carId: store.getters.vehicle.carId, glassArray: this.selectedGlassToReplace()}, false); - - this.navigateForward(partsData); + this.navigateForward(); }, - navigateForward(partsData){ - - // Temporary easter egg to navigate to heritage funnel. - const vehicleYearsToShowHeritageFunnel = [ 2001, 2002, 2010, 2016 ]; - if (vehicleYearsToShowHeritageFunnel.includes(store.getters.vehicle.year)) { - navigateToHeritageFunnel(); - return; - } - - // Temporary easter egg to navigate to address-lookup. - if (store.getters.vehicle.year === 2014) { - this.$router.navigateAfterSave(this.navigationScenarios.TEMPORARY_TO_ADDRESS_LOOKUP, this.$route, {}, {}, partsData.data); - return; - } + navigateForward(){ // If vin already exists, navigate directly to vin-lookup - if(this.$store.getters.vehicle.vin){ - this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_VIN, this.$route); + if(store.getters.vehicle.vin) { + this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD_WITH_VIN, this.$route); + return; + } + else { + this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN, this.$route); return; } - - //found problem questions - if (partsData.data.partsOrQuestions.some(pq => pq.partQuestions != null && pq.partQuestions.length > 0)){ - this.$router.navigateAfterSave(this.navigationScenarios.SELECTED_DAMAGE_WITH_PART_QUESTIONS, this.$route, {}, {}, partsData.data); - return; - } - - //found multiple parts for a single glass location (Windshield, Driver, Passenger, Rear) - if (partsData.data.partsOrQuestions){ - for (var i = 0; i < partsData.data.partsOrQuestions.length; i++){ - if (partsData.data.partsOrQuestions[i].parts != null && partsData.data.partsOrQuestions[i].parts.length > 1){ - this.$router.navigateAfterSave(this.navigationScenarios.SELECTED_DAMAGE_WITH_MULTIPLE_PARTS, this.$route, {}, {}, partsData.data); - return; - } - } - } - - //if not a repair then there should only be 1 part and no problem questions at this point so save the part to the store. - if (!this.isWindshieldRepair){ - store.commit(this.storeMutations.UPDATE_PARTS, partsData.data.partsOrQuestions[0].parts); - } - - this.$router.navigate(this.navigationScenarios.SELECTED_DAMAGE_WITH_SINGLE_PART, this.$route); }, selectedGlassToReplace() { 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 4064da145..4842a8eb6 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,20 +34,36 @@
- +
- +
- - @@ -114,15 +130,29 @@ import baseMixin from "@/mixins/base-mixin.js"; import { storeActions } from "@/constants/store-actions"; import { storeMutations } from "@/constants/store-mutations"; import { errorMessages } from "@/constants/error-messages"; +import { getDamageString, isGlassAvailableForCarId } from "@/helpers/damage-helper"; import { required, regex } from "@/helpers/validation-rules"; import { Form, defineRule } from "vee-validate"; +import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper"; // 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", @@ -130,7 +160,6 @@ export default { // Call APIs const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage); - // Settle promises and get results const promiseResultMap = [ { @@ -159,12 +188,48 @@ export default { foundWindshieldAlert: false, vinNotFound: false, perfectMatchNewVinAlert: false, - vin: '', - zip: '', - email: '', + vin: this.getVinFromStore(), + zip: this.getZipFromStore(), + email: this.getEmailFromStore(), customAlertData: {}, + isCarIdDifferent: false, + previouslyEnteredCarId: '', + invalidZip: '', }; }, + computed: { + MatchedDifferentVehicleAlertHeader(){ + let text = this.getCmsContent("MatchedDifferentVehicle", + "HeadlineText").replaceAll("{custom:damage}", getDamageString()); + + return text; + }, + MatchedDifferentVehicleAlertBody(){ + let text = this.getCmsContent("MatchedDifferentVehicle", + "BodyText").replaceAll("{custom:damage}", getDamageString()).replaceAll("{custom:vinlookupYear}", this.customAlertData?.vehicleInfo?.year).replaceAll("{custom:vinlookupMake}", this.customAlertData?.vehicleInfo?.make).replaceAll("{custom:vinlookupModel}", + this.customAlertData?.vehicleInfo?.model); + + return text; + }, + NoServiceZipHeader(){ + let text = this.getCmsContent("NoServiceZipWidget", "HeadlineText").replaceAll("{custom:serviceZip}", this.invalidZip); + + return text; + }, + NoServiceZipBody(){ + return this.getCmsContent("NoServiceZipWidget", "BodyText"); + }, + PerfectMatchNewVinAlertHeader() { + return this.getCmsContent("PerfectMatchNewVinAlert", "HeadlineText"); + }, + PerfectMatchNewVinAlertBody() { + return this.getCmsContent("PerfectMatchNewVinAlert", "BodyText").replaceAll("{custom:damage}", + getDamageString()) + }, + isVinFieldReadOnly(){ + return this.$store.getters.payment.insuranceCoverage.isVerified; + }, + }, methods: { arePagePrerequisitesValid() { return store.getters.vehicle.carId !== null; @@ -176,71 +241,83 @@ export default { store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, null); store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES); }, + getEmailFromStore(){ + return store.getters.order.customer.emailAddress + }, + getVinFromStore(){ + return store.getters.vehicle.vin + }, + 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; this.$refs.funnelFooter.removeLoader(); this.noServiceZip = true; + this.invalidZip = this.zip; return; } - const vinLookup = await this.lookupVin(this.vin).catch(() => { + const vehicleLookup = await this.lookupVehicle(this.vin).catch(() => { + this.vinNotFound = true; this.$refs.funnelFooter.removeLoader(); - this.noMatchAlert = true; + this.noServiceZip = false; return; }); - if (vinLookup.data.carId !== store.getters.vehicle.carId) { - this.customAlertData.vehicleInfo = vinLookup.data.vehicle; + this.isCarIdDifferent = vehicleLookup.data.carId !== store.getters.vehicle.carId; + + if (this.isCarIdDifferent && (vehicleLookup.data.carId !== this.previouslyEnteredCarId)) { + this.previouslyEnteredCarId = vehicleLookup.data.carId; + this.noServiceZip = false; + this.customAlertData.vehicleInfo = vehicleLookup.data; + this.$refs.funnelFooter.updateButtonText(`Continue with ${vehicleLookup.data.year} ${vehicleLookup.data.make} ${vehicleLookup.data.model}`); + this.isVinValid = true; + this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vehicleLookup.data.carId); this.$refs.funnelFooter.removeLoader(); - this.foundWindshieldAlert = true; + this.matchedDifferentVehicle = true; return; } - const carInfo = this.vinDoesNotMatchCarId ? vinLookup.data : store.getters.vehicle; - this.updateStore(carInfo) - const partsData = await baseMixin.methods.dispatchStoreAction( - this.storeActions.GET_PARTS_OR_QUESTIONS, - { - carId: store.getters.vehicle.carId, - glassArray: store.getters.damage.glassToReplace, - zipCode: this.zip, - vin: vinLookup.vin - }, - false - ); - this.navigateForward(partsData); + this.updateStore(vehicleLookup.data); + this.navigateForward(); }, - navigateForward(partsData){ - if(partsData.data.partsOrQuestions[0].partQuestions && partsData.data.partsOrQuestions[0].partQuestions.length > 0){ - this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_PARTS_QUESTION, this.$route, {}, {}, partsData.data); + navigateForward(){ + if(this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle){ + this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD, this.$route, {}, { displayVehicleChangeAlert: true }, {}); return; - } else if((!partsData.data.partsOrQuestions[0].partQuestions || partsData.data.partsOrQuestions[0].partQuestions.length < 1) && partsData.data.partsOrQuestions[0].parts.length > 1) { - this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_PARTS, this.$route, {}, {}, partsData.data); - return; } else { - this.$router.navigate(this.navigationScenarios.CONTINUING_WITH_SINGLE_PART, this.$route); + navigateAfterSaveToHeritageFunnel(this.$route); + return; } }, validateZip(zip) { - return baseMixin.methods.dispatchStoreAction( - storeActions.VALIDATE_ZIP, - { zip } - ); + return baseMixin.methods.dispatchStoreAction(storeActions.VALIDATE_ZIP, { + zip, + }); }, - lookupVin(vin) { + lookupVehicle(vin) { return baseMixin.methods.dispatchStoreAction( storeActions.LOOKUP_VEHICLE_BY_VIN, { vin } ); }, updateStore(carInfo) { - // if(vehicleDamage){ - // 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, this.vin); store.commit(storeMutations.UPDATE_YEAR, carInfo.year); store.commit(storeMutations.UPDATE_MAKE, carInfo.make); @@ -250,16 +327,11 @@ export default { store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, carInfo.category); store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, carInfo.imageUrl); store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, carInfo.imageVifNumber); - store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, carInfo.imageColor); - store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP, this.zip); + store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, carInfo.imageVifNumber); + store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE, this.zip); store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.email); }, }, - computed: { - isVinFieldReadOnly(){ - return this.$store.getters.payment.insuranceCoverage.isVerified; - } - }, components: { Form, funnelHeader, diff --git a/src/mixins/analytics-mixin.js b/src/mixins/analytics-mixin.js index c2c86c2dd..6b1943241 100644 --- a/src/mixins/analytics-mixin.js +++ b/src/mixins/analytics-mixin.js @@ -11,24 +11,34 @@ const currentPageName = getPageNameByQueryString(); export default { methods: { - logEvent(pageEvent, category, action, label, value) { + logPageView(pageEvent) { var payload = { userId: getDeviceIdValue(), sessionKey: getSessionKeyValue(), pageName: currentPageName, sessionId: getSessionIdValue(), + action: '', + event: pageEvent, shouldUseSessionId: true, }; - if (pageEvent) { - payload.pageEvent = { action: '', event: pageEvent }; - } + baseMixin.methods.dispatchStoreAction(storeActions.LOG_PAGE_VIEW, payload, false); + }, - if (category) { - payload.customEvent = { category: category, action: action, label: label, value: value }; - } + logCustomEvent(category, action, label, value) { + var payload = { + userId: getDeviceIdValue(), + sessionKey: getSessionKeyValue(), + pageName: currentPageName, + sessionId: getSessionIdValue(), + category: category, + action: action, + label: label, + value: value, + shouldUseSessionId: true, + }; - baseMixin.methods.dispatchStoreAction(storeActions.LOG_ACTIVITY, payload, false); + baseMixin.methods.dispatchStoreAction(storeActions.LOG_CUSTOM_EVENT, payload, false); }, pushEventToGA(category, action, label, pushToLogApp = false) { @@ -44,7 +54,7 @@ export default { pushToDataLayerIfDefined(eventToBePushed); if (pushToLogApp) { - this.logEvent(undefined, category, action, label, undefined); + this.logCustomEvent(category, action, label, undefined); } }, @@ -58,11 +68,11 @@ export default { pushToDataLayerIfDefined(pageViewEvent); - this.logEvent(currentPageName, analyticsPageEvents.ENTRY); + this.logPageView(analyticsPageEvents.ENTRY); }, pushExperimentsToDataLayer(experiments) { - experiments?.data?.forEach(exp => { + experiments?.forEach(exp => { // Set Google Dimension Index based on experiment settings. let googleDimensionIndex = 99; @@ -72,16 +82,26 @@ export default { } // Create object with dimension index and value. - const experimentWithDimension = {}; - - Object.keys(exp).forEach(key => { - experimentWithDimension[`${key}_${googleDimensionIndex}`] = exp[key]; - }); + const experimentWithDimension = { + [`experimentId_${googleDimensionIndex}`]: exp.universeId, + [`variationId_${googleDimensionIndex}`]: exp.variationId, + [`experimentName_${googleDimensionIndex}`]: exp.universeName, + [`variationName_${googleDimensionIndex}`]: exp.variationName, + [`customDimension_${googleDimensionIndex}`]: `${exp.universeId}_${exp.variationId}_${exp.universeName}_${exp.variationName}` + }; // 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 +116,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..e63778466 100644 --- a/src/mixins/analytics-mixin.spec.js +++ b/src/mixins/analytics-mixin.spec.js @@ -3,18 +3,34 @@ import { setupMocksForJsFiles } from "@/helpers/unit-test-helper.js"; import { storeActions } from "@/constants/store-actions"; describe("analyticsMixin.js", () => { - test("logEvent: calls dispatch with type and payload", () => { + test("logPageView: calls dispatch with type and payload", () => { const type = ""; const payload = {}; const mockData = { actionList: [{ - actionName: storeActions.LOG_ACTIVITY + actionName: storeActions.LOG_PAGE_VIEW }], } const mocks = setupMocksForJsFiles(mockData); - analyticsMixin.methods.logEvent(type, payload); + analyticsMixin.methods.logPageView(type, payload); + + expect(mocks.baseMixin.methods.dispatchStoreAction).toBeCalled(); + }); + + test("logCustomEvent: calls dispatch with type and payload", () => { + const type = ""; + const payload = {}; + + const mockData = { + actionList: [{ + actionName: storeActions.LOG_CUSTOM_EVENT + }], + } + const mocks = setupMocksForJsFiles(mockData); + + analyticsMixin.methods.logCustomEvent(type, payload); expect(mocks.baseMixin.methods.dispatchStoreAction).toBeCalled(); }); @@ -23,7 +39,7 @@ describe("analyticsMixin.js", () => { // Arrange const mockData = { actionList: [{ - actionName: storeActions.LOG_ACTIVITY + actionName: storeActions.LOG_CUSTOM_EVENT }], } const mocks = setupMocksForJsFiles(mockData); @@ -40,21 +56,27 @@ describe("analyticsMixin.js", () => { // Arrange window.dataLayer = []; - const mockExperimentData = { - data: [ + const mockExperimentData = + [ { settings: {}, variationName: 'test', universeName: 'testUniverse' } ] - } + // Act analyticsMixin.methods.pushExperimentsToDataLayer(mockExperimentData); // Assert - expect(window.dataLayer).toEqual([ { settings_99: {}, variationName_99: 'test', universeName_99: 'testUniverse' } ]); + expect(window.dataLayer).toEqual([{ + experimentId_99: undefined, + variationId_99: undefined, + experimentName_99: 'testUniverse', + variationName_99: 'test', + customDimension_99: 'undefined_undefined_testUniverse_test' + }]); }); @@ -62,22 +84,27 @@ describe("analyticsMixin.js", () => { // Arrange window.dataLayer = []; - const mockExperimentData = { - data: [ + const mockExperimentData = + [ { - settings: { "Google Custom Dimension Index": "5"}, + settings: { "Google Custom Dimension Index": "5" }, variationName: 'test', universeName: 'testUniverse' } ] - } + // Act analyticsMixin.methods.pushExperimentsToDataLayer(mockExperimentData); // Assert - expect(window.dataLayer).toEqual([ { settings_5: {"Google Custom Dimension Index": "5"}, variationName_5: 'test', universeName_5: 'testUniverse' } ]); + expect(window.dataLayer).toEqual([{ + experimentId_5: undefined, + variationId_5: undefined, + experimentName_5: 'testUniverse', + variationName_5: 'test', + customDimension_5: 'undefined_undefined_testUniverse_test' + }]); }); - }); \ No newline at end of file diff --git a/src/mixins/base-mixin.spec.js b/src/mixins/base-mixin.spec.js index f343336c3..b0c8b26f3 100644 --- a/src/mixins/base-mixin.spec.js +++ b/src/mixins/base-mixin.spec.js @@ -6,7 +6,7 @@ import { vehicleCategories } from "@/constants/vehicle-categories.js"; import store from "@/store"; describe("baseMixin.js", () => { - test("dispatchNonblockingStoreAction: calls dispatch with type and payload", () => { + test("dispatchStoreAction: calls dispatch with type and payload", () => { const mixIn = getMixInInstance({}); const type = ""; const payload = {}; @@ -16,7 +16,7 @@ describe("baseMixin.js", () => { expect(store.dispatch).toBeCalledWith(type, payload); }); - test("dispatchNonblockingStoreAction: calls dispatch with type and payload, handles Uri encode", () => { + test("dispatchStoreAction: calls dispatch with type and payload, handles Uri encode", () => { const mixIn = getMixInInstance({}); const type = ""; const payload = { make: "Alfa Romeo/Chrysler" }; diff --git a/src/router/index.js b/src/router/index.js index 9ffd28522..f11bd4228 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -126,8 +126,12 @@ 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); + + baseMixin.methods.dispatchStoreAction(storeActions.GET_EXPERIMENTS_BY_USER, { userId: getDeviceIdValue() }) + .then( (response) => { + analyticsMixin.methods.pushExperimentsToDataLayer(response.data); + }); + }); router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) => { diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js index 5380a3fa7..b3ce4d6d7 100644 --- a/src/router/router-constants/navigation-scenarios.js +++ b/src/router/router-constants/navigation-scenarios.js @@ -8,14 +8,14 @@ const navigationScenarios = { CLICKED_FORWARD: "CLICKED_FORWARD", CLICKED_FORWARD_WITH_VIN: "CLICKED_FORWARD_WITH_VIN", SELECTED_PARTS: "SELECTED_PARTS", - SELECTED_DAMAGE_WITH_SINGLE_PART: "SELECTED_DAMAGE_WITH_SINGLE_PART", - SELECTED_DAMAGE_WITH_MULTIPLE_PARTS: "SELECTED_DAMAGE_WITH_MULTIPLE_PARTS", - SELECTED_DAMAGE_WITH_PART_QUESTIONS: "SELECTED_DAMAGE_WITH_PART_QUESTIONS", CONTINUING_WITH_PARTS_QUESTION: "CONTINUING_WITH_PARTS_QUESTION", CONTINUING_WITH_MULTIPLE_PARTS: "CONTINUING_WITH_MULTIPLE_PARTS", CONTINUING_WITH_SINGLE_PART: "CONTINUING_WITH_SINGLE_PART", CONTINUING_WITH_MULTIPLE_VEHICLES: "CONTINUING_WITH_MULTIPLE_VEHICLES", - TEMPORARY_TO_ADDRESS_LOOKUP: "TEMPORARY_TO_ADDRESS_LOOKUP", + CLICKED_FORWARD_WITHOUT_VIN: "CLICKED_FORWARD_WITHOUT_VIN", + SELECTED_MANUAL_VIN: "SELECTED_MANUAL_VIN", + SELECTED_LICENSE_PLATE: "SELECTED_LICENSE_PLATE", + SELECTED_HOME_ADDRESS: "SELECTED_HOME_ADDRESS", }; export { navigationScenarios }; diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js index 9f412288a..2d27efcdf 100644 --- a/src/router/router-constants/routing-table.js +++ b/src/router/router-constants/routing-table.js @@ -59,23 +59,11 @@ const routingTable = [ }, { scenario: navigationScenarios.CLICKED_FORWARD_WITH_VIN, - destinationFmgPageValue: fmgPageValues.LICENSE_PLATE_LOOKUP, + destinationFmgPageValue: fmgPageValues.VIN_LOOKUP, }, { - scenario: navigationScenarios.SELECTED_DAMAGE_WITH_SINGLE_PART, - destinationFmgPageValue: fmgPageValues.LICENSE_PLATE_LOOKUP, - }, - { - scenario: navigationScenarios.SELECTED_DAMAGE_WITH_MULTIPLE_PARTS, - destinationFmgPageValue: fmgPageValues.VEHICLE_PARTS, - }, - { - scenario: navigationScenarios.SELECTED_DAMAGE_WITH_PART_QUESTIONS, - destinationFmgPageValue: fmgPageValues.LICENSE_PLATE_LOOKUP,//This might be temporary - }, - { - scenario: navigationScenarios.TEMPORARY_TO_ADDRESS_LOOKUP, - destinationFmgPageValue: fmgPageValues.ADDRESS_LOOKUP, //This will be temporary + scenario: navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN, + destinationFmgPageValue: fmgPageValues.ESTIMATE, }, ], }, @@ -124,6 +112,10 @@ const routingTable = [ scenario: navigationScenarios.VIN_LOOKUP, destinationFmgPageValue: fmgPageValues.PART_QUESTIONS, }, + { + scenario: navigationScenarios.CLICKED_FORWARD, + destinationFmgPageValue: fmgPageValues.ESTIMATE, + } ], }, { @@ -168,6 +160,26 @@ const routingTable = [ }, ], }, + {fmgPageValue: fmgPageValues.ESTIMATE, + maps: [ + { + scenario: navigationScenarios.CLICKED_BACK, + destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE, + }, + { + scenario: navigationScenarios.SELECTED_MANUAL_VIN, + destinationFmgPageValue: fmgPageValues.VIN_LOOKUP, + }, + { + scenario: navigationScenarios.SELECTED_LICENSE_PLATE, + destinationFmgPageValue: fmgPageValues.LICENSE_PLATE_LOOKUP, + }, + { + scenario: navigationScenarios.SELECTED_HOME_ADDRESS, + destinationFmgPageValue: fmgPageValues.ADDRESS_LOOKUP, + }, + ], + }, ]; export { routingTable }; diff --git a/src/store/index.js b/src/store/index.js index 60c2f6435..2c52053bb 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -31,7 +31,7 @@ const getDefaultState = () => { }, }, serviceLocation: { - zip: null, + zipCode: null, }, customer: { emailAddress: null, @@ -144,17 +144,17 @@ export const mutations = { updateRegistrationAddress(state, registrationAddress){ state.order.vehicle.registration.address = registrationAddress; }, - updateServiceLocationZip(state, serviceLocationZip){ - state.order.serviceLocation.zip = serviceLocationZip; + updateServiceLocationZipCode(state, serviceLocationZipCode){ + state.order.serviceLocation.zipCode = serviceLocationZipCode; }, - updateRegistrationCity(state, registrationCity){ - state.order.vehicle.registration.city = registrationCity; + updateRegistrationCity(state, serviceCity){ + state.order.serviceLocation.city = serviceCity; }, updateRegistrationFirstName(state, firstName){ - state.order.vehicle.registration.firstName = firstName; + state.order.serviceLocation.firstName = firstName; }, updateRegistrationLastName(state, lastName){ - state.order.vehicle.registration.lastName = lastName; + state.order.serviceLocation.lastName = lastName; }, updateCustomerEmailAddress(state, customerEmailAddress){ state.order.customer.emailAddress = customerEmailAddress; @@ -303,13 +303,13 @@ export const actions = { method: endpoints.LookupVinByAddress.method, endpoint: endpoints.LookupVinByAddress.url, payload: { - licenseLastName: licenseLastName, + licenseLastName: licenseLastName, licenseStreetAddress: licenseStreetAddress, licenseZip: licenseZip, licenseState: licenseState }, }); - }, + }, getVehicleMakes(context, { year }) { return globalMethods.callHttpClient({ method: endpoints.GetVehicleMakes.method, @@ -433,40 +433,56 @@ export const actions = { }); }, - logActivity(context, { userId, sessionKey, pageName, sessionId, pageEvent, customEvent, shouldUseSessionId }) { + logPageView(context, { userId, sessionKey, pageName, sessionId, action, event, shouldUseSessionId }) { var payload = { userId: userId, sessionKey: sessionKey, sessionId: sessionId, pageName: pageName, applicationName: 'SafeliteDotCom', + action: action, + event: event, shouldUseSessionId: shouldUseSessionId }; - if (typeof pageEvent !== 'undefined') { - payload.pageEvent = { action: pageEvent.action, event: pageEvent.event}; - } - - if (typeof customEvent !== 'undefined') { - payload.customEvents = [{category: customEvent.category, action: customEvent.action, label: customEvent.label, value: customEvent.value}]; - } - return globalMethods.callHttpClient({ - method: endpoints.LogActivity.method, - endpoint: endpoints.LogActivity.url, + method: endpoints.LogPageView.method, + endpoint: endpoints.LogPageView.url, payload: payload, logApiCall: false }); }, - getExperimentsByUserForGa(context, { userId }){ + logCustomEvent(context, { userId, sessionKey, pageName, sessionId, category, action, label, value, shouldUseSessionId }) { + var payload = { + userId: userId, + sessionKey: sessionKey, + sessionId: sessionId, + pageName: pageName, + applicationName: 'SafeliteDotCom', + category: category, + action: action, + label: label, + value: value, + shouldUseSessionId: shouldUseSessionId + }; + return globalMethods.callHttpClient({ - method: endpoints.GetExperimentsByUserForGa.method, - endpoint: `${endpoints.GetExperimentsByUserForGa.url}/${userId}`, + method: endpoints.LogCustomEvent.method, + endpoint: endpoints.LogCustomEvent.url, + payload: payload, + logApiCall: false + }); + }, + + GetExperimentsByUser(context, { userId }){ + return globalMethods.callHttpClient({ + method: endpoints.GetExperimentsByUser.method, + endpoint: `${endpoints.GetExperimentsByUser.url}/${userId}`, payload: {} }); }, - + // Parts API Actions getPartsOrQuestions(context, { carId, glassArray, zipCode, vin = '' }) { diff --git a/src/store/store.spec.js b/src/store/store.spec.js index e27569a6f..b1667eb4c 100644 --- a/src/store/store.spec.js +++ b/src/store/store.spec.js @@ -617,7 +617,7 @@ describe("Actions", () => { expect(commit).toBeCalledWith(storeMutations.UPDATE_REFERRAL_CORRELATION_ID, "xxx-xxx-xxx"); }); - it("logActivity action, should return nothing", async () => { + it("logPageView action, should return nothing", async () => { // Arrange const context = state; @@ -626,12 +626,26 @@ describe("Actions", () => { event: "ENTRY", } - var customEvent = [{ + // Act + globalMethods.callHttpClient.mockImplementation(() => { + return Promise.resolve({ }); + }); + + // Assert + const response = await actions.logPageView(context, { userId: "userId", sessionKey: "sessionKey", pageName: "pageName", sessionId: "sessionId", pageEvent: pageEvent, shouldUseSessionId: true }); + expect(response).toEqual({}); + }); + + it("logCustomEvent action, should return nothing", async () => { + + // Arrange + const context = state; + var customEvent = { category: "tstCat", action: "click", label: "damage", value: "psych" - }]; + }; // Act globalMethods.callHttpClient.mockImplementation(() => { @@ -639,7 +653,7 @@ describe("Actions", () => { }); // Assert - const response = await actions.logActivity(context, { userId: "userId", sessionKey: "sessionKey", pageName: "pageName", sessionId: "sessionId", pageEvent: pageEvent, customEvent: customEvent, shouldUseSessionId: true }); + const response = await actions.logCustomEvent(context, { userId: "userId", sessionKey: "sessionKey", pageName: "pageName", sessionId: "sessionId", customEvent: customEvent, shouldUseSessionId: true }); expect(response).toEqual({}); }); diff --git a/vue.config.js b/vue.config.js index 99c9cd754..6ddcd54de 100644 --- a/vue.config.js +++ b/vue.config.js @@ -4,6 +4,7 @@ process.env.VUE_APP_HERITAGE_FUNNEL = "http://localhost:38000/default.aspx"; process.env.VUE_APP_GOOGLE_PLACES_API_KEY = "AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo"; +process.env.VUE_APP_CURRENT_ENVIRONMENT = "Localhost"; // GA & GTM process.env.VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY = "(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl+ '>m_auth=amlAYNhxUxuskQo7jmjadg>m_preview=env-38>m_cookies_win=x';f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-M6XCRH');"; diff --git a/vue.release.config.js b/vue.release.config.js index 8c705b074..ad2732e41 100644 --- a/vue.release.config.js +++ b/vue.release.config.js @@ -1,6 +1,7 @@ process.env.VUE_APP_CONSUMER_CF_DISTRO = "__VUE_APP_CONSUMER_CF_DISTRO__"; process.env.VUE_APP_GOOGLE_PLACES_API_KEY = "__VUE_APP_GOOGLE_PLACES_API_KEY__"; process.env.VUE_APP_HERITAGE_FUNNEL = "__VUE_APP_HERITAGE_FUNNEL__"; +process.env.VUE_APP_CURRENT_ENVIRONMENT = "__VUE_APP_CURRENT_ENVIRONMENT__"; // GA & GTM process.env.VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY = "__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__";