DigitalConsumer.ISS/src/layouts/tpa-submit/tpa-submit.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="widget.siteHeader" />
                <div class="container-fluid px-6">
                    <vehicleBanner
                        :cmsWidgetName="widget.vehicleBanner"
                        :displayGenericVehicleImage="false" />
                    <textBlock
                        :customText="subHeaderTitle"
                        typeStyle="h5"
                        justifyText="center"
                        class="dark-header mt-4" />
                    <textBlock
                        :customText="subHeaderBody"
                        typeStyle="body"
                        justifyText="left"
                        margin="mt-0 mb-2" />
                    <buttonMain
                        ref="buttonMain"
                        isPrimary
                        :buttonText="forwardButtonText"
                        loaderColor="white"
                        class="mb-2 w-100"
                        @clickEvent="forwardButtonAction" />
                    <hr />

                    <textBlock
                        customText="Service Summary"
                        typeStyle="label bold"
                        justifyText="justify-text-left"
                        margin="mt-0"
                        class="dark-header" />

                    <!-- TODO Service Summary title -->
                        <!-- TODO Vehicle piece -->
                        <!-- TODO Damage piece -->
                        <!-- TODO Preferred Shop piece -->
                        <!-- TODO Contact details piece -->
                    <!-- TODO Order details title -->
                    <!-- TODO Order details body -->
                    <!-- TODO Green Deductible Rectangle -->
                    <siteFooter
                        ref="siteFooter"
                        class="mt-5"
                        cmsWidgetName="SiteFooterWidget"
                        :isForwardActionDisabled="!meta.valid"
                        @backClicked="navigateBack"
                        @forwardClicked="forwardButtonAction" />
                </div>
            </div>
        </div>
    </Form>
    <!-- <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 cmsWidgetName="SiteHeaderWidget" />
                <div class="container-fluid pb-2 submit">
                    <p>Placeholder for TPA-Submit</p>
                    <siteFooter
                    ref="siteFooter"
                    cmsWidgetName="SiteFooterWidget"
                    :isForwardActionDisabled="!meta.valid"
                    @ForwardClicked="forwardButtonAction"
                    @backClicked="backButtonAction" />
                </div>
            </div>
        </div>
    </Form> -->
</template>
<script>
// Components
import siteHeader from '@/iss-components/site-header/site-header.vue';
import buttonMain from '@/ux-components/button-main/button-main.vue';
import textBlock from '@/digital-components/text-block/text-block.vue';
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';

// Supporting files
import { fetchCmsContentForPage } 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 widgetFields from '@/constants/cms-widget-fields.js';

export default {
    name: 'tpa-submit',
    components: {
        siteHeader,
        vehicleBanner,
        textBlock,
        buttonMain,
        siteFooter,
        // eslint-disable-next-line vue/no-reserved-component-names
        Form
    },
    mixins: [BaseFormMixin],
    async beforeRouteEnter(to, from, next) {
        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
        const promiseResultMap = [
            {
                resultKey: 'cmsContent',
                promise: cmsContentPromise
            }
        ];
        const resultMap = await settleAllPromises(promiseResultMap);

        next((vm) => {
            vm.setCmsContent(resultMap.cmsContent);
        });
    },
    data() {
        return {
            widget: {
                siteHeader: 'SiteHeaderWidget',
                siteSubHeader: 'SiteSubHeaderWidget',
                vehicleBanner: 'VehicleBannerWidget',
                footer: 'SiteFooterWidget'
            },
            widgetFields
        };
    },
    computed: {
        subHeaderTitle() {
            return this.getCmsContent(this.widget.siteSubHeader, 'SubHeaderText');
        },
        subHeaderBody() {
            const initial = this.getCmsContent(this.widget.siteSubHeader, 'SecondaryText');
            const x = initial.replace('{custom:glassShop}', 'Random Shop Name');
            return x;
            // return this.getCmsContent(this.widget.siteSubHeader, 'SecondaryText');
        },
        forwardButtonText() {
            return this.getCmsContent(this.widget.footer, 'ForwardButtonText');
        }
        // getSubheaderTextFromCms(cmsWidgetName) {
        //     const subHeader = this.getCmsContent(cmsWidgetName, 'SubHeaderText');
        //     console.log(JSON.stringify(subHeader));
        //     return this.processIfStatements(subHeader, 'custom', this.getCustomValueFromString);
        // }
    },
    methods:
        {
            backButtonAction() {
                this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
            },
            forwardButtonAction() {
                this.$router.navigate(
                    this.navigationScenarios.CLICKED_FORWARD,
                    this.$route
                );
            },
            getCustomValueFromString(str) {
                console.log(`string val: ${str}`);
                switch (str) {
                    case 'glassShop':
                        return 'Fake Glass Shop';
                    default:
                        return null;
                }
            }
        }
};
</script>
<style lang="scss" scoped>
.submit {
  margin-bottom:0.75rem;
}

</style>