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 "bracketSameLine": true
} }

63
src/App.vue
View file

@ -1,16 +1,57 @@
<template> <template>
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<transition :duration="{ enter: 200, leave: 200 }" name="route-fade" mode="out-in"> lastFocusedInputGroupName: {{ lastFocusedInputGroupName }}
<!-- The above durations should be kept in sync with the global css class "fade-on-route-transition" --> <transition
<component :is="Component" /> :duration="{ enter: 200, leave: 200 }"
</transition> name="route-fade"
</router-view> 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> </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"> <style lang="scss">
@import "./node_modules/bootstrap/scss/bootstrap"; @import "./node_modules/bootstrap/scss/bootstrap";
@import "@/styles/common-styles.scss"; @import "@/styles/common-styles.scss";
@import "@/styles/common-typography-styles.scss"; @import "@/styles/common-typography-styles.scss";
@import "@/styles/common-error-styles.scss"; @import "@/styles/common-error-styles.scss";
@import "@/styles/common-animations.scss"; @import "@/styles/common-animations.scss";
</style> </style>

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

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

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

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

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

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

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

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

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 analyticsMixin from "@/mixins/analytics-mixin.js";
import experimentMixin from "@/mixins/experiment-mixin.js"; import experimentMixin from "@/mixins/experiment-mixin.js";
import "../node_modules/bootstrap/dist/js/bootstrap.js"; import "../node_modules/bootstrap/dist/js/bootstrap.js";
import gaState from "./store/gaState";
// Vue App Setup // Vue App Setup
const vueApp = createApp(App); const vueApp = createApp(App);
vueApp.use(router); vueApp.use(router);
vueApp.use(store); vueApp.use(store);
vueApp.use(gaState)
vueApp.use(LoadScript); vueApp.use(LoadScript);
vueApp.use(Maska); vueApp.use(Maska);
vueApp.mixin(baseMixin); vueApp.mixin(baseMixin);

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

@ -57,6 +57,8 @@ export default {
'path': `/fmg/?${queryStrings.FMG_PAGE}=${currentPageName}` 'path': `/fmg/?${queryStrings.FMG_PAGE}=${currentPageName}`
} }
console.log("PUSHING: ", labelToLog)
pushToDataLayerIfDefined(eventToBePushed); pushToDataLayerIfDefined(eventToBePushed);
if (pushToLogApp) { 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 { routerParams } from "@/router/router-constants/router-params";
import { queryStrings } from "@/constants/query-strings"; import { queryStrings } from "@/constants/query-strings";
import { dynamicStrings } from "@/constants/dynamic-strings"; import { dynamicStrings } from "@/constants/dynamic-strings";
import { gaStoreActions } from "../constants/store-actions";
export default { export default {
data() { data() {
@ -62,39 +61,39 @@ export default {
state: serviceZipValidationResponse.data.state, state: serviceZipValidationResponse.data.state,
}; };
}, },
pushRadioClickEventIfNecessary() { // pushRadioClickEventIfNecessary() {
const { // const {
firedGaClickEventValues, // firedGaClickEventValues,
currentlySelectedValues, // currentlySelectedValues,
lastFocusedInputGroup, // lastFocusedInputGroup,
wasLastFocusedInputMultiselect, // wasLastFocusedInputMultiselect,
} = this.$store.getters.gaClickInformation; // } = this.$store.getters.gaClickInformation;
// Keyboard navigation // // Keyboard navigation
if ( // if (
!wasLastFocusedInputMultiselect && // !wasLastFocusedInputMultiselect &&
currentlySelectedValues[lastFocusedInputGroup] && // currentlySelectedValues[lastFocusedInputGroup] &&
firedGaClickEventValues[lastFocusedInputGroup] != // firedGaClickEventValues[lastFocusedInputGroup] !=
currentlySelectedValues[lastFocusedInputGroup] // currentlySelectedValues[lastFocusedInputGroup]
) { // ) {
const value = // const value =
currentlySelectedValues[lastFocusedInputGroup]?.toString(); // currentlySelectedValues[lastFocusedInputGroup]?.toString();
this.dispatchStoreAction( // // this.dispatchStoreAction(
gaStoreActions.UPDATE_FIRED_GA_CLICK_EVENT_VALUES, // // gaStoreActions.UPDATE_FIRED_GA_CLICK_EVENT_VALUES,
{ // // {
groupName: lastFocusedInputGroup, // // groupName: lastFocusedInputGroup,
value: value, // // value: value,
} // // }
); // // );
this.pushEventToGA( // this.pushEventToGA(
this.$route.query[queryStrings.FMG_PAGE], // this.$route.query[queryStrings.FMG_PAGE],
this.GaActions.CLICKED, // this.GaActions.CLICKED,
value, // value,
true // true
); // );
} // }
}, // },
}, },
computed: { computed: {
storeActions() { 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 { experimentTriggers } from "@/constants/experiments";
import { damageLocationsSelected } from "@/constants/damage-locations-selected"; import { damageLocationsSelected } from "@/constants/damage-locations-selected";
import { fmgPageValues } from "@/router/router-constants/fmgPage-values"; import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
import gaState from "./gaState";
// Export State // Export State
const getDefaultState = () => { const getDefaultState = () => {
@ -1362,16 +1361,7 @@ export const actions = {
}; };
export default createStore({ export default createStore({
plugins: [createPersistedState({ plugins: [createPersistedState()],
reducer: state => {
const { gaState, ...rest } = state // Make sure gaState isn't persisted
return rest
}
})],
modules: {
gaState,
},
// IMPORTANT: Be VERY careful when modifying these fields for at least a few reasons: // IMPORTANT: Be VERY careful when modifying these fields for at least a few reasons:
// * The CMS can reference the fields by name // * The CMS can reference the fields by name
// * Return users may have a previous "version" of the model, and we don't want // * 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> <script>
import loader from "@/ux-components/loader/loader"; import loader from "@/ux-components/loader/loader";
import { gaStoreActions } from "../../constants/store-actions";
import { queryStrings } from "../../constants/query-strings";
export default { export default {
name: "buttonMain", name: "buttonMain",