DigitalConsumer.ISS/src/layouts/schedule-page/benefit-recal-modal/benefit-recal-modal.vue

<template>
    <div class="benefit-recal-modal-container">
        <modal
            class="benefit-recal-modal"
            ref="benefitRecalModal"
            :displayCloseButton="true"
            :displayFooterButton="false"
            :onModalClosedCallback="onModalClosed">
            <img
                :src="modalImage"
                class="recal-image"
                alt="" />
            <h5
                class="header-text"
                v-html="modalHeaderText"></h5>
            <div v-html="modalBodyText" class="recal-modal-body"></div>
            <div class="recal-modal-footer">
                <buttonMain
                    id="modalbtn"
                    ref="modalButtonMain"
                    class="w-100"
                    :buttonText="modalFooterButtonText"
                    @clickEvent="continueWithSafeliteClicked" />
                <textLink
                    class="mt-4 mb-0"
                    linkType="text"
                    :text="modalCloseLinkText"
                    href="#!"
                    @click="scheduleElsewhereClicked" />
            </div>
        </modal>
    </div>
</template>

<script>
import widgetFields from '@/constants/cms-widget-fields';
import modal from '@/digital-components/modal/modal.vue';
import buttonMain from '@/ux-components/button-main/button-main.vue';
import textLink from '@/ux-components/text-link/text-link.vue';

export default {
    name: 'benefit-recal-modal',
    components: {
        modal,
        buttonMain,
        textLink
    },
    emits: ['continue-safelite-clicked', 'schedule-elsewhere-clicked'],
    data() {
        return {
            schedulingElsewhere: false
        };
     },
    props: {
        cmsWidgetName: {
            type: String,
            default: 'BenefitRecalModalWidget'
        }
    },
    computed: {
        modalBodyText() {
            return this.getCmsContent(this.cmsWidgetName, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
        },
        modalCloseLinkText() {
            return this.getCmsContent(this.cmsWidgetName, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2);
        },
        modalHeaderText() {
            return this.getCmsContent(this.cmsWidgetName, widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
        },
        modalFooterButtonText() {
            return this.getCmsContent(this.cmsWidgetName, widgetFields.CONTENT_GROUP_WIDGET.FOOTER_TEXT);
        },
        modalImage() {
            return this.getCmsContent(this.cmsWidgetName, 'Image');
        }
    },
    methods: {
        continueWithSafeliteClicked() {
            this.$refs.benefitRecalModal.closeModal();
        },
        scheduleElsewhereClicked() {
            this.schedulingElsewhere = true;
            this.$refs.benefitRecalModal.closeModal();
        },
        onModalClosed() {
            this.pushEvent();
            if (!this.schedulingElsewhere) {
                this.$emit('continue-safelite-clicked');
            }
            else {
                this.$emit('schedule-elsewhere-clicked');
            }
        },
        openModal() {
            this.$refs.benefitRecalModal.openModal();
        },
        pushEvent() {
            const gaLabel = this.schedulingElsewhere ? 'schedule_elsewhere_clicked' : 'continue_with_safelite_clicked';
            this.pushEventToGA(
                'safelite_benefit_modal',
                'modal_closed',
                gaLabel,
                true
            );
        }
    }
};
</script>

<style lang="scss" scoped>
.benefit-recal-modal-container {
    .recal-image {
        margin: 1rem 0;
        width: 23.5rem;
        height: auto;
    }
    .recal-modal-footer {
        border-top: none;
        padding: .625rem 1.5rem 1.5rem 1.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;

        button {
            margin: 0;
            background-color: $green;
            color: $white;
            border-color: $blue;
            font-weight: $font-weight-bold;
            &:hover {
                background-color: $green;
                color: $white;
                border-color: $heritage-blue-secondary;
                box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $green; 
            }
            &:active,
            &:focus {
                box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $green; 
            }
        }
        a {
            margin: 1rem 0 0;
        }
    }
}
:deep(.modal) {
    .modal-footer {
        display: none;
    }
}
</style>