DigitalConsumer.FixMyGlass/src/layouts/confirmation/confirmation.vue

<template>
    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
        <div class="page-container-grouped-styles position-relative">
            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
            <div>
                <div class="container-fluid pb-2">
                    <div class="row justify-content-center">
                        <div class="col-md-6 col-xl-4">
                            <div class="header-container">
                                <img :src="ScheduleConfirmationImage" />
                                <span v-html="ScheduleConfirmationText"></span>
                            </div>
                            <div
                                class="appoinmenttext"
                                v-html="this.getAppointmentWordingText"></div>

                            <div class="main">
                                <div>
                                    <vehicleBanner
                                        cmsWidgetName="VehicleBannerWidget"
                                        :displayGenericVehicleImage="false" />
                                </div>
                                <div class="scheduleText">
                                    <p>{{ this.ScheduleDateFormatted }}</p>
                                    <p>{{ this.ScheduleTimeFormatted }}</p>
                                </div>
                                <addToCalendar></addToCalendar>

                                <div
                                    class="appoinmenttext"
                                    v-html="this.AppointmentWordingText"></div>
                            </div>
                            <div class="emailtext" v-html="this.ConfirmationEmailText"></div>
                            <navbar
                                cmsWidgetName="FunnelFooterWidget"
                                ref="navbar"
                                isBackButtonHidden="true"
                                @ForwardClicked="forwardButtonAction"
                                :buttonSize="true" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </Form>
</template>
<script>
// Components
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
import navbar from "@/fmg-components/nav-bar/nav-bar";
import addToCalendar from "@/layouts/add-to-calendar/add-to-calendar";
//Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { AppointmentTypeStrings } from "@/constants/schedule-constants";
import { settleAllPromises } from "@/helpers/layout-helper";
import { applicationConfig } from "@/constants/application-config.js";
import { convertDateStringToDate } from "@/layouts/schedule/helpers/schedule-helper";
import { Form } from "vee-validate";
import store from "@/store";

