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 }}
-