From ea053534ca6b5014143fa295a81ee16114fe9d95 Mon Sep 17 00:00:00 2001 From: Katie Date: Thu, 29 Sep 2022 12:19:42 -0400 Subject: [PATCH 01/56] CSR-762 Add separate GA state --- src/constants/store-actions.js | 128 +++++++++++--------- src/constants/store-mutations.js | 127 ++++++++++--------- src/mixins/button-question-wrapper-mixin.js | 35 ------ src/store/gaState.js | 90 ++++++++++++++ src/store/index.js | 5 + 5 files changed, 232 insertions(+), 153 deletions(-) delete mode 100644 src/mixins/button-question-wrapper-mixin.js create mode 100644 src/store/gaState.js diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js index b77b1456f..ff5100070 100644 --- a/src/constants/store-actions.js +++ b/src/constants/store-actions.js @@ -1,66 +1,78 @@ 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", }; -export { storeActions }; +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", +}; + +export { storeActions, gaStoreActions }; diff --git a/src/constants/store-mutations.js b/src/constants/store-mutations.js index 51574f08d..0e72b5849 100644 --- a/src/constants/store-mutations.js +++ b/src/constants/store-mutations.js @@ -1,72 +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", }; -export { storeMutations }; +const gaStoreMutations = { + 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 { storeMutations, gaStoreMutations }; diff --git a/src/mixins/button-question-wrapper-mixin.js b/src/mixins/button-question-wrapper-mixin.js deleted file mode 100644 index df31218fc..000000000 --- a/src/mixins/button-question-wrapper-mixin.js +++ /dev/null @@ -1,35 +0,0 @@ -import { ref, isRef } from "vue"; - -export default { - props: { - modelValue: [Array, String, Number], - // modelValueName: { - // type: String, - // required: true, - // }, - }, - data() { - return { - selectedValue: null, - }; - }, - created() { - this.selectedValue = this.modelValue; - - console.log("Created: ", { - selectedValue: this.selectedValue, - // modelValue: this.modelValue, - // modelValueName: this.modelValueName - }) - if (this.modelValueName) { - this[this.modelValueName] = this.selectedValue; - // this.$on("update:modelValue", (dynamicModelValue) => { - // console.log("ON HIT", { - // dynamicModelValue: dynamicModelValue - // }) - // this.selectedValue = dynamicModelValue; - // this.$emit("update:modelValue", dynamicModelValue) - // }) - } - }, -}; diff --git a/src/store/gaState.js b/src/store/gaState.js new file mode 100644 index 000000000..7d42e6866 --- /dev/null +++ b/src/store/gaState.js @@ -0,0 +1,90 @@ +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, + }, + }; +}; + +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; + }, +}; + +// Export Getters +export const getters = { + 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 + ); + }, +}; + +export default createStore({ + gaState, + gaMutations, + getters, + gaActions, +}); diff --git a/src/store/index.js b/src/store/index.js index 614d54d4b..cacb03b83 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -78,6 +78,11 @@ const getDefaultState = () => { experiments: [], triggeredSiteEntry: false }, + gaInformation: { + currentlySelectedValues: {}, + firedGaClickEventValues: {}, + lastFocusedInputGroup: "" + } } }; From 0581fcdc9e406e9d6724c26cde80df62d29acff6 Mon Sep 17 00:00:00 2001 From: Katie Date: Thu, 29 Sep 2022 13:05:25 -0400 Subject: [PATCH 02/56] CSR-762 Change requests --- .prettierrc | 2 +- .../button-question/button-question.vue | 15 +-------------- .../question-chain/question-chain.vue | 11 ----------- src/helpers/heritage-integration/order-helper.js | 1 - .../replace-options-question.vue | 2 -- .../windshield-chip-count-question.vue | 2 -- .../windshield-damage-type-question.vue | 2 -- .../vehicle-make/make-question/make-question.vue | 2 -- .../model-question/model-question.vue | 2 -- .../style-question/style-question.vue | 2 -- .../vehicle-year/year-question/year-question.vue | 2 -- src/mixins/vehicle-questions-mixin.js | 3 --- src/router/index.js | 2 -- 13 files changed, 2 insertions(+), 46 deletions(-) diff --git a/.prettierrc b/.prettierrc index 21209f49e..f1c8e7129 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,4 @@ { - "tabWidth": 4, + "tabWidth": 2, "bracketSameLine": true } \ No newline at end of file diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 68b2ac9b5..1346a4f0e 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -50,8 +50,6 @@ :validationRules="validationRules" :textPosition="textPosition" :selectOnKeypress="selectOnKeypress" - @blur="handleBlur" - @focus="handleFocus" @buttonClicked="handleAnswerChange" /> @@ -161,7 +159,7 @@ export default { getComponentWrapperClasses() { let classes = ""; - classes += this.isWid ? "col-12" : "col"; + classes += this.isWide ? "col-12" : "col"; if (this.buttonType == "radio") { classes += " radio-button-container"; @@ -224,17 +222,6 @@ export default { this.$emit("buttonQuestionChange", primaryAnswerValue); this.$emit("update:modelValue", primaryAnswerValue); }, - handleBlur() { - // this.lastFocusedInputGroup = this.groupName; - // window.lastFocusedInputGroup = this.groupName - // console.log("blur: ", this.groupName); - }, - handleFocus() { - // console.log("focused: ", { - // groupName: this.groupName, - // lastFocusedInputGroup: this.lastFocusedInputGroup, - // }); - }, }, components: { listButton, diff --git a/src/common-components/question-chain/question-chain.vue b/src/common-components/question-chain/question-chain.vue index 71d517e77..01672f2f3 100644 --- a/src/common-components/question-chain/question-chain.vue +++ b/src/common-components/question-chain/question-chain.vue @@ -1,17 +1,6 @@ @@ -25,16 +24,24 @@ export default { data() { return { styles: [], - selectedStyle: "" }; }, props: { + modelValue: String, cmsWidgetName: String, }, computed: { questionText(){ return this.getCmsContent(this.cmsWidgetName, 'QuestionText'); }, + selectedValue: { + get: function() { + return this.modelValue + }, + set: function(newValue) { + this.$emit("update:modelValue", newValue); + } + } }, components: { buttonQuestion, @@ -54,10 +61,5 @@ export default { this.styles = initialData; }, }, - watch: { - selectedStyle(selectedStyle) { - this.$emit("update:modelValue", selectedStyle); - } - } }; diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue index 1835a7f74..6851f282c 100644 --- a/src/layouts/vehicle-year/year-question/year-question.vue +++ b/src/layouts/vehicle-year/year-question/year-question.vue @@ -1,18 +1,15 @@ From 3fad6ae84224d60b59f499251147623614b9e6d0 Mon Sep 17 00:00:00 2001 From: Katie Date: Mon, 3 Oct 2022 08:48:33 -0400 Subject: [PATCH 13/56] CSR-762 Add back missing attributes --- src/layouts/vehicle-style/style-question/style-question.vue | 1 + src/layouts/vehicle-year/year-question/year-question.vue | 1 + 2 files changed, 2 insertions(+) diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue index 806f7ac41..bf8fd3d07 100644 --- a/src/layouts/vehicle-style/style-question/style-question.vue +++ b/src/layouts/vehicle-style/style-question/style-question.vue @@ -8,6 +8,7 @@ groupName="ChooseVehicleStyle" textPosition="text-start" v-model="selectedValue" + :selectOnKeypress="false" isRequired /> diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue index 6851f282c..06af5ce64 100644 --- a/src/layouts/vehicle-year/year-question/year-question.vue +++ b/src/layouts/vehicle-year/year-question/year-question.vue @@ -8,6 +8,7 @@ groupName="ChooseVehicleYear" textPosition="text-start" v-model="selectedValue" + :selectOnKeypress="false" isRequired /> From d093a9b8424dba0df27317f3a9c9f39e3260e2fc Mon Sep 17 00:00:00 2001 From: Katie Date: Mon, 3 Oct 2022 09:31:14 -0400 Subject: [PATCH 14/56] CSR-762 Fix repair/replace combo rule --- .../vehicle-damage/windshield-options/windshield-options.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue index f22370d69..cd229e007 100644 --- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue +++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue @@ -57,8 +57,8 @@ defineRule("windshield-replace-options-required", required(errorMessages.WINSHIE defineRule("check-for-repair-and-replace", (selectedWindshieldDamageType, selectedDamageLocations) => { return selectedWindshieldDamageType.toString() != damageLocationsSelected.REPAIR || - !selectedDamageLocations.includes(damageLocationsSelected.WINDSHIELD) || - selectedDamageLocations.length === 1; + (!selectedDamageLocations.includes(damageLocationsSelected.WINDSHIELD) && !selectedDamageLocations[0]?.includes(damageLocationsSelected.WINDSHIELD)) || + (selectedDamageLocations.length === 1 && selectedDamageLocations[0].length === 1); }); defineRule("repair-only", (value) => { return value.toString() === damageLocationsSelected.REPAIR; From e546bad283757216b7d50cafaf8efa19f76b7040 Mon Sep 17 00:00:00 2001 From: Katie Date: Mon, 3 Oct 2022 13:18:08 -0400 Subject: [PATCH 15/56] CSR-762 GA WIP --- src/App.vue | 16 +- .../base-input-button/base-input-button.vue | 198 +++++++++--------- .../button-question/button-question.vue | 29 ++- src/constants/store-actions.js | 10 +- src/constants/store-mutations.js | 10 +- src/main.js | 2 - src/mixins/analytics-mixin.js | 2 + src/mixins/base-mixin.js | 15 +- src/store/gaState.js | 72 ------- src/store/index.js | 12 +- src/ux-components/button-main/button-main.vue | 2 - 11 files changed, 152 insertions(+), 216 deletions(-) delete mode 100644 src/store/gaState.js diff --git a/src/App.vue b/src/App.vue index 71b56feaf..501c46fd9 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,11 +2,25 @@ - + + + diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 8d3abb287..7099e6227 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -125,7 +125,8 @@ export default { data() { return { primaryValue: "", - lastFocusedInputGroup: "", + // lastFocusedInputGroup: "", + lastPushedGaEventValue: null, }; }, computed: { @@ -197,6 +198,9 @@ export default { }) ); }, + isValueSelectedOnClick() { + return this.isMultiSelect || this.selectingInitiatesLoad; + }, }, methods: { formatString(str) { @@ -222,31 +226,46 @@ export default { }, handleAnswerChange(primaryAnswerValue) { this.primaryValue = primaryAnswerValue; - console.log("hAC: ", primaryAnswerValue) + + this.pushClickEventToGA(null, primaryAnswerValue); + this.$emit("buttonQuestionChange", primaryAnswerValue); this.$emit("update:modelValue", primaryAnswerValue); }, pushClickEventToGA(e, value) { - this.pushEventToGA( - this.$route.query[queryStrings.FMG_PAGE], - this.GaActions.CLICKED, - value?.toString() ?? this.primaryValue?.toString(), - true, - this.valueToLogType - ); + const valueToPushToGa = + value?.toString() ?? this.primaryValue?.toString(); + console.log({ + valueToPushToGa, + lastPushedGaEventValue: this.lastPushedGaEventValue, + }); + if (valueToPushToGa !== this.lastPushedGaEventValue) { + this.lastPushedGaEventValue = valueToPushToGa; + this.pushEventToGA( + this.$route.query[queryStrings.FMG_PAGE], + this.GaActions.CLICKED, + valueToPushToGa, + true, + this.valueToLogType + ); + } }, - handleFocus() { - this.$root.handleFocus({ - groupName: this.groupName, - value: this.primaryValue - }) + onFocusCallbackForRoot() { + if (!this.isValueSelectedOnClick) { + this.pushClickEventToGA(); + } }, - handleBlur() { - this.$root.handleBlur({ + handleFocus(e) { + this.$root.handleInputFocus({ groupName: this.groupName, - value: this.primaryValue - }) - } + }); + }, + handleBlur(e) { + this.$root.handleInputBlur({ + groupName: this.groupName, + onFocusCallback: this.onFocusCallbackForRoot, + }); + }, }, components: { listButton, diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js index 9e99307ee..d6a8ced7e 100644 --- a/src/mixins/base-mixin.js +++ b/src/mixins/base-mixin.js @@ -61,39 +61,39 @@ export default { state: serviceZipValidationResponse.data.state, }; }, - pushRadioClickEventIfNecessary() { - const { - firedGaClickEventValues, - currentlySelectedValues, - lastFocusedInputGroup, - wasLastFocusedInputMultiselect, - } = this.$store.getters.gaClickInformation; + // pushRadioClickEventIfNecessary() { + // const { + // firedGaClickEventValues, + // currentlySelectedValues, + // lastFocusedInputGroup, + // wasLastFocusedInputMultiselect, + // } = this.$store.getters.gaClickInformation; - // Keyboard navigation - if ( - !wasLastFocusedInputMultiselect && - currentlySelectedValues[lastFocusedInputGroup] && - firedGaClickEventValues[lastFocusedInputGroup] != - currentlySelectedValues[lastFocusedInputGroup] - ) { - const value = - currentlySelectedValues[lastFocusedInputGroup]?.toString(); - // this.dispatchStoreAction( - // gaStoreActions.UPDATE_FIRED_GA_CLICK_EVENT_VALUES, - // { - // groupName: lastFocusedInputGroup, - // value: value, - // } - // ); + // // Keyboard navigation + // if ( + // !wasLastFocusedInputMultiselect && + // currentlySelectedValues[lastFocusedInputGroup] && + // firedGaClickEventValues[lastFocusedInputGroup] != + // currentlySelectedValues[lastFocusedInputGroup] + // ) { + // const value = + // currentlySelectedValues[lastFocusedInputGroup]?.toString(); + // // this.dispatchStoreAction( + // // gaStoreActions.UPDATE_FIRED_GA_CLICK_EVENT_VALUES, + // // { + // // groupName: lastFocusedInputGroup, + // // value: value, + // // } + // // ); - this.pushEventToGA( - this.$route.query[queryStrings.FMG_PAGE], - this.GaActions.CLICKED, - value, - true - ); - } - }, + // this.pushEventToGA( + // this.$route.query[queryStrings.FMG_PAGE], + // this.GaActions.CLICKED, + // value, + // true + // ); + // } + // }, }, computed: { storeActions() { From fe9602200ccf3a082ca0abd5ae0bef07f3e1644f Mon Sep 17 00:00:00 2001 From: Katie Date: Wed, 5 Oct 2022 14:22:25 -0400 Subject: [PATCH 21/56] CSR-762 Add tests --- .../base-input-button.spec.js | 523 ++++++++++++++++++ .../base-input-button/base-input-button.vue | 39 +- .../button-question/button-question.vue | 24 +- src/mixins/input-button-wrapper-mixin.js | 13 +- src/mixins/input-button-wrapper-mixin.spec.js | 81 +++ .../list-button-horizontal.vue | 2 +- src/ux-components/list-button/list-button.vue | 2 +- src/ux-components/list-card/list-card.vue | 2 +- src/ux-components/radio/radio.vue | 2 +- 9 files changed, 656 insertions(+), 32 deletions(-) create mode 100644 src/common-components/base-input-button/base-input-button.spec.js create mode 100644 src/mixins/input-button-wrapper-mixin.spec.js diff --git a/src/common-components/base-input-button/base-input-button.spec.js b/src/common-components/base-input-button/base-input-button.spec.js new file mode 100644 index 000000000..9a6e7c168 --- /dev/null +++ b/src/common-components/base-input-button/base-input-button.spec.js @@ -0,0 +1,523 @@ +import { shallowMount, mount } from "@vue/test-utils"; +import baseInputButton from "./base-input-button"; + +describe("baseInputButton.vue", () => { + describe("general", () => { + describe("checkbox", () => { + test("isMultiSelect => baseInputButton is a checkbox", () => { + // Arrange/Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + }, + }, + }); + + // Assert + const inputElement = wrapper.find("input"); + expect(inputElement.attributes().type).toEqual("checkbox"); + }); + }); + + describe("radio", () => { + test("!isMultiSelect => baseInputButton is a radio button", () => { + // Arrange/Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: false, + }, + }, + }); + + // Assert + const inputElement = wrapper.find("input"); + expect(inputElement.attributes().type).toEqual("radio"); + }); + }); + + // tests in here should be test.each + describe("shared", () => { + const isMultiSelectOptions = [true, false]; + test.each(isMultiSelectOptions)("groupName", (isMultiSelect) => { + const { wrapper } = setupMocks({ + mockData: { + propsData: { + groupName: "boogly", + isMultiSelect: isMultiSelect, + }, + }, + }); + + // Assert + const inputElement = wrapper.find("input"); + const inputElementAttributes = inputElement.attributes(); + expect(inputElementAttributes.name).toEqual("boogly"); + }); + }); + }); + + describe("mouse clicks", () => { + describe("checkbox", () => { + test("clicked => correct event and value are emitted", async () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + value: "X", + }, + }, + }); + + // Act + await wrapper.trigger("mousedown.left"); + await wrapper.trigger("click"); + + // Assert + expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual([ + "X", + ]); + }); + }); + + describe("radio", () => { + test("clicked => correct event and value are emitted", async () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: false, + value: "X", + }, + }, + }); + + // Act + await wrapper.trigger("mousedown.left"); + await wrapper.trigger("click"); + + // Assert + expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual( + "X" + ); + }); + }); + }); + + describe("keyboard navigation and events", () => { + describe("checkbox", () => { + test.todo( + "focus on a checkbox => inputButtonClicked is not emitted" + ); + + test.todo( + "blur from a checkbox => inputButtonClicked is not emitted" + ); + + test("change event fired from checkbox => inputButtonClicked is emitted with correct value", async () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + value: "Hi", + }, + }, + }); + + const input = wrapper.find("input"); + + // Act + await input.trigger("change"); + + // Assert + expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual([ + "Hi", + ]); + }); + + test("focus and click space on a checkbox => inputButtonClicked is not emitted", async () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + value: "Hi", + }, + }, + }); + + const input = wrapper.find("input"); + + // Act + await input.trigger("keypress", { key: "space" }); + + // Assert + expect(wrapper.emitted()).not.toHaveProperty( + "inputButtonClicked" + ); + }); + + test("focus and click enter on a checkbox => inputButtonClicked is emitted with correct value", async () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + value: "Hi", + }, + }, + }); + + const input = wrapper.find("input"); + + // Act + await input.trigger("keypress", { key: "enter" }); + + // Assert + expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual([ + "Hi", + ]); + }); + }); + + describe("radio", () => { + test.todo( + "focus on a radio button => inputButtonClicked is not emitted" + ); + + test.todo( + "blur from a radio button => inputButtonClicked is not emitted" + ); + + test("focus and click space on a radio button => inputButtonClicked is emitted with correct value", async () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: false, + value: "Hi", + }, + }, + }); + + const input = wrapper.find("input"); + + // Act + await input.trigger("keypress", { key: "space" }); + + // Assert + expect(wrapper.emitted()).toHaveProperty("inputButtonClicked"); + expect(wrapper.emitted()["inputButtonClicked"][0][0]).toEqual( + "Hi" + ); + }); + + test( + "focus and click enter on a radio button => inputButtonClicked is emitted with correct value", + async () => { + // Arrange + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: false, + value: "Hi", + }, + }, + }); + + const input = wrapper.find("input"); + + // Act + await input.trigger("keypress", { key: "enter" }); + + // Assert + expect(wrapper.emitted()).toHaveProperty( + "inputButtonClicked" + ); + expect( + wrapper.emitted()["inputButtonClicked"][0][0] + ).toEqual("Hi"); + } + ); + }); + }); + + describe("methods", () => { + describe("handleEventAction", () => {}); + + describe("handleSelectionChange", () => { + describe("checkbox", () => { + test.todo("modelValue is null => inputButtonClicked is emitted with correct") + }) + + describe("radio", () => { + + }) + }); + + describe("handleClick", () => { + test.todo("handleSelectChange is also called") + + test.todo("inputButtonClicked is emitted with valueToEmit") + }); + }); + + describe("computed", () => { + describe("isChecked", () => { + describe("checkbox", () => { + const falsyModelValues = [[], null, undefined]; + test.each(falsyModelValues)( + "modelValue is falsy/empty => checkbox isn't checked", + (modelValue) => { + // Arrange/Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + modelValue, + }, + }, + }); + + // Assert + const inputElement = wrapper.find("input"); + expect(wrapper.vm.isChecked).toEqual(false); + expect(inputElement.element.checked).toBe(false); + } + ); + + test("modelValue doesn't contain this button's value => checkbox isn't checked", async () => { + // Arrange/Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + modelValue: ["Aaa", "Bbb", "Ccc"], + value: "Ddd", + }, + }, + }); + + await wrapper.vm.$nextTick(); + + // Assert + const inputElement = wrapper.find("input"); + expect(wrapper.vm.isChecked).toEqual(false); + expect(inputElement.element.checked).toBe(false); + }); + + test("modelValue contains this button's value => checkbox is checked", () => { + // Arrange/Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + modelValue: ["Aaa", "Bbb", "Ddd", "Ccc"], + value: "Ddd", + }, + }, + }); + + // Assert + const inputElement = wrapper.find("input"); + expect(wrapper.vm.isChecked).toEqual(true); + expect(inputElement.element.checked).toBe(true); + }); + }); + + describe("radio", () => { + const falsyModelValues = ["", null, undefined, []]; + test.each(falsyModelValues)( + "modelValue is falsy/empty => radio button isn't checked", + (modelValue) => { + // Arrange/Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: false, + modelValue, + value: "Aaa", + }, + }, + }); + + // Assert + const inputElement = wrapper.find("input"); + expect(wrapper.vm.isChecked).toEqual(false); + expect(inputElement.element.checked).toBe(false); + } + ); + + test("modelValue equals this button's value => radio button is checked", () => { + // Arrange/Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: false, + modelValue: "Ddd", + value: "Ddd", + }, + }, + }); + + // Assert + const inputElement = wrapper.find("input"); + expect(wrapper.vm.isChecked).toEqual(true); + expect(inputElement.element.checked).toBe(true); + }); + + test("modelValue doesn't equal this button's value => radio button isn't checked", () => { + // Arrange/Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: false, + modelValue: "Aaa", + value: "Ddd", + }, + }, + }); + + // Assert + const inputElement = wrapper.find("input"); + expect(wrapper.vm.isChecked).toEqual(false); + expect(inputElement.element.checked).toBe(false); + }); + }); + }); + + describe("buttonId", () => { + test("groupName and value combo yield correct id for input button with string value", () => { + // Arrange/Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + groupName: "my test-name", + value: "Aaa-BBB CcC", + }, + }, + }); + + // Assert + const inputElement = wrapper.find("input"); + expect(wrapper.vm.buttonId).toBe("my-test-name-Aaa-BBB-CcC"); + expect(inputElement.attributes().id).toBe( + "my-test-name-Aaa-BBB-CcC" + ); + }); + + test("groupName and value combo yield correct id for input button with number value", () => { + // Arrange/Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + groupName: "my test-name", + value: 2, + }, + }, + }); + + // Assert + const inputElement = wrapper.find("input"); + expect(wrapper.vm.buttonId).toBe("my-test-name-2"); + expect(inputElement.attributes().id).toBe("my-test-name-2"); + }); + }); + + describe("inputType", () => { + test("isMultiSelect is true => inputType is 'checkbox'", () => { + // Arrange/Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: true, + }, + }, + }); + + // Assert + const inputElement = wrapper.find("input"); + expect(wrapper.vm.inputType).toEqual("checkbox"); + expect(inputElement.attributes().type).toBe("checkbox"); + }); + + test("isMultiSelect is false => inputType is 'radio'", () => { + // Arrange/Act + const { wrapper } = setupMocks({ + mockData: { + propsData: { + isMultiSelect: false, + }, + }, + }); + + // Assert + const inputElement = wrapper.find("input"); + expect(wrapper.vm.inputType).toEqual("radio"); + expect(inputElement.attributes().type).toBe("radio"); + }); + }); + }); +}); + +// TODO KO look at how I tested groups of these in SFA (making sure selecting one radio changes the value, etc, that this acts like a regular input aside from a different emitted event) + +function setupMocks({ mockData = {}, shouldShallowMount = true }) { + const baseInputButtonWrapper = { + components: { baseInputButton }, + template: '', + data() { + return { + myValue: "", + }; + }, + }; + const mountMockData = { + ...mockData, + propsData: { + // to get rid of some annoying warnings + groupName: "groupName", + modelValue: mockData.propsData?.isMultiSelect ? [] : "", + value: "5", + // should override the above if they exist + ...mockData.propsData, + }, + }; + + const wrapper = shouldShallowMount + ? shallowMount(baseInputButton, mountMockData) + : mount(baseInputButton, mountMockData); + + return { wrapper }; +} + +function setupBaseInputButtonWrapper({ mockData = {} }) { + const baseInputButtonWrapper = { + components: { baseInputButton }, + template: + '
', + data() { + return { + myValue: "", + isMultiSelect: mockData.isMultiSelect, + }; + }, + + // const parentComponent = mount({ + // data() { + // return { + // value: "value1", + // } + // }, + // template: '
', + // components: { baseInputButton } + // }) + }; + + const wrapper = mount(baseInputButtonWrapper, {}); + + return { wrapper }; +} 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 1a2e51fcc..e82f7438f 100644 --- a/src/common-components/base-input-button/base-input-button.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -21,14 +21,14 @@ 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 12f2743b2..3473ee179 100644 --- a/src/common-components/base-input-button/base-input-button.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -5,6 +5,8 @@ @focusin="handleFocus" @focusout="handleBlur" @mousedown.left="handleEventAction('click', $event)"> + lastValuePushedToGa: {{ lastValuePushedToGa }}
+ go to another button > go back to original > tab out + // shouldn't do anything, but it does because wasThisValueJustPushedToGa gets set to false? + // console.log("---inputButtonClicked: ", { + // value: this.value, + // // wasThisValueJustPushedToGa: this.wasThisValueJustPushedToGa + // }); + // const lastValuePushedToGa = this.wasThisValueJustPushedToGa ? this.value : null; + // this.wasThisValueJustPushedToGa = false; + + this.$emit("inputButtonClicked", this.valueToEmit); }, onFocusCallbackForRoot() { // console.log("onFocusCallbackForRoot: ", { @@ -200,19 +214,41 @@ export default { onFocusCallback: this.onFocusCallbackForRoot, }); }, - pushClickEventToGA(eventType) { - if (this.isMultiSelect || !eventType) { - console.log("PUSHING: ", this.value); + + // TODO KO NOTES + // base-input-button has the value to push to GA and the click vs focus events + // but button-question would have to keep track of the button group's last held value + // is there a way to make each individual button hold the group's last held value + // WITHOUT listening to an event on each component that uses the button? + + pushClickEventToGA(source) { + if (source == "test") { + // this.wasThisValueJustPushedToGa = true; + // this.$emit("update:lastValuePushedToGa", this.value) + console.log("------------------PUSHING 1: ", this.value); + // this.$emit("gaClickEventPushed", this.value) + this.setLastValuePushedToGa(this.value) + + // this.wasPushedToGa = true } else { - if (eventType === this.eventTypes.CLICK) { - console.log("PUSHING: ", this.value); - } else { - if ( - this.isChecked && - this.lastValuePushedToGa != this.value - ) { - console.log("PUSHING: ", this.value); - } + // console.log("PCETGA: ", { + // lastValuePushedToGa: this.lastValuePushedToGa, + // isChecked: this.isChecked, + // value: this.value, + // // wasThisValueJustPushedToGa: this.wasThisValueJustPushedToGa + // }); + if ( + !this.isValueSelectedOnClick && + this.isChecked && + // !this.wasThisValueJustPushedToGa && + this.lastValuePushedToGa != this.value + ) { + // this.$emit("update:lastValuePushedToGa", this.value) + // this.wasPushedToGa = true + // this.wasThisValueJustPushedToGa = true; + console.log("------------------PUSHING 2: ", this.value); + // this.$emit("gaClickEventPushed", this.value) + this.setLastValuePushedToGa(this.value) } } diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 2f4d1ec43..fbf819cd2 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -34,7 +34,6 @@ }}
- lastValuePushedToGa: {{ lastValuePushedToGa }}
@@ -130,8 +130,8 @@ export default { return { selectedValues: "", // lastFocusedInputGroup: "", - lastPushedGaEventValue: null, - mostRecentlySelectedValue: null, + lastValuePushedToGa: null, + // mostRecentlySelectedValue: null, }; }, computed: { @@ -229,9 +229,12 @@ export default { : this.formatString(answer.toString()); } }, - handleAnswerChange({ selectedAnswers, mostRecentlySelectedValue }) { + handleAnswerChange(selectedAnswers) { this.selectedValues = selectedAnswers; - this.mostRecentlySelectedValue = mostRecentlySelectedValue; + // if (lastValuePushedToGa) { + // this.lastValuePushedToGa = lastValuePushedToGa; + // // console.log("BQ lastValuePushedToGa: ", lastValuePushedToGa); + // } // if (this.isValueSelectedOnClick) { // this.pushClickEventToGA(); @@ -240,7 +243,10 @@ export default { this.$emit("buttonQuestionChange", selectedAnswers); this.$emit("update:modelValue", selectedAnswers); }, -///////////////////////////// + ///////////////////////////// + setLastValuePushedToGa(lastValuePushedToGa) { + this.lastValuePushedToGa = lastValuePushedToGa; + }, // onFocusCallbackForRoot() { // console.log("onFocusCallbackForRoot: ", { // isValueSelectedOnClick: this.isValueSelectedOnClick, @@ -297,7 +303,7 @@ export default { // this.valueToLogType // ); // }, -////////////////////////////////// + ////////////////////////////////// // pushClickEventToGA() { // // const valueToPushToGa = // // value?.toString() ?? this.selectedValues?.toString(); diff --git a/src/mixins/input-button-wrapper-mixin.js b/src/mixins/input-button-wrapper-mixin.js index fdf5b3fd1..cfda08c27 100644 --- a/src/mixins/input-button-wrapper-mixin.js +++ b/src/mixins/input-button-wrapper-mixin.js @@ -9,7 +9,7 @@ export default { buttonImage: String, altText: { type: String, - default: "" + default: "", }, textPosition: String, screenReaderOnlyText: String, @@ -18,22 +18,25 @@ export default { isWide: Boolean, isRequired: { type: Boolean, - default: true + default: true, }, // pushClickEventToGA: Function, - lastValuePushedToGa: [String, Number] + lastValuePushedToGa: [String, Number], + setLastValuePushedToGa: Function }, methods: { handleAnswerChange(e) { if (this.preHandleAnswerChange) { - this.preHandleAnswerChange(e.selectedAnswers) + this.preHandleAnswerChange(e); } - - this.$emit("change", e.selectedAnswers); - // this.$emit("update:lastValuePushedToGa", e.lastValuePushedToGa); + + // console.log("IBWM: ", e) + this.$emit("change", e); + // if (e.lastValuePushedToGa) { + // console.log("sup") + // this.$emit("update:lastValuePushedToGa", e.lastValuePushedToGa); + // } }, - - }, // computed: { // selectedValueHandler: { From 9b95effca5624a4b8cc9b50ec4eb387cd4ff4853 Mon Sep 17 00:00:00 2001 From: Katie Date: Fri, 7 Oct 2022 15:48:17 -0400 Subject: [PATCH 26/56] CSR-762 GA Cleanup --- src/common-components/base-input-button/base-input-button.vue | 3 +-- src/common-components/button-question/button-question.vue | 4 +--- 2 files changed, 2 insertions(+), 5 deletions(-) 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 76948d4f6..c487b9702 100644 --- a/src/common-components/base-input-button/base-input-button.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -23,7 +23,6 @@ + From eea0b883a77e064d1ed34f6a1151ae400e5ed00f Mon Sep 17 00:00:00 2001 From: Bryan Mauger Date: Mon, 10 Oct 2022 15:44:37 -0400 Subject: [PATCH 28/56] WIP date picker. --- .../date-picker/date-picker.vue | 233 +++++++++++------- 1 file changed, 147 insertions(+), 86 deletions(-) diff --git a/src/common-components/date-picker/date-picker.vue b/src/common-components/date-picker/date-picker.vue index 2bbd1bad5..f2db85e42 100644 --- a/src/common-components/date-picker/date-picker.vue +++ b/src/common-components/date-picker/date-picker.vue @@ -2,7 +2,7 @@
Date Picker -
+
{{currentMonth}} {{currentYear}}
= Available
@@ -15,147 +15,146 @@
ThursdayT
FridayF
SaturdayS
-
- - +
+ +
- - + +
- - - + + +
OCT
- - + +
- - -
-
- - - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + + +
+
+ +
- - + +
- - + +
@@ -175,13 +174,14 @@ export default { isFirstDayOfMonth: true, isCurrentDay: true, isCurrentDayDot: true, + isPastDay: true, }; }, }; + From 204807bf791fadca71f8d1a543f9ba1cf14fa664 Mon Sep 17 00:00:00 2001 From: Bryan Mauger Date: Thu, 13 Oct 2022 09:09:42 -0400 Subject: [PATCH 41/56] Code cleanup per Adam comments. --- .../date-picker/date-picker.vue | 86 +++++++++---------- 1 file changed, 43 insertions(+), 43 deletions(-) diff --git a/src/common-components/date-picker/date-picker.vue b/src/common-components/date-picker/date-picker.vue index 7bff6191c..121f6ed89 100644 --- a/src/common-components/date-picker/date-picker.vue +++ b/src/common-components/date-picker/date-picker.vue @@ -16,175 +16,175 @@
FridayF
SaturdayS
- +
- +
- +
- +
- +
- +
- +
OCT
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
OCT
- +
- +
- +
- +
@@ -295,7 +295,7 @@ export default { outline: none; input[type="radio"] { - position: absolute;; //override bootstrap + position: absolute; //override bootstrap height: 0; opacity: 0; From 2bfb265291fc95a5ab58496ff6ed57f8b9357a92 Mon Sep 17 00:00:00 2001 From: Bryan Mauger Date: Thu, 13 Oct 2022 09:30:50 -0400 Subject: [PATCH 42/56] Moved div to inside label so month name was hoverable with label. Updated CSS accordingly. --- .../date-picker/date-picker.vue | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/common-components/date-picker/date-picker.vue b/src/common-components/date-picker/date-picker.vue index 121f6ed89..e07f8d38c 100644 --- a/src/common-components/date-picker/date-picker.vue +++ b/src/common-components/date-picker/date-picker.vue @@ -43,8 +43,8 @@ -
OCT
@@ -168,8 +168,10 @@
- -
OCT
+ +
@@ -318,7 +320,7 @@ export default { &:after { background-color: $white; } - + .first-day { + .first-day { color: $white; } } @@ -331,7 +333,7 @@ export default { &:after { background-color: $white; } - + .first-day { + .first-day { color: $white; } } @@ -380,7 +382,7 @@ export default { position: absolute; top: 28px; } - + .first-day { + .first-day { color: $blue; } } @@ -414,7 +416,7 @@ export default { color: $white; } } - + .first-day { + .first-day { color: $white; } } From 9d1a768234192ca4a734d644ff7410e95754533f Mon Sep 17 00:00:00 2001 From: Bryan Mauger Date: Thu, 13 Oct 2022 09:48:28 -0400 Subject: [PATCH 43/56] Add comments. --- src/common-components/date-picker/date-picker.vue | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/common-components/date-picker/date-picker.vue b/src/common-components/date-picker/date-picker.vue index e07f8d38c..548ca8d99 100644 --- a/src/common-components/date-picker/date-picker.vue +++ b/src/common-components/date-picker/date-picker.vue @@ -39,6 +39,7 @@
+
+
From 4f5c71dcf9f629654787536a9322eaad8dfb2fc4 Mon Sep 17 00:00:00 2001 From: Katie Date: Thu, 13 Oct 2022 15:01:05 -0400 Subject: [PATCH 44/56] CSR-762 Refactor to use v-model --- .../base-input-button/base-input-button.vue | 7 +------ .../button-question/button-question.vue | 9 ++------- src/mixins/input-button-wrapper-mixin.js | 19 ++++++++++++------- .../list-button-horizontal.vue | 2 +- src/ux-components/list-button/list-button.vue | 2 +- src/ux-components/list-card/list-card.vue | 2 +- src/ux-components/radio/radio.vue | 2 +- 7 files changed, 19 insertions(+), 24 deletions(-) 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 8cd50278e..c7c2291ce 100644 --- a/src/common-components/base-input-button/base-input-button.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -30,11 +30,6 @@ import inputButtonWrapperMixin from "../../mixins/input-button-wrapper-mixin"; export default { name: "base-input-button", - emits: ["change", "inputButtonClicked"], - model: { - prop: "modelValue", - event: "change", - }, props: { // ...inputButtonWrapperMixin.props value: { @@ -132,7 +127,7 @@ export default { }, handleClick(e) { this.handleSelectionChange(e); - this.$emit("inputButtonClicked", this.valueToEmit); + this.$emit("update:modelValue", this.valueToEmit); }, handleFocus() { this.$root.handleInputFocus({ diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index a20ff376e..eb198c93f 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -45,7 +45,6 @@ :groupName="answer.groupName" :isMultiSelect="isMultiSelect" :value="answer.value" - :modelValue="modelValue" :selectingInitiatesLoad="selectingInitiatesLoad" :isWide="isWide" :validationRules="validationRules" @@ -54,7 +53,8 @@ :lastValuePushedToGa="lastValuePushedToGa" :setLastValuePushedToGa="setLastValuePushedToGa" :shouldPushClickEventToGAOnMount="shouldPushClickEventToGAOnMount" - @inputButtonClicked="handleAnswerChange" /> + v-model="selectedValues" + />
+ v-model="selectedValue">
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue index 44ead9b3f..54ef98b35 100644 --- a/src/ux-components/list-button/list-button.vue +++ b/src/ux-components/list-button/list-button.vue @@ -2,7 +2,7 @@ + v-model="selectedValue">
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue index c49c4ce05..7e27a6476 100644 --- a/src/ux-components/list-card/list-card.vue +++ b/src/ux-components/list-card/list-card.vue @@ -5,7 +5,7 @@ 'list-card w-100 rounded-3 d-flex align-items-center h-100', { horizontal: isWide }, ]" - @inputButtonClicked="handleAnswerChange"> + v-model="selectedValue">
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue index ea72d6895..0d120de39 100644 --- a/src/ux-components/radio/radio.vue +++ b/src/ux-components/radio/radio.vue @@ -3,7 +3,7 @@ v-bind="$props" buttonWrapperClasses="ui-radio form-check" inputClasses="form-check-input" - @inputButtonClicked="handleAnswerChange"> + v-model="selectedValue">

{{ buttonLabel }}

{{ From 054b3b2456b1ba271c78c2fd827c63a393359969 Mon Sep 17 00:00:00 2001 From: Katie Date: Thu, 13 Oct 2022 16:51:05 -0400 Subject: [PATCH 45/56] CSR-762 Temporarily lower code coverage threshold --- jest.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jest.config.js b/jest.config.js index ded486df9..4af0d88cc 100644 --- a/jest.config.js +++ b/jest.config.js @@ -28,7 +28,7 @@ module.exports = { testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"], coverageThreshold: { global: { - statements: 85, + statements: 80, // Got the go ahead from Mark to temporarily lower this. Taking out initialize component made the year,make,model and style coverage drop a bit. Once unit tests for license plate lookup, vin lookup and address lookup are in the coverage should go back up to 90 }, }, From cbfd62e3a827cb56c67bc6c39fe1b0ce312618b5 Mon Sep 17 00:00:00 2001 From: Katie Date: Fri, 14 Oct 2022 15:07:59 -0400 Subject: [PATCH 46/56] CSR-762 Remove pushing GA on autoselect --- src/App.vue | 42 ++----------------- .../base-input-button/base-input-button.vue | 17 ++++---- .../button-question/button-question.vue | 2 - src/helpers/analytics-helper.js | 34 +++++++++++++++ .../glass-part-question.vue | 6 +-- src/mixins/analytics-mixin.js | 4 +- src/mixins/input-button-wrapper-mixin.js | 1 - 7 files changed, 48 insertions(+), 58 deletions(-) create mode 100644 src/helpers/analytics-helper.js diff --git a/src/App.vue b/src/App.vue index c934ee244..e43e85c84 100644 --- a/src/App.vue +++ b/src/App.vue @@ -11,48 +11,12 @@ 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 c7c2291ce..e58e826cc 100644 --- a/src/common-components/base-input-button/base-input-button.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -26,6 +26,10 @@ import { useField } from "vee-validate"; import { toRef } from "vue"; import { queryStrings } from "@/constants/query-strings"; +import { + handleInputFocus, + handleInputBlur, +} from "@/helpers/analytics-helper"; import inputButtonWrapperMixin from "../../mixins/input-button-wrapper-mixin"; export default { @@ -59,7 +63,6 @@ export default { isRequired: Boolean, lastValuePushedToGa: [String, Number], setLastValuePushedToGa: Function, - shouldPushClickEventToGAOnMount: Boolean, }, data() { return { @@ -68,11 +71,7 @@ export default { }, mounted() { if (this.isChecked) { - if (this.shouldPushClickEventToGAOnMount) { - this.handleEventAction(this.eventTypes.MOUNT) - } else { - this.handleChange(this.modelValue); - } + this.handleChange(this.modelValue); } }, methods: { @@ -92,7 +91,6 @@ export default { case this.eventTypes.CLICK: case this.eventTypes.ENTER: case this.eventTypes.SPACE: - case this.eventTypes.MOUNT: this.handleClick(e); this.handlePushClickEventToGACheck( this.eventTypes.CLICK @@ -130,12 +128,12 @@ export default { this.$emit("update:modelValue", this.valueToEmit); }, handleFocus() { - this.$root.handleInputFocus({ + handleInputFocus({ groupName: this.groupName, }); }, handleBlur() { - this.$root.handleInputBlur({ + handleInputBlur({ groupName: this.groupName, onFocusCallback: this.handlePushClickEventToGACheck, }); @@ -192,7 +190,6 @@ export default { ENTER: "enter", SPACE: "space", CLICK: "click", - MOUNT: "mount" }; }, }, diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index eb198c93f..1b75e8d9d 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -52,7 +52,6 @@ :selectOnKeypress="selectOnKeypress" :lastValuePushedToGa="lastValuePushedToGa" :setLastValuePushedToGa="setLastValuePushedToGa" - :shouldPushClickEventToGAOnMount="shouldPushClickEventToGAOnMount" v-model="selectedValues" /> @@ -122,7 +121,6 @@ export default { type: Boolean, default: true, }, - shouldPushClickEventToGAOnMount: Boolean }, data() { return { diff --git a/src/helpers/analytics-helper.js b/src/helpers/analytics-helper.js new file mode 100644 index 000000000..b03d86191 --- /dev/null +++ b/src/helpers/analytics-helper.js @@ -0,0 +1,34 @@ +let lastFocusedInputGroupName = ""; +let onFocusCallback = null; + +const handleChildFocus = (e) => { + const targetType = e.target.type; + if (targetType !== "radio" && targetType !== "checkbox") { + handleInputFocus({ + groupName: null, + }); + } +} + +const handleInputFocus = (e) => { + if ( + e && + lastFocusedInputGroupName !== e.groupName && + onFocusCallback + ) { + onFocusCallback(); + } +} + +const handleInputBlur = (e) => { + if (e) { + lastFocusedInputGroupName = e.groupName; + onFocusCallback = e.onFocusCallback; + } +} + +export { + handleChildFocus, + handleInputFocus, + handleInputBlur +} \ No newline at end of file diff --git a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue index 14f707818..d45c8cddb 100644 --- a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue +++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue @@ -27,9 +27,7 @@ isRequired :groupName="`${glassLocation}-${glassName}-${selectedTint}`" :validationRules="partValidationRules" - :shouldPushClickEventToGAOnMount=" - shouldPushClickEventToGAOnMount - " /> + />
@@ -57,7 +55,6 @@ export default { glassColorQuestion: "", glassFeatureQuestion: "", selectedTint: "", - shouldPushClickEventToGAOnMount: true, }; }, props: { @@ -224,7 +221,6 @@ export default { this.$nextTick(() => { if (this.modelValue !== undefined) { // Populate button-question model-value if parts data already exists in VueX - this.shouldPushClickEventToGAOnMount = false; this.selectedTint = this.modelValue?.color } }); diff --git a/src/mixins/analytics-mixin.js b/src/mixins/analytics-mixin.js index 6eb18e462..4ff24f968 100644 --- a/src/mixins/analytics-mixin.js +++ b/src/mixins/analytics-mixin.js @@ -48,6 +48,8 @@ export default { pushEventToGA(category, action, label, pushToLogApp = false, valueToLogType = null) { const currentPageName = getPageNameByQueryString(); const labelToLog = getValueToLog(label, valueToLogType); + + console.log("PUSHING: ", labelToLog) const eventToBePushed = { 'event': GaEvents.GENERIC_EVENT, 'category': category, @@ -140,7 +142,7 @@ export default { noSession() { return getSessionKeyValue() === 0 || getSessionIdValue() === '00000000-0000-0000-0000-000000000000'; - } + }, }, computed: { analyticsPageEvents() { diff --git a/src/mixins/input-button-wrapper-mixin.js b/src/mixins/input-button-wrapper-mixin.js index eae27c2fe..628ccec96 100644 --- a/src/mixins/input-button-wrapper-mixin.js +++ b/src/mixins/input-button-wrapper-mixin.js @@ -22,7 +22,6 @@ export default { }, lastValuePushedToGa: [String, Number], setLastValuePushedToGa: Function, - shouldPushClickEventToGAOnMount: Boolean, }, computed: { selectedValue: { From cf14826a94b54b1b6034396bc54224203abdce79 Mon Sep 17 00:00:00 2001 From: Katie Date: Fri, 14 Oct 2022 15:24:55 -0400 Subject: [PATCH 47/56] CSR-762 Prevent pushing GA click when tabbing through preloaded page with radio buttons --- src/common-components/base-input-button/base-input-button.vue | 1 + 1 file changed, 1 insertion(+) 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 e58e826cc..767d96649 100644 --- a/src/common-components/base-input-button/base-input-button.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -143,6 +143,7 @@ export default { this.pushClickEventToGA(); } else { if ( + this.valueToEmit && !this.isValueSelectedOnClick && this.isChecked && this.lastValuePushedToGa != this.value From 9ee87f343782ec0e84ef085e4c22c27120096600 Mon Sep 17 00:00:00 2001 From: Katie Date: Fri, 14 Oct 2022 15:29:11 -0400 Subject: [PATCH 48/56] CSR-762 Fix null check --- src/common-components/base-input-button/base-input-button.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 767d96649..fa4db2647 100644 --- a/src/common-components/base-input-button/base-input-button.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -143,7 +143,7 @@ export default { this.pushClickEventToGA(); } else { if ( - this.valueToEmit && + this.valueToEmit !== null && !this.isValueSelectedOnClick && this.isChecked && this.lastValuePushedToGa != this.value From b2a81875d2f37d94f5191170e5176eb002679e10 Mon Sep 17 00:00:00 2001 From: Katie Date: Fri, 14 Oct 2022 15:51:55 -0400 Subject: [PATCH 49/56] CSR-762 Use shared props between base-input-button and input-button-wrapper-mixin --- .../base-input-button/base-input-button.vue | 29 ++---------------- .../button-functionality-props.js | 30 +++++++++++++++++++ src/mixins/input-button-wrapper-mixin.js | 15 ++-------- 3 files changed, 35 insertions(+), 39 deletions(-) create mode 100644 src/common-components/base-input-button/button-functionality-props.js 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 fa4db2647..0792333a6 100644 --- a/src/common-components/base-input-button/base-input-button.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -30,39 +30,14 @@ import { handleInputFocus, handleInputBlur, } from "@/helpers/analytics-helper"; -import inputButtonWrapperMixin from "../../mixins/input-button-wrapper-mixin"; +import { inputButtonProps } from "@/common-components/base-input-button/button-functionality-props"; export default { name: "base-input-button", props: { - // ...inputButtonWrapperMixin.props - value: { - type: [String, Number], - required: true, - }, - modelValue: { - type: [Array, String, Number], - required: true, - }, - isMultiSelect: Boolean, - groupName: { - type: String, - required: true, - }, - validationRules: { - type: String, - default: "", - }, + ...inputButtonProps, buttonWrapperClasses: [String, Array, Object], inputClasses: [String, Array, Object], - valueToLogType: String, - selectOnKeypress: { - type: Boolean, - default: true, - }, - isRequired: Boolean, - lastValuePushedToGa: [String, Number], - setLastValuePushedToGa: Function, }, data() { return { diff --git a/src/common-components/base-input-button/button-functionality-props.js b/src/common-components/base-input-button/button-functionality-props.js new file mode 100644 index 000000000..9bc6aeb25 --- /dev/null +++ b/src/common-components/base-input-button/button-functionality-props.js @@ -0,0 +1,30 @@ +export const inputButtonProps = { + value: { + type: [String, Number], + required: true, + }, + modelValue: { + type: [Array, String, Number], + required: true, + }, + isMultiSelect: Boolean, + groupName: { + type: String, + required: true, + }, + validationRules: { + type: String, + default: "", + }, + valueToLogType: String, + isRequired: { + type: Boolean, + default: true, + }, + lastValuePushedToGa: [String, Number], + setLastValuePushedToGa: Function, + selectOnKeypress: { + type: Boolean, + default: true, + }, +} \ No newline at end of file diff --git a/src/mixins/input-button-wrapper-mixin.js b/src/mixins/input-button-wrapper-mixin.js index 628ccec96..866e5d1d6 100644 --- a/src/mixins/input-button-wrapper-mixin.js +++ b/src/mixins/input-button-wrapper-mixin.js @@ -1,9 +1,8 @@ +import { inputButtonProps } from "@/common-components/base-input-button/button-functionality-props"; + export default { props: { - modelValue: [Array, String, Number], - value: [String, Number], - isMultiSelect: Boolean, - groupName: String, + ...inputButtonProps, buttonLabel: [Number, String], buttonLabelSubCopy: String, buttonImage: String, @@ -13,15 +12,7 @@ export default { }, textPosition: String, screenReaderOnlyText: String, - valueToLogType: String, - validationRules: String, isWide: Boolean, - isRequired: { - type: Boolean, - default: true, - }, - lastValuePushedToGa: [String, Number], - setLastValuePushedToGa: Function, }, computed: { selectedValue: { From c70bbf665cc75a78b20e4b3b69b491da5cd75eb9 Mon Sep 17 00:00:00 2001 From: Katie Date: Mon, 17 Oct 2022 08:27:25 -0400 Subject: [PATCH 50/56] CSR-762 Cleanup --- .../base-input-button/base-input-button.spec.js | 2 -- src/common-components/button-question/button-question.vue | 1 - .../vehicle-damage/side-door-options/side-door-options.vue | 2 +- .../windshield-options/windshield-options.vue | 6 +++--- src/store/index.js | 7 ++----- 5 files changed, 6 insertions(+), 12 deletions(-) diff --git a/src/common-components/base-input-button/base-input-button.spec.js b/src/common-components/base-input-button/base-input-button.spec.js index 37e553391..ed76b319d 100644 --- a/src/common-components/base-input-button/base-input-button.spec.js +++ b/src/common-components/base-input-button/base-input-button.spec.js @@ -473,8 +473,6 @@ describe.skip("baseInputButton.vue", () => { }); }); -// TODO KO look at how I tested groups of these in SFA (making sure selecting one radio changes the value, etc, that this acts like a regular input aside from a different emitted event) - function setupMocks({ mockData = {}, shouldShallowMount = true }) { const baseInputButtonWrapper = { components: { baseInputButton }, diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 1b75e8d9d..45616f849 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -177,7 +177,6 @@ export default { } }, buttonsInfo() { - // TODO KO temporary. It should always just be an array return (Array.isArray(this.answers) ? this.answers : [])?.map( (answer) => ({ buttonLabel: answer.buttonLabel ?? answer.Text ?? answer, diff --git a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue index 9af96c117..99f644d6f 100644 --- a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue +++ b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue @@ -57,7 +57,7 @@ export default ({ name: "sideDoorOptions", props: { groupName: String, - modelValue: [Array, Object], // TODO Does this take an array? + modelValue: Object, selectedDamageLocations: Array, cmsWidgetName: String, }, diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue index 31b008760..8081bb2b2 100644 --- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue +++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue @@ -57,8 +57,8 @@ defineRule("windshield-replace-options-required", required(errorMessages.WINSHIE defineRule("check-for-repair-and-replace", (selectedWindshieldDamageType, selectedDamageLocations) => { return selectedWindshieldDamageType.toString() != damageLocationsSelected.REPAIR || - (!selectedDamageLocations.includes(damageLocationsSelected.WINDSHIELD) && !selectedDamageLocations[0]?.includes(damageLocationsSelected.WINDSHIELD)) || - (selectedDamageLocations.length === 1 && selectedDamageLocations[0].length === 1); + (!selectedDamageLocations.includes(damageLocationsSelected.WINDSHIELD) && !selectedDamageLocations[0]?.includes(damageLocationsSelected.WINDSHIELD)) || + (selectedDamageLocations[0].length === 1); }); defineRule("repair-only", (value) => { return value.toString() === damageLocationsSelected.REPAIR; @@ -83,7 +83,7 @@ export default ({ }, props: { - modelValue: [Object, String], // TODO Does this take a string? + modelValue: Object, selectedDamageLocations: Array, hasRepairReplaceConflict: Boolean, hasSplitSingleConflict: Boolean, diff --git a/src/store/index.js b/src/store/index.js index 1d6e68482..8d2f6b309 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1044,11 +1044,8 @@ export const actions = { ); 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; + + const isChipCountTheSame = selectedWindshieldChipCount === context.state.order.damage.numberOfChips; const isDamageChanging = !isGlassToReplaceTheSame || From bdefe442359f9f073fc4479508f11018eb109860 Mon Sep 17 00:00:00 2001 From: Katie Date: Mon, 17 Oct 2022 08:44:48 -0400 Subject: [PATCH 51/56] CSR-762 Fix back glass bug --- .../replace-options-question/replace-options-question.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue index d4da8cd1b..503c30cb8 100644 --- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue +++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue @@ -25,7 +25,7 @@ export default ({ name: "replaceOptionsQuestion", data(){ return { - replaceOptions: [], + replaceOptions: this.isMultiSelect ? [] : "", } }, props: { @@ -46,7 +46,7 @@ export default ({ updateSelectedValues() { // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) { - this.selectedValues = [this.answersToDisplay[0].Name]; + this.selectedValues = this.isMultiSelect ? [this.answersToDisplay[0].Name] : this.answersToDisplay[0].Name; } }, }, @@ -91,7 +91,7 @@ export default ({ }, shouldDisplayReplaceOptionsQuestion(shouldDisplayReplaceOptionsQuestion) { if (!shouldDisplayReplaceOptionsQuestion) { - this.selectedValues = []; + this.selectedValues = this.isMultiSelect ? [] : ""; } } }, From 0e3b1d79b830ca15b05cd335a22c7fd273ea11aa Mon Sep 17 00:00:00 2001 From: Katie Date: Mon, 17 Oct 2022 09:36:19 -0400 Subject: [PATCH 52/56] CSR-762 Remove redundant property' --- .../base-input-button/base-input-button.vue | 11 ++++------- .../base-input-button/button-functionality-props.js | 4 ++-- .../button-question/button-question.vue | 5 ----- .../vehicle-make/make-question/make-question.vue | 1 - .../vehicle-model/model-question/model-question.vue | 1 - .../vehicle-style/style-question/style-question.vue | 1 - .../vehicle-year/year-question/year-question.vue | 1 - src/mixins/analytics-mixin.js | 1 - 8 files changed, 6 insertions(+), 19 deletions(-) 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 0792333a6..71da03d85 100644 --- a/src/common-components/base-input-button/base-input-button.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -26,10 +26,7 @@ import { useField } from "vee-validate"; import { toRef } from "vue"; import { queryStrings } from "@/constants/query-strings"; -import { - handleInputFocus, - handleInputBlur, -} from "@/helpers/analytics-helper"; +import { handleInputFocus, handleInputBlur } from "@/helpers/analytics-helper"; import { inputButtonProps } from "@/common-components/base-input-button/button-functionality-props"; export default { @@ -72,9 +69,9 @@ export default { ); break; case this.eventTypes.CHANGE: - this.selectOnKeypress - ? this.handleClick(e) - : this.handleSelectionChange(e); + this.selectingInitiatesLoad + ? this.handleSelectionChange(e) + : this.handleClick(e); break; } } diff --git a/src/common-components/base-input-button/button-functionality-props.js b/src/common-components/base-input-button/button-functionality-props.js index 9bc6aeb25..b9a63c925 100644 --- a/src/common-components/base-input-button/button-functionality-props.js +++ b/src/common-components/base-input-button/button-functionality-props.js @@ -23,8 +23,8 @@ export const inputButtonProps = { }, lastValuePushedToGa: [String, Number], setLastValuePushedToGa: Function, - selectOnKeypress: { + selectingInitiatesLoad: { type: Boolean, - default: true, + default: false, }, } \ No newline at end of file diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 45616f849..56ab5abd7 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -49,7 +49,6 @@ :isWide="isWide" :validationRules="validationRules" :textPosition="textPosition" - :selectOnKeypress="selectOnKeypress" :lastValuePushedToGa="lastValuePushedToGa" :setLastValuePushedToGa="setLastValuePushedToGa" v-model="selectedValues" @@ -117,10 +116,6 @@ export default { suppressError: Boolean, useTextForValue: Boolean, valueToLogType: String, - selectOnKeypress: { - type: Boolean, - default: true, - }, }, data() { return { diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue index c2a7cd2d2..28246814f 100644 --- a/src/layouts/vehicle-make/make-question/make-question.vue +++ b/src/layouts/vehicle-make/make-question/make-question.vue @@ -8,7 +8,6 @@ groupName="ChooseVehicleMake" textPosition="text-start" v-model="selectedValue" - :selectOnKeypress="false" isRequired /> diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue index 393df6fc9..bc20bdc6a 100644 --- a/src/layouts/vehicle-model/model-question/model-question.vue +++ b/src/layouts/vehicle-model/model-question/model-question.vue @@ -8,7 +8,6 @@ groupName="ChooseVehicleModel" textPosition="text-start" v-model="selectedValue" - :selectOnKeypress="false" isRequired /> diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue index bf8fd3d07..806f7ac41 100644 --- a/src/layouts/vehicle-style/style-question/style-question.vue +++ b/src/layouts/vehicle-style/style-question/style-question.vue @@ -8,7 +8,6 @@ groupName="ChooseVehicleStyle" textPosition="text-start" v-model="selectedValue" - :selectOnKeypress="false" isRequired /> diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue index 06af5ce64..6851f282c 100644 --- a/src/layouts/vehicle-year/year-question/year-question.vue +++ b/src/layouts/vehicle-year/year-question/year-question.vue @@ -8,7 +8,6 @@ groupName="ChooseVehicleYear" textPosition="text-start" v-model="selectedValue" - :selectOnKeypress="false" isRequired /> diff --git a/src/mixins/analytics-mixin.js b/src/mixins/analytics-mixin.js index 4ff24f968..e773c6a01 100644 --- a/src/mixins/analytics-mixin.js +++ b/src/mixins/analytics-mixin.js @@ -49,7 +49,6 @@ export default { const currentPageName = getPageNameByQueryString(); const labelToLog = getValueToLog(label, valueToLogType); - console.log("PUSHING: ", labelToLog) const eventToBePushed = { 'event': GaEvents.GENERIC_EVENT, 'category': category, From 132f39e2de2446a16ccfc18dbc65ba955527b6b4 Mon Sep 17 00:00:00 2001 From: Katie Date: Mon, 17 Oct 2022 11:27:23 -0400 Subject: [PATCH 53/56] CSR-762 Rename and move around GA logic --- src/App.vue | 6 ++-- .../base-input-button/base-input-button.vue | 8 ++--- src/helpers/analytics-helper.js | 34 ------------------- src/helpers/input-button-focus-helper.js | 34 +++++++++++++++++++ 4 files changed, 41 insertions(+), 41 deletions(-) delete mode 100644 src/helpers/analytics-helper.js create mode 100644 src/helpers/input-button-focus-helper.js diff --git a/src/App.vue b/src/App.vue index e43e85c84..7c7bfd559 100644 --- a/src/App.vue +++ b/src/App.vue @@ -5,17 +5,17 @@ name="route-fade" mode="out-in"> - + 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 71da03d85..1fb1f9bc5 100644 --- a/src/common-components/base-input-button/base-input-button.vue +++ b/src/common-components/base-input-button/base-input-button.vue @@ -26,7 +26,7 @@ import { useField } from "vee-validate"; import { toRef } from "vue"; import { queryStrings } from "@/constants/query-strings"; -import { handleInputFocus, handleInputBlur } from "@/helpers/analytics-helper"; +import { handleButtonComponentFocus, handleInputComponentBlur } from "@/helpers/input-button-focus-helper"; import { inputButtonProps } from "@/common-components/base-input-button/button-functionality-props"; export default { @@ -100,14 +100,14 @@ export default { this.$emit("update:modelValue", this.valueToEmit); }, handleFocus() { - handleInputFocus({ + handleButtonComponentFocus({ groupName: this.groupName, }); }, handleBlur() { - handleInputBlur({ + handleInputComponentBlur({ groupName: this.groupName, - onFocusCallback: this.handlePushClickEventToGACheck, + onButtonQuestionLostFocusCallback: this.handlePushClickEventToGACheck, }); }, handlePushClickEventToGACheck(source) { diff --git a/src/helpers/analytics-helper.js b/src/helpers/analytics-helper.js deleted file mode 100644 index b03d86191..000000000 --- a/src/helpers/analytics-helper.js +++ /dev/null @@ -1,34 +0,0 @@ -let lastFocusedInputGroupName = ""; -let onFocusCallback = null; - -const handleChildFocus = (e) => { - const targetType = e.target.type; - if (targetType !== "radio" && targetType !== "checkbox") { - handleInputFocus({ - groupName: null, - }); - } -} - -const handleInputFocus = (e) => { - if ( - e && - lastFocusedInputGroupName !== e.groupName && - onFocusCallback - ) { - onFocusCallback(); - } -} - -const handleInputBlur = (e) => { - if (e) { - lastFocusedInputGroupName = e.groupName; - onFocusCallback = e.onFocusCallback; - } -} - -export { - handleChildFocus, - handleInputFocus, - handleInputBlur -} \ No newline at end of file diff --git a/src/helpers/input-button-focus-helper.js b/src/helpers/input-button-focus-helper.js new file mode 100644 index 000000000..77bd175ad --- /dev/null +++ b/src/helpers/input-button-focus-helper.js @@ -0,0 +1,34 @@ +let lastFocusedInputGroupName = ""; +let onButtonQuestionLostFocusCallback = null; + +const handleAnyComponentFocus = (e) => { + const targetType = e.target.type; + if (targetType !== "radio" && targetType !== "checkbox") { + invokeButtonQuestionLostFocusCallback(); + } +}; + +const handleButtonComponentFocus = (e) => { + if (e && lastFocusedInputGroupName !== e.groupName) { + invokeButtonQuestionLostFocusCallback(); + } +}; + +const handleInputComponentBlur = (e) => { + if (e) { + lastFocusedInputGroupName = e.groupName; + onButtonQuestionLostFocusCallback = e.onButtonQuestionLostFocusCallback; + } +}; + +const invokeButtonQuestionLostFocusCallback = () => { + if (onButtonQuestionLostFocusCallback) { + onButtonQuestionLostFocusCallback(); + } +}; + +export { + handleAnyComponentFocus, + handleButtonComponentFocus, + handleInputComponentBlur, +}; From ce5727a75081032749268dbcebeaeea8883d5456 Mon Sep 17 00:00:00 2001 From: Katie Date: Mon, 17 Oct 2022 11:33:55 -0400 Subject: [PATCH 54/56] CSR-762 Name change, add comments --- src/App.vue | 2 +- .../base-input-button/base-input-button.vue | 2 +- ...on-focus-helper.js => button-question-focus-helper.js} | 8 ++++++++ 3 files changed, 10 insertions(+), 2 deletions(-) rename src/helpers/{input-button-focus-helper.js => button-question-focus-helper.js} (70%) diff --git a/src/App.vue b/src/App.vue index 7c7bfd559..9ee03e8dd 100644 --- a/src/App.vue +++ b/src/App.vue @@ -11,7 +11,7 @@