import { get12HourTimeFormat, get12HourTimeMobileFormat } from "@/helpers/date-helper";
export default {
    name: "confirmation",
    async beforeRouteEnter(to, from, next) {
        // Call APIs
        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);

        // 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);
        });
    },
    computed: {
        ScheduleConfirmationText() {
            return this.getCmsContent("ScheduleConfirmationWidget", "BodyText");
        },
        ScheduleConfirmationImage() {
            return this.getCmsContent("ScheduleConfirmationWidget", "Image");
        },
        ConfirmationEmailText() {
            return this.getCmsContent("ConfirmationEmailWidget", "BodyText")
                .replaceAll("{custom:MY_ACCOUNT_URL}", applicationConfig.MY_ACCOUNT)
                .replaceAll("&lt;", "<")
                .replaceAll("&gt;", ">");
        },
        ScheduleDate() {
            return store.getters.order.schedule.date;
        },
        AppointmentType() {
            return store.getters.order.serviceLocation.appointmentType;
        },
        ScheduleStartTime() {
            return store.getters.order.schedule.startTime;
        },
        ScheduleEndTime() {
            return store.getters.order.schedule.endTime;
        },
        InShopWordingText() {
            return this.getCmsContent("InShopWordingWidget", "BodyText");
        },
        MobileWordingText() {
            return this.getCmsContent("MobileWordingWidget", "BodyText");
        },
        DropOffWordingText() {
            return this.getCmsContent("DropOffWordingWidget", "BodyText");
        },
        ServiceLocationAddress() {
            return store.getters.order.serviceLocation.address;
        },
        ServiceLocationAddress2() {
            return store.getters.order.serviceLocation.address2;
        },
        ServiceLocationCity() {
            return store.getters.order.serviceLocation.city;
        },
        ServiceLocationState() {
            return store.getters.order.serviceLocation.state;
        },
        ServiceLocationZipCode() {
            return store.getters.order.serviceLocation.zipCode;
        },
        ProviderAddress() {
            return store.getters.order.serviceLocation.provider.address.streetAddress;
        },
        ProviderCity() {
            return store.getters.order.serviceLocation.provider.address.city;
        },
        ProviderState() {
            return store.getters.order.serviceLocation.provider.address.state;
        },
        ProviderZipCode() {
            return store.getters.order.serviceLocation.provider.address.zipCode;
        },
        AppointmentWordingText() {
            if (this.AppointmentType == AppointmentTypeStrings.MOBILE) {
                return this.MobileWordingText.replaceAll(
                    "{custom:ADDRESS}",
                    this.ServiceLocationFullAddress
                );
            } else if (this.AppointmentType == AppointmentTypeStrings.DROP_OFF) {
                return this.DropOffWordingText.replaceAll(
                    "{custom:ADDRESS}",
                    this.ProviderFullAddress
                );
            } else {
                return this.InShopWordingText.replaceAll(
                    "{custom:ADDRESS}",
                    this.ProviderFullAddress
                );
            }
        },
        ServiceLocationFullAddress() {
            return `${this.ServiceLocationAddress2 ? this.ServiceLocationAddress2 + "," : ""} ${
                this.ServiceLocationAddress
            },<br/> ${this.ServiceLocationCity}, ${this.ServiceLocationState} ${
                this.ServiceLocationZipCode
            }`;
        },
        ProviderFullAddress() {
            return `${this.ProviderAddress},<br/> ${this.ProviderCity}, ${this.ProviderState} ${this.ProviderZipCode}`;
        },
        ScheduleDateFormatted() {
            // This conversion ensures we don't get get GMT induced date changes
            const dateObject = convertDateStringToDate(this.ScheduleDate);
            // Ex: Tuesday, April 22
            return dateObject.toLocaleDateString("en-us", {
                weekday: "long",
                month: "long",
                day: "numeric",
            });
        },
        ScheduleTimeFormatted() {
            if (this.AppointmentType == AppointmentTypeStrings.MOBILE) {
                return `Between ${get12HourTimeMobileFormat(
                    this.ScheduleStartTime
                )} - ${get12HourTimeMobileFormat(this.ScheduleEndTime)}`;
            } else if (this.AppointmentType == AppointmentTypeStrings.DROP_OFF) {
                return `Drop off before 9:30 AM`;
            } else {
                return `at ${get12HourTimeFormat(this.ScheduleStartTime)}`;
            }
        },
    },
    data() {
        return {
            workOrderNumber: store.getters.order.workOrderNumber,
        };
    },
    methods: {
        arePagePrerequisitesValid() {
            // 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);

            return serviceLocationReqs && scheduleReqs;
        },
        forwardButtonAction() {
            window.location.assign("//www.safelite.com/");
        },
    },
    components: {
        funnelHeader,
        Form,
        navbar,
        vehicleBanner,
        addToCalendar,
    },
};
</script>

<style lang="scss">
.main {
    padding: 1rem 0;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
    border-radius: 5px;
}
.scheduleText {
    text-align: center;
}

.scheduleText P {
    margin: 0;
    font-weight: 400;
    font-size: 1.25rem;
    color: $black;

    + p {
        font-size: 1rem;
        font-weight: 500;
    }
}
.calendar-section[data-v-8004c52c] {
    display: table;
    position: relative;
    margin: 0 auto;
}

.calendar-section .add-to-calendar {
    padding: 10px 0;
    text-align: center;
}

.add-to-calendar button {
    border: 0;
    background-color: #fff;
}

.calendar-section .add-to-calendar .add-to-calendar-span {
    cursor: pointer;
}
.calendar-section .add-to-calendar .add-to-calendar-img {
    display: inline;
    width: 20px;
}
.add-to-calendar-text {
    margin: 0 0 0 7px;
    color: #1574a1;
    vertical-align: middle;
    font-weight: 500;
    font-family: "Roboto";
    text-decoration: underline;
}
.header-container {
    text-align: center;

    p {
        display: inline-block;
        font-weight: 400;
        font-size: 1.25rem;
        padding: 0.3rem;
        color: $black;
    }
}

.appoinmenttext strong {
    color: $black;
}

.emailtext {
    padding: 1.5rem 0 0;

    p {
        font-size: 0.875rem;
        margin: 0;

        strong {
            color: $black;
        }
    }
}
</style>