diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue index 9fe6bb7a9..7945744ec 100644 --- a/src/digital-components/date-picker/date-picker.vue +++ b/src/digital-components/date-picker/date-picker.vue @@ -335,11 +335,32 @@ export default { this.estimatedServiceMinutesMaximum ); - return `${inshopDurationTextWithoutTime} ${inshopDurationTime}`; + if (this.estimatedServiceMinutesMinimum && this.estimatedServiceMinutesMaximum) { + return `${inshopDurationTextWithoutTime} ${inshopDurationTime}`; + } + + return null; + }, + mobileDurationText() { + const mobileDurationTextWithoutTime = this.getCmsContent( + "TimeSlotModalQuestion", + cmsWidgetFieldMappings.DURATION + ); + + const mobileDurationTime = getDisplayTextForDurationLength( + this.estimatedServiceMinutesMinimum, + this.estimatedServiceMinutesMaximum + ); + + if (this.estimatedServiceMinutesMinimum && this.estimatedServiceMinutesMaximum) { + return `${mobileDurationTextWithoutTime} ${mobileDurationTime}`; + } + + return null; }, durationTextBlockCopy() { if (this.appointmentType === AppointmentTypeStrings.MOBILE) { - return null; + return this.mobileDurationText; } else if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) { return this.inshopDurationText; } else if ( diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue index 70a4dbc01..0330afafd 100644 --- a/src/layouts/schedule/schedule.vue +++ b/src/layouts/schedule/schedule.vue @@ -1151,7 +1151,7 @@ export default { }); datePickerInitialData.pricingByDayBasePrice = this.pricingByDayBasePrice; datePickerInitialData.pricingByDayUpcharge = this.pricingByDayUpcharge; - this.$refs.datePicker.initializeComponent(datePickerInitialData); + await this.$refs.datePicker.initializeComponent(datePickerInitialData); this.selectableDatesInshop = datePickerInitialData.initialShopTimeSlotsResponse.inshopTimeSlotsData; this.selectableDatesMobile = @@ -1182,11 +1182,13 @@ export default { }); }); } - if (this.isMobileSelected) { - this.selectedDate = selectedDateMobile; - } else { - this.selectedDate = selectedDateInshop; - } + this.$nextTick(() => { + if (this.isMobileSelected) { + this.selectedDate = selectedDateMobile; + } else { + this.selectedDate = selectedDateInshop; + } + }); } }, getScheduleApiResponse,