DigitalConsumer.FixMyGlass/src/layouts/review/review.vue

<template>
    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
        <!-- When customer-details is added: v-slot="{ meta }" -->
        <div class="container-fluid">
            <div class="row">
                <div class="col">
                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
                </div>
            </div>
            <div class="row justify-content-md-center">
                <div class="col-md-6 col-xl-4">
                    <vehicleBanner
                        cmsWidgetName="VehicleBannerWidget"
                        :displayGenericVehicleImage="false" />

                    <textBlock
                        :customText="subHeaderTitle"
                        typeStyle="h5"
                        justifyText="center"
                        margin="mt-1"
                        class="dark-header" />
                    <textBlock
                        :customText="subHeaderBody"
                        typeStyle="body"
                        justifyText="left"
                        margin="mt-0 mb-2" />

                    <buttonMain
                        ref="buttonMain"
                        isPrimary
                        :buttonText="forwardButtonText"
                        loaderColor="white"
                        class="mb-2"
                        @click-event="forwardButtonAction" />

                    <div>
                        <hr />
                    </div>

                    <textBlock
                        customText="Appointment Details"
                        typeStyle="label bold"
                        justifyText="justify-text-left"
                        margin="mt-0"
                        class="dark-header" />

                    <div class="px-4">
                        <vehicleReview
                            cmsWidgetName="VehicleReviewWidget"
                            :vehicle="vehicleInfo"
                            @edit-clicked="editVehicle" />

                        <hr class="my-0" />

                        <damageReview
                            cmsWidgetName="DamageReviewWidget"
                            damageLocationsWidgetName="DamageLocationsWidget"
                            :damage="damageInfo"
                            @edit-clicked="editDamage" />

                        <hr class="my-0" />

                        <servicePackageReview
                            ref="servicePackageReview"
                            servicePackageOptionsCmsName="ServicePackageTitle"
                            defaultPackageItemsCmsName="DefaultPackageItemDescriptions"
                            vapsItemsCmsName="VapsItemDescriptions"
                            :damage="damageInfo"
                            :lineItems="lineItems"
                            @edit-clicked="editServicePackage" />

                        <hr class="my-0" />

                        <serviceLocationReview
                            cmsWidgetName="ServiceLocationTitleWidget"
                            :serviceLocation="serviceLocationInfo"
                            @edit-clicked="editServiceLocation" />

                        <hr class="my-0" />

                        <scheduleReview
                            cmsWidgetName="ScheduleWidget"
                            :appointmentType="appointmentType"
                            @edit-clicked="editSchedule" />

                        <hr class="my-0" />

                        <customerReview
                            cmsWidgetName="CustomerReviewWidget"
                            :customer="customerInfo"
                            @edit-clicked="editCustomerDetails" />
                    </div>

                    <div>
                        <hr class="my-0" />
                    </div>

                    <navbar
                        cmsWidgetName="FunnelFooterWidget"
                        @back-clicked="backButtonAction"
                        @ForwardClicked="forwardButtonAction" />
                </div>
            </div>
        </div>
    </Form>
</template>

<script>
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import navbar from "@/fmg-components/nav-bar/nav-bar";
import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
import buttonMain from "@/ux-components/button-main/button-main";
import textBlock from "@/digital-components/text-block/text-block";

import vehicleReview from "@/layouts/review/review-sections/vehicle-review/vehicle-review";
import damageReview from "@/layouts/review/review-sections/damage-review/damage-review";
import servicePackageReview from "@/layouts/review/review-sections/service-package-review/service-package-review";
import serviceLocationReview from "@/layouts/review/review-sections/service-location-review/service-location-review";
import scheduleReview from "@/layouts/review/review-sections/schedule-review/schedule-review";
import customerReview from "@/layouts/review/review-sections/customer-review/customer-review";

import { AppointmentTypeStrings } from "@/constants/schedule-constants";

