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

<template>
    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
        <loadingModal ref="loadingModal" />
        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
        <div class="container position-relative">
            <div class="row">
                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
                    <hr class="my-3" />
                    <textBlock cmsWidgetName="AppointmentTimeOfService" class="time-header" />
                    <textBlock cmsWidgetName="AppointmentDateAndTime" />
                    <hr class="my-3" />
                    <div class="mobile-location-questions">
                        <div class="address-questions-container">
                            <mobileAddressQuestions
                                ref="addressQuestions"
                                v-model="this.addressQuestions"
                                captureApartmentNumberOrBusinessName="true"
                                preserveCityAndStateOnReset="true"
                                labelBold="true"
                                isStateDisabled="true"
                                isZipCodeDisabled="true" />
                            <vehicleProtectedQuestion
                                ref="vehicleProtectedQuestion"
                                v-model="this.isVehicleProtected"
                                cmsWidgetName="VehicleProtectedQuestionWidget"
                                labelBold="true" />
                            <textBlock
                                cmsWidgetName="WorkspaceRequirementsWidget"
                                typeStyle="caption" />
                            <navbar
                                cmsWidgetName="FunnelFooterWidget"
                                ref="navbar"
                                :isForwardActionDisabled="!meta.valid"
                                @back-clicked="backButtonAction"
                                @ForwardClicked="forwardButtonAction" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </Form>
</template>
<script>
//Components
import textBlock from "@/digital-components/text-block/text-block";
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import navbar from "@/fmg-components/nav-bar/nav-bar";
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 mobileAddressQuestions from "@/layouts/mobile-details/mobile-address-questions/mobile-address-questions";
import vehicleProtectedQuestion from "@/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question";
import store from "@/store";
//Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { AppointmentTypeStrings } from "@/constants/schedule-constants";
export default {
    name: "MobileDetails",
    data() {
        return {
            addressQuestions: {
                streetAddress: this.getServiceAddressFromStore(),
                apartmentNumberOrBusinessName: this.getServiceAddress2FromStore(),
                city: this.getServiceCityFromStore(),
                state: this.getServiceStateFromStore(),
                zipCode: this.getServiceZipCodeFromStore(),
            },
            isVehicleProtected: this.getIsVehicleProtectedFromStore(),
        };
    },
    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((vm) => {
            vm.setCmsContent(resultMap.cmsContent);
        });
    },
    methods: {
        arePagePrerequisitesValid() {
            const serviceLocation = store.getters.order.serviceLocation;
            const serviceLocationPreReqs =
                serviceLocation.zipCode &&
                serviceLocation.zipCodeCtu &&
                serviceLocation.appointmentType &&
                serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE;

            // Schedule
            const schedule = store.getters.order.schedule;
            const scheduleReqs = !!(
                schedule.date &&
                schedule.startTime &&
                schedule.endTime &&
                schedule.jobMaxMinutes &&
                schedule.jobMinMinutes
            );

            const preReqResult = serviceLocationPreReqs && scheduleReqs;
            return preReqResult;
        },
        getServiceAddressFromStore() {
            return store.getters.order.serviceLocation.address;
        },
        getServiceAddress2FromStore() {
            return store.getters.order.serviceLocation.address2;
        },
        getServiceCityFromStore() {
            return store.getters.order.serviceLocation.city;
        },
        getServiceStateFromStore() {
            return store.getters.order.serviceLocation.state;
        },
        getServiceZipCodeFromStore() {
            return store.getters.order.serviceLocation.zipCode;
        },
        getIsVehicleProtectedFromStore() {
            return store.getters.order.serviceLocation.isVehicleProtected;
        },
        async forwardButtonAction() {
            await this.dispatchStoreAction(
                this.storeActions.SAVE_MOBILE_DETAILS,
                {
                    address: this.addressQuestions.streetAddress,
                    address2: this.addressQuestions.apartmentNumberOrBusinessName,
                    city: this.addressQuestions.city,
                    isVehicleProtected: this.isVehicleProtected,
                },
                false
            );
            this.$router.navigateWithSaving(
                this.navigationScenarios.CLICKED_FORWARD,
                this.pageName
            );
        },
        backButtonAction() {
            this.$router.navigateWithoutSaving(
                this.navigationScenarios.CLICKED_BACK,
                this.pageName
            );
        },
    },
    computed: {
        AppointmentDateAndTime() {
            return this.getCmsContent("AppointmentDateAndTime", "Text");
        },
        AppointmentTimeOfService() {
            return this.getCmsContent("AppointmentDateAndTime", "Text");
        },
    },
    components: {
        mobileAddressQuestions,
        vehicleProtectedQuestion,
        textBlock,
        funnelHeader,
        navbar,
        funnelSubHeader,
        Form,
        loadingModal,
    },
};
</script>

<style lang="scss" scoped>
.time-header {
    font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
    font-weight: 600;
    color: $black;
}
</style>