DigitalConsumer.ISS/src/layouts/tpa-confirmation/tpa-confirmation.vue

<template>
    <Form
        ref="theForm"
        v-slot="{ meta }"
        @submit="onSubmit"
        @invalidSubmit="onInvalidSubmit">
        <div class="page-container-grouped-styles">
            <div class="fade-on-route-transition position-relative">
                <siteHeader
                    ref="siteHeader"
                    cmsWidgetName="SiteHeaderWidget" />
                <div class="container-fluid px-5 pb-2 confirmation">
                    <vehicleBanner
                        ref="vehicleBanner"
                        class="mb-4"
                        cmsWidgetName="VehicleBannerWidget"
                        :displayGenericVehicleImage="false" />
                    <div class="header-container">
                        <img :src="tpaConfirmationImage" />
                        <span v-html="tpaConfirmationHeaderText"></span>
                    </div>
                    <div class="subheader-container">
                        <span v-html="tpaConfirmationSubheaderText"></span>
                    </div>
                    <textBlock
                        id="tpaConfirmationBodyOne"
                        ref="tpaConfirmationBodyOne"
                        :customText="tpaConfirmationBodyOne" />
                    <textBlock
                        id="tpaConfirmationBodyTwo"
                        ref="tpaConfirmationBodyTwo"
                        :customText="tpaConfirmationBodyTwo"
                        class="small mb-4" />
                    <textBlock
                        id="contactCarrierText"
                        ref="contactCarrierText"
                        :customText="contactCarrierText"
                        class="small"
                        @click="setBailoutInfo()" />
                    <div
                        id="confirmationOrderDetailsSection"
                        ref="confirmationOrderDetailsSection">
                        <textBlock
                            id="tpaConfirmationOrderDetailsTitle"
                            ref="tpaConfirmationOrderDetailsTitle"
                            :customText="orderDetailsTitle"
                            :marginTopSizeOverride="4" />
                        <textBlock
                            id="tpaConfirmationOrderDetailsBody"
                            ref="tpaConfirmationOrderDetailsBody"
                            :customText="orderDetailsBody"
                            :marginTopSizeOverride="4"
                            class="mb-4 small" />
                        <deductibleBox
                            ref="deductibleBox"
                            :value="deductibleBoxValue" />
                    </div>
                    <siteFooter
                        ref="siteFooter"
                        cmsWidgetName="SiteFooterWidget"
                        :isForwardActionDisabled="!meta.valid"
                        @ForwardClicked="forwardButtonAction"
                        @backClicked="navigateBack" />
                </div>
            </div>
        </div>
    </Form>
</template>
<script>
// Components
import siteHeader from '@/iss-components/site-header/site-header.vue';
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import textBlock from '@/digital-components/text-block/text-block.vue';
import deductibleBox from '@/layouts/tpa-submit/deductible-box/deductible-box.vue';

// Supporting files
import { doesCopyContainRouterLink,
    fetchCmsContentForPage,
    splitCopyOnCMSPlaceHolder,
    getRouterLinkRouteFromCopy,
    getRouterLinkDisplayTextFromCopy,
    processIfStatements } from '@/helpers/cms-content-helper';
import settleAllPromises from '@/helpers/layout-helper';
import { Form } from 'vee-validate';
import BaseFormMixin from '@/mixins/base-form-mixin.js';
import { useMainStore } from '@/store';
import widgetFields from '@/constants/cms-widget-fields';
import { toTitleCase, toDisplayPhoneNumber, formatAmountInDollars } from '@/helpers/text-helper.js';
import bailoutMessage from '@/constants/bailoutMessage';

const VERIFYING_COVERAGE = 'Verifying coverage';

