Move copy structure to cms + state getters.

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

@@ -1,22 +1,17 @@
 <template>
     <reviewBlock
-        :headerCmsWidgetName="cmsWidgetName"
+        :headerCmsWidgetName="headerCmsWidgetName"
         :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: {
+        headerCmsWidgetName: String,
         cmsWidgetName: String,
         schedule: Object,
         appointmentType: String,
@@ -31,59 +26,11 @@ export default {
     },
     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}`,
+                this.getCmsContent(this.cmsWidgetName, "BodyText"),
-                `Estimated appointment length: ${this.renderedEstimatedDuration}`,
+                this.getCmsContent(this.cmsWidgetName, "BodyText2"),
             ];
         },
-        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?.jobMinMinutes,
-                this.schedule?.jobMaxMinutes
-            );
-        },
-        renderedMobileWindow() {
-            return `${militaryToTwelveHourTime(
-                this.schedule?.startTime
-            )} - ${militaryToTwelveHourTime(this.schedule?.endTime)}`;
-        },
     },
     components: {
         reviewBlock,

src/layouts/review/review.vue

@@ -73,7 +73,8 @@
                 <hr class="my-0" />
 
                 <scheduleReview
-                    cmsWidgetName="ScheduleTitleWidget"
+                    headerCmsWidgetName="ScheduleTitleWidget"
+                    cmsWidgetName="ScheduleWidget"
                     :schedule="scheduleInfo"
                     :appointmentType="appointmentType"
                     @edit-clicked="editSchedule" />
@@ -210,6 +211,9 @@ export default {
         scheduleInfo() {
             return this.$store.getters.order.schedule;
         },
+        exposeCms() {
+            return this.$root.cmsContentByWidget;
+        },
     },
     components: {
         funnelHeader,

src/layouts/schedule/helpers/schedule-helper.js

@@ -48,6 +48,7 @@ export function sumDateString(dateString, daysToAdd) {
 
 export function militaryToTwelveHourTime(timeString) {
     // Expected input: "HH:MM"
+    if (typeof timeString !== "string") return;
     let hours = parseInt(timeString.split(":")[0]);
     const minutes = timeString.split(":")[1];
     const meridianNotation = hours > 11 ? "PM" : "AM";

src/store/index.js

@@ -14,6 +14,11 @@ import { deleteFunnelCookie } from "@/helpers/heritage-integration/cookie-helper
 import { deepEqual } from "@/helpers/object-helper";
 import { AppointmentTypeStrings, PREMIUM_FEE_PART_TYPE } from "@/constants/schedule-constants";
 import { partTypeStrings } from "@/constants/part-type-strings";
+import {
+    convertDateStringToDate,
+    militaryToTwelveHourTime,
+    getDisplayTextForDurationLength,
+} from "@/layouts/schedule/helpers/schedule-helper";
 
 // Export State
 const getDefaultState = () => {
@@ -544,6 +549,9 @@ export const getters = {
     isMobileAppointment: (state) => {
         return state.order.serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE;
     },
+    isDropOffAppointment: (state) => {
+        return state.order.serviceLocation.appointmentType === AppointmentTypeStrings.DROP_OFF;
+    },
     isRecalibrationOnOrder: (state) => {
         return getHasRecalibrationPart(state);
     },
@@ -552,6 +560,30 @@ export const getters = {
             (vap) => vap.partType.toUpperCase() === partTypeStrings.REAR_WIPER.toUpperCase()
         );
     },
+    scheduleDisplayText: (state) => {
+        const dateModel = convertDateStringToDate(state.order.schedule.date);
+        const readableDate = dateModel?.toLocaleDateString("en-us", {
+            weekday: "long",
+            month: "long",
+            day: "numeric",
+            year: "numeric",
+        });
+
+        const readableStartTime = militaryToTwelveHourTime(state.order.schedule.startTime);
+        const readableEndTime = militaryToTwelveHourTime(state.order.schedule.endTime);
+
+        const readableDuration = getDisplayTextForDurationLength(
+            state.order.schedule.jobMinMinutes,
+            state.order.schedule.jobMaxMinutes
+        );
+
+        return {
+            date: readableDate,
+            startTime: readableStartTime,
+            endTime: readableEndTime,
+            duration: readableDuration,
+        };
+    },
     lineItems: (state) => state.order.lineItems,
     pageData: (state) => (page) => {
         return state.applicationUser.pageData[page];