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

<template>
    <Form ref="theForm" v-slot="{ meta }" @submit="onSubmit" @invalid-submit="onInvalidSubmit">
        <div class="page-container-grouped-styles">
            <siteHeader cmsWidgetName="SiteHeaderWidget" />
            <div class="main-content-container">
                <siteSubHeader
                    v-if="!isNoTpa"
                    cmsWidgetName="SiteSubHeaderWidget"
                    class="sub-header-content"
                    justification="left" />
                <siteSubHeader
                    v-else
                    cmsWidgetName="ContentGroupNoTPAWidget"
                    class="sub-header-content"
                    contentProperty="HeaderText"
                    justification="left"
                    :stripRteStyle="true"
                    subContentProperty="BodyText" />
                <textboxQuestion
                    inputId="firstNameField"
                    cmsWidgetName="FirstNameQuestion"
                    v-model="bailoutPageModel.firstName"
                    isRequired
                    ref="firstName"
                    disableAutoFill
                    :validationRules="rules.firstName" />
                <textboxQuestion
                    inputId="lastNameField"
                    cmsWidgetName="LastNameQuestion"
                    v-model="bailoutPageModel.lastName"
                    isRequired
                    ref="lastName"
                    disableAutoFill
                    :validationRules="rules.lastName" />
                <textboxQuestion
                    inputId="phoneNumberField"
                    cmsWidgetName="PhoneNumberQuestion"
                    v-model="bailoutPageModel.phoneNumber"
                    isRequired
                    ref="phoneNumber"
                    mask="###-###-####"
                    disableAutoFill
                    :validationRules="rules.phoneNumber" />
                <textboxQuestion
                    inputId="emailAddressField"
                    cmsWidgetName="EmailAddressQuestion"
                    v-model="bailoutPageModel.email"
                    isRequired
                    ref="emailAddress"
                    disableAutoFill
                    :validationRules="rules.email" />
                <siteFooter
                    class="footer-content-container"
                    cmsWidgetName="SiteFooterWidget"
                    :isForwardActionDisabled="!meta.valid"
                    @back-clicked="backButtonAction"
                    @ForwardClicked="forwardButtonAction" />
            </div>
        </div>
    </Form>
</template>
<script>
// Components
import siteHeader from '@/iss-components/site-header/site-header';
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header';
import siteFooter from '@/iss-components/site-footer/site-footer';
import textboxQuestion from '@/digital-components/textbox-question/textbox-question';
// Supporting files
import BaseFormMixin from '@/mixins/base-form-mixin.js';
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import { Form } from 'vee-validate';
import globalRules from '@/constants/global-rules';
import { settleAllPromises } from '@/helpers/layout-helper';
import { useMainStore } from '@/store';

export default {
    name: 'bailout-page',
    components: {
        siteHeader,
        siteSubHeader,
        siteFooter,
        textboxQuestion,
        // 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 {
            bailoutPageModel: this.getBailoutPageModelFromStore(),
            rules: {
                firstName: globalRules.FIRST_NAME_REQUIRED,
                lastName: globalRules.LAST_NAME_REQUIRED,
                phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT_SHORT}`,
                email: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`
            }
        };
    },
    computed: {
        isNoTpa() {
            return true; // not sure what in the data flags this.
        }
    },
    methods: {
        backButtonAction() {
            // route to move backwards
            this.$router.navigate(this.navigationScenarios.CLICKED_BACK_PREVIOUS, this.$route);
        },
        forwardButtonAction() {
            return this.navigateForward();
        },
        navigateForward() {
            this.$router.navigate(
                this.navigationScenarios.CLICKED_FORWARD,
                this.$route,
                {},
                {},
                this.bailoutPageModel
            );
        },
        getBailoutPageModelFromStore() {
            return {
                firstName: this.mainStore.order.customer.firstName,
                lastName: this.mainStore.order.customer.lastName,
                phoneNumber: this.mainStore.order.customer.phoneNumber,
                email: this.mainStore.order.customer.emailAddress
            };
        }
    }
};
</script>

<style lang="scss">
@import '@/styles/bailout-common.scss';
</style>