CSR-1411

Add appointment details & cart to 'confirmation' page

src/helpers/date-helper.js

@@ -8,3 +8,57 @@ export function getDateDifferenceInDays(startDate, endDate) {
     // To calculate the no. of days between two dates
     return Difference_In_Time / (1000 * 3600 * 24);
 }
+
+export function getFullDayName(date) {
+    if (date instanceof Date !== true) return;
+    const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+    return days[date.getDay()];
+}
+export function getFullMonthName(date) {
+    if (date instanceof Date !== true) return;
+    const monthNames = [
+        "January",
+        "February",
+        "March",
+        "April",
+        "May",
+        "June",
+        "July",
+        "August",
+        "September",
+        "October",
+        "November",
+        "December",
+    ];
+    return monthNames[date.getMonth()];
+}
+export function get12HourTimeFormat(time) {
+    // Check correct time format and split into components
+    time = time.toString().match(/^([01]\d|2[0-3])(:)([0-5]\d)?$/) || [time];
+
+    if (time.length > 1) {
+        // If time format correct
+        time = time.slice(1); // Remove full string match value
+        time[5] = +time[0] < 12 ? " AM" : " PM"; // Set AM/PM
+        time[0] = +time[0] % 12 || 12; // Adjust hours
+    }
+    return time.join(""); // return adjusted time or original string
+}
+export function get12HourTimeMobileFormat(time) {
+    // Check correct time format and split into components
+    time = time.toString().match(/^([01]\d|2[0-3])(:)([0-5]\d)?$/) || [time];
+
+    if (time.length > 1) {
+        // If time format correct
+        const min = time[3];
+        time = time.slice(1); // Remove full string match value
+        if (Number(min) == 0) {
+            time = time.slice(0, 1); // Remove minute value
+            time[1] = +time[0] < 12 ? " AM" : " PM"; // Set AM/PM
+        } else {
+            time[5] = +time[0] < 12 ? " AM" : " PM"; // Set AM/PM
+        }
+        time[0] = +time[0] % 12 || 12; // Adjust hours
+    }
+    return time.join(""); // return adjusted time or original string
+}

src/layouts/confirmation/confirmation.vue

@@ -5,6 +5,19 @@
             <div class="container-fluid pb-2">
                 <div class="row justify-content-md-center">
                     <div class="col-md-6 col-xl-4">
+                        <div>
+                            <img :src="ScheduleConfirmationImage" />
+                            <span v-html="ScheduleConfirmationText"></span>
+                        </div>
+                        <div>
+                            <vehicleBanner
+                                cmsWidgetName="VehicleBannerWidget"
+                                :displayGenericVehicleImage="false" />
+                        </div>
+                        <div>{{ this.getScheduleDate() }}</div>
+                        <div>{{ this.getScheduleTime() }}</div>
+                        <div>Add to calendar</div>
+                        <div v-html="this.getAppointmentWordingText()"></div>
                         <navbar
                             cmsWidgetName="FunnelFooterWidget"
                             ref="navbar"
@@ -20,12 +33,20 @@
 <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";
 //Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { AppointmentTypeStrings } from "@/constants/schedule-constants";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import store from "@/store";
+
+import {
+    getFullDayName,
+    getFullMonthName,
+    get12HourTimeFormat,
+    get12HourTimeMobileFormat,
+} from "@/helpers/date-helper";
 export default {
     name: "confirmation",
     async beforeRouteEnter(to, from, next) {
@@ -47,6 +68,71 @@ export default {
             vm.setCmsContent(resultMap.cmsContent);
         });
     },
+    computed: {
+        ScheduleConfirmationText() {
+            return this.getCmsContent("ScheduleConfirmationWidget", "BodyText");
+        },
+        ScheduleConfirmationImage() {
+            return this.getCmsContent("ScheduleConfirmationWidget", "Image");
+        },
+        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;
+        },
+        Year() {
+            return store.getters.order.vehicle.year;
+        },
+        Make() {
+            return store.getters.order.vehicle.make;
+        },
+        Model() {
+            return store.getters.order.vehicle.model;
+        },
+    },
     methods: {
         arePagePrerequisitesValid() {
             // Service Location
@@ -78,10 +164,46 @@ export default {
             return serviceLocationReqs && scheduleReqs;
         },
         forwardButtonAction() {},
+        getScheduleDate() {
+            const scheduleDate = new Date(this.ScheduleDate);
+            return `${getFullDayName(scheduleDate)}, ${getFullMonthName(
+                scheduleDate
+            )} ${scheduleDate.getDate()}`;
+        },
+        getScheduleTime() {
+            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)}`;
+            }
+        },
+
+        getAppointmentWordingText() {
+            const ymm = `${this.Year} ${this.Make} ${this.Model}`;
+            if (this.AppointmentType == AppointmentTypeStrings.MOBILE) {
+                const address = `${
+                    this.ServiceLocationAddress2 ? this.ServiceLocationAddress2 + "," : ""
+                } ${this.ServiceLocationAddress},<br/> ${this.ServiceLocationCity}, ${
+                    this.ServiceLocationState
+                } ${this.ServiceLocationZipCode}`;
+                return this.MobileWordingText.replace("#ADDRESS", address).replace("#YMM", ymm);
+            } else if (this.AppointmentType == AppointmentTypeStrings.DROP_OFF) {
+                const address = `${this.ProviderAddress},<br/> ${this.ProviderCity}, ${this.ProviderState} ${this.ProviderZipCode}`;
+                return this.DropOffWordingText.replace("#ADDRESS", address).replace("#YMM", ymm);
+            } else {
+                const address = `${this.ProviderAddress},<br/> ${this.ProviderCity}, ${this.ProviderState} ${this.ProviderZipCode}`;
+                return this.InShopWordingText.replace("#ADDRESS", address).replace("#YMM", ymm);
+            }
+        },
     },
     components: {
         funnelHeader,
         navbar,
+        vehicleBanner,
     },
 };
 </script>