export default {
    name: 'tpa-confirmation',
    components: {
        siteHeader,
        siteFooter,
        vehicleBanner,
        textBlock,
        deductibleBox,
        // eslint-disable-next-line vue/no-reserved-component-names
        Form
    },
    mixins: [BaseFormMixin],
    async beforeRouteEnter(to, from, next) {
        // Call APIs
        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
        // Settle promises and get results
        const promiseResultMap = [
            {
                resultKey: 'cmsContent',
                promise: cmsContentPromise
            }];
            // use resultMap to populate layout content.
        const resultMap = await settleAllPromises(promiseResultMap);
        next((vm) => {
            vm.setCmsContent(resultMap.cmsContent);
        });
    },
    setup() {
        const mainStore = useMainStore();
        return { mainStore };
    },
    data() {
        return {
            widget: {
                tpaConfirmation: 'TPAConfirmationContent',
                orderDetails: 'OrderDetailsContent',
                contactCarrier: 'ContactCarrierContent'
            }
        };
    },
    computed: {
        tpaConfirmationBodyOne() {
            return this.getCmsContent(this.widget.tpaConfirmation, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT)
                ?.replaceAll('{custom:phoneNumber}', this.preferredShopPhoneNumber)
                ?.replaceAll('{custom:glassShop}', this.preferredShopName);
        },
        tpaConfirmationBodyTwo() {
            return this.getCmsContent(this.widget.tpaConfirmation, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2);
        },
        preferredShopName() {
            return toTitleCase(useMainStore().order.serviceLocation.provider.companyName);
        },
        preferredShopPhoneNumber() {
            return this.toDisplayPhoneNumber(useMainStore().order.serviceLocation.provider.phoneNumber);
        },
        orderDetailsTitle() {
            return this.getCmsContent(this.widget.orderDetails, widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
        },
        orderDetailsBody() {
            const orderDetailsBodyText = this.getCmsContent(this.widget.orderDetails, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
            return this.processIfStatements(orderDetailsBodyText, 'custom', this.getCustomValueFromString);
        },
        isVerified() {
            return useMainStore().order.payment.insuranceCoverage.isVerified;
        },
        currentDeductible() {
            return useMainStore().order.currentDeductible;
        },
        deductibleBoxValue() {
            const testVerified = this.isVerified;
            const testString = VERIFYING_COVERAGE;
            if (!testVerified) {
                return testString;
            }
            // return this.isVerified ? this.formatAmountInDollars(this.currentDeductible) : VERIFYING_COVERAGE;
            return this.formatAmountInDollars(this.currentDeductible);
        },
        tpaConfirmationHeaderText() {
            return this.getCmsContent('TPAConfirmationContent', 'HeaderText');
        },
        tpaConfirmationSubheaderText() {
            return this.getCmsContent('TPAConfirmationContent', 'SubheaderText')
                ?.replaceAll('{custom:glassShop}', this.preferredShopName);
        },
        tpaConfirmationImage() {
            return this.getCmsContent('TPAConfirmationContent', 'Image');
        },
        contactCarrierText() {
            return this.getCmsContent(this.widget.contactCarrier, widgetFields.TEXT_BLOCK_WIDGET.TEXT)
                ?.replaceAll('{custom:carrierPhoneNumber}', this.carrierPhoneNumber);
        },
        // TODO: Replace with actual carrier number when account service is ready
        carrierPhoneNumber() {
            return '800-000-0000';
        },
        carrierName() {
            return this.mainStore.issConfig.clientName;
        }
    },
    mounted() {
        this.$refs.siteFooter.updateButtonText(`Go back to ${this.carrierName}`);
    },
    methods:
        {
            async forwardButtonAction() {
                return this.navigateForward();
            },
            navigateForward() {
                this.$router.navigate(
                    this.navigationScenarios.CLICKED_FORWARD,
                    this.$route
                );
            },
            getBodyTextFromCms(cmsWidgetName) {
                return this.getCmsContent(cmsWidgetName, 'BodyText');
            },
            getCustomValueFromString(str) {
                switch (str) {
                    case 'deductibleAboveZero':
                        return this.isVerified && this.currentDeductible !== 0;
                    case 'zeroDeductible':
                        return this.isVerified && this.currentDeductible === 0;
                    case 'verifyingCoverage':
                        return !this.isVerified;
                    default:
                        return null;
                }
            },
            setBailoutInfo() {
                this.mainStore.setBailout(this.$router.currentRoute, bailoutMessage.RequestCallback);
            },
            toDisplayPhoneNumber,
            toTitleCase,
            formatAmountInDollars,
            splitCopyOnCMSPlaceHolder,
            doesCopyContainRouterLink,
            getRouterLinkRouteFromCopy,
            getRouterLinkDisplayTextFromCopy,
            processIfStatements
        }
};
</script>
<style lang="scss" scoped>
.header-container {
    text-align: center;
    padding-bottom: 0.75rem;
    font-size: 1.25rem;
    color: $black;

    span {
        margin-left: 0.5rem;
    }
}

.subheader-container {
    text-align: center;
    padding-bottom: 1rem;
    font-weight: 500;
    color: $black;
}

#tpaConfirmationBodyOne {
    margin-top: 0;

    :deep(p) {
        line-height: 1.5rem;
        font-size: 14px;

        strong {
            color: $black;
        }
    }
}

#tpaConfirmationBodyTwo {
    line-height: 1.5rem;
    margin-top: 0;
}

#tpaConfirmationOrderDetailsTitle {
   font-weight: 500;
   line-height: 1.5rem;
   color: $black;
   margin-bottom: 1rem;
   margin-top: 2rem;
}

#contactCarrierText {
    line-height: 1.5rem;

    :deep(a) {
        font-weight: 500;
    }
}
</style>