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" />
            <div class="fade-on-route-transition sub-container make-tall">
                <serviceZipModalQuestion
                    v-model="serviceZipCodeQuestion"
                    @updated-service-zip-code="resetMobileLocation"
                    ref="serviceZipCodeQuestion"
                    linkWidgetName="ServiceZipLinkWidget"
                    modalWidgetName="ServiceZipModalWidget" />
                <serviceTypeQuestion
                    v-model="selectedServiceType"
                    ref="serviceTypeQuestion"
                    groupName="ServiceTypeQuestion"
                    cmsWidgetName="ServiceTypeQuestionWidget"
                    validationRules="option-required" />
                <mobileLocationModalQuestions
                    v-if="selectedServiceType === 'Mobile'"
                    v-model="mobileLocationQuestions"
                    ref="mobileLocationModalQuestions"
                    linkWidgetName="MobileLocationLinkWidget"
                    modalWidgetName="MobileLocationModalWidget" />
                <funnel-footer
                    cmsWidgetName="FunnelFooterWidget"
                    ref="funnelFooter"
                    :isForwardActionDisabled="!meta.valid"
                    @back-clicked="backButtonAction"
                    @ForwardClicked="forwardButtonAction" />
            </div>
        </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 serviceTypeQuestion from "@/layouts/service-location/service-type-question/service-type-question";
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";

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,
            selectedServiceType: 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;

                console.log(this);
            },
        },
        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;
            },
        },
    },
    methods: {
        arePagePrerequisitesValid() {
            return true;
            // 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) {
            if (!this.$refs.mobileLocationModalQuestions) {
                return;
            }

            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,
        serviceTypeQuestion,
        mobileLocationModalQuestions,
        funnelHeader,
        funnelFooter,
        funnelSubHeader,
        Form,
        loadingModal,
    },
};
</script>

<style lang="scss">
.question-text {
    & > span {
        text-align: center;
    }
}
</style>