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

<template>
    <div class="save-progress-modal-question">
        <buttonMain
            ref="buttonMain"
            v-if="!isProgressSaved"
            :buttonText="buttonText"
            loaderColor="white"
            :suppressLoader="true"
            @click-event="openModal" />
        <alert
            class="my-4"
            v-else
            cmsWidgetName="SaveProgressModalAlertWidget"
            alertClass="alert-success" />
        <modal
            :ref="modalName"
            :headerText="modalHeaderText"
            suppressPageScroll
            :footerButtonText="modalButtonText"
            @footer-button-event="saveProgress">
            <p class="modal-body">{{ modalBodyText }}</p>
            <saveProgressQuestion
                ref="saveProgressQuestion"
                v-model="userInput"
                cmsWidgetName="SaveProgressQuestionWidget" />
            <p class="modal-disclaimer" v-html="modalDisclaimerText"></p>
        </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";

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

    data() {
        return {
            userInput: "",
            isProgressSaved: false,
        };
    },
    props: {
        modelValue: Object,
        modalWidgetName: String,
        pageName: String,
    },
    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();
        },
        async saveProgress() {
            // save email address to store
            await this.dispatchStoreAction(storeActions.SAVE_EMAIL, this.userInput, false);

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

            this.modal.closeModal();

            // send store call to send to new API (that triggers an email send)
            this.$emit("save-progress");
        },
    },

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

<style lang="scss" scoped>
.save-progress-modal-question {
    order: 2;
    margin-bottom: 1.5rem;

    .btn-secondary {
        position: relative;
        background: $blue-100;
        border: 1px solid transparent;
        border-radius: $border-radius-lg;
        color: $blue;
        font-weight: 500;
        font-size: .875rem;
        transition: all 150ms linear;
        height: 3.5rem;
        width: 100%;
        text-decoration: underline;
        text-underline-offset: .5rem;
        &:hover {
            background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
            color: $white;
        }
        &:focus, // Mouse, touch, stylus focus
    &:focus-visible {
            // Keyboard focus for accessibility
            outline: none;
            box-shadow:
                0 0 0 3px $white,
                0 0 0 5.5px $blue-700;
            color: $white;
            background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%);
        }
        &:disabled {
            background: transparent;
            color: $gray-550 !important;
            font-weight: 400;
            height: 48px;
            border: 1px solid $gray-550;
            border-radius: $border-radius-lg;
            cursor: pointer;
            pointer-events: all;
        }
        &.has-loader {
            color: $blue;
            background-color: $blue;
            pointer-events: none;
        }
        &.delay {
            // fixes flicker while transitioning between states
            transition: background 0s 0s ease-in-out;
        }
    }
    :deep(.alert) {
        border-radius: $border-radius-lg;
        border: 1px solid $green;
    }
    :deep(.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;
        }
    }
}
.applied-promo {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 24px;
    color: $green;

    .promo-code {
        text-transform: uppercase;
    }
}
.alert {
    color: $red;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 24px;
}
</style>