DigitalConsumer.FixMyGlass/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue

<template>
    <div class="save-progress-modal-question" :class="isProgressSaved ? 'progress-saved' : ''">
        <buttonMain
            type="button"
            v-if="!isProgressSaved"
            :buttonText="buttonText"
            loaderColor="white"
            :suppressLoader="true"
            class="open-save-progress-button"
            @click-event="openModal" />
        <alert
            class="my-4"
            v-else
            cmsWidgetName="SaveProgressModalAlertWidget"
            alertClass="alert-success" />
        <modal
            :ref="modalName"
            :headerText="modalHeaderText"
            suppressPageScroll
            :onModalClosedCallback="onModalClosed"
            :footerButtonText="modalButtonText"
            @footer-button-event="saveProgress">
            <p class="modal-body-inner" v-html="modalBodyText"></p>
            <saveProgressQuestion
                ref="saveProgressQuestion"
                v-model="userInput"
                cmsWidgetName="SaveProgressQuestionWidget" />
            <template v-slot:modal-footer-slot>
                <p class="modal-disclaimer" v-html="modalDisclaimerText"></p>
            </template>
        </modal>
    </div>
</template>

<script>
import saveProgressQuestion from "@/fmg-components/save-progress-modal-question/save-progress-question/save-progress-question";
import modal from "@/digital-components/modal/modal";
import { storeActions } from "@/constants/store-actions.js";
import buttonMain from "@/ux-components/button-main/button-main";
import alert from "@/ux-components/alert/alert";
import { saveQuote } from "@/helpers/heritage-integration/order-helper.js";

export default {
    name: "save-progress-modal-question",

    data() {
        return {
            userInput: "",
            isProgressSaved: false,
        };
    },
    props: {
        modelValue: Object,
        modalWidgetName: String,
        pageName: String,
    },
    unmounted() {
        // remove any modal effects before leaving page (e.g. user hits browser back button)
        this.modal.closeModal();
    },
    computed: {
        buttonText() {
            return this.getCmsContent(this.modalWidgetName, "SubheaderText");
        },
        modalHeaderText() {
            return this.getCmsContent(this.modalWidgetName, "HeaderText");
        },
        modalBodyText() {
            return this.getCmsContent(this.modalWidgetName, "BodyText");
        },
        modalButtonText() {
            return this.getCmsContent(this.modalWidgetName, "FooterText");
        },
        modalDisclaimerText() {
            return this.getCmsContent(this.modalWidgetName, "FooterText2");
        },
        modalName() {
            return this.modalWidgetName;
        },
        modal() {
            return this.$refs[this.modalName];
        },
    },
    methods: {
        openModal() {
            this.modal.openModal();
            this.modal.resetButtonStyle();
        },
        onModalClosed() {
            this.userInput = "";
            this.modal.resetForm();
        },
        async saveProgress() {
            // save email address to store
            await this.dispatchStoreAction(storeActions.SAVE_EMAIL, this.userInput, false);

            // send store call to send to new API (that triggers an email send)
            await saveQuote({ pageNameToLog: this.pageName });

            // hide save progress button; show success message alert
            this.isProgressSaved = true;

            this.modal.closeModal();
        },
    },

    components: {
        modal,
        buttonMain,
        saveProgressQuestion,
        alert,
    },
};
</script>

<style lang="scss">
.save-progress-modal-question {
    margin-bottom: 1.5rem;
    order: 2;
    text-align: center;
    background: $blue-100;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 3rem;
    border-radius: 0.5rem;

    &.progress-saved {
        background: none;
    }

    .open-save-progress-button {
        order: 4;
        position: relative;
        color: $blue;
        border: none;
        font-weight: 900;
        font-size: 0.875rem;
        text-align: center;
        display: inline-block;
        width: auto;
        height: auto;
        text-decoration: underline;
        text-underline-offset: 0.25rem;
        line-height: 1rem;
        padding: 1rem;
        margin: 0 auto;
        transition: all 150ms linear;
        background: none;

        &.btn {
            &.btn-secondary {
                border: none;
            }
        }

        &:hover,
        &:active,
        &:focus,
        &:focus-visible {
            color: $blue-700;
            background: none;
            box-shadow: none;
        }
        &:focus-visible span {
            outline: 2px solid #005fcc;
            border-radius: 0.25rem;
        }
        &.delay {
            // fixes flicker while transitioning between states
            transition: background 0s 0s ease-in-out;
        }
    }
    .modal.modal-component .modal-dialog .modal-content {
        .modal-header {
            padding-top: 0;
            margin-top: 1.875rem;
        }
        .modal-body {
            display: flex;
            flex-direction: column;
            padding: 0 1.5rem;

            .textbox-question {
                padding: 0;
                margin: 0 0 1.5rem 0;

                label {
                    text-align: left;
                    font-weight: 900;
                }
            }
        }
        .modal-body-inner {
            text-align: center;
            margin-bottom: 1.5rem;
        }
        .modal-disclaimer {
            font-size: 0.75rem;
            order: 2;
            text-align: left;
            margin: 0;

            a {
                text-decoration: none;
            }
        }
        .modal-footer {
            margin: 0 0 1.5rem 0;
            padding-top: 0;
            padding-bottom: 0;

            button.btn {
                margin-bottom: 1.5rem;
            }
        }
    }

    .alert {
        border-radius: $border-radius-lg;
        border: 1px solid $green;
        margin-top: 0;
    }
    .alert-heading {
        position: relative;
        font-weight: 600;
        font-size: 1rem;
        color: $black;
        text-align: left;
        padding-left: 1.5rem;
        &::before {
            position: absolute;
            content: "";
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%230C7E47' d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm3.7 6.171-4.449 4.45a.559.559 0 0 1-.8 0l-2.16-2.16a.563.563 0 0 1 .792-.8l1.76 1.76 4.066-4.042a.563.563 0 1 1 .792.8v-.008Z'/%3E%3C/svg%3E");
            width: 1rem;
            height: 1rem;
            top: 6px;
            left: 0;
        }
    }
}
</style>