DigitalConsumer.ISS/src/layouts/duplicate-check/duplicate-check.vue

<template>
    <Form
        ref="duplicate-check-form"
        v-slot="{ meta }"
        @submit="onSubmit"
        @invalidSubmit="onInvalidSubmit">
        <div class="page-container-grouped-styles">
            <div class="fade-on-route-transition">
                <siteHeader
                    ref="siteHeader"
                    :cmsWidgetName="widget.siteHeader" 
                    />
                <div class="container-fluid px-6">
                    <siteSubHeader
                        id="sub-header"
                        ref="siteSubHeader"
                        class="mt-5 duplicate-check-subheader"
                        :cmsWidgetName="widget.siteSubHeader" />

                    <buttonQuestion
                        class="duplicate-check-question"
                        v-model="selectedAnswer"
                        :cmsWidgetName="widget.existingOrNewQuestion"
                        :questionText="questionText"
                        :answers="answers"
                        buttonTypeString="listButton"
                        isRequired
                        :validationRules="rules.selectionRequired">
                    </buttonQuestion>
                    <siteFooter
                        ref="siteFooter"
                        class="my-5"
                        :cmsWidgetName="widget.siteFooter"
                        :isForwardActionDisabled="!meta.valid"
                        @forwardClicked="forwardButtonAction"
                        @backClicked="backButtonAction" />
                </div>
            </div>
        </div>
    </Form>
</template>

<script>
// Components
import siteHeader from '@/iss-components/site-header/site-header.vue';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
import buttonQuestion from '@/digital-components/button-question/button-question.vue';

// Supporting files
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper.js';
import { Form } from 'vee-validate';
import BaseFormMixin from '@/mixins/base-form-mixin.js';
import { useMainStore } from '@/store/index.js';
import globalRules from '@/constants/global-rules.js';

export default {
    name: 'duplicate-check',
    components: {
        siteHeader,
        siteSubHeader,
        buttonQuestion,
        siteFooter,
        Form
    },
    mixins: [BaseFormMixin],
    async beforeRouteEnter(to, from, next) {
        const cmsContent = await fetchCmsContentForPage(to.query.issPage);

        next((vm) => {
            vm.setCmsContent(cmsContent);
        });
    },
    data() {
        return {
            widget: {
                siteHeader: 'SiteHeaderWidget',
                siteSubHeader: 'SiteSubHeaderWidget',
                existingOrNewQuestion: 'ExistingOrNewQuestion',
                siteFooter: 'SiteFooterWidget'
            },
            rules: {
                selectionRequired: globalRules.OPTION_REQUIRED
            }
        }
    },
    computed: {
        questionText() {
            return this.getCmsContent(this.widget.existingOrNewQuestion, 'QuestionText');
        },
        answersFromCms() {
            return this.getCmsContent(this.widget.existingOrNewQuestion, 'Answers');
        },
        testAnswers() {
            return [
                {
                    Text: 'Finish Existing Claim',
                    Name: "1",
                    SubText: "2013 Honda Civic, 09/23/2023"
                },
                {
                    Text: 'Finish Existing Claim',
                    Name: "2",
                    SubText: "08/01/2022"
                }
            ];
        },
        answers(){
            return [...this.testAnswers, ...this.answersFromCms];
        }
    },
    methods: {
        /**
         * @summary Steps to perform when back button clicked.
         */
         backButtonAction() {
            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
        },
        /**
         * @summary Steps to perform when forward button clicked.
         */
        forwardButtonAction() {
            if (useMainStore().order.policy.policyLookupSuccessful){
                const policyVehicles = useMainStore().order.policy.vehicles;
                if (policyVehicles) {
                    this.$router.navigate(
                        this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES,
                        this.$route,
                        {},
                        {},
                        policyVehicles
                    );
                } else {policyVehicles
                    this.$router.navigate(
                        this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES,
                        this.$route
                    );
                }
            }
            this.$router.navigate(
                this.navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
                this.$route
            );
        }
    }
}
</script>

<style lang="scss">
.duplicate-check-subheader {
    .subheader-secondary {
        margin-top: map-get($spacers, 3);
    }
    p {
        span {
            font-size: $h6-font-size;
        }
    }
}
.duplicate-check-question {
    .question-text {
        justify-content: left;
        display: inline-flex !important;
        margin-top: map-get($spacers, 5);
        margin-bottom: map-get($spacers, 3);
    }
}

</style>