jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSR-762 GA WIP

Browse source
This commit is contained in:
Katie 2022-10-06 12:57:40 -04:00
parent 6e350ac050
commit ee53cac9e3
4 changed files with 260 additions and 119 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/App.vue
View file

@ -12,6 +12,8 @@
</template> </template>
<script> <script>
// TODO KO glass-part-question has nested button questions
// TODO KO selectedValues - make consistent for checkbox and radio if possible
export default { export default {
name: "app", name: "app",
data() { data() {
@ -23,13 +25,18 @@ export default {
methods: { methods: {
handleChildFocus(e) { handleChildFocus(e) {
const targetType = e.target.type; const targetType = e.target.type;
if (targetType !== "radio") { // console.log(targetType)
if (targetType !== "radio" && targetType !== "checkbox") {
this.handleInputFocus({ this.handleInputFocus({
groupName: null groupName: null
}); });
} }
}, },
handleInputFocus(e) { handleInputFocus(e) {
// console.log("app handleInputFocus: ", {
// lastFocusedInputGroupName: this.lastFocusedInputGroupName,
// groupName: e.groupName,
// })
if ( if (
e && e &&
this.lastFocusedInputGroupName !== e.groupName && this.lastFocusedInputGroupName !== e.groupName &&
@ -39,6 +46,9 @@ export default {
} }
}, },
handleInputBlur(e) { handleInputBlur(e) {
// console.log("app handleInputBlur: ", {
// groupName: e.groupName,
// })
if (e) { if (e) {
this.lastFocusedInputGroupName = e.groupName; this.lastFocusedInputGroupName = e.groupName;
this.onFocusCallback = e.onFocusCallback; this.onFocusCallback = e.onFocusCallback;

157
src/common-components/base-input-button/base-input-button.vue
View file

@ -2,6 +2,8 @@
<label <label
:class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]" :class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]"
:for="buttonId" :for="buttonId"
@focusin="handleFocus"
@focusout="handleBlur"
@mousedown.left="handleEventAction('click', $event)"> @mousedown.left="handleEventAction('click', $event)">
<input <input
:type="inputType" :type="inputType"
@ -59,10 +61,20 @@ export default {
default: true, default: true,
}, },
isRequired: Boolean, isRequired: Boolean,
lastValuePushedToGa: {
type: [String, Number],
required: true,
},
// fullName: {
// type: String,
// default: "",
// required: true,
// },
}, },
data() { data() {
return { return {
valueToEmit: null, valueToEmit: null,
// lastValuePushedToGa: null,
}; };
}, },
mounted() { mounted() {
@ -72,19 +84,12 @@ export default {
}, },
methods: { methods: {
handleEventAction(eventType, e) { handleEventAction(eventType, e) {
const eventTypes = {
CHANGE: "change",
ENTER: "enter",
SPACE: "space",
CLICK: "click",
};
// console.log("Handling: ", eventType) // console.log("Handling: ", eventType)
if (this.isMultiSelect) { if (this.isMultiSelect) {
switch (eventType) { switch (eventType) {
case eventTypes.ENTER: case this.eventTypes.ENTER:
case eventTypes.CHANGE: case this.eventTypes.CHANGE:
this.handleClick(e); this.handleClick(e);
// this.dispatchStoreAction( // this.dispatchStoreAction(
// gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP, // gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP,
@ -92,26 +97,34 @@ export default {
// false // false
// ); // );
// this.pushClickEventToGA(); // even if it's pushing from here, it needs to keep track
// of lastFocusedInputGroupName and such
this.pushClickEventToGA();
break; break;
} }
} else { } else {
switch (eventType) { switch (eventType) {
case eventTypes.CLICK: // TODO KO pushClickEventToGa? case this.eventTypes.CLICK: // TODO KO pushClickEventToGa?
this.pushClickEventToGA(); case this.eventTypes.ENTER:
// fallthrough case this.eventTypes.SPACE:
case eventTypes.ENTER:
case eventTypes.SPACE:
this.handleClick(e); this.handleClick(e);
// this.pushClickEventToGAIfReady(); // this.pushClickEventToGAIfReady();
break; break;
case eventTypes.CHANGE: case this.eventTypes.CHANGE:
this.selectOnKeypress this.selectOnKeypress
? this.handleClick(e) ? this.handleClick(e)
: this.handleSelectionChange(e); : this.handleSelectionChange(e);
break; break;
} }
if (eventType === this.eventTypes.CLICK) {
console.log("PUSH FROM RADIO CLICK");
this.pushClickEventToGA();
}
} }
// this.pushClickEventToGA(eventType);
}, },
handleSelectionChange(e) { handleSelectionChange(e) {
if ( if (
@ -142,37 +155,76 @@ export default {
}, },
handleClick(e) { handleClick(e) {
this.handleSelectionChange(e); this.handleSelectionChange(e);
// console.log("addEventToBus: ", this.value?.toString()) console.log("inputButtonClicked");
eventBus.readAndPopEventFromBus("GA", "click") this.$emit("inputButtonClicked", {
eventBus.addEventToBus("GA", "click", { selectedAnswers: this.valueToEmit,
category: this.$route.query[queryStrings.FMG_PAGE], lastValuePushedToGa: this.lastValuePushedToGa,
action: this.GaActions.CLICKED,
label: this.value?.toString(),
pushToLogApp: true,
valueToLogType: this.valueToLogType,
}); });
this.$emit("inputButtonClicked", this.valueToEmit);
}, },
pushClickEventToGA(value) { onFocusCallbackForRoot() {
// const lastFocusedInputGroup = // console.log("onFocusCallbackForRoot: ", {
// this.$store.getters.gaClickInformation.lastFocusedInputGroup; // isValueSelectedOnClick: this.isValueSelectedOnClick,
// this.dispatchStoreAction( // isChecked: this.isChecked,
// gaStoreActions.UPDATE_FIRED_GA_CLICK_EVENT_VALUES, // value: this.value,
// { // lastValuePushedToGa: this.lastValuePushedToGa,
// groupName: lastFocusedInputGroup, // });
// value: value ?? this.value, // if (
// }, // !this.isValueSelectedOnClick &&
// ); // this.isChecked &&
// this.lastValuePushedToGa != this.value
// ) {
// console.log("PUSH FROM ROOT CALLBACK");
// this.pushClickEventToGA();
// }
console.log("BIB") this.pushClickEventToGA();
this.pushEventToGA(
this.$route.query[queryStrings.FMG_PAGE],
this.GaActions.CLICKED,
value?.toString() ?? this.value?.toString(),
true,
this.valueToLogType
);
}, },
handleFocus(e) {
// console.log("FOCUS: ", this.groupName);
// console.log("FOCUS :", {
// groupName: this.groupName,
// value: this.value,
// });
this.$root.handleInputFocus({
groupName: this.groupName,
});
},
handleBlur(e) {
// console.log("BLUR: ", this.groupName);
// console.log("BLUR :", {
// groupName: this.groupName,
// value: this.value
// })
this.$root.handleInputBlur({
groupName: this.groupName,
onFocusCallback: this.onFocusCallbackForRoot,
});
},
pushClickEventToGA(eventType) {
if (this.isMultiSelect || !eventType) {
console.log("PUSHING: ", this.value);
} else {
if (eventType === this.eventTypes.CLICK) {
console.log("PUSHING: ", this.value);
} else {
if (
this.isChecked &&
this.lastValuePushedToGa != this.value
) {
console.log("PUSHING: ", this.value);
}
}
}
// this.pushEventToGA(
// this.$route.query[queryStrings.FMG_PAGE],
// this.GaActions.CLICKED,
// this.value?.toString(),
// true,
// this.valueToLogType
// );
},
// handleBlur() { // handleBlur() {
// // this.dispatchStoreAction( // // this.dispatchStoreAction(
// // gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP, // // gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP,
@ -257,6 +309,25 @@ export default {
.toString() .toString()
?.replace(" ", "-")}`; ?.replace(" ", "-")}`;
}, },
isValueSelectedOnClick() {
return this.isMultiSelect || this.selectingInitiatesLoad;
},
eventTypes() {
return {
CHANGE: "change",
ENTER: "enter",
SPACE: "space",
CLICK: "click",
};
},
// lastValuePushedToGaTest: {
// get: () => {
// return this.lastValuePushedToGa;
// },
// set: () => {
// this.$emit("valuePushedToGa", this.value);
// },
// },
}, },
setup(props) { setup(props) {
const inputType = props.isMultiSelect ? "checkbox" : "radio"; const inputType = props.isMultiSelect ? "checkbox" : "radio";

171
src/common-components/button-question/button-question.vue
View file

@ -34,6 +34,7 @@
}} }}
</legend> </legend>
<div :class="getComponentLoopWrapperClasses"> <div :class="getComponentLoopWrapperClasses">
lastValuePushedToGa: {{ lastValuePushedToGa }}<br />
<div <div
:class="getComponentWrapperClasses" :class="getComponentWrapperClasses"
v-for="answer in buttonsInfo" v-for="answer in buttonsInfo"
@ -48,6 +49,7 @@
:isMultiSelect="isMultiSelect" :isMultiSelect="isMultiSelect"
:value="answer.value" :value="answer.value"
:modelValue="modelValue" :modelValue="modelValue"
v-model:lastValuePushedToGa="lastValuePushedToGa"
:selectingInitiatesLoad="selectingInitiatesLoad" :selectingInitiatesLoad="selectingInitiatesLoad"
:isWide="isWide" :isWide="isWide"
:validationRules="validationRules" :validationRules="validationRules"
@ -58,8 +60,8 @@
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<div <div
v-if=" v-if="
typeof primaryValue == 'string' && typeof selectedValues == 'string' &&
primaryValue == answer.value selectedValues == answer.value
"> ">
<slot></slot> <slot></slot>
</div> </div>
@ -126,9 +128,10 @@ export default {
}, },
data() { data() {
return { return {
primaryValue: "", selectedValues: "",
// lastFocusedInputGroup: "", // lastFocusedInputGroup: "",
lastPushedGaEventValue: null, lastPushedGaEventValue: null,
mostRecentlySelectedValue: null,
}; };
}, },
computed: { computed: {
@ -200,9 +203,9 @@ export default {
}) })
); );
}, },
isValueSelectedOnClick() { // isValueSelectedOnClick() {
return this.isMultiSelect || this.selectingInitiatesLoad; // return this.isMultiSelect || this.selectingInitiatesLoad;
}, // },
}, },
methods: { methods: {
formatString(str) { formatString(str) {
@ -226,58 +229,118 @@ export default {
: this.formatString(answer.toString()); : this.formatString(answer.toString());
} }
}, },
handleAnswerChange(primaryAnswerValue) { handleAnswerChange({ selectedAnswers, mostRecentlySelectedValue }) {
this.primaryValue = primaryAnswerValue; this.selectedValues = selectedAnswers;
this.mostRecentlySelectedValue = mostRecentlySelectedValue;
if (this.isValueSelectedOnClick) { // if (this.isValueSelectedOnClick) {
this.pushClickEventToGA(); // this.pushClickEventToGA();
} // }
this.$emit("buttonQuestionChange", primaryAnswerValue); this.$emit("buttonQuestionChange", selectedAnswers);
this.$emit("update:modelValue", primaryAnswerValue); this.$emit("update:modelValue", selectedAnswers);
}, },
pushClickEventToGA() { /////////////////////////////
// const valueToPushToGa = // onFocusCallbackForRoot() {
// value?.toString() ?? this.primaryValue?.toString(); // console.log("onFocusCallbackForRoot: ", {
// isValueSelectedOnClick: this.isValueSelectedOnClick,
// isChecked: this.isChecked,
// value: this.value,
// lastValuePushedToGa: this.lastValuePushedToGa,
// });
// if (
// !this.isValueSelectedOnClick &&
// // this.isChecked &&
// this.lastValuePushedToGa != this.mostRecentlySelectedValue
// ) {
// console.log("PUSH FROM ROOT CALLBACK");
// this.pushClickEventToGA();
// }
// },
// handleFocus(e) {
// // console.log("FOCUS :", {
// // groupName: this.groupName,
// // value: this.value,
// // });
// this.$root.handleInputFocus({
// groupName: this.groupName,
// });
// },
// handleBlur(e) {
// // console.log("BLUR :", {
// // groupName: this.groupName,
// // value: this.value
// // })
// this.$root.handleInputBlur({
// groupName: this.groupName,
// onFocusCallback: this.onFocusCallbackForRoot,
// });
// },
// pushClickEventToGA() {
// // const lastFocusedInputGroup =
// // this.$store.getters.gaClickInformation.lastFocusedInputGroup;
// // this.dispatchStoreAction(
// // gaStoreActions.UPDATE_FIRED_GA_CLICK_EVENT_VALUES,
// // {
// // groupName: lastFocusedInputGroup,
// // value: value ?? this.value,
// // },
// // );
// console.log("pushing") // this.lastValuePushedToGa = this.mostRecentlySelectedValue;
const event = eventBus.readAndPopEventFromBus("GA", "click"); // console.log("BIB");
const valueToPushToGa = event?.label; // this.pushEventToGA(
// console.log({ // this.$route.query[queryStrings.FMG_PAGE],
// valueToPushToGa, // this.GaActions.CLICKED,
// lastPushedGaEventValue: this.lastPushedGaEventValue, // this.mostRecentlySelectedValue?.toString(),
// }); // true,
if ( // this.valueToLogType
(valueToPushToGa && // );
valueToPushToGa !== this.lastPushedGaEventValue) || // },
this.isValueSelectedOnClick //////////////////////////////////
) { // pushClickEventToGA() {
this.lastPushedGaEventValue = valueToPushToGa; // // const valueToPushToGa =
this.pushEventToGA( // // value?.toString() ?? this.selectedValues?.toString();
event.category,
event.action, // // console.log("pushing")
valueToPushToGa, // const event = eventBus.readAndPopEventFromBus("GA", "click");
event.pushToLogType, // const valueToPushToGa = event?.label;
event.valueToLogType // console.log({
); // valueToPushToGa,
} // lastPushedGaEventValue: this.lastPushedGaEventValue,
}, // });onFocusCallbackForRoot() {
onFocusCallbackForRoot() { // console.log("Diff: ", this.isValueSelectedOnClick)
if (!this.isValueSelectedOnClick) { // if (!this.isValueSelectedOnClick) {
this.pushClickEventToGA(); // this.pushClickEventToGA();
} // }
}, // },
handleFocus(e) { // handleFocus(e) {
this.$root.handleInputFocus({ // this.$root.handleInputFocus({
groupName: this.groupName, // groupName: this.groupName,
}); // });
}, // },
handleBlur(e) { // handleBlur(e) {
this.$root.handleInputBlur({ // this.$root.handleInputBlur({
groupName: this.groupName, // groupName: this.groupName,
onFocusCallback: this.onFocusCallbackForRoot, // onFocusCallback: this.onFocusCallbackForRoot,
}); // });
}, // },
// if (
// (event &&
// valueToPushToGa !== this.lastPushedGaEventValue) ||
// this.isValueSelectedOnClick
// ) {
// this.lastPushedGaEventValue = valueToPushToGa;
// this.pushEventToGA(
// event.category,
// event.action,
// valueToPushToGa,
// event.pushToLogType,
// event.valueToLogType
// );
// }
// },
//
}, },
components: { components: {
listButton, listButton,

39
src/mixins/input-button-wrapper-mixin.js
View file

@ -19,33 +19,30 @@ export default {
isRequired: { isRequired: {
type: Boolean, type: Boolean,
default: true default: true
} },
}, // pushClickEventToGA: Function,
data() { lastValuePushedToGa: [String, Number]
return {
selectedValue: null,
};
},
mounted() {
this.selectedValue = this.modelValue;
}, },
methods: { methods: {
handleAnswerChange(e) { handleAnswerChange(e) {
if (this.preHandleAnswerChange) { if (this.preHandleAnswerChange) {
this.preHandleAnswerChange(e) this.preHandleAnswerChange(e.selectedAnswers)
} }
this.$emit("change", e); this.$emit("change", e.selectedAnswers);
// this.$emit("update:lastValuePushedToGa", e.lastValuePushedToGa);
}, },
}, },
computed: { // computed: {
selectedValue: { // selectedValueHandler: {
get: () => { // get: () => {
return this.modelValue; // return this.modelValue;
}, // },
set: function(newValue) { // set: function(newValue) {
this.$emit("update:modelValue", newValue); // this.$emit("update:modelValue", newValue);
} // }
} // },
}, // },
}; };