DigitalConsumer.FixMyGlass/src/layouts/customer-details/customer-details.vue

<template>
    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
        <div class="page-container-grouped-styles">
            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
            <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="my-5" />
            <textboxQuestion
                class="mb-4"
                cmsWidgetName="FirstNameWidget"
                v-model="firstName"
                ref="firstName"
                inputId="08497a2efd9a4a73a70360ab47b4838d"
                validationRules="first-name-required" />
            <textboxQuestion
                class="mb-4"
                cmsWidgetName="LastNameWidget"
                v-model="lastName"
                ref="lastName"
                inputId="0030e56a57e74a4ab92de7fb8e97fec5"
                validationRules="last-name-required" />
            <textboxQuestion
                class="mb-4"
                cmsWidgetName="emailQuestionWidget"
                v-model="emailAddress"
                inputId="email"
                validationRules="email-address-required|email-address-format" />
            <phoneNumberQuestion
                class="mb-4"
                cmsWidgetName="phoneNumberQuestionWidget"
                v-model="phoneNumber"
                isRequired
                validationRules="phone-number-required" />
            <checkboxQuestion
                class="mb-5"
                cmsWidgetName="TextMeQuestionWidget"
                v-model="textMeUpdates" />
            <textareaQuestion
                class="mb-4"
                v-model="techNotes"
                cmsWidgetName="TextAreaContentWidget"
                maxLength="250" />
            <textBlock cmsWidgetName="DisclaimerCopyWidget" typeStyle="caption" />
            <funnel-footer
                cmsWidgetName="FunnelFooterWidget"
                ref="funnelFooter"
                :isForwardActionDisabled="!meta.valid"
                @back-clicked="backButtonAction"
                @ForwardClicked="forwardButtonAction" />
        </div>
    </Form>
</template>

<script>
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import textareaQuestion from "@/digital-components/textarea-question/textarea-question";
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
import phoneNumberQuestion from "@/digital-components/phonenumber-question/phonenumber-question";
import textBlock from "@/digital-components/text-block/text-block";
import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
//Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { storeActions } from "@/constants/store-actions";
import { errorMessages } from "@/constants/error-messages";
import { routerParams } from "@/router/router-constants/router-params";
import { required, regex } from "@/helpers/validation-rules";
import { Form, defineRule } from "vee-validate";
import { useField, validate } from "vee-validate";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";

// DEFINE VALIDATION RULES
defineRule("first-name-required", required(errorMessages.FIRST_NAME_REQUIRED));
defineRule("last-name-required", required(errorMessages.LAST_NAME_REQUIRED));
defineRule("phone-number-required", required(errorMessages.PHONE_REQUIRED));
defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
defineRule(
    "email-address-format",
    regex(
        /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9-]+)\.([a-zA-Z]{2,})$/,
        errorMessages.EMAIL_ADDRESS_FORMAT
    )
);

export default {
    name: "customer-details",
    async beforeRouteEnter(to, from, next) {
        // Call APIs
        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);

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

        const resultMap = await settleAllPromises(promiseResultMap);

        // Call the "next" function to complete the transition to this page.
        next((vm) => {
            vm.setCmsContent(resultMap.cmsContent);
        });
    },
    data() {
        return {
            techNotes: "",
            firstName: "",
            lastName: "",
            emailAddress: "",
            phoneNumber: "",
            textMeUpdates: null,
        };
    },
    computed: {
        textAreaLabelCopy() {
            return this.getCmsContent("TextAreaContentWidget", "QuestionText");
        },
    },
    methods: {
        arePagePrerequisitesValid() {
            return true;
        },
        backButtonAction() {
            this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
        },
        forwardButtonAction() {
            navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal });
        },
    },
    components: {
        funnelHeader,
        funnelSubHeader,
        textareaQuestion,
        textboxQuestion,
        funnelFooter,
        Form,
        textBlock,
        phoneNumberQuestion,
        checkboxQuestion,
    },
};
</script>