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

CSR-762 GA WIP, think it's working but needs more testing

Browse source
This commit is contained in:
Katie 2022-10-04 14:43:43 -04:00
parent a669556c80
commit a6d8a5d8d1
4 changed files with 115 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.prettierrc
View file

@ -1,4 +1,4 @@
{
"tabWidth": 2,
"tabWidth": 4,
"bracketSameLine": true
}

69
src/App.vue
View file

@ -1,36 +1,57 @@
<template>
<router-view v-slot="{ Component }">
<transition :duration="{ enter: 200, leave: 200 }" name="route-fade" mode="out-in">
<!-- The above durations should be kept in sync with the global css class "fade-on-route-transition" -->
<component :is="Component" @inputFocus="handleFocus" @input-blur="handleBlur"/>
</transition>
</router-view>
<router-view v-slot="{ Component }">
lastFocusedInputGroupName: {{ lastFocusedInputGroupName }}
<transition
:duration="{ enter: 200, leave: 200 }"
name="route-fade"
mode="out-in">
<!-- The above durations should be kept in sync with the global css class "fade-on-route-transition" -->
<component :is="Component" @focusin="handleChildFocus" />
</transition>
</router-view>
</template>
<script>
export default {
export default {
name: "app",
data() {
return {
lastFocusedInputGroupName: "",
onFocusCallback: null
}
return {
lastFocusedInputGroupName: "",
onFocusCallback: null,
};
},
methods: {
handleFocus(e) {
console.log("app focus: ", e)
},
handleBlur(e) {
console.log("app blur: ", e)
},
}
}
handleChildFocus(e) {
const targetType = e.target.type;
if (targetType !== "radio") {
this.handleInputFocus({
groupName: null
});
}
},
handleInputFocus(e) {
if (
e &&
this.lastFocusedInputGroupName !== e.groupName &&
this.onFocusCallback
) {
this.onFocusCallback();
}
},
handleInputBlur(e) {
if (e) {
this.lastFocusedInputGroupName = e.groupName;
this.onFocusCallback = e.onFocusCallback;
}
},
},
};
</script>
<style lang="scss">
@import "./node_modules/bootstrap/scss/bootstrap";
@import "@/styles/common-styles.scss";
@import "@/styles/common-typography-styles.scss";
@import "@/styles/common-error-styles.scss";
@import "@/styles/common-animations.scss";
@import "./node_modules/bootstrap/scss/bootstrap";
@import "@/styles/common-styles.scss";
@import "@/styles/common-typography-styles.scss";
@import "@/styles/common-error-styles.scss";
@import "@/styles/common-animations.scss";
</style>

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

@ -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,

62
src/mixins/base-mixin.js
View file

@ -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() {