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

Merge branch 'feature/CSR-762-GA' into feature/CSR-762-tests

Browse source
This commit is contained in:
Katie 2022-10-04 14:45:49 -04:00
commit f634d8ced1
12 changed files with 234 additions and 252 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
}

63
src/App.vue
View file

@ -1,16 +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" />
</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 {
name: "app",
data() {
return {
lastFocusedInputGroupName: "",
onFocusCallback: null,
};
},
methods: {
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>

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

@ -2,8 +2,7 @@
<label
:class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]"
:for="buttonId"
@mousedown.left="handleEventAction('click', $event)"
@keyup="handleKeyboardNavigation">
@mousedown.left="handleEventAction('click', $event)">
<input
:type="inputType"
:id="buttonId"
@ -13,7 +12,6 @@
:aria-required="isRequired"
:value="value"
:checked="isChecked"
@blur="handleBlur"
@keypress.space="handleEventAction('space', $event)"
@keypress.enter="handleEventAction('enter', $event)"
@change="handleEventAction('change', $event)" />
@ -23,10 +21,10 @@
</template>
<script>
import { queryStrings } from "@/constants/query-strings";
// import { queryStrings } from "@/constants/query-strings";
import { useField } from "vee-validate";
import { toRef } from "vue";
import { gaStoreActions } from "../../constants/store-actions";
// import { gaStoreActions } from "../../constants/store-actions";
export default {
name: "base-input-button",
@ -86,13 +84,13 @@ export default {
case eventTypes.ENTER:
case eventTypes.CHANGE:
this.handleClick(e);
this.dispatchStoreAction(
gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP,
this.groupName,
false
);
// this.dispatchStoreAction(
// gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP,
// this.groupName,
// false
// );
this.pushClickEventToGA();
// this.pushClickEventToGA();
break;
}
} else {
@ -101,7 +99,7 @@ export default {
case eventTypes.ENTER:
case eventTypes.SPACE:
this.handleClick(e);
this.pushClickEventToGAIfReady();
// this.pushClickEventToGAIfReady();
break;
case eventTypes.CHANGE:
this.selectOnKeypress
@ -128,13 +126,13 @@ export default {
this.valueToEmit = this.value;
}
this.dispatchStoreAction(
gaStoreActions.UPDATE_CURRENTLY_SELECTED_VALUES,
{
groupName: this.groupName,
value: this.value,
},
);
// this.dispatchStoreAction(
// gaStoreActions.UPDATE_CURRENTLY_SELECTED_VALUES,
// {
// groupName: this.groupName,
// value: this.value,
// },
// );
this.handleChange(this.valueToEmit);
},
@ -142,90 +140,90 @@ export default {
this.handleSelectionChange(e);
this.$emit("buttonClicked", this.valueToEmit);
},
pushClickEventToGA(value) {
const lastFocusedInputGroup =
this.$store.getters.gaClickInformation.lastFocusedInputGroup;
this.dispatchStoreAction(
gaStoreActions.UPDATE_FIRED_GA_CLICK_EVENT_VALUES,
{
groupName: lastFocusedInputGroup,
value: value ?? this.value,
},
);
// pushClickEventToGA(value) {
// const lastFocusedInputGroup =
// this.$store.getters.gaClickInformation.lastFocusedInputGroup;
// // this.dispatchStoreAction(
// // gaStoreActions.UPDATE_FIRED_GA_CLICK_EVENT_VALUES,
// // {
// // groupName: lastFocusedInputGroup,
// // value: value ?? this.value,
// // },
// // );
this.pushEventToGA(
this.$route.query[queryStrings.FMG_PAGE],
this.GaActions.CLICKED,
value?.toString() ?? this.value?.toString(),
true,
this.valueToLogType
);
},
handleBlur() {
this.dispatchStoreAction(
gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP,
this.groupName,
false
);
this.dispatchStoreAction(
gaStoreActions.UPDATE_WAS_LAST_FOCUSED_INPUT_MULTISELECT,
this.isMultiSelect,
false
);
},
handleKeyboardNavigation(key) {
this.pushClickEventToGAIfReady(key);
},
pushClickEventToGAIfReady(event) {
const gaClickInformation = this.$store.getters.gaClickInformation;
const firedGaClickEventValues =
gaClickInformation.firedGaClickEventValues;
const currentlySelectedValues =
gaClickInformation.currentlySelectedValues;
const lastFocusedInputGroup =
gaClickInformation.lastFocusedInputGroup;
const wasLastFocusedInputMultiselect =
gaClickInformation.wasLastFocusedInputMultiselect;
// // this.pushEventToGA(
// // this.$route.query[queryStrings.FMG_PAGE],
// // this.GaActions.CLICKED,
// // value?.toString() ?? this.value?.toString(),
// // true,
// // this.valueToLogType
// // );
// },
// handleBlur() {
// // this.dispatchStoreAction(
// // gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP,
// // this.groupName,
// // false
// // );
// // this.dispatchStoreAction(
// // gaStoreActions.UPDATE_WAS_LAST_FOCUSED_INPUT_MULTISELECT,
// // this.isMultiSelect,
// // false
// // );
// },
// handleKeyboardNavigation(key) {
// this.pushClickEventToGAIfReady(key);
// },
// pushClickEventToGAIfReady(event) {
// const gaClickInformation = this.$store.getters.gaClickInformation;
// const firedGaClickEventValues =
// gaClickInformation.firedGaClickEventValues;
// const currentlySelectedValues =
// gaClickInformation.currentlySelectedValues;
// const lastFocusedInputGroup =
// gaClickInformation.lastFocusedInputGroup;
// const wasLastFocusedInputMultiselect =
// gaClickInformation.wasLastFocusedInputMultiselect;
const keyCode = event?.code;
// Keyboard navigation
if (keyCode) {
if (
!wasLastFocusedInputMultiselect &&
currentlySelectedValues[lastFocusedInputGroup] &&
firedGaClickEventValues[lastFocusedInputGroup] !=
currentlySelectedValues[lastFocusedInputGroup]
) {
if (keyCode === "Tab") {
this.pushClickEventToGA(
currentlySelectedValues[lastFocusedInputGroup]
);
} else if (keyCode?.includes("Arrow")) {
if (lastFocusedInputGroup != this.groupName) {
this.pushClickEventToGA(
currentlySelectedValues[lastFocusedInputGroup]
);
}
}
}
} else {
// Radio click
this.dispatchStoreAction(
gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP,
this.groupName,
false
);
// const keyCode = event?.code;
// // Keyboard navigation
// if (keyCode) {
// if (
// !wasLastFocusedInputMultiselect &&
// currentlySelectedValues[lastFocusedInputGroup] &&
// firedGaClickEventValues[lastFocusedInputGroup] !=
// currentlySelectedValues[lastFocusedInputGroup]
// ) {
// if (keyCode === "Tab") {
// this.pushClickEventToGA(
// currentlySelectedValues[lastFocusedInputGroup]
// );
// } else if (keyCode?.includes("Arrow")) {
// if (lastFocusedInputGroup != this.groupName) {
// this.pushClickEventToGA(
// currentlySelectedValues[lastFocusedInputGroup]
// );
// }
// }
// }
// } else {
// // Radio click
// // this.dispatchStoreAction(
// // gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP,
// // this.groupName,
// // false
// // );
if (
firedGaClickEventValues[this.groupName] !=
currentlySelectedValues[this.groupName]
) {
this.pushClickEventToGA(
currentlySelectedValues[this.groupName]
);
}
}
},
// if (
// firedGaClickEventValues[this.groupName] !=
// currentlySelectedValues[this.groupName]
// ) {
// this.pushClickEventToGA(
// currentlySelectedValues[this.groupName]
// );
// }
// }
// },
},
computed: {
isChecked() {

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

@ -19,7 +19,9 @@
:aria-required="isRequired"
:class="getFieldSetClasses"
:role="isMultiSelect ? 'group' : 'radiogroup'"
:aria-labelledby="formatString(groupName)">
:aria-labelledby="formatString(groupName)"
@focusin="handleFocus"
@focusout="handleBlur">
<legend
class="sr-only"
:data-focus-target="formatString(groupName)"
@ -79,8 +81,9 @@
import listButton from "@/ux-components/list-button/list-button";
import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
import listCard from "@/ux-components/list-card/list-card";
import { ErrorMessage } from "vee-validate";
import radio from "@/ux-components/radio/radio";
import { ErrorMessage } from "vee-validate";
import { queryStrings } from "@/constants/query-strings";
export default {
name: "buttonQuestion",
@ -124,7 +127,8 @@ export default {
data() {
return {
primaryValue: "",
lastFocusedInputGroup: "",
// lastFocusedInputGroup: "",
lastPushedGaEventValue: null,
};
},
computed: {
@ -196,6 +200,9 @@ export default {
})
);
},
isValueSelectedOnClick() {
return this.isMultiSelect || this.selectingInitiatesLoad;
},
},
methods: {
formatString(str) {
@ -221,9 +228,46 @@ export default {
},
handleAnswerChange(primaryAnswerValue) {
this.primaryValue = primaryAnswerValue;
this.pushClickEventToGA(null, primaryAnswerValue);
this.$emit("buttonQuestionChange", primaryAnswerValue);
this.$emit("update:modelValue", primaryAnswerValue);
},
pushClickEventToGA(e, value) {
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
);
}
},
onFocusCallbackForRoot() {
if (!this.isValueSelectedOnClick) {
this.pushClickEventToGA();
}
},
handleFocus(e) {
this.$root.handleInputFocus({
groupName: this.groupName,
});
},
handleBlur(e) {
this.$root.handleInputBlur({
groupName: this.groupName,
onFocusCallback: this.onFocusCallbackForRoot,
});
},
},
components: {
listButton,

10
src/constants/store-actions.js
View file

@ -65,12 +65,4 @@ const storeActions = {
SAVE_CAPABILITY_QUESTION_ANSWERS: "saveCapabilityQuestionAnswers",
};
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 };
export { storeActions };

10
src/constants/store-mutations.js
View file

@ -68,12 +68,4 @@ const storeMutations = {
UPDATE_TRIGGERED_SITE_ENTRY: "updateTriggeredSiteEntry",
};
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 };
export { storeMutations };

