DigitalConsumer.FixMyGlass/src/common-components/button-question/button-question.vue

<!-- Documented in confluence https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Component -->
<template>
    <div
        :class="
            isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question'
        ">
        <div v-if="questionText && answers && answers.length > 0" class="question-text d-flex">
            <span class="fw-bold w-100">{{ questionText }}</span>
        </div>

        <div class="w-100 d-flex justify-content-center">
            <fieldset
                class="w-100"
                :aria-required="isRequired"
                :class="getFieldSetClasses"
                :role="isMultiSelect ? 'group' : 'radiogroup'"
                :aria-labelledby="formatString(groupName)">
                <legend
                    class="sr-only"
                    :data-focus-target="formatString(groupName)"
                    tabindex="-1"
                    :id="formatString(groupName)">
                    {{ questionText }}
                    {{
                        isMultiSelect && answers && answers.length > 1
                            ? "Select one or more options below."
                            : "Select an option below."
                    }}
                </legend>
                <div :class="getComponentLoopWrapperClasses">
                    <div
                        :class="getComponentWrapperClasses"
                        v-for="answer in buttonsInfo"
                        :key="answer.value ? answer.value : answer">
                        <component
                            :is="buttonType"
                            :buttonLabel="answer.buttonLabel"
                            :buttonLabelSubCopy="answer.buttonLabelSubCopy"
                            :buttonImage="answer.buttonImage"
                            :buttonImageId="answer.buttonImageId"
                            :groupName="answer.groupName"
                            :isMultiSelect="isMultiSelect"
                            :value="answer.value"
                            :selectingInitiatesLoad="selectingInitiatesLoad"
                            :isWide="isWide"
                            :validationRules="validationRules"
                            :textPosition="textPosition"
                            :lastValuePushedToGa="lastValuePushedToGa"
                            :setLastValuePushedToGa="setLastValuePushedToGa"
                            v-model="selectedValues" />
                        <!-- For nested questions -->
                        <transition name="fade" mode="out-in">
                            <div
                                v-if="
                                    typeof selectedValues == 'string' &&
                                    selectedValues == answer.value
                                ">
                                <slot></slot>
                            </div>
                        </transition>
                    </div>
                </div>
            </fieldset>
        </div>
        <div class="row form-test-error mt-1">
            <error-message :name="formatString(groupName)" v-if="!suppressError"></error-message>
        </div>
    </div>
</template>

<script>
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 radio from "@/ux-components/radio/radio";
import { ErrorMessage } from "vee-validate";

export default {
    name: "buttonQuestion",
    props: {
        buttonType: {
            type: String,
            default: "listButton",
        },
        isMultiSelect: Boolean,
        groupName: String,
        questionText: String,
        answers: Array,
        textPosition: {
            type: String,
            default: "text-center",
        },
        selectingInitiatesLoad: Boolean,
        loaderColor: {
            type: String,
            default: "blue",
        },
        loaderPosition: {
            type: String,
            default: "right",
        },
        isRequired: Boolean,
        isOverflowScrollable: Boolean,
        isWide: Boolean,
        isCashOrInsurance: Boolean,
        modelValue: [Array, Number, String],
        value: [Number, String],
        validationRules: String,
        suppressError: Boolean,
        useTextForValue: Boolean,
        valueToLogType: String,
    },
    data() {
        return {
            lastValuePushedToGa: null,
        };
    },
    computed: {
        getFieldSetClasses() {
            if (this.isOverflowScrollable) {
                return "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0";
            } else if (this.buttonType == "listCard") {
                return "w-100";
            } else {
                return "";
            }
        },
        getComponentLoopWrapperClasses() {
            let classes;
            switch (this.buttonType) {
                case "listButton":
                    classes = "w-100";
                    break;
                case "listButtonHorizontal":
                    classes = "d-flex flex-row p-0";
                    break;
                case "listCard":
                    classes = "row g-2 justify-content-center";
                    if (this.isWide) {
                        classes += " flex-column";
                    }
                    break;
                case "radio":
                    classes = "ui-radio d-flex";
                    break;
            }
            return classes;
        },
        getComponentWrapperClasses() {
            let classes = "";

            classes += this.isWide ? "col-12" : "col";

            if (this.buttonType == "radio") {
                classes += " radio-button-container";
            }

            return classes;
        },
        buttonsInfo() {
            return (Array.isArray(this.answers) ? this.answers : [])?.map((answer) => ({
                buttonLabel: answer.buttonLabel ?? answer.Text ?? answer,
                altText: answer.altText ?? (answer.Name ? answer.Name : answer),
                buttonLabelSubCopy: answer.buttonLabelSubCopy ?? answer.SubText,
                buttonImage: answer.buttonImage ?? answer.AnswerImageUrl,
                buttonImageId: answer.buttonImageId ?? answer.ImageId,
                groupName: this.formatString(this.groupName),
                value:
                    answer.value ??
                    (this.useTextForValue && answer.Text ? answer.Text : answer.Name) ??
                    (typeof answer !== "object" ? answer : null),
            }));
        },
        selectedValues: {
            get() {
                return this.modelValue;
            },
            set(selectedAnswers) {
                this.$emit("update:modelValue", selectedAnswers);
            },
        },
    },
    methods: {
        formatString(str) {
            return str?.replaceAll(" ", "-");
        },
        setLastValuePushedToGa(lastValuePushedToGa) {
            this.lastValuePushedToGa = lastValuePushedToGa;
        },
    },
    components: {
        listButton,
        listButtonHorizontal,
        listCard,
        ErrorMessage,
        radio,
    },
};
</script>

<style lang="scss">
.button-question-overflow {
    height: calc(100vh - 274px);

    .overflow-scroll {
        // Height will be determined by overall height of content above list
        height: calc(100% - 314px);
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }
}
.button-question {
    color: $black;

    .radio-button-container {
        &:not(:last-child) {
            padding-bottom: map-get($spacers, 2);
        }
    }
}
.question-text {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.625rem;

    & > span {
        text-align: center;
    }
}

.vehicle-parts {
    .question-text {
        span {
            font-size: 0.875rem;
            text-align: left;
            margin: 0 0 0.5rem 0;
        }
    }
    .question-text {
        margin: 0;
    }
    fieldset {
        .ui-radio {
            margin: 0;
        }
    }
}
</style>