diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue index 7de8a2ab..e369f11f 100644 --- a/src/digital-components/date-picker/date-picker.vue +++ b/src/digital-components/date-picker/date-picker.vue @@ -95,7 +95,8 @@ v-for="timeSlot in selectableTimeSlotsData" :key="timeSlot.startTime" class="time-slot-button" - :class="checkIsSelectedTimeSlot(timeSlot) ? 'selected-time-slot' : ''" + :class="[checkIsSelectedTimeSlot(timeSlot) ? 'selected-time-slot' : '' + , {'has-date-error': showTimeSlotError}]" @click="selectTimeSlotForDay(timeSlot)"> {{ displayTimeSlotTime(timeSlot.startTime) }} @@ -119,6 +120,7 @@ import { convertDateToShortMonth, convertDateToTwoDigitDay, convertDateToTwoDigitMonth, + getDisplayTextForDurationLength, militaryToTwelveHourTime } from '@/helpers/date-helper'; import showIssLoadingModal from '@/helpers/loading-modal-helper.js'; @@ -213,13 +215,15 @@ export default { daysInViewMobile: 3, daysInViewStandard: 5, daysLoaded: 0, + appointmentDurationMinutesMinimum: 90, + appointmentDurationMinutesMaximum: 120, initialDaysToLoad: 15, isMobileView: false }; }, computed: { appointmentEstimate() { - return '1.5 - 2 hours.'; + return getDisplayTextForDurationLength(this.appointmentDurationMinutesMinimum, this.appointmentDurationMinutesMaximum); }, daysToAdd() { return this.isMobileView ? this.daysInViewMobile : this.daysInViewStandard; @@ -473,6 +477,8 @@ export default { }); this.daysLoaded = config.initialDaysLoaded || this.initialDaysToLoad; + this.appointmentDurationMinutesMaximum = config.initialShopTimeSlotsResponse.estimatedServiceMinutesMaximum; + this.appointmentDurationMinutesMinimum = config.initialShopTimeSlotsResponse.estimatedServiceMinutesMinimum; this.findFirstAvailableDateInView(); this.isLoading = false; @@ -705,6 +711,10 @@ export default { color:#000; font-weight: 500; } + + &.has-date-error { + border: 1px solid #d93025; + } } }