Some more tweaking for consistency

src/layouts/schedule/schedule.vue

@@ -79,11 +79,13 @@ defineRule("date-required", required(errorMessages.DATE_REQUIRED));
 
 // DEFINE VALIDATION RULES
 defineRule("time-slot-selection-required", (value) => {
-    if (value.date == null || 
+    if (
+        value.date == null ||
         value.startTime == null ||
         value.endTime == null ||
         value.routeCode == null ||
-        value.estimatedServiceMinutesMaximum) {
+        value.estimatedServiceMinutesMaximum
+    ) {
         return errorMessages.DATE_REQUIRED;
     }
     return true;
@@ -357,10 +359,7 @@ export default {
                     funnelFooterButtonText += ` at ${this.getDisplayTextForMilitaryTime(
                         timeSlot.startTime,
                         true
-                    )} - ${this.getDisplayTextForMilitaryTime(
+                    )} - ${this.getDisplayTextForMilitaryTime(timeSlot.endTime, true)}`;
-                        timeSlot.endTime,
-                        true
-                    )}`;
                 }
             }
             this.$refs.funnelFooter.updateButtonText(funnelFooterButtonText);

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

@@ -1,13 +1,13 @@
 <template>
     <modal
-        ref="timeSlots"
+        :ref="modalName"
-        class="time-slots-modal"
         :headerText="dateSelectedReadableDate"
         :footerButtonText="footerCloseButtonText"
         :onModalOpenedCallback="onModalOpened"
         :onModalClosedCallback="onModalClosed"
         @isModalOpened="setModalStatus"
-        @footer-button-event="setTimeSlot">
+        @footer-button-event="setTimeSlot"
+        class="time-slots-modal">
         <template v-if="isModalOpened">
             <textBlock
                 v-show="durationTextBlockCopy"
@@ -84,11 +84,13 @@ export default {
         modelValue: {
             type: Object,
             default: () => ({
-                id: null,
+                routeCode: null,
-                isPremiumAppointment: null,
+                date: null,
+                startTime: null,
+                endTime: null,
+                jobMaxMinutes: null,
             }),
         },
-
         cmsWidgetName: String,
         mobileCmsWidgetName: String,
         mobilePremiumCmsWidgetName: String,
@@ -139,18 +141,10 @@ export default {
             errors,
         };
     },
-    watch: {
-        modelValue: {
-            handler(newValue) {
-                this.internalModel = deepClone(newValue);
-                this.handleChange(newValue);
-            },
-        },
-        availableTimeSlots(newValue) {
-            this.autoSelectTimeSlotIfOnlyOneIsAvailable(newValue);
-        },
-    },
     computed: {
+        modalName() {
+            return "timeSlots";
+        },
         selectedValue: {
             get: function () {
                 return this.modelValue;
@@ -161,16 +155,13 @@ export default {
         },
         selectedTimeSlotId: {
             get: function () {
-                return this.selectedValue?.id;
+                return this.selectedValue?.routeCode;
             },
             set: function (newValue) {
                 // Button Question only supports Number, or String data types so we must get the full object to emit
                 this.selectedValue = this.getSelectedTimeSlotObject(newValue);
             },
         },
-        modal() {
-            return this.$refs["timeSlots"];
-        },
         supplementalInformationBlock() {
             let appointmentTypeCmsWidgetName;
             if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
@@ -279,10 +270,12 @@ export default {
                 this.cmsWidgetName,
                 cmsWidgetFieldMappings.DURATION
             );
+
             const inshopDurationTime = this.getDisplayTextForDurationLength(
                 this.estimatedServiceMinutesMinimum,
                 this.estimatedServiceMinutesMaximum
             );
+
             return `${inshopDurationTextWithoutTime} ${inshopDurationTime}`;
         },
         durationTextBlockCopy() {
@@ -308,6 +301,7 @@ export default {
             if (!this.dateAndTimeSlotData) {
                 return false;
             }
+
             const selectedDate = this.dateAndTimeSlotData.date;
             const todaysDate = new Date().toISOString().split("T")[0];
             return selectedDate === todaysDate;
@@ -338,6 +332,9 @@ export default {
                 return this.getAvailableTimeSlotsForInshop(this.dateAndTimeSlotData.timeSlots);
             }
         },
+        modal() {
+            return this.$refs["timeSlots"];
+        },
     },
     methods: {
         openModal() {
@@ -479,6 +476,17 @@ export default {
             };
         },
     },
+    watch: {
+        modelValue: {
+            handler(newValue) {
+                this.internalModel = deepClone(newValue);
+                this.handleChange(newValue);
+            },
+        },
+        availableTimeSlots(newValue) {
+            this.autoSelectTimeSlotIfOnlyOneIsAvailable(newValue);
+        },
+    },
     components: {
         modal,
         textBlock,