import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import store from "@/store";

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

        const servicePackageInitialDataPromise = servicePackageReview.methods.loadInitialData();

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

        const resultMap = await settleAllPromises(promiseResultMap);

        next((vm) => {
            vm.setCmsContent(resultMap.cmsContent);

            vm.$refs.servicePackageReview.initializeComponent(resultMap.servicePackageData);
        });
    },
    data() {
        return {};
    },
    methods: {
        arePagePrerequisitesValid() {
            // Vehicle
            const vehicle = store.getters.order.vehicle;
            const vehicleReqs = !!(vehicle.year && vehicle.make && vehicle.model && vehicle.style);

            // Damage
            const damage = store.getters.order.damage;
            const damageReqs = !!(
                (damage.isRepair && damage.numberOfChips) ||
                (!damage.isRepair && damage.glassToReplace?.length)
            );

            // Service Package
            const lineItems = store.getters.order.lineItems;
            // damageReqs handles checking for damage, even though it is also required for this section.
            const packageReqs = !!(
                (damage.isRepair || lineItems.glassParts) &&
                lineItems.supportingItems &&
                lineItems.vaps
            );

            // Service Location
            const serviceLocation = store.getters.order.serviceLocation;
            const mobileReqs = !!(
                serviceLocation.address &&
                serviceLocation.city &&
                serviceLocation.state &&
                serviceLocation.zipCode
            );

            const providerLocation = serviceLocation.provider.address;
            const dropOffInshopReqs = !!(
                providerLocation.streetAddress &&
                providerLocation.city &&
                providerLocation.state &&
                providerLocation.zipCode
            );

            const isMobile = serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE;

            const serviceLocationReqs =
                (isMobile && mobileReqs) || (!isMobile && dropOffInshopReqs);

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

            // Customer
            const customer = store.getters.order.customer;
            const customerReqs = !!(
                customer.firstName &&
                customer.lastName &&
                customer.phoneNumber &&
                customer.emailAddress
            );

            return (
                vehicleReqs &&
                damageReqs &&
                packageReqs &&
                serviceLocationReqs &&
                scheduleReqs &&
                customerReqs
            );
        },
        backButtonAction() {
            this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
        },
        forwardButtonAction() {},
        editVehicle() {
            this.$router.navigateWithoutSaving(
                this.navigationScenarios.CLICKED_VEHICLE_EDIT,
                this.$route
            );
        },
        editDamage() {
            this.$router.navigateWithoutSaving(
                this.navigationScenarios.CLICKED_DAMAGE_EDIT,
                this.$route
            );
        },
        editServicePackage() {
            this.$router.navigateWithoutSaving(
                this.navigationScenarios.CLICKED_SERVICE_PACKAGE_EDIT,
                this.$route
            );
        },
        editServiceLocation() {
            this.$router.navigateWithoutSaving(
                this.navigationScenarios.CLICKED_SERVICE_LOCATION_EDIT,
                this.$route
            );
        },
        editSchedule() {
            this.$router.navigateWithoutSaving(
                this.navigationScenarios.CLICKED_SCHEDULE_EDIT,
                this.$route
            );
        },
        editCustomerDetails() {
            this.$router.navigateWithoutSaving(
                this.navigationScenarios.CLICKED_CUSTOMER_EDIT,
                this.$route
            );
        },
    },
    computed: {
        subHeaderTitle() {
            return this.getCmsContent("FunnelSubHeaderWidget", "HeaderText");
        },
        subHeaderBody() {
            return this.getCmsContent("FunnelSubHeaderWidget", "BodyText");
        },
        forwardButtonText() {
            return this.getCmsContent("FunnelFooterWidget", "ForwardButtonText");
        },
        vehicleInfo() {
            return this.$store.getters.vehicle;
        },
        damageInfo() {
            return this.$store.getters.damage;
        },
        lineItems() {
            return this.$store.getters.lineItems;
        },
        serviceLocationInfo() {
            return this.$store.getters.order.serviceLocation;
        },
        appointmentType() {
            return this.$store.getters.order.serviceLocation.appointmentType;
        },
        customerInfo() {
            return this.$store.getters.order.customer;
        },
    },
    components: {
        funnelHeader,
        navbar,
        vehicleBanner,
        buttonMain,
        textBlock,
        vehicleReview,
        damageReview,
        servicePackageReview,
        serviceLocationReview,
        scheduleReview,
        customerReview,
    },
};
</script>

<style lang="scss" scoped>
.dark-header {
    color: $black;
    line-height: 1.6;
}
</style>