DigitalConsumer.FixMyGlass/src/layouts/part-questions/part-questions.vue

<template>
    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
        <questions-page-layout
            ref="questionsPageLayout"
            :isMetaValid="meta.valid"
            :alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader"
            :alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy"
            v-if="questionsData"
            :questionsData="questionsData"
            validationRules="questions-required"
            v-model="selectedAnswers"
            @forwardButtonAction="forwardButtonAction"
            @back-click="navigateBack"
            :key="currentGlassIndex"
            :index="currentGlassIndex">
            <!-- save progress goes into <slot> on questions-page-layout -->
            <saveProgressModalQuestion
                modalWidgetName="SaveProgressModalWidget"
                pageName="part-questions"
                v-if="showSaveProgressModal" />
        </questions-page-layout>
    </Form>
</template>

<script>
// Components
import questionsPageLayout from "@/fmg-components/layouts/questions-page-layout/questions-page-layout";
import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question";
import { hasSaveProgressContactInStore } from "@/helpers/save-progress-popup-contact-helper";

// Supporting Files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import store from "@/store";
import { storeActions } from "@/constants/store-actions";
import { routeData } from "@/router/constants/routes";
import { Form, defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
import baseMixin from "@/mixins/base-mixin.js";

// DEFINE VALIDATION RULES
defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));

export default {
    name: "part-questions",
    mixins: [vehicleQuestionsMixin],
    async beforeRouteEnter(to, from, next) {
        // Call APIs
        const cmsContentPromise = fetchCmsContentForPage(to.name);

        // 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(async (vm) => {
            vm.setCmsContent(resultMap.cmsContent);
            vm.showSaveProgressModal = !hasSaveProgressContactInStore(
                store.getters.order?.customer
            );
            if (store.getters.externalParameterState?.isExternalParameter) {
                if (store.getters.externalParameterServiceZip.zipCode) {
                    const serviceState = store.getters.order.serviceLocation.state;
                    const serviceZipCtu = store.getters.order.serviceLocation.zipCodeCtu;
                    await baseMixin.methods.dispatchStoreAction(
                        storeActions.SAVE_SERVICE_ZIP_CODE_INFO,
                        {
                            zipCode: store.getters.externalParameterServiceZip.zipCode,
                            state: serviceState ?? null,
                            zipCodeCtu: serviceZipCtu ?? null,
                        },
                        false
                    );
                }

                if (store.getters.externalParameterCustomer?.phoneNumber) {
                    await baseMixin.methods.dispatchStoreAction(
                        storeActions.SAVE_PHONE_NUMBER,
                        store.getters.externalParameterCustomer.phoneNumber,
                        false
                    );

                    await baseMixin.methods.dispatchStoreAction(
                        storeActions.SAVE_IS_SMS_OPT_IN,
                        true,
                        false
                    );
                }

                baseMixin.methods.ResetExternalParamsAndHideModal();
            }
        });
    },
    data() {
        return {
            questionsData: null,
            selectedAnswers: {},
            currentGlassIndex: 0,
            showSaveProgressModal: null,
        };
    },
    computed: {
        AlertFewMoreQuestionsHeader() {
            return this.getCmsContent("AlertPartsQuestions", "HeadlineText");
        },
        AlertFewMoreQuestionsCopy() {
            return this.getCmsContent("AlertPartsQuestions", "BodyText");
        },
        partsOrQuestionsData() {
            return this.$store.getters.pageData(routeData.PART_QUESTIONS.name).partsOrQuestions;
        },
    },
    mounted() {
        this.getInitialQuestionData();
    },
    methods: {
        arePagePrerequisitesValid() {
            const partQuestionsFromPageData = store.getters.pageData(routeData.PART_QUESTIONS.name);
            return (
                // has .partQuestions array and has glassName not null
                partQuestionsFromPageData?.partsOrQuestions?.some((part) => part?.glassName) &&
                partQuestionsFromPageData?.partsOrQuestions?.some(
                    (part) => part?.partQuestions?.length > 0
                )
            );
        },
        getInitialQuestionData() {
            // get any questions that were already answered
            const alreadyAnsweredQuestions = store.getters.damage.partQuestionAnswers;

            this.questionsData = this.partsOrQuestionsData
                .filter((x) => x.partQuestions)
                .map((glass, index) => {
                    // NOTE: questions for property "questions" can differ between layouts
                    glass.questions = glass.partQuestions;
                    glass.answerKey = glass.glassLocation + "-" + glass.glassName;
                    // reset selectedAnswers for this glass
                    this.selectedAnswers[glass.answerKey] = [];

                    const updatedGlass = this.setupInitialData(
                        glass,
                        index,
                        alreadyAnsweredQuestions
                    );

                    // Set up watch for each set of glass questions
                    this.$watch(
                        "selectedAnswers." + glass.answerKey,
                        (newValue) => {
                            if (newValue && Object.keys(newValue).length > 0) {
                                this.handleCompletedQuestionChainAnswers(newValue, glass.answerKey);
                            }
                        },
                        { deep: true }
                    );

                    return updatedGlass;
                });

            // if no preanswered questions then make sure index starts with the correct value
            this.currentGlassIndex = this.calculateQuestionIndex(
                this.currentGlassIndex,
                this.questionsData
            );
        },
        async forwardButtonAction() {
            const questionAnswersArray = this.questionsData.map((glass) => {
                return {
                    glassLocation: glass.glassLocation,
                    glassName: glass.glassName,
                    result: (glass.answerData && glass.answerData.answerResult) || "",
                    problemQuestionId: glass.answerData?.problemQuestionId ?? null,
                    answeredQuestions: glass.answerData?.answeredQuestions,
                    isSuppressedPart: glass.isSuppressedPart,
                };
            });

            this.dispatchStoreAction(this.storeActions.SAVE_IS_OEM_GLASS_SELECTED, false, false);

            // save to vuex store as order.damage.partQuestionAnswers (array)
            // used in GET_PARTS call following this one
            await this.dispatchStoreAction(
                this.storeActions.SAVE_PART_QUESTION_ANSWERS,
                questionAnswersArray,
                false
            );

            // call API parts method
            const partsLookup = await this.dispatchStoreActionWithLogging(
                this.storeActions.GET_PARTS,
                null,
                "part-questions"
            );

            const glassPartsForStore = partsLookup.data.glassPieceParts;

            this.navigateForward(glassPartsForStore);

            this.clearQuestionsAnswerData();
        },
    },
    components: {
        Form,
        questionsPageLayout,
        saveProgressModalQuestion,
    },
};
</script>