105 lines
3.7 KiB
TypeScript
105 lines
3.7 KiB
TypeScript
import React from 'react';
|
|
import { Clock } from 'lucide-react';
|
|
import { useTranslations } from 'next-intl';
|
|
import { TimeSlot } from '@/types/bookings';
|
|
|
|
interface TimeSlotSelectorProps {
|
|
timeSlots: (TimeSlot & { availableCapacity?: number })[];
|
|
selectedTimeSlot: string;
|
|
onTimeSlotChange: (slotId: string) => void;
|
|
loading?: boolean;
|
|
error?: string | null;
|
|
}
|
|
|
|
const TimeSlotSelector: React.FC<TimeSlotSelectorProps> = ({
|
|
timeSlots,
|
|
selectedTimeSlot,
|
|
onTimeSlotChange,
|
|
loading = false,
|
|
error = null,
|
|
}) => {
|
|
const t = useTranslations('bookingForm');
|
|
|
|
return (
|
|
<div className="bg-white rounded-xl p-6 shadow-sm">
|
|
<h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
|
|
<Clock className="w-5 h-5" />
|
|
{t('availableTimes')}
|
|
</h2>
|
|
|
|
{loading ? (
|
|
<div className="flex justify-center items-center py-8">
|
|
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
|
|
<span className="ml-2 text-gray-600">Loading available times...</span>
|
|
</div>
|
|
) : error ? (
|
|
<div className="text-center py-8">
|
|
<p className="text-gray-600">{error}</p>
|
|
</div>
|
|
) : timeSlots.length === 0 ? (
|
|
<div className="text-center py-8">
|
|
<p className="text-gray-600">No available time slots for this date</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
|
{timeSlots
|
|
.sort((a, b) => a.start_time.localeCompare(b.start_time))
|
|
.map((slot) => {
|
|
const isAvailable = slot.is_active;
|
|
|
|
// Format time to display as '11:30—12:30' in Tbilisi timezone (UTC+4)
|
|
const formatTime = (time: string) => {
|
|
// If it's already in HH:MM format, return as is
|
|
if (time.match(/^\d{2}:\d{2}$/)) {
|
|
return time;
|
|
}
|
|
// If it's ISO format or contains date, extract time portion in Tbilisi timezone
|
|
if (time.includes('T') || time.includes(' ') || time.includes('Z')) {
|
|
const date = new Date(time);
|
|
return date.toLocaleTimeString('en-US', {
|
|
timeZone: 'Asia/Tbilisi',
|
|
hour12: false,
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
});
|
|
}
|
|
return time;
|
|
};
|
|
|
|
const formattedTime = `${formatTime(slot.start_time)}—${formatTime(slot.end_time)}`;
|
|
|
|
return (
|
|
<button
|
|
key={slot.id}
|
|
type="button"
|
|
disabled={!isAvailable}
|
|
onClick={() => isAvailable && onTimeSlotChange(slot.id)}
|
|
className={`p-3 rounded-lg text-center transition-all ${
|
|
!isAvailable
|
|
? 'bg-gray-100 text-gray-400 cursor-not-allowed'
|
|
: selectedTimeSlot === slot.id
|
|
? 'bg-blue-500 text-white'
|
|
: 'bg-gray-100 hover:bg-gray-200 text-gray-700'
|
|
}`}
|
|
>
|
|
<div className="font-medium">
|
|
{formattedTime}
|
|
</div>
|
|
{slot.availableCapacity !== undefined && slot.availableCapacity > 0 && (
|
|
<div className="text-xs mt-1 text-green-600">
|
|
{slot.availableCapacity} spots left
|
|
</div>
|
|
)}
|
|
{!isAvailable && (
|
|
<div className="text-xs mt-1">Unavailable</div>
|
|
)}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TimeSlotSelector; |