Schedule review first draft

src/layouts/review/review-sections/schedule-review/schedule-review.vue

@@ -0,0 +1,90 @@
+<template>
+    <reviewBlock
+        :headerCmsWidgetName="cmsWidgetName"
+        :content="displayContent"
+        @edit-clicked="editClicked" />
+</template>
+
+<script>
+import reviewBlock from "@/layouts/review/review-block/review-block";
+import { AppointmentTypeStrings } from "@/constants/schedule-constants";
+import {
+    convertDateStringToDate,
+    militaryToTwelveHourTime,
+    getDisplayTextForDurationLength,
+} from "@/layouts/schedule/helpers/schedule-helper";
+
+export default {
+    name: "schedule-review",
+    props: {
+        cmsWidgetName: String,
+        schedule: Object,
+        appointmentType: String,
+    },
+    data() {
+        return {};
+    },
+    methods: {
+        editClicked() {
+            this.$emit("edit-clicked");
+        },
+    },
+    computed: {
+        displayContent() {
+            switch (this.appointmentType) {
+                case AppointmentTypeStrings.MOBILE:
+                    return this.displayContentForMobile;
+                case AppointmentTypeStrings.DROP_OFF:
+                    return this.displayContentForDropOff;
+                case AppointmentTypeStrings.IN_SHOP:
+                    return this.displayContentForInShop;
+                default:
+                    return [];
+            }
+        },
+        displayContentForInShop() {
+            return [
+                `${this.renderedDate} at ${this.renderedTime}`,
+                `Estimated appointment length: ${this.renderedEstimatedDuration}`,
+            ];
+        },
+        displayContentForDropOff() {
+            return [
+                `${this.renderedDate} drop off before 9:30am`,
+                `Estimated appointment length: All day`,
+            ];
+        },
+        displayContentForMobile() {
+            return [
+                `${this.renderedDate}, arriving between ${this.renderedMobileWindow}`,
+                `Estimated appointment length: ${this.renderedEstimatedDuration}`,
+            ];
+        },
+        renderedDate() {
+            const dateModel = convertDateStringToDate(this.schedule?.date);
+
+            return dateModel.toLocaleDateString("en-us", {
+                weekday: "long",
+                month: "long",
+                day: "numeric",
+                year: "numeric",
+            });
+        },
+        renderedTime() {
+            return militaryToTwelveHourTime(this.schedule?.startTime);
+        },
+        renderedEstimatedDuration() {
+            return getDisplayTextForDurationLength(
+                this.schedule?.jobMaxMinutes,
+                this.schedule?.jobMaxMinutes
+            );
+        },
+        renderedMobileWindow() {
+            return `${militaryToTwelveHourTime(this.schedule?.startTime)} - ${militaryToTwelveHourTime(this.schedule?.endTime)}`;
+        },
+    },
+    components: {
+        reviewBlock,
+    },
+};
+</script>

src/layouts/review/review.vue

@@ -69,6 +69,14 @@
                     cmsWidgetName="ServiceLocationTitleWidget"
                     :serviceLocation="serviceLocationInfo"
                     @edit-clicked="editServiceLocation" />
+
+                <hr class="my-0" />
+
+                <scheduleReview
+                    cmsWidgetName="ScheduleTitleWidget"
+                    :schedule="scheduleInfo"
+                    :appointmentType="appointmentType"
+                    @edit-clicked="editSchedule" />
             </div>
 
             <div>
@@ -94,6 +102,7 @@ import vehicleReview from "@/layouts/review/review-sections/vehicle-review/vehic
 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 { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -189,6 +198,12 @@ export default {
         serviceLocationInfo() {
             return this.$store.getters.order.serviceLocation;
         },
+        appointmentType() {
+            return this.$store.getters.order.serviceLocation.appointmentType;
+        },
+        scheduleInfo() {
+            return this.$store.getters.order.schedule;
+        },
     },
     components: {
         funnelHeader,
@@ -200,6 +215,7 @@ export default {
         damageReview,
         servicePackageReview,
         serviceLocationReview,
+        scheduleReview,
     },
 };
 </script>