DigitalConsumer.ISS/src/layouts/schedule-page/schedule-page.vue

<template>
    <Form
        ref="theForm"
        v-slot="{ meta }"
        @submit="onSubmit"
        @invalidSubmit="onInvalidSubmit">
        <div class="page-container-grouped-styles">
            <siteHeader cmsWidgetName="SiteHeaderWidget" />
            <siteSubHeader
                cmsWidgetName="ScheduleSubHeaderWidget"
                subTextClasses="text-center small sub-text"
                class="mt-5" />
            <template v-if="ChangeShopLink.length">
                <textBlock
                    cmsWidgetName="ChangeShopLink"
                    justifyText="center"
                    class="mb-3 text-link-small"
                    marginTopSizeOverride="1" />
            </template>
            <div class="main-content-container">
                <locationAlerts
                    ref="locationAlerts"
                    cmsWidgetPrefix="LocationAlert-" />
                <siteFooter
                    ref="siteFooter"
                    class="mt-5"
                    cmsWidgetName="SiteFooterWidget"
                    :isForwardActionDisabled="!meta.valid"
                    @backClicked="backButtonAction"
                    @forwardClicked="forwardButtonAction" />
            </div>
        </div>
    </Form>
</template>
<script>
// Components
import siteHeader from '@/iss-components/site-header/site-header.vue';
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
import locationAlerts from '@/layouts/schedule-page/location-alerts/location-alerts.vue';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import textBlock from '@/digital-components/text-block/text-block.vue';

// Supporting files
import { AppointmentTypeStrings } from '@/constants/schedule-constants.js';
import { fetchCmsContentForPage, splitCopyOnCMSPlaceHolder } 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';

export default {
    name: 'schedule-page',
    components: {
        siteHeader,
        siteSubHeader,
        locationAlerts,
        siteFooter,
        textBlock,
        // 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);

        const alertReasonsPromise = locationAlerts.methods.loadInitialData(
            useMainStore().order.serviceLocation.zipCodeCtu,
            useMainStore().order.serviceLocation.provider?.address?.zipCodeCtu
        );

        // Settle promises and get results
        const promiseResultMap = [
            {
                resultKey: 'cmsContent',
                promise: cmsContentPromise
            },
            {
                resultKey: 'alertReasons',
                promise: alertReasonsPromise
            }
        ];

        // use resultMap to populate layout content.
        const resultMap = await settleAllPromises(promiseResultMap);
        next((vm) => {
            vm.setCmsContent(resultMap.cmsContent);
            vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
        });
    },
    setup() {
        const mainStore = useMainStore();
        return { mainStore };
    },
    data() {

    },
    computed: {
        ChangeShopLinkText() {
            return this.getCmsContent('ChangeShopLink', 'Text');
        },
        ChangeShopLink() {
            // Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
            return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
        }
    },
    methods: {
        splitCopyOnCMSPlaceHolder,
        arePagePrerequisitesValid() {
            const { serviceLocation } = useMainStore().order;
            const serviceLocationPreReqs = serviceLocation.zipCode
                && serviceLocation.zipCodeCtu
                && serviceLocation.appointmentType
                && (serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE
                    || serviceLocation.provider.providerNumber);
            const paymentInfo = useMainStore().payment.isInsurance !== null;
            const supportingItems = useMainStore().lineItems.supportingItems !== null;
            const damageInfo =
                useMainStore().order.damage.isRepair
                || (useMainStore().order.lineItems?.glassParts != null
                    && useMainStore().order.lineItems.glassParts.length > 0);
            return serviceLocationPreReqs && paymentInfo && supportingItems && damageInfo;
        },
        backButtonAction() {
            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
        },

        forwardButtonAction() {
            // validate and save here
            this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route);
        },

        navigateForward() {
        }
    }
};
</script>
<style lang="scss" scoped>
$page-side-padding: 1.5rem;

.page-container-grouped-styles {
    overflow: auto;

    .main-content-container {
        padding: 0 1.5rem !important;
    }
}

:deep(.text-link-small) {
    a, .btn-link {
        font-size: 0.875rem;
        line-height: 1.5;
    }
}

:deep(.subheader-primary) {
    h5.dark-header {
        margin-bottom: 0.25rem !important;
    }
}
</style>