From 27133a6f560712fa7df10e53627f7a7e3fa1c7a0 Mon Sep 17 00:00:00 2001 From: Scott Kiener Date: Thu, 25 May 2023 10:23:55 -0400 Subject: [PATCH 1/2] CSR-1149 | Implement continue button changes Cleaned up timeslot-modal-list-button Fixed bug with auto-selecting appointments when only one is available --- src/layouts/schedule/schedule.vue | 45 ++++++++++++++++++- .../time-slot-modal-question.vue | 13 +++--- .../timeslot-modal-list-button.vue | 17 ------- 3 files changed, 52 insertions(+), 23 deletions(-) diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue index 654f35a15..540e7a955 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,46 @@ 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 = "AM"; + if (militaryTimeInput.split(":")[0] > 12) { + hours -= 12; + meridianNotation = "PM"; + } + if (shouldTrimMinutesIfEmpty && minutes === "00") { + return `${hours} ${meridianNotation}`; + } else { + return `${hours}:${minutes} ${meridianNotation}`; + } + }, backButtonAction() { this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route); }, @@ -296,6 +336,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..f6f85ccae 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, }, ]; @@ -274,6 +271,12 @@ 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 }} -