DigitalConsumer.FixMyGlass/src/layouts/quote/quote.vue

<template>
    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
        <div class="page-container-grouped-styles">
            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
            <vehicleBanner
                cmsWidgetName="VehicleBannerWidget"
                :displayGenericVehicleImage="false" />
            <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
            <div class="fade-on-route-transition sub-container make-tall">
                <textBlock
                    cmsWidgetName="paymentServiceOptionsCopy"
                    justifyText="center"
                    typeStyle="small"
                    class="mt-2 mb-5" />
                <cashOrInsuranceQuestion
                    ref="cashOrInsurance"
                    cmsWidgetName="CashOrInsuranceQuestionWidget"
                    v-model="isInsuranceSelected"
                    groupName="CashOrInsuranceQuestion" />
                <servicePackageQuestion
                    ref="servicePackage"
                    cashCmsWidgetName="CashServicePackageQuestionWidget"
                    insuranceCmsWidgetName="InsuranceServicePackageQuestionWidget"
                    v-model="selectedPackage"
                    groupName="ServicePackageQuestion"
                    :availableLineItems="availableLineItems"
                    :isInsuranceSelected="isInsuranceSelected" />
                <textBlock
                    cmsWidgetName="quoteDisclaimer"
                    justifyText="left"
                    typeStyle="caption"
                    class="mt-4" />
                <modal cmsWidgetName="EstimateRainDefenseModal" />
                <modal cmsWidgetName="EstimateFrontWiperModal" />
                <modal cmsWidgetName="EstimateRearWiperModal" />
                <modal cmsWidgetName="EstimateRecalModal" />
                <funnel-footer
                    cmsWidgetName="FunnelFooterWidget"
                    :isForwardActionDisabled="!meta.valid"
                    :isBackButtonHidden="shouldHideBackButton"
                    @back-clicked="backButtonAction"
                    @ForwardClicked="forwardButtonAction" />
            </div>
        </div>
    </Form>
</template>

<script>
// Components
import funnelHeader from "@/common-components/funnel-header/funnel-header";
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import cashOrInsuranceQuestion from "./cash-or-insurance-question/cash-or-insurance-question";
import servicePackageQuestion from "./service-package-question/service-package-question";
import textBlock from "@/common-components/text-block/text-block";
import modal from "@/common-components/modal/modal";
import baseMixin from "@/mixins/base-mixin.js";
import vehicleQuestionsMixin from "../../mixins/vehicle-questions-mixin";
import { storeActions } from "@/constants/store-actions";

import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { Form } from "vee-validate";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";

export default {
    name: "quote",
    async beforeRouteEnter(to, from, next) {
        // Call APIs
        const cmsContent = await fetchCmsContentForPage(to.query.fmgPage);

        // TODOS - modify as needed, just a rough sketch to place initializations

        // get supporting availableLineItems

        // get wiper and rain defense availableLineItems

        // Settle promises and get results

        // get price of supporting, rain defense & wipers, and parts

        // Settle pricing promise and get results

        // Call the "next" function to complete the transition to this page.
        next((vm) => {
            vm.setCmsContent(cmsContent);
            vm.availableLineItems = [
                {
                    partNumber: "001",
                    Description: "Windshield with Recal",
                    partType: "Windshield",
                    Quantity: "1",
                    BasePartNumber: "001",
                    Color: "Green",
                    CanSafeliteRecalibrate: true,
                    price: 350.22,
                },
                {
                    partNumber: "SBB16",
                    description: "SAFELITE BEAM BLADE 16",
                    partType: "FRONT WIPER",
                    price: 32.64,
                },
                {
                    partNumber: "A DISPOSAL FEE",
                    partType: "DISPOSAL FEE",
                    price: 15.0,
                },
                {
                    partNumber: "SBB26",
                    description: "SAFELITE BEAM BLADE 26",
                    partType: "FRONT WIPER",
                    price: 53.04,
                },
                {
                    partNumber: "SBBR12A",
                    description: "SAFELITE REAR BLADE 12A",
                    partType: "REAR WIPER",
                    price: 24.48,
                },
                {
                    partNumber: "RAIN DEFENSE",
                    description: null,
                    partType: "RAIN DEFENSE",
                    price: 35.5,
                },
                {
                    partNumber: "RECAL STATIC",
                    Description: "Recalibration",
                    partType: "recalibration",
                    Quantity: "1",
                    price: 150.0,
                },
            ];
            vm.isInsuranceSelected = vm.getDefaultIsInsuranceSelectedValue();
        });
    },
    data() {
        return {
            pricingRequestResult: null,
            isInsuranceSelected: null,
            selectedPackage: null,
            availableLineItems: null,
        };
    },
    methods: {
        arePagePrerequisitesValid() {
            return true;
            //return store.getters.order.damage.isRepair || (store.getters.order.lineItems?.glassParts != null && store.getters.order.lineItems.glassParts.length > 0);
        },
        getDefaultIsInsuranceSelectedValue() {
            const defaultIsInsuranceSelectedValue = this.$store.getters.order.payment.isInsurance;
            if (defaultIsInsuranceSelectedValue != null) {
                return defaultIsInsuranceSelectedValue;
            } else {
                return this.availableLineItems
                    ? baseMixin.methods.getTierOnePackagePrice(this.availableLineItems) > 500
                    : null;
            }
        },
        backButtonAction() {
            vehicleQuestionsMixin.methods.backButtonAction(this);
        },
        forwardButtonAction() {
            // TODO KO if VAPS package is not selected, return

            // TODO KO is VAPS package is selected, add the items as needed

            this.dispatchStoreAction(storeActions.SAVE_IS_INSURANCE, this.isInsuranceSelected);

            navigateToHeritageFunnel();
        },
    },
    components: {
        funnelHeader,
        funnelFooter,
        vehicleBanner,
        funnelSubHeader,
        Form,
        textBlock,
        cashOrInsuranceQuestion,
        servicePackageQuestion,
        modal,
    },
};
</script>