2
src/main.js
View file

@ -8,14 +8,12 @@ import baseMixin from "@/mixins/base-mixin.js";
import analyticsMixin from "@/mixins/analytics-mixin.js";
import experimentMixin from "@/mixins/experiment-mixin.js";
import "../node_modules/bootstrap/dist/js/bootstrap.js";
import gaState from "./store/gaState";
// Vue App Setup
const vueApp = createApp(App);
vueApp.use(router);
vueApp.use(store);
vueApp.use(gaState)
vueApp.use(LoadScript);
vueApp.use(Maska);
vueApp.mixin(baseMixin);

2
src/mixins/analytics-mixin.js
View file

@ -57,6 +57,8 @@ export default {
'path': `/fmg/?${queryStrings.FMG_PAGE}=${currentPageName}`
}
console.log("PUSHING: ", labelToLog)
pushToDataLayerIfDefined(eventToBePushed);
if (pushToLogApp) {

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

@ -6,7 +6,6 @@ import { vehicleCategories } from "@/constants/vehicle-categories.js";
import { routerParams } from "@/router/router-constants/router-params";
import { queryStrings } from "@/constants/query-strings";
import { dynamicStrings } from "@/constants/dynamic-strings";
import { gaStoreActions } from "../constants/store-actions";
export default {
data() {
@ -62,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() {

72
src/store/gaState.js
View file

@ -1,72 +0,0 @@
import { gaStoreMutations } from "@/constants/store-mutations";
// 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 {
state: gaState,
mutations: gaMutations,
getters,
actions: gaActions,
};

12
src/store/index.js
View file

@ -9,7 +9,6 @@ import { applicationConfig } from "@/constants/application-config";
import { experimentTriggers } from "@/constants/experiments";
import { damageLocationsSelected } from "@/constants/damage-locations-selected";
import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
import gaState from "./gaState";
// Export State
const getDefaultState = () => {
@ -1362,16 +1361,7 @@ export const actions = {
};
export default createStore({
plugins: [createPersistedState({
reducer: state => {
const { gaState, ...rest } = state // Make sure gaState isn't persisted
return rest
}
})],
modules: {
gaState,
},
plugins: [createPersistedState()],
// IMPORTANT: Be VERY careful when modifying these fields for at least a few reasons:
// * The CMS can reference the fields by name
// * Return users may have a previous "version" of the model, and we don't want

2
src/ux-components/button-main/button-main.vue
View file

@ -19,8 +19,6 @@
<script>
import loader from "@/ux-components/loader/loader";
import { gaStoreActions } from "../../constants/store-actions";
import { queryStrings } from "../../constants/query-strings";
export default {
name: "buttonMain",