diff --git a/src/layouts/schedule/time-slot-question/time-slot-question.vue b/src/layouts/schedule/time-slot-question/time-slot-question.vue index 58648746e..f0499e11a 100644 --- a/src/layouts/schedule/time-slot-question/time-slot-question.vue +++ b/src/layouts/schedule/time-slot-question/time-slot-question.vue @@ -12,10 +12,7 @@ buttonTypeString="timeSlotModalListButton" :buttonTypeObject="timeSlotModalListButton" class="mt-4" - :class="[ - isMobileAppointment ? 'is-mobile-appointment' : '', - isDropOffAppointment ? 'is-drop-off-appointment' : '', - ]" + :class="[isMobileAppointment ? 'is-mobile-appointment' : '']" :answers="availableTimeSlots" groupName="chooseTimeSlot" textPosition="text-center" @@ -97,7 +94,7 @@ const cmsWidgetFieldMappings = { defineRule("time-slot-required", required(errorMessages.OPTION_REQUIRED)); export default { - name: "time-slot-no-modal-question", + name: "time-slot-question", emits: ["update:modelValue", "TimeSlotSelected", "click-event"], props: { modelValue: { @@ -240,6 +237,9 @@ export default { ); }, disclaimerTextBlockCopy() { + /* AppointmentTypeStrings.DROP_OFF should never be used per CASH-803 epic + but I'm leaving this in assuming that a future card in this epic + will handle disclaimers in a different way */ if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) { if (this.selectedRouteCode?.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) { if (this.isSameDay) { @@ -329,11 +329,7 @@ export default { return null; } - if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) { - return this.getAvailableTimeSlotsForDropOff( - this.timeSlotsForSelectedDate.timeSlots - ); - } else if (this.appointmentType === AppointmentTypeStrings.MOBILE) { + if (this.appointmentType === AppointmentTypeStrings.MOBILE) { return this.getAvailableTimeSlotsForMobile(this.timeSlotsForSelectedDate.timeSlots); } else { return this.getAvailableTimeSlotsForInshop(this.timeSlotsForSelectedDate.timeSlots); @@ -357,9 +353,6 @@ export default { isMobileAppointment() { return this.appointmentType === AppointmentTypeStrings.MOBILE; }, - isDropOffAppointment() { - return this.appointmentType === AppointmentTypeStrings.DROP_OFF; - }, }, methods: { async setSelectedTimeSlot() { @@ -382,23 +375,20 @@ export default { } }, getAvailableTimeSlotsForInshop(timeSlotsForSelectedDate) { - return timeSlotsForSelectedDate.map((timeSlot) => { + let dropOffIndex = -1; + const availableTimeSlots = timeSlotsForSelectedDate.map((timeSlot, index) => { const readableTime = militaryToTwelveHourTime(timeSlot.startTime); - return { - value: timeSlot.id, - buttonLabel: readableTime, - }; - }); - }, - getAvailableTimeSlotsForDropOff(timeSlotsForSelectedDate) { - const availableTimeSlots = timeSlotsForSelectedDate.map((timeSlot) => { - let buttonLabelValue; - if (timeSlot.id.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) { + let buttonLabelValue = readableTime; + if (timeSlot.id.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) { + dropOffIndex = index; + if (this.isSameDay) { + buttonLabelValue = this.sameDayDropoffButtonText; + } else { + buttonLabelValue = this.dropoffButtonText; + } + } else if (timeSlot.id.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) { + dropOffIndex = index; buttonLabelValue = this.overnightDropoffButtonText; - } else if (this.isSameDay) { - buttonLabelValue = this.sameDayDropoffButtonText; - } else { - buttonLabelValue = this.dropoffButtonText; } return { value: timeSlot.id, @@ -406,6 +396,10 @@ export default { }; }); + if (dropOffIndex) { + const dropOffTimeSlot = availableTimeSlots.splice(dropOffIndex, 1)[0]; + availableTimeSlots.unshift(dropOffTimeSlot); + } return availableTimeSlots; }, getAvailableTimeSlotsForMobile(timeSlotsForSelectedDate) {