61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { isBefore, isSameDay } from 'date-fns';
|
|
import { uniq } from 'lodash';
|
|
|
|
import { Calendar } from '@kit/ui/shadcn/calendar';
|
|
import { Card } from '@kit/ui/shadcn/card';
|
|
|
|
import { ServiceCategory } from '../service-categories';
|
|
import { BookingProvider, useBooking } from './booking.provider';
|
|
import LocationSelector from './location-selector';
|
|
import ServiceSelector from './service-selector';
|
|
import TimeSlots from './time-slots';
|
|
|
|
const BookingCalendar = () => {
|
|
const { selectedDate, setSelectedDate, isLoadingTimeSlots, timeSlots } =
|
|
useBooking();
|
|
const availableDates = uniq(timeSlots?.map((timeSlot) => timeSlot.StartTime));
|
|
|
|
return (
|
|
<Card className="mb-4">
|
|
<Calendar
|
|
mode="single"
|
|
selected={selectedDate}
|
|
onSelect={setSelectedDate}
|
|
disabled={(date) => {
|
|
const today = new Date();
|
|
today.setHours(0, 0, 0, 0);
|
|
return (
|
|
isBefore(date, today) ||
|
|
!availableDates.some((dateWithBooking) =>
|
|
isSameDay(date, dateWithBooking),
|
|
)
|
|
);
|
|
}}
|
|
className="rounded-md border"
|
|
{...(isLoadingTimeSlots && {
|
|
className: 'rounded-md border opacity-50 pointer-events-none',
|
|
})}
|
|
/>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
const BookingContainer = ({ category }: { category: ServiceCategory }) => {
|
|
return (
|
|
<BookingProvider category={category}>
|
|
<div className="flex max-h-full flex-row gap-6">
|
|
<div className="flex flex-col">
|
|
<ServiceSelector products={category.products} />
|
|
<BookingCalendar />
|
|
<LocationSelector />
|
|
</div>
|
|
<TimeSlots countryCode={category.countryCode} />
|
|
</div>
|
|
</BookingProvider>
|
|
);
|
|
};
|
|
|
|
export default BookingContainer;
|