DigitalConsumer.FixMyGlass/src/layouts/service-location/service-location.vue

<template>
    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
        <div class="page-container-grouped-styles">
            <loadingModal ref="loadingModal" />
            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
            <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
            <serviceZipModalQuestion
                v-model="serviceZipCodeQuestion"
                @updated-service-zip-code="resetMobileLocation"
                ref="serviceZipCodeQuestion"
                linkWidgetName="ServiceZipLinkWidget"
                modalWidgetName="ServiceZipModalWidget" />
            <div class="text-center">
                <label
                    for="mobileLocationLinkPromptId"
                    :aria-label="mobileLocationLinkPromptText"
                    class="form-label fw-bold w-100 ps-4 pe-4 pt-4"
                    v-html="mobileLocationLinkPromptText"></label>
            </div>
            <mobileLocationModalQuestions
                v-model="mobileLocationQuestions"
                ref="mobileLocationModalQuestions"
                linkWidgetName="MobileLocationLinkWidget"
                modalWidgetName="MobileLocationModalWidget" />
            <div class="text-center">
                <textBlock :customText="mobileFeeDisclaimerText" typeStyle="caption" />
            </div>
            <funnel-footer
                cmsWidgetName="FunnelFooterWidget"
                ref="funnelFooter"
                :isForwardActionDisabled="!meta.valid"
                @back-clicked="backButtonAction"
                @ForwardClicked="forwardButtonAction" />
        </div>
    </Form>
</template>

<script>
// Components
import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question";
import mobileLocationModalQuestions from "@/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions";
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 loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import { Form } from "vee-validate";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
import { getPricedMobileFeePart } from "@/helpers/service-location-helper";
import store from "@/store";
import textBlock from "@/digital-components/text-block/text-block";

export default {
    name: "service-location",
    data() {
        return {
            streetAddress: this.getServiceAddressFromStore(),
            apartmentNumberOrBusinessName: "",
            city: this.getServiceCityFromStore(),
            state: this.getServiceStateFromStore(),
            zipCode: this.getServiceZipCodeFromStore(),
            isServiceable: false,
            isZipServiceableMobile: null,
            isZipServiceableInShop: null,
            mobileFeePart: null,
        };
    },
    async beforeRouteEnter(to, from, next) {
        // Call APIs
        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);

        const serviceZipCode = store.getters.order.serviceLocation.zipCode;
        const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode);

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

        const resultMap = await settleAllPromises(promiseResultMap);

        // Call the "next" function to complete the transition to this page.
        next((vm) => {
            vm.setCmsContent(resultMap.cmsContent);
            vm.setData(resultMap.mobileFeePart);
        });
    },
    computed: {
        serviceZipCodeQuestion: {
            get: function () {
                return {
                    state: this.state,
                    zipCode: this.zipCode,
                    isServiceable: this.isServiceable,
                };
            },
            set: function (newValue) {
                if (newValue.zipCode !== this.zipCode) {
                    this.resetMobileLocation(this.zipCode);
                }

                this.state = newValue.state;
                this.zipCode = newValue.zipCode;
                this.isServiceable = newValue.isServiceable;
            },
        },
        mobileLocationQuestions: {
            get: function () {
                return {
                    addressQuestions: {
                        streetAddress: this.streetAddress,
                        apartmentNumberOrBusinessName: this.apartmentNumberOrBusinessName,
                        city: this.city,
                        state: this.state,
                        zipCode: this.zipCode,
                    },
                    isVehicleProtected: this.isVehicleProtected,
                    mobileFeePart: this.mobileFeePart,
                };
            },
            set: function (newValue) {
                this.streetAddress = newValue.addressQuestions.streetAddress;
                this.apartmentNumberOrBusinessName =
                    newValue.addressQuestions.apartmentNumberOrBusinessName;
                this.city = newValue.addressQuestions.city;
                this.state = newValue.addressQuestions.state;
                this.zipCode = newValue.addressQuestions.zipCode;
                this.isVehicleProtected = newValue.isVehicleProtected;
                this.mobileFeePart = newValue.mobileFeePart;
            },
        },
        mobileLocationLinkPromptText() {
            return this.getCmsContent("MobileLocationLinkWidget", "HeaderText");
        },
        mobileFeeDisclaimerText() {
            const cmsContentText = this.getCmsContent("MobileFeeDisclaimerWidget", "Text");
            return cmsContentText.replaceAll("{custom:mobileFee}", this.mobileFee);
        },
        mobileFee() {
            if (!this.mobileFeePart) {
                return 0;
            }
            return (
                this.mobileFeePart.laborAmount +
                this.mobileFeePart.sellingPrice +
                this.mobileFeePart.kitPrice
            );
        },
    },
    methods: {
        arePagePrerequisitesValid() {
            return (
                store.getters.lineItems.supportingItems !== null &&
                store.getters.order.serviceLocation.zipCode !== null &&
                store.getters.payment.isInsurance !== null
            );
        },
        setData(mobileFeePart) {
            if (mobileFeePart) {
                this.mobileFeePart = mobileFeePart;
            }
        },
        getServiceAddressFromStore() {
            return store.getters.order.serviceLocation.address;
        },
        getServiceCityFromStore() {
            return store.getters.order.serviceLocation.city;
        },
        getServiceStateFromStore() {
            return store.getters.order.serviceLocation.state;
        },
        getServiceZipCodeFromStore() {
            return store.getters.order.serviceLocation.zipCode;
        },
        getIsServiceableFromStore() {
            return store.getters.order.serviceLocation.isServiceable;
        },
        resetMobileFeePart(serviceZipCode) {
            getPricedMobileFeePart(serviceZipCode).then((pricedMobileFeePart) => {
                this.mobileFeePart = pricedMobileFeePart;
            });
        },
        resetMobileLocation(updatedServiceZipCode) {
            this.streetAddress = "";
            this.apartmentNumberOrBusinessName = "";
            this.city = "";
            this.isVehicleProtected = null;

            this.$refs.mobileLocationModalQuestions.resetComponent();

            this.resetMobileFeePart(updatedServiceZipCode);
        },
        backButtonAction() {
            this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
        },
        forwardButtonAction() {
            navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal });
        },
    },
    components: {
        serviceZipModalQuestion,
        mobileLocationModalQuestions,
        funnelHeader,
        funnelFooter,
        funnelSubHeader,
        Form,
        loadingModal,
        textBlock,
    },
};
</script>