Extract logic for use in review component

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

@@ -45,3 +45,32 @@ export function sumDateString(dateString, daysToAdd) {
     date.setDate(date.getDate() + daysToAdd);
     return convertDateToDateString(date);
 }
+
+export function militaryToTwelveHourTime(timeString) {
+    // Expected input: "HH:MM"
+    let hours = parseInt(timeString.split(":")[0]);
+    const minutes = timeString.split(":")[1];
+    const meridianNotation = hours > 11 ? "PM" : "AM";
+
+    if (hours > 12) {
+        hours -= 12;
+    }
+
+    return `${hours}:${minutes} ${meridianNotation}`;
+}
+
+export function getDisplayTextForDurationLength(durationMinimum, durationMaximum) {
+    const isLongAppointment = durationMaximum >= 120;
+    const isDurationRange = durationMinimum !== durationMaximum;
+
+    const adjustedMinimum = isLongAppointment ? durationMinimum / 60 : durationMinimum;
+    const adjustedMaximum = isLongAppointment ? durationMaximum / 60 : durationMaximum;
+
+    const durationText = isDurationRange
+        ? `${adjustedMinimum} - ${adjustedMaximum}`
+        : adjustedMinimum;
+
+    const unitText = isLongAppointment ? "hours" : "minutes";
+
+    return `${durationText} ${unitText}`;
+}

src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue

@@ -47,7 +47,11 @@ import buttonQuestion from "@/digital-components/button-question/button-question
 import timeSlotModalListButton from "./time-slot-modal-list-button/time-slot-modal-list-button";
 
 // Helpers
-import { convertDateStringToDate } from "@/layouts/schedule/helpers/schedule-helper";
+import {
+    convertDateStringToDate,
+    militaryToTwelveHourTime,
+    getDisplayTextForDurationLength,
+} from "@/layouts/schedule/helpers/schedule-helper";
 import { deepClone } from "@/helpers/object-helper";
 
 // Validation - TODO: Move this somewhere more global?
@@ -263,7 +267,7 @@ export default {
                 cmsWidgetFieldMappings.DURATION
             );
 
-            const inshopDurationTime = this.getDisplayTextForDurationLength(
+            const inshopDurationTime = getDisplayTextForDurationLength(
                 this.estimatedServiceMinutesMinimum,
                 this.estimatedServiceMinutesMaximum
             );
@@ -346,33 +350,6 @@ export default {
             this.$emit("update:modelValue", this.selectedValue);
             this.closeModal();
         },
-        getDisplayTextForMilitaryTime(militaryTimeInput) {
-            // Expected input: "HH:MM"
-            let hours = parseInt(militaryTimeInput.split(":")[0]);
-            const minutes = militaryTimeInput.split(":")[1];
-            const meridianNotation = hours > 11 ? "PM" : "AM";
-
-            if (hours > 12) {
-                hours -= 12;
-            }
-
-            return `${hours}:${minutes} ${meridianNotation}`;
-        },
-        getDisplayTextForDurationLength(durationMinimum, durationMaximum) {
-            const isLongAppointment = durationMaximum >= 120;
-            const isDurationRange = durationMinimum !== durationMaximum;
-
-            const adjustedMinimum = isLongAppointment ? durationMinimum / 60 : durationMinimum;
-            const adjustedMaximum = isLongAppointment ? durationMaximum / 60 : durationMaximum;
-
-            const durationText = isDurationRange
-                ? `${adjustedMinimum} - ${adjustedMaximum}`
-                : adjustedMinimum;
-
-            const unitText = isLongAppointment ? "hours" : "minutes";
-
-            return `${durationText} ${unitText}`;
-        },
         getRelevantDropOffCmsWidgetNameForSelectedTimeSlot(
             selectedTimeSlotId,
             isSameDayRelevant = false
@@ -387,7 +364,7 @@ export default {
         },
         getAvailableTimeSlotsForInshop(timeSlotsForSelectedDate) {
             return timeSlotsForSelectedDate.map((timeSlot) => {
-                const readableTime = this.getDisplayTextForMilitaryTime(timeSlot.startTime);
+                const readableTime = militaryToTwelveHourTime(timeSlot.startTime);
                 return {
                     value: timeSlot.id,
                     buttonLabel: readableTime,
@@ -415,9 +392,9 @@ export default {
         },
         getAvailableTimeSlotsForMobile(timeSlotsForSelectedDate) {
             const availableTimeSlots = timeSlotsForSelectedDate.map((timeSlot) => {
-                const readableTime = `${this.getDisplayTextForMilitaryTime(
+                const readableTime = `${militaryToTwelveHourTime(
                     timeSlot.startTime
-                )} - ${this.getDisplayTextForMilitaryTime(timeSlot.endTime)}`;
+                )} - ${militaryToTwelveHourTime(timeSlot.endTime)}`;
                 return {
                     value: timeSlot.id,
                     buttonLabel: readableTime,