DigitalConsumer.ISS/src/iss-components/questions-page-layout/questions-page-layout.vue

<template>
    <div class="fade-on-route-transition">
        <div class="justify-content-center">
            <siteHeader cmsWidgetName="SiteHeaderWidget" />
        </div>
        <div class="iss-heritage-container-width">
            <div class="questions-page-layout-container iss-heritage-content-container-width">
                <siteSubHeader
                    class="mt-4 subheader"
                    cmsWidgetName="SiteSubHeaderWidget" />
                <alert
                    v-if="alertFewMoreQuestionsHeader || alertFewMoreQuestionsCopy"
                    ref="alertFewMoreQuestions"
                    cmsWidgetName="alertWidget"
                    alertClass="alert-warning"
                    :manualHeadline="alertFewMoreQuestionsHeader"
                    :manualCopy="alertFewMoreQuestionsCopy"
                    :isDismissible="false"
                    class="mt-5" />
                <div
                    v-for="(questionsDatum, i) in questionsData"
                    :key="questionsDatum.key"
                    class="question-chain-wrapper">
                    <questionChain
                        v-if="showThisQuestionChain(questionsDatum, i)"
                        ref="questionChain"
                        v-model="selectedAnswers[questionsDatum.answerKey]"
                        :questionData="questionsDatum.questions"
                        :index="i"
                        :answerKey="questionsDatum.answerKey"
                        :validationRules="validationRules" />
                </div>
                <siteFooter
                    ref="siteFooter"
                    class="mt-5"
                    cmsWidgetName="SiteFooterWidget"
                    :isForwardButtonHidden="!isMetaValid"
                    @backClicked="handleBackButtonAction"
                    @ForwardClicked="handleForwardButtonAction" />
                <div class="need-help-link-container">
                    <textLink
                        v-if="needHelpLinkText"
                        linkType="navigation"
                        :text="needHelpLinkText"
                        href="#"
                        @clickEvent="handleNeedHelpClick" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// Components
import siteHeader from '@/iss-components/site-header/site-header.vue';
import alert from '@/ux-components/alert/alert.vue';
import questionChain from '@/digital-components/question-chain/question-chain.vue';
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import textLink from '@/ux-components/text-link/text-link.vue';
import widgetFields from '@/constants/cms-widget-fields';

export default {
    name: 'questions-page',
    components: {
        siteHeader,
        alert,
        questionChain,
        siteSubHeader,
        siteFooter,
        textLink
    },
    props: {
        isMetaValid: Boolean,
        alertFewMoreQuestionsHeader: String,
        alertFewMoreQuestionsCopy: String,
        questionsData: Array,
        validationRules: String,
        modelValue: Object,
        loadingText: Array,
        index: Number
    },
    emits: ['update:modelValue', 'forwardButtonAction', 'back-click', 'need-help-click'],
    computed: {
        selectedAnswers: {
            get() {
                return this.modelValue;
            },
            set(newValue) {
                this.$emit('update:modelValue', newValue);
            }
        },
        needHelpLinkText() {
            return this.getCmsContent('NeedHelpLinkWidget', widgetFields.TEXT_BLOCK_WIDGET.TEXT);
        }
    },
    methods: {
        showThisQuestionChain(glass, i) {
            // return false if no questions or if suppressed
            if (
                !glass.questions
                || glass.questions?.length < 1
                || glass.isSuppressedPart
            ) {
                return false;
            }
            return (
                this.index === i || glass.answerData?.answerResult?.length > 0
            );
        },
        handleForwardButtonAction() {
            this.$emit('forwardButtonAction');
        },
        handleBackButtonAction() {
            this.$emit('back-click');
        },
        handleNeedHelpClick() {
            this.$emit('need-help-click');
        }
    }
};
</script>

<style lang="scss" scoped>
.iss-heritage-container-width {
    .questions-page-layout-container {
        position: relative;
        min-height: 1px;
        padding-left: .9375rem;
        padding-right: .9375rem;
    }
    .subheader {
        :deep(strong) {
            color: $black;
            font-weight: 600;
            text-transform: uppercase;
        }
    }
}

.questions-page {
    .question-text {
        margin-bottom: 0.5rem;

        span {
            text-align: left;
        }
    }
}
.need-help-link-container {
    margin-top: 1.875rem;
    margin-bottom: 2.25rem;
}
</style>