diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue index dc1f50c15..2eaf204ad 100644 --- a/src/digital-components/button-question/button-question.vue +++ b/src/digital-components/button-question/button-question.vue @@ -407,7 +407,7 @@ export default { text-align: center; border-bottom: 1px solid black; line-height: 1px; - margin: 10px 0 20px; + margin: 20px 0 20px; span { background: #fff; diff --git a/src/digital-components/date-picker/date-picker.spec.js b/src/digital-components/date-picker/date-picker.spec.js index e1fbf302f..09bf21d76 100644 --- a/src/digital-components/date-picker/date-picker.spec.js +++ b/src/digital-components/date-picker/date-picker.spec.js @@ -481,7 +481,7 @@ describe("date-picker.vue", () => { }, }); const spy = jest.spyOn(wrapper.vm, "setCalendarData"); - + wrapper.vm.$refs.timeSlotModalQuestion.initializeComponent = jest.fn(); wrapper.vm.$nextTick(); // Act diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue index e008021db..8f6b35f60 100644 --- a/src/digital-components/date-picker/date-picker.vue +++ b/src/digital-components/date-picker/date-picker.vue @@ -140,6 +140,7 @@ dropoffCmsWidgetName="DropOffTimeSlotModal" sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal" overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal" + dropOffOrPickATimeQuestionCmsWidgetName="DropOffOrPickATimeQuestionWidget" :selectedDate="selectedDate" :appointmentType="appointmentType" :premiumAppointmentFee="premiumAppointmentFee" @@ -292,6 +293,7 @@ export default { methods: { initializeComponent(initialData) { this.setCalendarData(initialData); + this.$refs.timeSlotModalQuestion.initializeComponent(); }, fireDateSelectedEvent(event, date) { // Ignore if arrow key selected radioButton 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 2d67ddc90..80d22cae5 100644 --- a/src/layouts/schedule/time-slot-question/time-slot-question.vue +++ b/src/layouts/schedule/time-slot-question/time-slot-question.vue @@ -10,7 +10,7 @@ { - let buttonLabelValue; - if (timeSlot.id.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) { - buttonLabelValue = this.dropoffButtonText; - } else if (timeSlot.id.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) { - buttonLabelValue = this.overnightDropoffButtonText; - } else if (this.isSameDay) { - buttonLabelValue = this.sameDayDropoffButtonText; - } else { - buttonLabelValue = militaryToTwelveHourTime(timeSlot.startTime); - } - return { - value: timeSlot.id, - buttonLabel: buttonLabelValue, - }; - }); - - return availableTimeSlots; - }, getAvailableTimeSlotsForMobile(timeSlotsForSelectedDate) { const availableTimeSlots = timeSlotsForSelectedDate.map((timeSlot) => { const readableTime = `${militaryToTwelveHourTime(timeSlot.startTime)} - ${militaryToTwelveHourTime( @@ -529,27 +520,27 @@ export default { }, }; }, - getSelectedRouteCode() { - let selectedRouteCode; + setSelectedRouteCodeFromParent() { if (!this.modelValue?.timeSlot) { - selectedRouteCode = null; + return; } - + const routeCodeFromParent = this.modelValue.timeSlot.routeCode; if (this.modelValue?.isPremiumAppointment) { - selectedRouteCode = this.addPremiumFlagToInput( - this.modelValue?.timeSlot?.routeCode - ); + // Mobile Only + this.selectedAnswerForTimeSlots = this.addPremiumFlagToInput(routeCodeFromParent); } else { - selectedRouteCode = this.modelValue?.timeSlot?.routeCode; + if (this.isDropOffRouteCode(routeCodeFromParent)) { + this.selectedAnswerForDropOff = routeCodeFromParent; + } else { + this.selectedAnswerForDropOff = PICK_A_TIME_BUTTON_VALUE; + this.selectedAnswerForTimeSlots = routeCodeFromParent; + } } - - return selectedRouteCode; }, getWaitListRequestedFromStore() { return store.getters.order.customer?.waitListRequested; }, autoSelectTimeSlotIfOnlyOneIsAvailable() { - console.log(this.timeSlotsForSelectedDate.timeSlots?.length); const numberOfOptions = this.timeSlotsForSelectedDate.timeSlots?.length; if (numberOfOptions === 1) { if (this.availableTimeSlots.length > 0) { @@ -570,7 +561,6 @@ export default { if (routeCodeIncludesPremium) { routeCode = this.removePremiumFlagFromInput(routeCode); } - const timeSlot = this.timeSlotsForSelectedDate?.timeSlots?.find( (slot) => slot.id == routeCode ); @@ -611,6 +601,9 @@ export default { } }, isDropOffRouteCode(routeCode) { + if (!routeCode) { + return false; + } return ( routeCode.includes(RouteCodeFlags.ALL_DAY_DROP_OFF) || routeCode.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)