diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue index 654f35a15..b43be23ad 100644 --- a/src/layouts/schedule/schedule.vue +++ b/src/layouts/schedule/schedule.vue @@ -73,7 +73,7 @@ import { getRouterLinkRouteFromCopy, getRouterLinkDisplayTextFromCopy, } from "@/helpers/cms-content-helper"; -import { PREMIUM_FEE_PART_TYPE } from "./constants/schedule-constants"; +import { AppointmentTypeStrings, PREMIUM_FEE_PART_TYPE } from "./constants/schedule-constants"; import { errorMessages } from "@/constants/error-messages"; import { required } from "@/helpers/validation-rules"; import store from "@/store"; @@ -267,6 +267,57 @@ export default { this.selectedDate = null; } }, + updateFooterButtonText(timeSlotData) { + let funnelFooterButtonText; + if (!timeSlotData.id) { + funnelFooterButtonText = "Continue"; + } else { + funnelFooterButtonText = + "Select " + this.convertSelectedDateToShortMonthAndDay(this.selectedDate); + + if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) { + funnelFooterButtonText += + " at " + + this.getDisplayTextForMilitaryTime(this.appointmentDateAndTime.startTime); + } else if ( + this.appointmentType === AppointmentTypeStrings.MOBILE && + !timeSlotData.isPremiumAppointment + ) { + funnelFooterButtonText += + " at " + + this.getDisplayTextForMilitaryTime( + this.appointmentDateAndTime.startTime, + true + ) + + " - " + + this.getDisplayTextForMilitaryTime( + this.appointmentDateAndTime.endTime, + true + ); + } + } + + this.$refs.funnelFooter.updateButtonText(funnelFooterButtonText); + }, + convertSelectedDateToShortMonthAndDay(selectedDate) { + // This conversion ensures we don't get get GMT induced date changes + const dateObject = new Date(`${selectedDate.dateString}T00:00:00`); + return dateObject.toLocaleDateString("en-us", { month: "short", day: "numeric" }); + }, + // Expected input: "HH:MM:SS" + getDisplayTextForMilitaryTime(militaryTimeInput, shouldTrimMinutesIfEmpty = false) { + let hours = parseInt(militaryTimeInput.split(":")[0]); + const minutes = militaryTimeInput.split(":")[1]; + let meridianNotation = hours > 11 ? "PM" : "AM"; + if (hours > 12) { + hours -= 12; + } + if (shouldTrimMinutesIfEmpty && minutes === "00") { + return `${hours} ${meridianNotation}`; + } else { + return `${hours}:${minutes} ${meridianNotation}`; + } + }, backButtonAction() { this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route); }, @@ -296,6 +347,9 @@ export default { }; } }, + selectedTimeSlotData() { + this.updateFooterButtonText(this.selectedTimeSlotData); + }, }, components: { funnelHeader, diff --git a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue index e812e7a67..bcfd56bb3 100644 --- a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue +++ b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue @@ -97,10 +97,7 @@ export default { this.handleChange(this.modelValue.id); }, dateAndTimeSlotData(newValue, oldValue) { - const numberOfOptions = newValue?.timeSlots.length; - if (numberOfOptions === 1) { - this.selectedTimeSlotId = newValue.timeSlots[0].id; - } + this.autoSelectTimeSlotIfOnlyOneIsAvailable(newValue); }, }, computed: { @@ -181,7 +178,7 @@ export default { if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) { availableTimeSlots = [ { - value: this.dateAndTimeSlotData.timeSlots[0], + value: this.dateAndTimeSlotData.timeSlots[0].id, buttonLabel: this.dropoffButtonText, }, ]; @@ -256,10 +253,9 @@ export default { getDisplayTextForMilitaryTime(militaryTimeInput) { let hours = parseInt(militaryTimeInput.split(":")[0]); const minutes = militaryTimeInput.split(":")[1]; - let meridianNotation = "AM"; - if (militaryTimeInput.split(":")[0] > 12) { + let meridianNotation = hours > 11 ? "PM" : "AM"; + if (hours > 12) { hours -= 12; - meridianNotation = "PM"; } return `${hours}:${minutes} ${meridianNotation}`; }, @@ -274,6 +270,19 @@ export default { } return displayTextForDurationLength; }, + autoSelectTimeSlotIfOnlyOneIsAvailable(newdateAndTimeSlotDataValue) { + const numberOfOptions = newdateAndTimeSlotDataValue?.timeSlots.length; + if ( + numberOfOptions === 1 && + !( + this.appointmentType === AppointmentTypeStrings.MOBILE && + this.premiumAppointmentFee && + newdateAndTimeSlotDataValue.timeSlots[0].offerPremium + ) + ) { + this.selectedTimeSlotId = newdateAndTimeSlotDataValue.timeSlots[0].id; + } + }, addPremiumFlagToInput(timeSlotId) { return (timeSlotId += PREMIUM_TIME_SLOT_ID_FLAG); }, diff --git a/src/layouts/schedule/time-slot-modal-question/timeslot-modal-list-button/timeslot-modal-list-button.vue b/src/layouts/schedule/time-slot-modal-question/timeslot-modal-list-button/timeslot-modal-list-button.vue index 4f5b17461..8c0f3db0a 100644 --- a/src/layouts/schedule/time-slot-modal-question/timeslot-modal-list-button/timeslot-modal-list-button.vue +++ b/src/layouts/schedule/time-slot-modal-question/timeslot-modal-list-button/timeslot-modal-list-button.vue @@ -19,33 +19,17 @@ {{ screenReaderOnlyText }} -