From aafc3d15df65c7f7ba82103478212d70b00e0f58 Mon Sep 17 00:00:00 2001 From: Scott Kiener Date: Thu, 26 Jun 2025 09:37:35 -0400 Subject: [PATCH 1/2] CASH-814 | Combine drop-off and in-shop time slots Changed name of component because it was named based on functionality that no longer exists (no-modal is a confusing way to name everything that isn't a modal) Cleaned up references to DROP_OFF that are obsolete --- .../time-slot-question/time-slot-question.vue | 50 +++++++++---------- 1 file changed, 23 insertions(+), 27 deletions(-) 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..bba09e785 100644 --- a/src/layouts/schedule/time-slot-question/time-slot-question.vue +++ b/src/layouts/schedule/time-slot-question/time-slot-question.vue @@ -14,7 +14,6 @@ class="mt-4" :class="[ isMobileAppointment ? 'is-mobile-appointment' : '', - isDropOffAppointment ? 'is-drop-off-appointment' : '', ]" :answers="availableTimeSlots" groupName="chooseTimeSlot" @@ -97,7 +96,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,7 +239,10 @@ export default { ); }, disclaimerTextBlockCopy() { - if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) { + /* 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) { return this.sameDayDropOffDisclaimerText; @@ -329,11 +331,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); @@ -356,10 +354,7 @@ export default { }, isMobileAppointment() { return this.appointmentType === AppointmentTypeStrings.MOBILE; - }, - isDropOffAppointment() { - return this.appointmentType === AppointmentTypeStrings.DROP_OFF; - }, + } }, methods: { async setSelectedTimeSlot() { @@ -382,23 +377,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 +398,10 @@ export default { }; }); + if (dropOffIndex) { + const dropOffTimeSlot = availableTimeSlots.splice(dropOffIndex, 1)[0]; + availableTimeSlots.unshift(dropOffTimeSlot); + } return availableTimeSlots; }, getAvailableTimeSlotsForMobile(timeSlotsForSelectedDate) { From b7b0f388f72121a07bef1c541871074ebcde4dcb Mon Sep 17 00:00:00 2001 From: Scott Kiener Date: Thu, 26 Jun 2025 09:42:05 -0400 Subject: [PATCH 2/2] CASH-814 | Formatting --- .../schedule/time-slot-question/time-slot-question.vue | 8 +++----- src/styles/ux-variables.scss | 4 ++-- 2 files changed, 5 insertions(+), 7 deletions(-) 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 bba09e785..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,9 +12,7 @@ buttonTypeString="timeSlotModalListButton" :buttonTypeObject="timeSlotModalListButton" class="mt-4" - :class="[ - isMobileAppointment ? 'is-mobile-appointment' : '', - ]" + :class="[isMobileAppointment ? 'is-mobile-appointment' : '']" :answers="availableTimeSlots" groupName="chooseTimeSlot" textPosition="text-center" @@ -242,7 +240,7 @@ export default { /* 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.appointmentType === AppointmentTypeStrings.DROP_OFF) { if (this.selectedRouteCode?.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) { if (this.isSameDay) { return this.sameDayDropOffDisclaimerText; @@ -354,7 +352,7 @@ export default { }, isMobileAppointment() { return this.appointmentType === AppointmentTypeStrings.MOBILE; - } + }, }, methods: { async setSelectedTimeSlot() { diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss index 69ba0d7ac..01b122b31 100644 --- a/src/styles/ux-variables.scss +++ b/src/styles/ux-variables.scss @@ -121,8 +121,8 @@ $body-color: $gray-600; //Fonts $font-family-sans-serif: UrbanistRegular, Arial, Helvetica, sans-serif; -$font-family-monospace: UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", - monospace; +$font-family-monospace: + UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; // stylelint-enable value-keyword-case $font-family-base: $font-family-sans-serif; $font-family-code: $font-family-monospace;