DigitalConsumer.FixMyGlass/src/common-components/base-input-button/base-input-button.vue

<template>
    <label
        :class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]"
        :for="buttonId"
        @mousedown.left="handleEventAction('click', $event)"
        @keyup="handleKeyboardNavigation">
        <input
            :type="inputType"
            :id="buttonId"
            :key="buttonId"
            :name="groupName"
            :class="inputClasses"
            :aria-required="isRequired"
            :value="value"
            :checked="isChecked"
            @blur="handleBlur"
            @keypress.enter="handleEventAction('keypressSubmit', $event)"
            @change="handleEventAction('change', $event)" />

        <slot></slot>
    </label>
</template>

<script>
import { queryStrings } from "@/constants/query-strings";
import { useField } from "vee-validate";
import { toRef } from "vue";
import { gaStoreActions } from "../../constants/store-actions";

// TODO KO Bug: select crack via keyboard, continue - doesn't fire
// TODO KO Bug: select a chip via keyboard, hit continue - doesn't fire the chip number
export default {
    name: "base-input-button",
    emits: ["change"],
    model: {
        prop: "modelValue",
        event: "change",
    },
    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: "",
        },
        buttonWrapperClasses: [String, Array, Object],
        inputClasses: [String, Array, Object],
        valueToLogType: String,
        selectOnKeypress: {
            type: Boolean,
            default: true,
        },
        isRequired: Boolean,
    },
    data() {
        return {
            valueToEmit: null,
        };
    },
    mounted() {
        if (this.isChecked) {
            this.handleChange(this.modelValue);
        }
    },
    methods: {
        handleEventAction(eventType, e) {
            const eventTypes = {
                CHANGE: "change",
                KEYPRESS_SUBMIT: "keypressSubmit",
                CLICK: "click",
            };

            if (this.isMultiSelect) {
                switch (eventType) {
                    case eventTypes.KEYPRESS_SUBMIT:
                    case eventTypes.CHANGE:
                        this.handleClick(e);
                        this.dispatchStoreAction(
                            gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP,
                            this.groupName,
                            false
                        );
                        
                        this.pushClickEventToGA();
                        break;
                }
            } else {
                switch (eventType) {
                    case eventTypes.CLICK:
                    case eventTypes.KEYPRESS_SUBMIT:
                        this.handleClick(e);
                        this.pushClickEventToGAIfReady();
                        break;
                    case eventTypes.CHANGE:
                        this.selectOnKeypress
                            ? this.handleClick(e)
                            : this.handleSelectionChange(e);
                        break;
                }
            }
        },
        handleSelectionChange(e) {
            if (
                this.isMultiSelect &&
                (this.modelValue instanceof Array || this.modelValue == null)
            ) {
                let newValue = this.modelValue ? [...this.modelValue] : [];
                if (!newValue.includes(this.value)) {
                    newValue.push(this.value);
                } else {
                    newValue.splice(newValue.indexOf(this.value), 1);
                }

                this.valueToEmit = newValue;
            } else {
                this.valueToEmit = this.value;
            }

            this.dispatchStoreAction(
                gaStoreActions.UPDATE_CURRENTLY_SELECTED_VALUES,
                {
                    groupName: this.groupName,
                    value: this.value,
                },
            );

            this.handleChange(this.valueToEmit);
        },
        handleClick(e) {
            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,
                },
            );

            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
                );
                
                if (
                    firedGaClickEventValues[this.groupName] !=
                    currentlySelectedValues[this.groupName]
                ) {
                    this.pushClickEventToGA(
                        currentlySelectedValues[this.groupName]
                    );
                } 
            }
        },
    },
    computed: {
        isChecked() {
            if (this.isMultiSelect && this.modelValue instanceof Array) {
                return this.modelValue.includes(this.value);
            }

            return this.modelValue == this.value;
        },
        inputType() {
            return this.isMultiSelect ? "checkbox" : "radio";
        },
        buttonId() {
            return `${this.groupName}-${JSON.stringify(this.value)?.replace(
                " ",
                "-"
            )}`;
        },
    },
    setup(props) {
        const inputType = props.isMultiSelect ? "checkbox" : "radio";

        const fieldOptions = {
            type: inputType,
            validateOnValueUpdate: false,
            validateOnMount: false,
        };

        const { handleChange, meta, errors } = useField(
            toRef(props, "groupName"),
            toRef(props, "validationRules"),
            fieldOptions
        );

        return {
            handleChange,
            errors,
            meta,
            fieldOptions, // only need to expose this for unit test purposes
        };
    },
};
</script>

<style lang="scss" scoped>
input {
    opacity: 0;
    height: 0.1px; // NOTE: cannot be zero or Safari can't put focus on it
    width: 0;
}
</style>