DigitalConsumer.FixMyGlass/src/layouts/coverage-statement/coverage-statement.vue

<template>
    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
        <funnelHeader
            cmsWidgetName="FunnelHeaderWidget"
            ref="funnelHeader"
            :overrideImageSrc="clientLogoImageSrc" />
        <div class="page-gradient"></div>
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                    <div class="my-5" ref="unverified-block">
                        <funnelSubHeader cmsWidgetName="SubHeaderWidgetUnverified" alignLeft />
                        <customerInstructions
                            cmsWidgetName="InstructionsWidgetUnverified"
                            v-on="{ textLinkClicked: openModalAction }" />
                    </div>
                    <div class="my-5" ref="verified-block">
                        <funnelSubHeader cmsWidgetName="SubHeaderWidgetVerified" alignLeft />
                        <priceDisplay
                            cmsWidgetName="PriceWidgetVerified"
                            :price="deductibleAmount" />
                        <customerInstructions
                            cmsWidgetName="InstructionsWidgetVerified"
                            v-on="{ textLinkClicked: openModalAction }" />
                        <contentGroupModal ref="OemModal" cmsWidgetName="OemModalWidget" />
                        <afterpayBreakout
                            cmsWidgetName="AfterpayBreakoutWidget"
                            :totalAmount="cashPrice" />
                    </div>
                    <div class="my-5" ref="itac-block">
                        <funnelSubHeader
                            class="mb-4"
                            cmsWidgetName="SubHeaderWidgetItac"
                            alignLeft />
                        <div class="price-compare">
                            <priceDisplay
                                cmsWidgetName="DeductibleWidgetItac"
                                :price="deductibleAmount" />
                            <priceDisplay cmsWidgetName="PriceWidgetItac" :price="cashPrice" />
                        </div>
                    </div>
                    <div class="my-5" ref="nocomp-block">
                        <funnelSubHeader
                            class="mb-4"
                            cmsWidgetName="SubHeaderWidgetNocomp"
                            alignLeft />
                        <textBlock cmsWidgetName="NocompHeaderWidget" fontWeight="bold" />
                        <textBlock cmsWidgetName="NocompCopyWidget" />
                        <priceDisplay
                            cmsWidgetName="PriceWidgetNocomp"
                            :price="cashPrice"
                            class="my-4" />
                        <afterpayBreakout
                            cmsWidgetName="AfterpayBreakoutWidget"
                            :totalAmount="cashPrice" />
                    </div>
                    <saveProgressModalQuestion
                        modalWidgetName="SaveProgressModalWidget"
                        modalName="SaveProgressModal"
                        pageName="coverage-statement" />
                    <navbar
                        cmsWidgetName="FunnelFooterWidget"
                        ref="navbar"
                        :isForwardActionDisabled="!meta.valid"
                        @back-clicked="backButtonAction"
                        @ForwardClicked="forwardButtonAction" />
                </div>
            </div>
        </div>
    </Form>
</template>

<script>
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import navbar from "@/fmg-components/nav-bar/nav-bar";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import { Form } from "vee-validate";
import store from "@/store";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import customerInstructions from "./customer-instructions/customer-instructions.vue";
import priceDisplay from "./price-display/price-display.vue";
import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question.vue";
import afterpayBreakout from "../payment-method/afterpay-breakout/afterpay-breakout.vue";
import modal from "@/digital-components/modal/modal";
import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal.vue";
import textBlock from "@/digital-components/text-block/text-block.vue";
import { debugLog } from "@/helpers/debug-log-helper";
export default {
    name: "coverage-statement",
    mixins: [],
    data() {
        return {
            isClaimAndCoverage: this.isClaimAndCoverageFromStore(),
            isRecalibrationOnOrder: this.isRecalibrationOnOrderFromStore(),
            clientConfig: {},
        };
    },
    components: {
        Form,
        funnelHeader,
        navbar,
        funnelSubHeader,
        customerInstructions,
        priceDisplay,
        saveProgressModalQuestion,
        afterpayBreakout,
        contentGroupModal,
        textBlock,
    },
    // Ensure CMS content is fetched during route navigation without depending on `to`/`from`
    async beforeRouteEnter(to, from, next) {
        const pageName = to.name;
        const cmsContentPromise = fetchCmsContentForPage(pageName);
        const clientConfigPageName = `client_${store.getters.order.payment.parentAccountNumber}`;
        const clientConfigPromise = fetchCmsContentForPage(clientConfigPageName);
        const promiseResultMap = [
            {
                resultKey: "cmsContent",
                promise: cmsContentPromise,
            },
            {
                resultKey: "clientConfig",
                promise: clientConfigPromise,
            },
        ];
        const resultMap = await settleAllPromises(promiseResultMap);
        next((vm) => {
            vm.setCmsContent(resultMap.cmsContent);
            vm.clientConfig = resultMap.clientConfig ?? {};
            debugLog(
                `coverage-statement clientConfig::${clientConfigPageName}`,
                JSON.stringify(vm.clientConfig)
            );
        });
    },

    methods: {
        isClaimAndCoverageFromStore() {
            return store.getters.order?.payment?.isClaimAndCoverage;
        },
        isRecalibrationOnOrderFromStore() {
            return store.getters.isRecalibrationOnOrder;
        },
        backButtonAction() {
            if (!this.isClaimAndCoverage) {
                this.$router.navigateWithoutSaving(
                    this.navigationScenarios.CLICKED_BACK_NON_CLAIM_AND_COVERAGE,
                    this.pageName
                );
                return;
            }

            if (this.isRecalibrationOnOrder) {
                this.$router.navigateWithoutSaving(
                    this.navigationScenarios.CLICKED_BACK_RECALIBRATION_INFO,
                    this.pageName
                );
                return;
            }

            this.$router.navigateWithoutSaving(
                this.navigationScenarios.CLICKED_BACK,
                this.pageName
            );
        },
        async forwardButtonAction() {
            this.$router.navigateWithSaving(
                this.navigationScenarios.CLICKED_FORWARD,
                this.pageName
            );
        },
        arePagePrerequisitesValid() {
            return true;
        },
        openModalAction(modalName) {
            this.$refs[modalName]?.openModal();
        },
    },
    computed: {
        clientLogoImageSrc() {
            return this.clientConfig?.ClientLogoWidget?.Image || "";
        },
        deductibleAmount() {
            return Number(this.$store.getters.order.policy.currentDeductible);
        },
        cashPrice() {
            const lineItems = this.$store.getters.order.lineItems;
            const lineItemsFlattened = [
                ...(lineItems?.glassParts ?? []),
                ...(lineItems?.promos ?? []),
                ...(lineItems?.supportingItems ?? []),
                ...(lineItems?.vaps ?? []),
            ];
            const price = this.getTotalPriceOfAllLineItemsAndChildParts(lineItemsFlattened, false);

            return price;
        },
    },
};
</script>

<style lang="scss">
.price-compare {
    display: flex;

    > :not(:last-child) {
        padding-right: 1em;
        margin-right: 1em;
        border-right: 2px solid $gray-300;
    }
}
</style>