diff --git a/src/common-components/base-input-button/base-input-button.vue b/src/common-components/base-input-button/base-input-button.vue index e46e1a07d..d3574fef2 100644 --- a/src/common-components/base-input-button/base-input-button.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -25,6 +25,8 @@ import { queryStrings } from "@/constants/query-strings"; import { useField } from "vee-validate"; import { toRef } from "vue"; +import { gaStoreActions } from "../../constants/store-actions"; +import store from "../../store"; export default { name: "base-input-button", @@ -83,7 +85,12 @@ export default { case eventTypes.KEYPRESS_SUBMIT: case eventTypes.CHANGE: this.handleClick(e); - window.lastFocusedInputGroup = this.groupName; + this.dispatchStoreAction( + gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP, + this.groupName, + false + ); + // window.lastFocusedInputGroup = this.groupName; this.pushClickEventToGA(); break; } @@ -119,9 +126,17 @@ export default { this.valueToEmit = this.value; } - window.currentlySelectedValues = - window.currentlySelectedValues ?? {}; - window.currentlySelectedValues[this.groupName] = this.value; + // window.currentlySelectedValues = + // window.currentlySelectedValues ?? {}; + this.dispatchStoreAction( + gaStoreActions.UPDATE_CURRENTLY_SELECTED_VALUES, + { + groupName: this.groupName, + value: this.value, + }, + // false + ); + // window.currentlySelectedValues[this.groupName] = this.value; this.handleChange(this.valueToEmit); }, handleClick(e) { @@ -129,10 +144,20 @@ export default { this.$emit("buttonClicked", this.valueToEmit); }, pushClickEventToGA(value) { - window.firedGaClickEventValues = - window.firedGaClickEventValues ?? {}; - window.firedGaClickEventValues[window.lastFocusedInputGroup] = - value ?? this.value; + // window.firedGaClickEventValues = + // window.firedGaClickEventValues ?? {}; + const lastFocusedInputGroup = + store.getters.gaClickInformation.lastFocusedInputGroup; + this.dispatchStoreAction( + gaStoreActions.UPDATE_FIRED_GA_CLICK_EVENT_VALUES, + { + groupName: lastFocusedInputGroup, + value: value ?? this.value, + }, + // false + ); + // window.firedGaClickEventValues[window.lastFocusedInputGroup] = + // value ?? this.value; this.pushEventToGA( this.$route.query[queryStrings.FMG_PAGE], @@ -143,65 +168,68 @@ export default { ); }, handleBlur() { - window.lastFocusedInputGroup = this.groupName; - window.wasLastFocusedInputMultiselect = this.isMultiSelect; + this.dispatchStoreAction( + gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP, + this.groupName, + false + ); + this.dispatchStoreAction( + gaStoreActions.UPDATE_WAS_LAST_FOCUSED_INPUT_MULTISELECT, + this.isMultiSelect, + false + ); + // window.lastFocusedInputGroup = this.groupName; + // window.wasLastFocusedInputMultiselect = this.isMultiSelect; }, handleKeyboardNavigation(key) { this.test(key); }, test(event) { - window.firedGaClickEventValues = - window.firedGaClickEventValues ?? {}; - window.currentlySelectedValues = - window.currentlySelectedValues ?? {}; + const gaClickInformation = store.getters.gaClickInformation; + const firedGaClickEventValues = + gaClickInformation.firedGaClickEventValues; + const currentlySelectedValues = + gaClickInformation.currentlySelectedValues; + const lastFocusedInputGroup = + gaClickInformation.lastFocusedInputGroup; + const wasLastFocusedInputMultiselect = + gaClickInformation.wasLastFocusedInputMultiselect; const keyCode = event?.code; // Keyboard navigation if (keyCode) { if ( - window.currentlySelectedValues && - window.firedGaClickEventValues && - window.lastFocusedInputGroup && - !window.wasLastFocusedInputMultiselect && - window.currentlySelectedValues[ - window.lastFocusedInputGroup - ] && - window.firedGaClickEventValues[ - window.lastFocusedInputGroup - ] != - window.currentlySelectedValues[ - window.lastFocusedInputGroup - ] + !wasLastFocusedInputMultiselect && + currentlySelectedValues[lastFocusedInputGroup] && + firedGaClickEventValues[lastFocusedInputGroup] != + currentlySelectedValues[lastFocusedInputGroup] ) { if (keyCode === "Tab") { this.pushClickEventToGA( - window.currentlySelectedValues[ - window.lastFocusedInputGroup - ] + currentlySelectedValues[lastFocusedInputGroup] ); } else if (keyCode?.includes("Arrow")) { - if (window.lastFocusedInputGroup != this.groupName) { + if (lastFocusedInputGroup != this.groupName) { this.pushClickEventToGA( - window.currentlySelectedValues[ - window.lastFocusedInputGroup - ] + currentlySelectedValues[lastFocusedInputGroup] ); } } } } else { // Radio click - window.lastFocusedInputGroup = this.groupName; + this.dispatchStoreAction( + gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP, + this.groupName, + false + ); + // window.lastFocusedInputGroup = this.groupName; if ( - window.firedGaClickEventValues[ - window.lastFocusedInputGroup - ] != - window.currentlySelectedValues[window.lastFocusedInputGroup] + firedGaClickEventValues[lastFocusedInputGroup] != + currentlySelectedValues[lastFocusedInputGroup] ) { this.pushClickEventToGA( - window.currentlySelectedValues[ - window.lastFocusedInputGroup - ] + currentlySelectedValues[lastFocusedInputGroup] ); } } diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js index ff5100070..65d3789a1 100644 --- a/src/constants/store-actions.js +++ b/src/constants/store-actions.js @@ -1,78 +1,84 @@ const storeActions = { - // Content Actions - GET_ROUTE_INFO_ACTION: "getRouteInfo", - GET_HOMEPAGE_NAME: "getHomepageName", - GET_PAGE_DATA: "getPageData", + // Content Actions + GET_ROUTE_INFO_ACTION: "getRouteInfo", + GET_HOMEPAGE_NAME: "getHomepageName", + GET_PAGE_DATA: "getPageData", - // Vehicle Actions - GET_VEHICLE_YEARS: "getVehicleYears", - GET_VEHICLE_MAKES: "getVehicleMakes", - GET_VEHICLE_MODELS: "getVehicleModels", - GET_VEHICLE_STYLES: "getVehicleStyles", - SET_VEHICLE: "setVehicle", - GET_DAMAGE_OPTIONS: "getDamageOptions", - GET_EVOX_IMAGE: "getEvoxImage", + // Vehicle Actions + GET_VEHICLE_YEARS: "getVehicleYears", + GET_VEHICLE_MAKES: "getVehicleMakes", + GET_VEHICLE_MODELS: "getVehicleModels", + GET_VEHICLE_STYLES: "getVehicleStyles", + SET_VEHICLE: "setVehicle", + GET_DAMAGE_OPTIONS: "getDamageOptions", + GET_EVOX_IMAGE: "getEvoxImage", - // Lookup Actions - LOOKUP_VEHICLE_BY_YMMS: "lookupVehicleByYmms", - LOOKUP_VEHICLE_BY_VIN: "lookupVehicleByVin", - LOOKUP_VIN_BY_PLATE: "lookupVinByPlate", - LOOKUP_VIN_BY_ADDRESS: "lookupVinByAddress", + // Lookup Actions + LOOKUP_VEHICLE_BY_YMMS: "lookupVehicleByYmms", + LOOKUP_VEHICLE_BY_VIN: "lookupVehicleByVin", + LOOKUP_VIN_BY_PLATE: "lookupVinByPlate", + LOOKUP_VIN_BY_ADDRESS: "lookupVinByAddress", - GET_PARTS_OR_QUESTIONS: "getPartsOrQuestions", - GET_PARTS: "getParts", - GET_CAPABILITY_QUESTIONS: "getCapabilityQuestions", - GET_PART_FROM_CAPABILITY_QUESTION_ANSWER: - "getPartFromCapabilityQuestionAnswer", - GET_MOLDING_QUESTIONS: "getMoldingQuestions", - SAVE_ORDER: "saveOrder", - LOAD_ORDER: "loadOrder", - UPDATE_STORE_WITH_SAVE_ORDER_RESPONSE: "updateStoreWithSaveOrderResponse", - VALIDATE_ZIP: "validateZip", - LOG_EXPERIMENT_EXPOSURE: "logExperimentExposure", - LOG_PAGE_VIEW: "logPageView", - LOG_CUSTOM_EVENT: "logCustomEvent", - INITIALIZE_SESSION: "initializeSession", - GET_EXPERIMENTS_BY_USER: "GetExperimentsByUser", - RUN_EXPERIMENTS_FOR_TRIGGER: "runExperimentsForTrigger", - CLEAR_VIN: "clearVin", - RESET_SAVE_ORDER_PROMISE: "resetSaveOrderPromise", + GET_PARTS_OR_QUESTIONS: "getPartsOrQuestions", + GET_PARTS: "getParts", + GET_CAPABILITY_QUESTIONS: "getCapabilityQuestions", + GET_PART_FROM_CAPABILITY_QUESTION_ANSWER: + "getPartFromCapabilityQuestionAnswer", + GET_MOLDING_QUESTIONS: "getMoldingQuestions", + SAVE_ORDER: "saveOrder", + LOAD_ORDER: "loadOrder", + UPDATE_STORE_WITH_SAVE_ORDER_RESPONSE: "updateStoreWithSaveOrderResponse", + VALIDATE_ZIP: "validateZip", + LOG_EXPERIMENT_EXPOSURE: "logExperimentExposure", + LOG_PAGE_VIEW: "logPageView", + LOG_CUSTOM_EVENT: "logCustomEvent", + INITIALIZE_SESSION: "initializeSession", + GET_EXPERIMENTS_BY_USER: "GetExperimentsByUser", + RUN_EXPERIMENTS_FOR_TRIGGER: "runExperimentsForTrigger", + CLEAR_VIN: "clearVin", + RESET_SAVE_ORDER_PROMISE: "resetSaveOrderPromise", - // DEPENDENCY MUTATIONS - RESET_VEHICLE_STATE_AND_DEPENDENCIES: "resetVehicleAndDependencies", - RESET_DAMAGE_STATE_AND_DEPENDENCIES: "resetDamageAndDependencies", - RESET_REGISTRATION_STATE_AND_DEPENDENCIES: - "resetRegistrationAndDependencies", - RESET_PARTS_STATE_AND_DEPENDENCIES: "resetPartsAndDependencies", - RESET_STATE: "resetState", + // DEPENDENCY MUTATIONS + RESET_VEHICLE_STATE_AND_DEPENDENCIES: "resetVehicleAndDependencies", + RESET_DAMAGE_STATE_AND_DEPENDENCIES: "resetDamageAndDependencies", + RESET_REGISTRATION_STATE_AND_DEPENDENCIES: "resetRegistrationAndDependencies", + RESET_PARTS_STATE_AND_DEPENDENCIES: "resetPartsAndDependencies", + RESET_STATE: "resetState", - // SAVE COMPONENT STATE - SAVE_VEHICLE_YEAR: "saveVehicleYear", - SAVE_VEHICLE_MAKE: "saveVehicleMake", - SAVE_VEHICLE_MODEL: "saveVehicleModel", - SAVE_VEHICLE_STYLE: "saveVehicleStyle", - SAVE_VEHICLE_DAMAGE: "saveVehicleDamage", - SAVE_VIN_LOOKUP: "saveVinLookup", - SAVE_SERVICE_LOCATION: "saveServiceLocation", - SAVE_EMAIL: "saveEmail", - SAVE_REGISTRATION_LICENSE_PLATE_LOOKUP: - "saveRegistrationLicensePlateLookup", - SAVE_VIN: "saveVin", - SAVE_REGISTRATION_ADDRESS_LOOKUP: "saveRegistrationAddressLookup", - SAVE_GLASS_PARTS: "saveGlassParts", - SAVE_PART_QUESTION_ANSWERS: "savePartQuestionAnswers", - RESET_MOLDING_AND_CAPABILITY_QUESTIONS_IF_NEEDED: - "resetMoldingAndCapabilityQuestionAnswersIfNeeded", - SAVE_MOLDING_QUESTION_ANSWERS: "saveMoldingQuestionAnswers", - SAVE_CAPABILITY_QUESTION_ANSWERS: "saveCapabilityQuestionAnswers", + // SAVE COMPONENT STATE + SAVE_VEHICLE_YEAR: "saveVehicleYear", + SAVE_VEHICLE_MAKE: "saveVehicleMake", + SAVE_VEHICLE_MODEL: "saveVehicleModel", + SAVE_VEHICLE_STYLE: "saveVehicleStyle", + SAVE_VEHICLE_DAMAGE: "saveVehicleDamage", + SAVE_VIN_LOOKUP: "saveVinLookup", + SAVE_SERVICE_LOCATION: "saveServiceLocation", + SAVE_EMAIL: "saveEmail", + SAVE_REGISTRATION_LICENSE_PLATE_LOOKUP: "saveRegistrationLicensePlateLookup", + SAVE_VIN: "saveVin", + SAVE_REGISTRATION_ADDRESS_LOOKUP: "saveRegistrationAddressLookup", + SAVE_GLASS_PARTS: "saveGlassParts", + SAVE_PART_QUESTION_ANSWERS: "savePartQuestionAnswers", + RESET_MOLDING_AND_CAPABILITY_QUESTIONS_IF_NEEDED: + "resetMoldingAndCapabilityQuestionAnswersIfNeeded", + SAVE_MOLDING_QUESTION_ANSWERS: "saveMoldingQuestionAnswers", + SAVE_CAPABILITY_QUESTION_ANSWERS: "saveCapabilityQuestionAnswers", + + // START GA click event actions + // UPDATE_CURRENTLY_SELECTED_VALUES: "updateCurrentlySelectedValues", + // UPDATE_FIRED_GA_CLICK_EVENT_VALUES: "updateFiredGaClickEventValues", + // UPDATE_LAST_FOCUSED_INPUT_GROUP: "updateLastFocusedInputGroup", + // UPDATE_WAS_LAST_FOCUSED_INPUT_MULTISELECT: + // "updateWasLastFocusedInputMultiselect", + // END GA click event actions }; const gaStoreActions = { - UPDATE_CURRENTLY_SELECTED_VALUES: "updateCurrentlySelectedValues", - UPDATE_FIRED_GA_CLICK_EVENT_VALUES: "updateFiredGaClickEventValues", - UPDATE_LAST_FOCUSED_INPUT_GROUP: "updateLastFocusedInputGroup", - UPDATE_WAS_LAST_FOCUSED_INPUT_MULTISELECT: - "updateWasLastFocusedInputMultiselect", + UPDATE_CURRENTLY_SELECTED_VALUES: "updateCurrentlySelectedValues", + UPDATE_FIRED_GA_CLICK_EVENT_VALUES: "updateFiredGaClickEventValues", + UPDATE_LAST_FOCUSED_INPUT_GROUP: "updateLastFocusedInputGroup", + UPDATE_WAS_LAST_FOCUSED_INPUT_MULTISELECT: + "updateWasLastFocusedInputMultiselect", }; export { storeActions, gaStoreActions }; diff --git a/src/constants/store-mutations.js b/src/constants/store-mutations.js index 0e72b5849..1f960abd1 100644 --- a/src/constants/store-mutations.js +++ b/src/constants/store-mutations.js @@ -1,71 +1,79 @@ const storeMutations = { - // VEHICLE MUTATIONS - UPDATE_YEAR: "updateYear", - UPDATE_MAKE: "updateMake", - UPDATE_MODEL: "updateModel", - UPDATE_STYLE: "updateStyle", - UPDATE_CAR_ID: "updateCarId", - UPDATE_VEHICLE_CATEGORY: "updateVehicleCategory", - UPDATE_VEHICLE_IMAGE_URL: "updateVehicleImageUrl", - UPDATE_VEHICLE_IMAGE_VIF_NUMBER: "updateVehicleImageVifNumber", - UPDATE_VEHICLE_IMAGE_COLOR: "updateVehicleImageColor", - UPDATE_VEHICLE_VIN: "updateVehicleVin", - UPDATE_VEHICLE: "updateVehicle", + // VEHICLE MUTATIONS + UPDATE_YEAR: "updateYear", + UPDATE_MAKE: "updateMake", + UPDATE_MODEL: "updateModel", + UPDATE_STYLE: "updateStyle", + UPDATE_CAR_ID: "updateCarId", + UPDATE_VEHICLE_CATEGORY: "updateVehicleCategory", + UPDATE_VEHICLE_IMAGE_URL: "updateVehicleImageUrl", + UPDATE_VEHICLE_IMAGE_VIF_NUMBER: "updateVehicleImageVifNumber", + UPDATE_VEHICLE_IMAGE_COLOR: "updateVehicleImageColor", + UPDATE_VEHICLE_VIN: "updateVehicleVin", + UPDATE_VEHICLE: "updateVehicle", - UPDATE_IS_REPAIR: "updateIsRepair", - UPDATE_NUMBER_OF_CHIPS: "updateNumberOfChips", - UPDATE_GLASS_TO_REPLACE: "updateGlassToReplace", - UPDATE_PART_QUESTION_ANSWERS: "updatePartQuestionAnswers", - UPDATE_MOLDING_QUESTION_ANSWERS: "updateMoldingQuestionAnswers", - UPDATE_CAPABILITY_QUESTION_ANSWERS: "updateCapabilityQuestionAnswers", - UPDATE_GLASS_PARTS: "updateGlassParts", - UPDATE_OTHER_PARTS: "updateOtherParts", + UPDATE_IS_REPAIR: "updateIsRepair", + UPDATE_NUMBER_OF_CHIPS: "updateNumberOfChips", + UPDATE_GLASS_TO_REPLACE: "updateGlassToReplace", + UPDATE_PART_QUESTION_ANSWERS: "updatePartQuestionAnswers", + UPDATE_MOLDING_QUESTION_ANSWERS: "updateMoldingQuestionAnswers", + UPDATE_CAPABILITY_QUESTION_ANSWERS: "updateCapabilityQuestionAnswers", + UPDATE_GLASS_PARTS: "updateGlassParts", + UPDATE_OTHER_PARTS: "updateOtherParts", - UPDATE_REGISTRATION_LICENSE_PLATE: "updateRegistrationLicensePlate", - UPDATE_REGISTRATION_ADDRESS: "updateRegistrationAddress", - UPDATE_REGISTRATION_CITY: "updateRegistrationCity", - UPDATE_REGISTRATION_STATE: "updateRegistrationState", - UPDATE_REGISTRATION_ZIP_CODE: "updateRegistrationZipCode", - UPDATE_REGISTRATION_FIRST_NAME: "updateRegistrationFirstName", - UPDATE_REGISTRATION_LAST_NAME: "updateRegistrationLastName", - UPDATE_REGISTRATION: "updateRegistration", + UPDATE_REGISTRATION_LICENSE_PLATE: "updateRegistrationLicensePlate", + UPDATE_REGISTRATION_ADDRESS: "updateRegistrationAddress", + UPDATE_REGISTRATION_CITY: "updateRegistrationCity", + UPDATE_REGISTRATION_STATE: "updateRegistrationState", + UPDATE_REGISTRATION_ZIP_CODE: "updateRegistrationZipCode", + UPDATE_REGISTRATION_FIRST_NAME: "updateRegistrationFirstName", + UPDATE_REGISTRATION_LAST_NAME: "updateRegistrationLastName", + UPDATE_REGISTRATION: "updateRegistration", - UPDATE_SERVICE_LOCATION_ZIP_CODE: "updateServiceLocationZipCode", - UPDATE_SERVICE_LOCATION_STATE: "updateServiceLocationState", - UPDATE_SERVICE_LOCATION: "updateServiceLocation", + UPDATE_SERVICE_LOCATION_ZIP_CODE: "updateServiceLocationZipCode", + UPDATE_SERVICE_LOCATION_STATE: "updateServiceLocationState", + UPDATE_SERVICE_LOCATION: "updateServiceLocation", - UPDATE_CUSTOMER_EMAIL_ADDRESS: "updateCustomerEmailAddress", + UPDATE_CUSTOMER_EMAIL_ADDRESS: "updateCustomerEmailAddress", - // ORDER MUTATIONS - UPDATE_REFERRAL_NUMBER: "updateReferralNumber", - UPDATE_REFERRAL_DATE: "updateReferralDate", - UPDATE_REFERRAL_CORRELATION_ID: "updateReferralCorrelationId", - UPDATE_PARENT_ACCT_NUMBER: "updateParentAcctNumber", - UPDATE_EON: "updateEON", - UPDATE_SAVED_SESSION_ID: "updateSavedSessionId", - UPDATE_CRM_CUSTOMER_ID: "updateCrmCustomerId", + // ORDER MUTATIONS + UPDATE_REFERRAL_NUMBER: "updateReferralNumber", + UPDATE_REFERRAL_DATE: "updateReferralDate", + UPDATE_REFERRAL_CORRELATION_ID: "updateReferralCorrelationId", + UPDATE_PARENT_ACCT_NUMBER: "updateParentAcctNumber", + UPDATE_EON: "updateEON", + UPDATE_SAVED_SESSION_ID: "updateSavedSessionId", + UPDATE_CRM_CUSTOMER_ID: "updateCrmCustomerId", - // EVENT BUS MUTATIONS - ADD_EVENT_TO_BUS: "addEventToBus", - REMOVE_EVENT_FROM_BUS: "removeEventFromBus", + // EVENT BUS MUTATIONS + ADD_EVENT_TO_BUS: "addEventToBus", + REMOVE_EVENT_FROM_BUS: "removeEventFromBus", - // DEPENDENCY MUTATIONS - RESET_VEHICLE_STATE: "resetVehicleState", - RESET_DAMAGE_STATE: "resetDamageState", - RESET_REGISTRATION_STATE: "resetRegistrationState", - RESET_GLASS_PARTS_STATE: "resetGlassPartsState", - RESET_STATE: "resetState", - RESET_SAVE_ORDER_PROMISE: "resetSaveOrderPromise", + // DEPENDENCY MUTATIONS + RESET_VEHICLE_STATE: "resetVehicleState", + RESET_DAMAGE_STATE: "resetDamageState", + RESET_REGISTRATION_STATE: "resetRegistrationState", + RESET_GLASS_PARTS_STATE: "resetGlassPartsState", + RESET_STATE: "resetState", + RESET_SAVE_ORDER_PROMISE: "resetSaveOrderPromise", - // OTHER MUTATIONS - UPDATE_PAGE_DATA: "updatePageData", - UPDATE_STATE_WITH_ORDER_INFORMATION: "updateStateWithOrderInformation", - UPDATE_SAVE_ORDER_PROMISE: "updateSaveOrderPromise", - UPDATE_LAST_PAGE_VISITED: "updateLastPageVisited", + // OTHER MUTATIONS + UPDATE_PAGE_DATA: "updatePageData", + UPDATE_STATE_WITH_ORDER_INFORMATION: "updateStateWithOrderInformation", + UPDATE_SAVE_ORDER_PROMISE: "updateSaveOrderPromise", + UPDATE_LAST_PAGE_VISITED: "updateLastPageVisited", - // EXPERIMENT MUTATIONS - UPDATE_EXPERIMENTS: "updateExperiments", - UPDATE_TRIGGERED_SITE_ENTRY: "updateTriggeredSiteEntry", + // EXPERIMENT MUTATIONS + UPDATE_EXPERIMENTS: "updateExperiments", + UPDATE_TRIGGERED_SITE_ENTRY: "updateTriggeredSiteEntry", + + // START GA click event mutations + // UPDATE_CURRENTLY_SELECTED_VALUES: "updateCurrentlySelectedValues", + // UPDATE_FIRED_GA_CLICK_EVENT_VALUES: "updateFiredGaClickEventValues", + // UPDATE_LAST_FOCUSED_INPUT_GROUP: "updateLastFocusedInputGroup", + // UPDATE_WAS_LAST_FOCUSED_INPUT_MULTISELECT: + // "updateWasLastFocusedInputMultiselect", + // END GA click event mutations }; const gaStoreMutations = { diff --git a/src/main.js b/src/main.js index 01aa5406d..37c623b0b 100644 --- a/src/main.js +++ b/src/main.js @@ -8,12 +8,14 @@ import baseMixin from "@/mixins/base-mixin.js"; import analyticsMixin from "@/mixins/analytics-mixin.js"; import experimentMixin from "@/mixins/experiment-mixin.js"; import "../node_modules/bootstrap/dist/js/bootstrap.js"; +import gaState from "./store/gaState"; // Vue App Setup const vueApp = createApp(App); vueApp.use(router); vueApp.use(store); +vueApp.use(gaState) vueApp.use(LoadScript); vueApp.use(Maska); vueApp.mixin(baseMixin); diff --git a/src/mixins/analytics-mixin.js b/src/mixins/analytics-mixin.js index 6eb18e462..556ca509e 100644 --- a/src/mixins/analytics-mixin.js +++ b/src/mixins/analytics-mixin.js @@ -29,6 +29,8 @@ export default { logCustomEvent(category, action, label, value) { const currentPageName = getPageNameByQueryString(); + console.log("PUSHING: ", label) + var payload = { userId: getDeviceIdValue(), sessionKey: getSessionKeyValue(), diff --git a/src/store/gaState.js b/src/store/gaState.js index 7d42e6866..ab8e2dff8 100644 --- a/src/store/gaState.js +++ b/src/store/gaState.js @@ -1,90 +1,72 @@ -import { createStore } from "vuex"; -import { endpoints } from "@/constants/endpoints.js"; import { gaStoreMutations } from "@/constants/store-mutations"; -import { getDateForSavedSessionTimeout } from "@/helpers/heritage-integration/session-helper"; -import createPersistedState from "vuex-persistedstate"; -import globalMethods from "@/global-methods"; -import { gaStoreActions } from "@/constants/store-actions"; -import { applicationConfig } from "@/constants/application-config"; -import { experimentTriggers } from "@/constants/experiments"; -import { damageLocationsSelected } from "@/constants/damage-locations-selected"; -import { fmgPageValues } from "@/router/router-constants/fmgPage-values"; // Export State const getDefaultState = () => { - return { - gaClickInformation: { - currentlySelectedValues: {}, - firedGaClickEventValues: {}, - lastFocusedInputGroup: "", - wasLastFocusedInputMultiselect: undefined, - }, - }; + return { + gaClickInformation: { + currentlySelectedValues: {}, + firedGaClickEventValues: {}, + lastFocusedInputGroup: "", + wasLastFocusedInputMultiselect: undefined, + }, + }; }; export const gaState = getDefaultState(); // Export Mutations export const gaMutations = { - updateCurrentlySelectedValues(state, groupName, value) { - state.gaClickInformation.currentlySelectedValues[groupName] = value; - }, - updateFiredGaClickEventValues(state, groupName, value) { - state.gaClickInformation.firedGaClickEventValues[groupName] = value; - }, - updateLastFocusedInputGroup(state, groupName) { - state.gaClickInformation.lastFocusedInputGroup = groupName; - }, - updateWasLastFocusedInputMultiselect( - state, - wasLastFocusedInputMultiselect - ) { - state.gaClickInformation.wasLastFocusedInputMultiselect = - wasLastFocusedInputMultiselect; - }, + updateCurrentlySelectedValues(state, { groupName, value }) { + state.gaClickInformation.currentlySelectedValues[groupName] = value; + }, + updateFiredGaClickEventValues(state, { groupName, value }) { + state.gaClickInformation.firedGaClickEventValues[groupName] = value; + }, + updateLastFocusedInputGroup(state, groupName) { + state.gaClickInformation.lastFocusedInputGroup = groupName; + }, + updateWasLastFocusedInputMultiselect(state, wasLastFocusedInputMultiselect) { + state.gaClickInformation.wasLastFocusedInputMultiselect = + wasLastFocusedInputMultiselect; + }, }; // Export Getters export const getters = { - gaClickInformation: (state) => state.gaClickInformation, + gaClickInformation: (state) => state.gaClickInformation, }; // Export Actions export const gaActions = { - updateCurrentlySelectedValues(context, groupName, value) { - context.commit( - gaStoreMutations.UPDATE_CURRENTLY_SELECTED_VALUES, - groupName, - value - ); - }, - updateFiredGaClickEventValues(context, groupName, value) { - context.commit( - gaStoreMutations.UPDATE_FIRED_GA_CLICK_EVENT_VALUES, - groupName, - value - ); - }, - updateLastFocusedInputGroup(context, groupName) { - context.commit( - gaStoreMutations.UPDATE_LAST_FOCUSED_INPUT_GROUP, - groupName - ); - }, - updateWasLastFocusedInputMultiselect( - context, - wasLastFocusedInputMultiselect - ) { - context.commit( - gaStoreMutations.UPDATE_WAS_LAST_FOCUSED_INPUT_MULTISELECT, - wasLastFocusedInputMultiselect - ); - }, + updateCurrentlySelectedValues(context, { groupName, value }) { + context.commit(gaStoreMutations.UPDATE_CURRENTLY_SELECTED_VALUES, { + groupName, + value, + }); + }, + updateFiredGaClickEventValues(context, { groupName, value }) { + context.commit(gaStoreMutations.UPDATE_FIRED_GA_CLICK_EVENT_VALUES, { + groupName, + value, + }); + }, + updateLastFocusedInputGroup(context, groupName) { + context.commit(gaStoreMutations.UPDATE_LAST_FOCUSED_INPUT_GROUP, groupName); + }, + updateWasLastFocusedInputMultiselect( + context, + wasLastFocusedInputMultiselect + ) { + context.commit( + gaStoreMutations.UPDATE_WAS_LAST_FOCUSED_INPUT_MULTISELECT, + wasLastFocusedInputMultiselect + ); + }, }; -export default createStore({ - gaState, - gaMutations, - getters, - gaActions, -}); +export default { + state: gaState, + mutations: gaMutations, + getters, + actions: gaActions, +}; diff --git a/src/store/index.js b/src/store/index.js index cacb03b83..34bba86c0 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,4 +1,4 @@ -import { createStore } from "vuex"; +import { createStore, Store } from "vuex"; import { endpoints } from "@/constants/endpoints.js"; import { storeMutations } from "@/constants/store-mutations"; import { getDateForSavedSessionTimeout } from "@/helpers/heritage-integration/session-helper"; @@ -9,6 +9,7 @@ import { applicationConfig } from "@/constants/application-config"; import { experimentTriggers } from "@/constants/experiments"; import { damageLocationsSelected } from "@/constants/damage-locations-selected"; import { fmgPageValues } from "@/router/router-constants/fmgPage-values"; +import gaState from "./gaState"; // Export State const getDefaultState = () => { @@ -50,22 +51,22 @@ const getDefaultState = () => { glassToReplace: null, partQuestionAnswers: null, moldingQuestionAnswers: null, - capabilityQuestionAnswers: null + capabilityQuestionAnswers: null, }, lineItems: { - glassParts: null + glassParts: null, }, payment: { isInsurance: null, insuranceCoverage: { - isVerified: null - } + isVerified: null, + }, }, referralNumber: null, referralDate: null, referralCorrelationId: null, accountNumber: 0, - eon: null + eon: null, }, applicationUser: { eventBus: [], @@ -76,14 +77,15 @@ const getDefaultState = () => { crmCustomerId: null, lastPageVisited: null, experiments: [], - triggeredSiteEntry: false + triggeredSiteEntry: false, }, - gaInformation: { - currentlySelectedValues: {}, - firedGaClickEventValues: {}, - lastFocusedInputGroup: "" - } - } + // gaClickInformation: { + // currentlySelectedValues: {}, + // firedGaClickEventValues: {}, + // lastFocusedInputGroup: "", + // wasLastFocusedInputMultiselect: undefined, + // }, + }; }; export const state = getDefaultState(); @@ -200,7 +202,6 @@ export const mutations = { state.order.customer.emailAddress = customerEmailAddress; }, updateVehicle(state, vehicleInfo) { - state.order.vehicle.year = vehicleInfo.year; state.order.vehicle.make = vehicleInfo.make; state.order.vehicle.model = vehicleInfo.model; @@ -214,7 +215,8 @@ export const mutations = { state.order.vehicle.imageColor = vehicleInfo.imageVifColor; }, updateRegistration(state, registrationInfo) { - state.order.vehicle.registration.licensePlate = registrationInfo?.licensePlate; + state.order.vehicle.registration.licensePlate = + registrationInfo?.licensePlate; state.order.vehicle.registration.address = registrationInfo?.address; state.order.vehicle.registration.city = registrationInfo?.city; state.order.vehicle.registration.state = registrationInfo?.state; @@ -240,7 +242,7 @@ export const mutations = { state.applicationUser.crmCustomerId = crmCustomerId; }, updateLastPageVisited(state, lastPageVisited) { - state.applicationUser.lastPageVisited = lastPageVisited + state.applicationUser.lastPageVisited = lastPageVisited; }, // EVENT BUS MUTATIONS addEventToBus(state, event) { @@ -249,8 +251,7 @@ export const mutations = { removeEventFromBus(state, eventData) { const matchedEvent = state.applicationUser.eventBus.find( ({ category, subCategory }) => - category === eventData.category && - subCategory === eventData.subCategory + category === eventData.category && subCategory === eventData.subCategory ); const itemIndex = state.applicationUser.eventBus.indexOf(matchedEvent); @@ -336,7 +337,7 @@ export const mutations = { state: orderInformation.vehicle.registration.state, zipCode: orderInformation.vehicle.registration.zipCode, licensePlate: orderInformation.vehicle.registration.licensePlateNumber, - } + }, }); state.order.damage.glassToReplace = orderInformation.damage.glassToReplace; @@ -345,13 +346,18 @@ export const mutations = { state.order.lineItems.glassParts = orderInformation.parts; state.order.accountNumber = orderInformation.accountNumber; - state.order.serviceLocation.address = orderInformation.serviceLocation.streetAddress, - state.order.serviceLocation.city = orderInformation.serviceLocation.city, - state.order.serviceLocation.state = orderInformation.serviceLocation.state, - state.order.serviceLocation.zipCode = orderInformation.serviceLocation.zipCode; + (state.order.serviceLocation.address = + orderInformation.serviceLocation.streetAddress), + (state.order.serviceLocation.city = + orderInformation.serviceLocation.city), + (state.order.serviceLocation.state = + orderInformation.serviceLocation.state), + (state.order.serviceLocation.zipCode = + orderInformation.serviceLocation.zipCode); state.order.payment.isInsurance = orderInformation.IsInsuranceOrder; - state.order.payment.insuranceCoverage.isVerified = orderInformation?.insuranceInfo.coverageVerified; + state.order.payment.insuranceCoverage.isVerified = + orderInformation?.insuranceInfo.coverageVerified; state.order.customer.emailAddress = orderInformation.customer.emailAddress; state.applicationUser.experiments = orderInformation.experiments; @@ -361,8 +367,23 @@ export const mutations = { }, updateTriggeredSiteEntry(state, wasSiteEntryTriggered) { state.applicationUser.triggeredSiteEntry = wasSiteEntryTriggered; - } -} + }, + // START GA click event mutations + // updateCurrentlySelectedValues(state, groupName, value) { + // state.gaClickInformation.currentlySelectedValues[groupName] = value; + // }, + // updateFiredGaClickEventValues(state, groupName, value) { + // state.gaClickInformation.firedGaClickEventValues[groupName] = value; + // }, + // updateLastFocusedInputGroup(state, groupName) { + // state.gaClickInformation.lastFocusedInputGroup = groupName; + // }, + // updateWasLastFocusedInputMultiselect(state, wasLastFocusedInputMultiselect) { + // state.gaClickInformation.wasLastFocusedInputMultiselect = + // wasLastFocusedInputMultiselect; + // }, + // END GA click event mutations +}; // Export Getters export const getters = { @@ -378,7 +399,9 @@ export const getters = { eventBus: (state) => state.applicationUser.eventBus, damage: (state) => state.order.damage, lineItems: (state) => state.order.lineItems, - pageData: (state) => (page) => { return state.applicationUser.pageData[page]; }, + pageData: (state) => (page) => { + return state.applicationUser.pageData[page]; + }, applicationUser: (state) => state.applicationUser, order: (state) => state.order, payment: (state) => state.order.payment, @@ -395,29 +418,63 @@ export const getters = { funnelServiceState: state.order.serviceLocation.state, funnelServiceZipCode: state.order.serviceLocation.zipCode, funnelParentAccountNumber: state.order.accountNumber, - funnelIsCoverageVerified: state.order.payment.insuranceCoverage.isVerified, + funnelIsCoverageVerified: + state.order.payment.insuranceCoverage.isVerified, funnelHasRecalibrationPart: getHasRecalibrationPart(state), funnelSelectedMultiGlass: state.order.damage.glassToReplace?.length > 1, - funnelSelectedWindshieldGlass: getAllValuesOfPropertyInArrayOfObjects(state.order.damage.glassToReplace, "glassLocation").includes(damageLocationsSelected.WINDSHIELD), - funnelSelectedBackGlass: getAllValuesOfPropertyInArrayOfObjects(state.order.damage.glassToReplace, "glassLocation").includes(damageLocationsSelected.REAR), - funnelSelectedDriverSideGlass: getAllValuesOfPropertyInArrayOfObjects(state.order.damage.glassToReplace, "glassLocation").includes(damageLocationsSelected.DRIVER), - funnelSelectedPassengerSideGlass: getAllValuesOfPropertyInArrayOfObjects(state.order.damage.glassToReplace, "glassLocation").includes(damageLocationsSelected.PASSENGER), + funnelSelectedWindshieldGlass: getAllValuesOfPropertyInArrayOfObjects( + state.order.damage.glassToReplace, + "glassLocation" + ).includes(damageLocationsSelected.WINDSHIELD), + funnelSelectedBackGlass: getAllValuesOfPropertyInArrayOfObjects( + state.order.damage.glassToReplace, + "glassLocation" + ).includes(damageLocationsSelected.REAR), + funnelSelectedDriverSideGlass: getAllValuesOfPropertyInArrayOfObjects( + state.order.damage.glassToReplace, + "glassLocation" + ).includes(damageLocationsSelected.DRIVER), + funnelSelectedPassengerSideGlass: getAllValuesOfPropertyInArrayOfObjects( + state.order.damage.glassToReplace, + "glassLocation" + ).includes(damageLocationsSelected.PASSENGER), - funnelOrderPartNumbers: [...getAllValuesOfPropertyInArrayOfObjects(state.order.lineItems.glassParts, "partNumber"), ...getAllValuesOfPropertyInArrayOfObjects(state.order.lineItems.otherParts, "partNumber")], + funnelOrderPartNumbers: [ + ...getAllValuesOfPropertyInArrayOfObjects( + state.order.lineItems.glassParts, + "partNumber" + ), + ...getAllValuesOfPropertyInArrayOfObjects( + state.order.lineItems.otherParts, + "partNumber" + ), + ], - funnelOrderPartTypes: [...getAllValuesOfPropertyInArrayOfObjects(state.order.lineItems.glassParts, "recalibrationType"), ...getAllValuesOfPropertyInArrayOfObjects(state.order.lineItems.otherParts, "recalibrationType")], - } + funnelOrderPartTypes: [ + ...getAllValuesOfPropertyInArrayOfObjects( + state.order.lineItems.glassParts, + "recalibrationType" + ), + ...getAllValuesOfPropertyInArrayOfObjects( + state.order.lineItems.otherParts, + "recalibrationType" + ), + ], + }; }, - experimentSettings: (state) => state.applicationUser.experiments.map(x => x.settings).reduce((r, c) => Object.assign(r, c), {}) ?? {} -} + experimentSettings: (state) => + state.applicationUser.experiments + .map((x) => x.settings) + .reduce((r, c) => Object.assign(r, c), {}) ?? {}, + // gaClickInformation: (state) => state.gaClickInformation, +}; function getAllValuesOfPropertyInArrayOfObjects(array, propertyName) { - return (array ?? []).map(x => x[propertyName]).filter(x => x); + return (array ?? []).map((x) => x[propertyName]).filter((x) => x); } // Export Actions export const actions = { - // Vehicle API Actions getVehicleYears(context) { return globalMethods.callHttpClient({ @@ -448,11 +505,14 @@ export const actions = { endpoint: endpoints.LookupVinByPlate.url, payload: { licensePlate: licensePlate, - licenseState: licenseState + licenseState: licenseState, }, }); }, - lookupVinByAddress(context, { licenseLastName, licenseStreetAddress, licenseZip, licenseState }) { + lookupVinByAddress( + context, + { licenseLastName, licenseStreetAddress, licenseZip, licenseState } + ) { return globalMethods.callHttpClient({ method: endpoints.LookupVinByAddress.method, endpoint: endpoints.LookupVinByAddress.url, @@ -460,7 +520,7 @@ export const actions = { licenseLastName: licenseLastName, licenseStreetAddress: licenseStreetAddress, licenseZip: licenseZip, - licenseState: licenseState + licenseState: licenseState, }, }); }, @@ -494,10 +554,22 @@ export const actions = { }) .then((response) => { context.commit(storeMutations.UPDATE_CAR_ID, response.data.carId); - context.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, response.data.category); - context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, response.data.imageUrl); - context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, response.data.imageVifNumber); - context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, response.data.imageVifColor); + context.commit( + storeMutations.UPDATE_VEHICLE_CATEGORY, + response.data.category + ); + context.commit( + storeMutations.UPDATE_VEHICLE_IMAGE_URL, + response.data.imageUrl + ); + context.commit( + storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, + response.data.imageVifNumber + ); + context.commit( + storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, + response.data.imageVifColor + ); return response; }); }, @@ -511,8 +583,8 @@ export const actions = { validateZip(context, { zip }) { return globalMethods.callHttpClient({ methods: endpoints.ValidateZip.method, - endpoint: `${endpoints.ValidateZip.url}/${zip}` - }) + endpoint: `${endpoints.ValidateZip.url}/${zip}`, + }); }, // Dependency Actions @@ -527,7 +599,7 @@ export const actions = { }, resetRegistrationAndDependencies(context) { context.commit(storeMutations.RESET_REGISTRATION_STATE); - context.commit(storeMutations.RESET_GLASS_PARTS_STATE) + context.commit(storeMutations.RESET_GLASS_PARTS_STATE); }, resetPartsAndDependencies(context) { context.commit(storeMutations.RESET_GLASS_PARTS_STATE); @@ -583,22 +655,48 @@ export const actions = { assignmentId: experiment.assignmentId, sessionKey: sessionKey, pageName: pageName, - } - } + }, + }, }); }, // Misc Actions - updateStoreWithSaveOrderResponse(context, { referralNumber, referralDate, referralCorrelationId, eon, accountNumber, savedSessionId, crmCustomerId }) { + updateStoreWithSaveOrderResponse( + context, + { + referralNumber, + referralDate, + referralCorrelationId, + eon, + accountNumber, + savedSessionId, + crmCustomerId, + } + ) { context.commit(storeMutations.UPDATE_REFERRAL_NUMBER, referralNumber); context.commit(storeMutations.UPDATE_REFERRAL_DATE, referralDate); - context.commit(storeMutations.UPDATE_REFERRAL_CORRELATION_ID, referralCorrelationId); + context.commit( + storeMutations.UPDATE_REFERRAL_CORRELATION_ID, + referralCorrelationId + ); context.commit(storeMutations.UPDATE_EON, eon); context.commit(storeMutations.UPDATE_PARENT_ACCT_NUMBER, accountNumber); context.commit(storeMutations.UPDATE_SAVED_SESSION_ID, savedSessionId); context.commit(storeMutations.UPDATE_CRM_CUSTOMER_ID, crmCustomerId); }, - logPageView(context, { userId, sessionKey, pageName, sessionId, action, event, shouldUseSessionId, experimentsForUser }) { + logPageView( + context, + { + userId, + sessionKey, + pageName, + sessionId, + action, + event, + shouldUseSessionId, + experimentsForUser, + } + ) { var payload = { userId: userId, sessionKey: sessionKey, @@ -608,17 +706,31 @@ export const actions = { action: action, event: event, shouldUseSessionId: shouldUseSessionId, - experimentsForUser: experimentsForUser + experimentsForUser: experimentsForUser, }; return globalMethods.callHttpClient({ method: endpoints.LogPageView.method, endpoint: endpoints.LogPageView.url, payload: payload, - logApiCall: false + logApiCall: false, }); }, - logCustomEvent(context, { userId, sessionKey, pageName, sessionId, category, action, label, value, shouldUseSessionId, experimentsForUser }) { + logCustomEvent( + context, + { + userId, + sessionKey, + pageName, + sessionId, + category, + action, + label, + value, + shouldUseSessionId, + experimentsForUser, + } + ) { var payload = { userId: userId, sessionKey: sessionKey, @@ -630,14 +742,14 @@ export const actions = { label: label, value: value, shouldUseSessionId: shouldUseSessionId, - experimentsForUser: experimentsForUser + experimentsForUser: experimentsForUser, }; return globalMethods.callHttpClient({ method: endpoints.LogCustomEvent.method, endpoint: endpoints.LogCustomEvent.url, payload: payload, - logApiCall: false + logApiCall: false, }); }, initializeSession(context, { userId, sessionId, userAgent, referrer }) { @@ -649,22 +761,28 @@ export const actions = { userAgent: userAgent, operatorId: "WEB", userName: "SafeliteConceptFunnel", - referrer: referrer + referrer: referrer, }; return globalMethods.callHttpClient({ method: endpoints.InitializeSession.method, endpoint: endpoints.InitializeSession.url, payload: payload, - logApiCall: false + logApiCall: false, }); }, // Misc Actions - setReferralInformation(context, { referralNumber, referralDate, referralCorrelationId, eon }) { + setReferralInformation( + context, + { referralNumber, referralDate, referralCorrelationId, eon } + ) { context.commit(storeMutations.UPDATE_REFERRAL_NUMBER, referralNumber); context.commit(storeMutations.UPDATE_REFERRAL_DATE, referralDate); - context.commit(storeMutations.UPDATE_REFERRAL_CORRELATION_ID, referralCorrelationId); + context.commit( + storeMutations.UPDATE_REFERRAL_CORRELATION_ID, + referralCorrelationId + ); context.commit(storeMutations.UPDATE_EON, eon); }, @@ -672,11 +790,14 @@ export const actions = { return globalMethods.callHttpClient({ method: endpoints.GetExperimentsByUser.method, endpoint: `${endpoints.GetExperimentsByUser.url}/${userId}`, - payload: {} + payload: {}, }); }, - async runExperimentsForTrigger(context, { userId, triggerEvent, triggerValue }) { + async runExperimentsForTrigger( + context, + { userId, triggerEvent, triggerValue } + ) { if (triggerEvent == experimentTriggers.SITE_ENTRY) { context.commit(storeMutations.UPDATE_TRIGGERED_SITE_ENTRY, true); } @@ -686,7 +807,7 @@ export const actions = { userId: userId, triggerEvent: triggerEvent, triggerValue: triggerValue, - experimentOrder: context.getters.experimentOrder + experimentOrder: context.getters.experimentOrder, }; const response = await globalMethods.callHttpClient({ @@ -695,7 +816,10 @@ export const actions = { payload: payload, }); - context.commit(storeMutations.UPDATE_EXPERIMENTS, response.data.experiments); + context.commit( + storeMutations.UPDATE_EXPERIMENTS, + response.data.experiments + ); }, getEvoxImage(context, { relativeUrl }) { @@ -724,7 +848,7 @@ export const actions = { carId: carId, glass: glassArray ?? [], zip: zipCode, - vin: vin + vin: vin, }, }); }, @@ -749,7 +873,7 @@ export const actions = { glass: glassArray, answerResults: resultsArray, zip: zipCode, - vin: vin + vin: vin, }, }); }, @@ -758,24 +882,31 @@ export const actions = { return globalMethods.callHttpClient({ method: endpoints.GetCapabilityQuestions.method, endpoint: `${endpoints.GetCapabilityQuestions.url}/${carId}/${partNumber}`, - }) + }); }, getPartFromCapabilityQuestionAnswer(context, glassLocation) { - const pageData = context.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS); + const pageData = context.getters.pageData( + fmgPageValues.CAPABILITY_QUESTIONS + ); - const part = pageData.partsOrQuestions.find(x => x.glassLocation === glassLocation).parts[0]; - const capabilityQuestionAnswers = context.getters.damage.capabilityQuestionAnswers; - const capabilityQuestionAnswersForPart = capabilityQuestionAnswers.find(x => x.glassLocation === glassLocation); + const part = pageData.partsOrQuestions.find( + (x) => x.glassLocation === glassLocation + ).parts[0]; + const capabilityQuestionAnswers = + context.getters.damage.capabilityQuestionAnswers; + const capabilityQuestionAnswersForPart = capabilityQuestionAnswers.find( + (x) => x.glassLocation === glassLocation + ); return globalMethods.callHttpClient({ method: endpoints.GetPartFromCapabilityAnswer.method, endpoint: endpoints.GetPartFromCapabilityAnswer.url, payload: { part, - capabilityAnswerResults: capabilityQuestionAnswersForPart - } - }) + capabilityAnswerResults: capabilityQuestionAnswersForPart, + }, + }); }, // Order API Actions @@ -810,21 +941,21 @@ export const actions = { damage: { numberOfChips: damage.numberOfChips, glassToReplace: damage.glassToReplace, - isRepair: damage.isRepair + isRepair: damage.isRepair, }, customer: { emailAddress: order.customer.emailAddress, }, lineItems: { - glassParts: lineItems.glassParts + glassParts: lineItems.glassParts, }, serviceLocation: { streetAddress: order.serviceLocation.address, city: order.serviceLocation.city, state: order.serviceLocation.state, - zipCode: order.serviceLocation.zipCode + zipCode: order.serviceLocation.zipCode, }, - referralNumber: order.referralNumber?.toString(), // TODO It'd be nice to save these as strings in the first place + referralNumber: order.referralNumber?.toString(), // TODO It'd be nice to save these as strings in the first place referralDate: order.referralDate, accountNumber: order.accountNumber?.toString(), existingPromoCode: null, @@ -835,32 +966,42 @@ export const actions = { }, }); }, - loadOrder(context, { referralNumber, referralDate, referralCorrelationId, accountNumber }) { - return globalMethods.callHttpClient({ - method: endpoints.LoadOrder.method, - endpoint: endpoints.LoadOrder.url, - payload: { - referralNumber: referralNumber?.toString(), - referralDate: referralDate, - referralCorrelationId: referralCorrelationId, - accountNumber: accountNumber?.toString() - }, - }).then((response) => { - // clear the state if the existing EON does not equal what is returned from loadOrder - if (context.state.order.eon && context.state.order.eon != response.data.eon) { - context.commit(storeMutations.RESET_STATE); - } - context.commit(storeMutations.UPDATE_STATE_WITH_ORDER_INFORMATION, response.data); - return response; - }); + loadOrder( + context, + { referralNumber, referralDate, referralCorrelationId, accountNumber } + ) { + return globalMethods + .callHttpClient({ + method: endpoints.LoadOrder.method, + endpoint: endpoints.LoadOrder.url, + payload: { + referralNumber: referralNumber?.toString(), + referralDate: referralDate, + referralCorrelationId: referralCorrelationId, + accountNumber: accountNumber?.toString(), + }, + }) + .then((response) => { + // clear the state if the existing EON does not equal what is returned from loadOrder + if ( + context.state.order.eon && + context.state.order.eon != response.data.eon + ) { + context.commit(storeMutations.RESET_STATE); + } + context.commit( + storeMutations.UPDATE_STATE_WITH_ORDER_INFORMATION, + response.data + ); + return response; + }); }, // Business domain actions // Vehicle saveVehicleYear(context, year) { - - //Reset dependent state when changing + //Reset dependent state when changing if (context.state.order.vehicle.year !== year) { context.commit(storeMutations.UPDATE_MAKE, null); context.commit(storeMutations.UPDATE_MODEL, null); @@ -881,7 +1022,6 @@ export const actions = { } }, saveVehicleMake(context, make) { - //Reset dependent state when changing if (context.state.order.vehicle.make !== make) { context.commit(storeMutations.UPDATE_MODEL, null); @@ -902,8 +1042,7 @@ export const actions = { } }, saveVehicleModel(context, model) { - - //Reset dependent state when changing + //Reset dependent state when changing if (context.state.order.vehicle.model !== model) { context.commit(storeMutations.UPDATE_STYLE, null); context.commit(storeMutations.UPDATE_CAR_ID, null); @@ -922,7 +1061,7 @@ export const actions = { } }, saveVehicleStyle(context, style) { - //Reset dependent state when changing + //Reset dependent state when changing if (context.state.order.vehicle.style !== style) { context.commit(storeMutations.UPDATE_CAR_ID, null); context.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null); @@ -939,20 +1078,35 @@ export const actions = { context.commit(storeMutations.UPDATE_STYLE, style); } }, - saveVehicleDamage(context, { isWindshieldRepair, selectedGlassToReplace, selectedWindshieldChipCount }) { - + saveVehicleDamage( + context, + { isWindshieldRepair, selectedGlassToReplace, selectedWindshieldChipCount } + ) { const selectedGlassPassedInSorted = selectedGlassToReplace.slice().sort(); - const isGlassToReplaceTheSame = (context.state.order.damage.glassToReplace?.length === selectedGlassToReplace.length) - && context.state.order.damage.glassToReplace + const isGlassToReplaceTheSame = + context.state.order.damage.glassToReplace?.length === + selectedGlassToReplace.length && + context.state.order.damage.glassToReplace .slice() .sort() - .every((obj, index) => obj.glassLocation === selectedGlassPassedInSorted[index].glassLocation && obj.glassName === selectedGlassPassedInSorted[index].glassName); - const isWindshieldRepairTheSame = isWindshieldRepair === context.state.order.damage.isRepair; + .every( + (obj, index) => + obj.glassLocation === + selectedGlassPassedInSorted[index].glassLocation && + obj.glassName === selectedGlassPassedInSorted[index].glassName + ); + const isWindshieldRepairTheSame = + isWindshieldRepair === context.state.order.damage.isRepair; const isChipCountTheSame = Array.isArray(selectedWindshieldChipCount) //TODO: fix the underlying components so this is never an array - ? selectedWindshieldChipCount[0] === context.state.order.damage.numberOfChips - : selectedWindshieldChipCount === context.state.order.damage.numberOfChips; + ? selectedWindshieldChipCount[0] === + context.state.order.damage.numberOfChips + : selectedWindshieldChipCount === + context.state.order.damage.numberOfChips; - const isDamageChanging = !isGlassToReplaceTheSame || !isWindshieldRepairTheSame || (isWindshieldRepair && !isChipCountTheSame); + const isDamageChanging = + !isGlassToReplaceTheSame || + !isWindshieldRepairTheSame || + (isWindshieldRepair && !isChipCountTheSame); if (isDamageChanging) { //Reset dependent state when changing @@ -960,14 +1114,23 @@ export const actions = { // Save new values context.commit(storeMutations.UPDATE_IS_REPAIR, isWindshieldRepair); - context.commit(storeMutations.UPDATE_NUMBER_OF_CHIPS, isWindshieldRepair ? parseInt(selectedWindshieldChipCount) : null); - context.commit(storeMutations.UPDATE_GLASS_TO_REPLACE, selectedGlassToReplace); + context.commit( + storeMutations.UPDATE_NUMBER_OF_CHIPS, + isWindshieldRepair ? parseInt(selectedWindshieldChipCount) : null + ); + context.commit( + storeMutations.UPDATE_GLASS_TO_REPLACE, + selectedGlassToReplace + ); } }, // Vin lookup - saveVinLookup(context, { isSelectedGlassAvailableForVehicle, vehicleInfo, registrationInfo }) { - //Reset dependent state when changing + saveVinLookup( + context, + { isSelectedGlassAvailableForVehicle, vehicleInfo, registrationInfo } + ) { + //Reset dependent state when changing if (vehicleInfo.vin !== context.state.order.vehicle.vin) { context.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES); context.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES); @@ -981,10 +1144,15 @@ export const actions = { context.commit(storeMutations.UPDATE_REGISTRATION, registrationInfo); } }, - saveRegistrationLicensePlateLookup(context, { isSelectedGlassAvailableForVehicle, vehicleInfo, registrationInfo }) { - //Reset dependent state when changing - if (registrationInfo?.licensePlate !== context.state.order.vehicle.registration?.licensePlate) { - + saveRegistrationLicensePlateLookup( + context, + { isSelectedGlassAvailableForVehicle, vehicleInfo, registrationInfo } + ) { + //Reset dependent state when changing + if ( + registrationInfo?.licensePlate !== + context.state.order.vehicle.registration?.licensePlate + ) { context.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES); if (!isSelectedGlassAvailableForVehicle) { @@ -997,10 +1165,25 @@ export const actions = { context.commit(storeMutations.UPDATE_REGISTRATION, registrationInfo); } }, - saveRegistrationAddressLookup(context, { isSelectedGlassAvailableForVehicle, vehicleInfo, registrationInfo }) { - //Reset dependent state when changing - if (registrationInfo?.address !== context.state.order.vehicle.registration?.address || registrationInfo?.city !== context.state.order.vehicle.registration?.city || registrationInfo?.state !== context.state.order.vehicle.registration?.state || registrationInfo?.zipCode !== context.state.order.vehicle.registration?.zipCode || registrationInfo?.firstName !== context.state.order.vehicle.registration?.firstName || registrationInfo?.lastName !== context.state.order.vehicle.registration?.lastName) { - + saveRegistrationAddressLookup( + context, + { isSelectedGlassAvailableForVehicle, vehicleInfo, registrationInfo } + ) { + //Reset dependent state when changing + if ( + registrationInfo?.address !== + context.state.order.vehicle.registration?.address || + registrationInfo?.city !== + context.state.order.vehicle.registration?.city || + registrationInfo?.state !== + context.state.order.vehicle.registration?.state || + registrationInfo?.zipCode !== + context.state.order.vehicle.registration?.zipCode || + registrationInfo?.firstName !== + context.state.order.vehicle.registration?.firstName || + registrationInfo?.lastName !== + context.state.order.vehicle.registration?.lastName + ) { context.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES); if (!isSelectedGlassAvailableForVehicle) { @@ -1015,72 +1198,141 @@ export const actions = { }, savePartQuestionAnswers(context, partQuestionAnswersArray) { // if part question answers have changed, reset subsequent question answers - const sortedPreviousResultsArray = sortArrayOfObjectsByPropertyValue(context.getters.damage.partQuestionAnswers, "result"); - const sortedPartQuestionAnswersArray = sortArrayOfObjectsByPropertyValue(partQuestionAnswersArray, "result") - const havePartQuestionAnswersChanged = sortedPreviousResultsArray?.length !== sortedPartQuestionAnswersArray.length || - !sortedPreviousResultsArray?.every((x, i) => x.result === sortedPartQuestionAnswersArray[i].result); + const sortedPreviousResultsArray = sortArrayOfObjectsByPropertyValue( + context.getters.damage.partQuestionAnswers, + "result" + ); + const sortedPartQuestionAnswersArray = sortArrayOfObjectsByPropertyValue( + partQuestionAnswersArray, + "result" + ); + const havePartQuestionAnswersChanged = + sortedPreviousResultsArray?.length !== + sortedPartQuestionAnswersArray.length || + !sortedPreviousResultsArray?.every( + (x, i) => x.result === sortedPartQuestionAnswersArray[i].result + ); if (havePartQuestionAnswersChanged) { context.commit(storeMutations.UPDATE_GLASS_PARTS, null); context.commit(storeMutations.UPDATE_MOLDING_QUESTION_ANSWERS, null); context.commit(storeMutations.UPDATE_CAPABILITY_QUESTION_ANSWERS, null); - context.commit(storeMutations.UPDATE_PAGE_DATA, { page: fmgPageValues.VEHICLE_PARTS, data: null }); - context.commit(storeMutations.UPDATE_PAGE_DATA, { page: fmgPageValues.MOLDING_QUESTIONS, data: null }); - context.commit(storeMutations.UPDATE_PAGE_DATA, { page: fmgPageValues.CAPABILITY_QUESTIONS, data: null }); + context.commit(storeMutations.UPDATE_PAGE_DATA, { + page: fmgPageValues.VEHICLE_PARTS, + data: null, + }); + context.commit(storeMutations.UPDATE_PAGE_DATA, { + page: fmgPageValues.MOLDING_QUESTIONS, + data: null, + }); + context.commit(storeMutations.UPDATE_PAGE_DATA, { + page: fmgPageValues.CAPABILITY_QUESTIONS, + data: null, + }); } //Save new values - context.commit(storeMutations.UPDATE_PART_QUESTION_ANSWERS, partQuestionAnswersArray); + context.commit( + storeMutations.UPDATE_PART_QUESTION_ANSWERS, + partQuestionAnswersArray + ); }, resetMoldingAndCapabilityQuestionAnswersIfNeeded(context, matchedParts) { - const partsOrQuestionsDataToCompareWith = context.getters.pageData(fmgPageValues.MOLDING_QUESTIONS)?.partsOrQuestions ?? context.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS)?.partsOrQuestions ?? []; + const partsOrQuestionsDataToCompareWith = + context.getters.pageData(fmgPageValues.MOLDING_QUESTIONS) + ?.partsOrQuestions ?? + context.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS) + ?.partsOrQuestions ?? + []; function getAllPartNumbers(partsOrQuestions) { return partsOrQuestions[0]?.parts - ? [...partsOrQuestions].map(glass => glass.parts).flat().map(part => part.partNumber).filter(partNumber => !partNumber.toUpperCase().includes("FEE")).sort().join(",") - : [] + ? [...partsOrQuestions] + .map((glass) => glass.parts) + .flat() + .map((part) => part.partNumber) + .filter((partNumber) => !partNumber.toUpperCase().includes("FEE")) + .sort() + .join(",") + : []; } - const previouslySelectedPartNumbers = getAllPartNumbers(partsOrQuestionsDataToCompareWith); + const previouslySelectedPartNumbers = getAllPartNumbers( + partsOrQuestionsDataToCompareWith + ); const currentlySelectedPartNumbers = getAllPartNumbers(matchedParts); - const haveSelectedVehiclePartsChanged = previouslySelectedPartNumbers !== currentlySelectedPartNumbers; + const haveSelectedVehiclePartsChanged = + previouslySelectedPartNumbers !== currentlySelectedPartNumbers; if (haveSelectedVehiclePartsChanged) { context.commit(storeMutations.UPDATE_GLASS_PARTS, null); context.commit(storeMutations.UPDATE_MOLDING_QUESTION_ANSWERS, null); context.commit(storeMutations.UPDATE_CAPABILITY_QUESTION_ANSWERS, null); - context.commit(storeMutations.UPDATE_PAGE_DATA, { page: fmgPageValues.MOLDING_QUESTIONS, data: null }); - context.commit(storeMutations.UPDATE_PAGE_DATA, { page: fmgPageValues.CAPABILITY_QUESTIONS, data: null }); + context.commit(storeMutations.UPDATE_PAGE_DATA, { + page: fmgPageValues.MOLDING_QUESTIONS, + data: null, + }); + context.commit(storeMutations.UPDATE_PAGE_DATA, { + page: fmgPageValues.CAPABILITY_QUESTIONS, + data: null, + }); } }, saveMoldingQuestionAnswers(context, moldingQuestionAnswers) { - const sortedPreviousResultsArray = sortArrayOfObjectsByPropertyValue(context.getters.damage.moldingQuestionAnswers, "partNum"); - const sortedMoldingQuestionAnswersArray = sortArrayOfObjectsByPropertyValue(moldingQuestionAnswers, "partNum"); - const haveMoldingQuestionAnswersChanged = sortedPreviousResultsArray?.length !== sortedMoldingQuestionAnswersArray.length || - !sortedPreviousResultsArray?.every((x, i) => x.partNum === sortedMoldingQuestionAnswersArray[i].partNum); + const sortedPreviousResultsArray = sortArrayOfObjectsByPropertyValue( + context.getters.damage.moldingQuestionAnswers, + "partNum" + ); + const sortedMoldingQuestionAnswersArray = sortArrayOfObjectsByPropertyValue( + moldingQuestionAnswers, + "partNum" + ); + const haveMoldingQuestionAnswersChanged = + sortedPreviousResultsArray?.length !== + sortedMoldingQuestionAnswersArray.length || + !sortedPreviousResultsArray?.every( + (x, i) => x.partNum === sortedMoldingQuestionAnswersArray[i].partNum + ); if (haveMoldingQuestionAnswersChanged) { context.commit(storeMutations.UPDATE_GLASS_PARTS, null); context.commit(storeMutations.UPDATE_CAPABILITY_QUESTION_ANSWERS, null); - context.commit(storeMutations.UPDATE_PAGE_DATA, { page: fmgPageValues.CAPABILITY_QUESTIONS, data: null }); + context.commit(storeMutations.UPDATE_PAGE_DATA, { + page: fmgPageValues.CAPABILITY_QUESTIONS, + data: null, + }); } //Save new values - context.commit(storeMutations.UPDATE_MOLDING_QUESTION_ANSWERS, moldingQuestionAnswers); + context.commit( + storeMutations.UPDATE_MOLDING_QUESTION_ANSWERS, + moldingQuestionAnswers + ); }, saveCapabilityQuestionAnswers(context, capabilityQuestionAnswers) { - const sortedPreviousResultsArray = sortArrayOfObjectsByPropertyValue(context.getters.damage.capabilityQuestionAnswers, "result"); - const sortedCapabilityQuestionAnswersArray = sortArrayOfObjectsByPropertyValue(capabilityQuestionAnswers, "result"); - const haveCapabilityQuestionAnswersChanged = sortedPreviousResultsArray?.length !== sortedCapabilityQuestionAnswersArray.length || - !sortedPreviousResultsArray?.every((x, i) => x.result === sortedCapabilityQuestionAnswersArray[i].result); + const sortedPreviousResultsArray = sortArrayOfObjectsByPropertyValue( + context.getters.damage.capabilityQuestionAnswers, + "result" + ); + const sortedCapabilityQuestionAnswersArray = + sortArrayOfObjectsByPropertyValue(capabilityQuestionAnswers, "result"); + const haveCapabilityQuestionAnswersChanged = + sortedPreviousResultsArray?.length !== + sortedCapabilityQuestionAnswersArray.length || + !sortedPreviousResultsArray?.every( + (x, i) => x.result === sortedCapabilityQuestionAnswersArray[i].result + ); if (haveCapabilityQuestionAnswersChanged) { context.commit(storeMutations.UPDATE_GLASS_PARTS, null); } //Save new values - context.commit(storeMutations.UPDATE_CAPABILITY_QUESTION_ANSWERS, capabilityQuestionAnswers); + context.commit( + storeMutations.UPDATE_CAPABILITY_QUESTION_ANSWERS, + capabilityQuestionAnswers + ); }, // Misc order actions saveServiceLocation(context, serviceLocationInfo) { @@ -1092,7 +1344,6 @@ export const actions = { saveVin(context, { isSelectedGlassAvailableForVehicle, vehicleInfo }) { //Reset dependent state when changing if (vehicleInfo.vin !== context.state.order.vehicle.vin) { - if (!isSelectedGlassAvailableForVehicle) { context.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES); context.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES); @@ -1107,11 +1358,50 @@ export const actions = { }, clearVin(context) { context.commit(storeMutations.UPDATE_VEHICLE_VIN, null); - } -} + }, + + // START GA click event actions + // updateCurrentlySelectedValues(context, { groupName, value }) { + // context.commit( + // storeMutations.UPDATE_CURRENTLY_SELECTED_VALUES, + // groupName, + // value + // ); + // }, + // updateFiredGaClickEventValues(context, { groupName, value }) { + // context.commit( + // storeMutations.UPDATE_FIRED_GA_CLICK_EVENT_VALUES, + // groupName, + // value + // ); + // }, + // updateLastFocusedInputGroup(context, groupName) { + // context.commit(storeMutations.UPDATE_LAST_FOCUSED_INPUT_GROUP, groupName); + // }, + // updateWasLastFocusedInputMultiselect( + // context, + // wasLastFocusedInputMultiselect + // ) { + // context.commit( + // storeMutations.UPDATE_WAS_LAST_FOCUSED_INPUT_MULTISELECT, + // wasLastFocusedInputMultiselect + // ); + // }, + // END GA click event actions +}; + +// const store = new Store({ +// state, +// mutations, +// getters, +// actions, +// }); export default createStore({ plugins: [createPersistedState()], + modules: { + gaState, + }, // IMPORTANT: Be VERY careful when modifying these fields for at least a few reasons: // * The CMS can reference the fields by name @@ -1126,30 +1416,42 @@ export default createStore({ // Private Functions function getHasRecalibrationPart(state) { - var hasRequiresRecalibration = getAllValuesOfPropertyInArrayOfObjects(state.order.lineItems.glassParts, "requiresRecalibration")?.length > 0; - var hasRecalibrationType = getAllValuesOfPropertyInArrayOfObjects(state.order.lineItems.glassParts, "recalibrationType")?.length > 0; + var hasRequiresRecalibration = + getAllValuesOfPropertyInArrayOfObjects( + state.order.lineItems.glassParts, + "requiresRecalibration" + )?.length > 0; + var hasRecalibrationType = + getAllValuesOfPropertyInArrayOfObjects( + state.order.lineItems.glassParts, + "recalibrationType" + )?.length > 0; if (hasRequiresRecalibration) { - if (hasRecalibrationType) { // Has both 'requiresRecalibration' and 'recalibrationType' and 'recalibrationType' - return getAllValuesOfPropertyInArrayOfObjects(state.order.lineItems.glassParts, "recalibrationType")[0].toLowerCase() != "unknown"; - } else { // Has 'requiresRecalibration' but no 'recalibrationType' at all + if (hasRecalibrationType) { + // Has both 'requiresRecalibration' and 'recalibrationType' and 'recalibrationType' + return ( + getAllValuesOfPropertyInArrayOfObjects( + state.order.lineItems.glassParts, + "recalibrationType" + )[0].toLowerCase() != "unknown" + ); + } else { + // Has 'requiresRecalibration' but no 'recalibrationType' at all return true; } - } else { // Does not have 'requiresRecalibration' + } else { + // Does not have 'requiresRecalibration' return false; } - } function sortArrayOfObjectsByPropertyValue(arrayOfObjects, propertyName) { if (!arrayOfObjects) return null; return arrayOfObjects.sort((a, b) => { - if (a[propertyName] < b[propertyName]) - return -1; - else if (a[propertyName] > b[propertyName]) - return 1; - else - return 0; - }) -} \ No newline at end of file + if (a[propertyName] < b[propertyName]) return -1; + else if (a[propertyName] > b[propertyName]) return 1; + else return 0; + }); +}