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