DigitalConsumer.ISS/src/layouts/service-packages/service-packages.vue

<template>
    <Form
        ref="theForm"
        v-slot="{ meta }"
        @submit="onSubmit"
        @invalid-submit="onInvalidSubmit">
        <div class="container-fluid fade-on-route-transition service-packages">
            <div class="row justify-content-center">
                <div class="col-md-6 px-0 px-md-2">
                    <siteHeader cmsWidgetName="SiteHeaderWidget" />
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-6 col-xl-4">
                    <siteSubHeader
                        class="mb-2 mt-4"
                        subHeaderClasses="mt-5"
                        justification="left"
                        cmsWidgetName="SiteSubHeaderWidget"
                        issContainingPage="service-packages" />
                    <servicePackageQuestion
                        ref="servicePackage"
                        cmsWidgetName="ServicePackage"
                        groupName="ServicePackageQuestion"
                        :availableLineItems="availableLineItems"
                        :validationRules="rules.optionRequired"
                        isRequired
                        @vapsItemsSelected="vapsItemsSelectedAction"
                        @link-event="openModalAction" />
                    <p
                        class="caption disclaimer"
                        v-html="PriceDisclaimerText"></p>
                    <siteFooter
                        cmsWidgetName="SiteFooterWidget"
                        :isForwardActionDisabled="!meta.valid"
                        @backClicked="navigateBack"
                        @ForwardClicked="forwardButtonAction" />
                </div>
            </div>
            <loadingModal
                ref="loadingModal"
                :textSlides="loadingText" />
            <contentGroupModal
                ref="RainDefenseModal"
                cmsWidgetName="RainDefenseModal" />
            <contentGroupModal
                ref="FrontWiperModal"
                cmsWidgetName="FrontWiperModal" />
            <contentGroupModal
                ref="RearWiperModal"
                cmsWidgetName="RearWiperModal" />
            <contentGroupModal
ref="RecalModal"
cmsWidgetName="RecalModal" />
        </div>
    </Form>
</template>

<script>
// Components
import baseFormMixin from '@/mixins/base-form-mixin';
import siteHeader from '@/iss-components/site-header/site-header.vue';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
import loadingModal from '@/iss-components/loading-modal/loading-modal.vue';
import settleAllPromises from '@/helpers/layout-helper';
import { useMainStore } from '@/store';
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import { Form } from 'vee-validate';
import allGlassPartsAndItemsHavePrices from '@/layouts/service-packages/service-package-helper/service-package-helper';
import globalRules from '@/constants/global-rules';
import servicePackageQuestion from '@/layouts/service-packages/service-package-question/service-package-question.vue';
import issPageValues from '@/router/router-constants/issPage-values';
import bailoutCode from '@/constants/bailoutCode';
import bailoutMessage from '@/constants/bailoutMessage';

const store = useMainStore();

export default {
    name: 'service-packages',
    components: {
        siteHeader,
        siteFooter,
        siteSubHeader,
        // eslint-disable-next-line vue/no-reserved-component-names
        Form,
        servicePackageQuestion,
        loadingModal,
        contentGroupModal
    },
    mixins: [baseFormMixin],
    async beforeRouteEnter(to, from, next) {
        // Call APIs
        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);

        const wipersPromise = await store.getWipers();
        const rainDefensePromise = await store.getRainDefense();
        const supportingItemsPromise = await store.getSupportingItems();
        const promiseResultMap = [
            {
                resultKey: 'cmsContent',
                promise: cmsContentPromise
            },
            {
                resultKey: 'wipers',
                promise: wipersPromise
            },
            {
                resultKey: 'rainDefense',
                promise: rainDefensePromise
            },
            {
                resultKey: 'supportingItems',
                promise: supportingItemsPromise
            }
        ];
        const resultMap = await settleAllPromises(promiseResultMap);

        const clonedGlassParts = store.order.lineItems.glassParts
            ? JSON.parse(JSON.stringify(store.order.lineItems.glassParts))
            : [];
        const availableLineItems = [
            resultMap.rainDefense,
            ...resultMap.supportingItems,
            ...resultMap.wipers,
            ...clonedGlassParts
        ];

        let hasBailedOut = false;
        const pricingResults = await store
            .getInsurancePriceOrderItems(availableLineItems)
            .catch((err) => {
                useMainStore().setBailout(bailoutMessage.pricingResponseError(
                    availableLineItems.map((li) => li.partNumber),
                    { code: err.code, message: err.message, data: err.data }
                ));
                hasBailedOut = true;
                next(`/?issPage=${issPageValues.BAILOUT_PAGE}`);
            });

        // Call the "next" function to complete the transition to this page.
        if (!hasBailedOut) {
            next((vm) => {
                vm.setCmsContent(resultMap.cmsContent);
                vm.pricedGlassParts = clonedGlassParts;
                vm.supportingItems = resultMap.supportingItems;
                vm.availableLineItems = pricingResults;
            });
        }
    },
    data() {
        return {
            selectedVaps: [],
            availableLineItems: [],
            supportingItems: [],
            pricedGlassParts: [],
            loadingText: [
                'Finding shops near you',
                'Looking for dates',
                'Searching for times',
                'Nearly there',
                'Finishing up'
            ],
            rules: {
                optionRequired: globalRules.OPTION_REQUIRED
            }
        };
    },
    computed: {
        PriceDisclaimerText() {
            return this.getCmsContent('PriceDisclaimerWidget', 'Text');
        }
    },
    methods: {
        openModalAction(modalName) {
            this.$refs[modalName.args].openModal();
        },
        arePagePrerequisitesValid() {
            return (
                store.order.serviceLocation.zipCode
                && store.order.serviceLocation.zipCodeCtu
                && (store.order.damage.isRepair
                    || (store.order.lineItems?.glassParts != null
                        && store.order.lineItems.glassParts.length > 0))
            );
        },
        vapsItemsSelectedAction(vapsItemsSelected) {
            this.selectedVaps = vapsItemsSelected;
        },
        forwardButtonAction() {
            const parts = {
                glassParts: this.pricedGlassParts,
                supportingItems: this.supportingItems,
                vaps: this.selectedVaps
            };
            if (!allGlassPartsAndItemsHavePrices(parts)) {
                window.console.error('One or more items have no price assigned!');
            }
            if (this.pricedGlassParts.length > 0) {
                store.updateGlassParts(this.pricedGlassParts);
            }
            store.updateSupportingItems(this.supportingItems);
            store.updateVaps(this.selectedVaps);

            this.$router.navigate(
                this.navigationScenarios.CLICKED_FORWARD,
                this.$route
            );
        }
    }
};
</script>

<style lang="scss" scoped>
.subheader-secondary {
    margin-top: 0.5rem;
    padding: 0px;
}

.disclaimer {
    margin: 1.3rem 0 1.5rem 0;

    a {
        color: #4d5151;
        font-weight: 400;
    }
}
.service-packages {
    :deep(strong) {
        font-weight: $font-weight-bold;
    }
}

</style>