update
This commit is contained in:
Joyce
@@ -12,7 +12,14 @@ import { Check, X, Loader2, ChevronLeft, ChevronRight, ChevronsRight } from 'luc
|
||||
const DEFAULT_TIMEZONE = 'America/Toronto';
|
||||
|
||||
const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
|
||||
const hours = Array.from({ length: 24 }, (_, i) => i); // 0-23
|
||||
const SLOT_INTERVAL_MINUTES = 15;
|
||||
const SLOTS_PER_HOUR = 60 / SLOT_INTERVAL_MINUTES;
|
||||
|
||||
// Generate time slots: [{hour: 0, minute: 0}, {hour: 0, minute: 30}, {hour: 1, minute: 0}, ...]
|
||||
const timeSlots = Array.from({ length: 24 * SLOTS_PER_HOUR }, (_, i) => ({
|
||||
hour: Math.floor(i / SLOTS_PER_HOUR),
|
||||
minute: (i % SLOTS_PER_HOUR) * SLOT_INTERVAL_MINUTES,
|
||||
}));
|
||||
|
||||
// Get the dates for Mon-Fri of a week in a specific timezone, offset by N weeks
|
||||
const getWeekDates = (timezone: string, weekOffset: number = 0): string[] => {
|
||||
@@ -46,11 +53,11 @@ const getWeekDates = (timezone: string, weekOffset: number = 0): string[] => {
|
||||
});
|
||||
};
|
||||
|
||||
// Convert a date string and hour in a timezone to a UTC Date
|
||||
const toUTCDate = (dateStr: string, hour: number, timezone: string): Date => {
|
||||
// Create a date string that represents the given hour in the given timezone
|
||||
// Convert a date string, hour, and minute in a timezone to a UTC Date
|
||||
const toUTCDate = (dateStr: string, hour: number, minute: number, timezone: string): Date => {
|
||||
// Create a date string that represents the given time in the given timezone
|
||||
// Then parse it to get the UTC equivalent
|
||||
const localDateStr = `${dateStr}T${String(hour).padStart(2, '0')}:00:00`;
|
||||
const localDateStr = `${dateStr}T${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}:00`;
|
||||
|
||||
// Use a trick: format in UTC then in target TZ to find the offset
|
||||
const testDate = new Date(localDateStr + 'Z'); // Treat as UTC first
|
||||
@@ -111,29 +118,32 @@ const getTimezoneAbbrev = (timezone: string): string => {
|
||||
}
|
||||
};
|
||||
|
||||
// Convert an hour from one timezone to another
|
||||
const convertHourBetweenTimezones = (
|
||||
// Convert a time from one timezone to another
|
||||
const convertTimeBetweenTimezones = (
|
||||
hour: number,
|
||||
minute: number,
|
||||
dateStr: string,
|
||||
fromTimezone: string,
|
||||
toTimezone: string
|
||||
): number => {
|
||||
): { hour: number; minute: number } => {
|
||||
try {
|
||||
// Create a UTC date for the given hour in the source timezone
|
||||
const utcDate = toUTCDate(dateStr, hour, fromTimezone);
|
||||
// Create a UTC date for the given time in the source timezone
|
||||
const utcDate = toUTCDate(dateStr, hour, minute, fromTimezone);
|
||||
|
||||
// Format the hour in the target timezone
|
||||
const targetHour = parseInt(
|
||||
new Intl.DateTimeFormat('en-US', {
|
||||
timeZone: toTimezone,
|
||||
hour: 'numeric',
|
||||
hour12: false,
|
||||
}).format(utcDate)
|
||||
);
|
||||
// Format the time in the target timezone
|
||||
const formatter = new Intl.DateTimeFormat('en-US', {
|
||||
timeZone: toTimezone,
|
||||
hour: 'numeric',
|
||||
minute: 'numeric',
|
||||
hour12: false,
|
||||
});
|
||||
const parts = formatter.formatToParts(utcDate);
|
||||
const targetHour = parseInt(parts.find(p => p.type === 'hour')?.value || '0');
|
||||
const targetMinute = parseInt(parts.find(p => p.type === 'minute')?.value || '0');
|
||||
|
||||
return targetHour;
|
||||
return { hour: targetHour, minute: targetMinute };
|
||||
} catch {
|
||||
return hour;
|
||||
return { hour, minute };
|
||||
}
|
||||
};
|
||||
|
||||
@@ -216,24 +226,24 @@ export const AvailabilityHeatmap = ({
|
||||
const timer = setTimeout(() => {
|
||||
if (!scrollContainerRef.current) return;
|
||||
|
||||
const rowHeight = 52; // h-12 (48px) + gap (4px)
|
||||
const rowsAbove = 2;
|
||||
const rowHeight = 28; // h-6 (24px) + gap (4px)
|
||||
const rowsAbove = 4; // Show a few slots before current time
|
||||
|
||||
// Calculate which hour should be at the top
|
||||
// Calculate which slot should be at the top (multiply by slots per hour)
|
||||
const targetHour = todayIndex >= 0
|
||||
? Math.max(0, currentHour - rowsAbove)
|
||||
? Math.max(0, currentHour - Math.floor(rowsAbove / SLOTS_PER_HOUR))
|
||||
: 7; // Default to 7am for other weeks
|
||||
|
||||
scrollContainerRef.current.scrollTop = targetHour * rowHeight;
|
||||
scrollContainerRef.current.scrollTop = targetHour * SLOTS_PER_HOUR * rowHeight;
|
||||
}, 100);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [weekOffset, todayIndex, currentHour, selectedParticipants.length, isLoading, slots.length]);
|
||||
|
||||
// Find a slot that matches the given display timezone date/hour
|
||||
const getSlot = (dateStr: string, hour: number): TimeSlot | undefined => {
|
||||
// Convert display timezone date/hour to UTC
|
||||
const targetUTC = toUTCDate(dateStr, hour, displayTimezone);
|
||||
// Find a slot that matches the given display timezone date/hour/minute
|
||||
const getSlot = (dateStr: string, hour: number, minute: number): TimeSlot | undefined => {
|
||||
// Convert display timezone date/hour/minute to UTC
|
||||
const targetUTC = toUTCDate(dateStr, hour, minute, displayTimezone);
|
||||
|
||||
return slots.find((s) => {
|
||||
const slotDate = new Date(s.start_time);
|
||||
@@ -249,13 +259,13 @@ export const AvailabilityHeatmap = ({
|
||||
return slot.availability;
|
||||
};
|
||||
|
||||
const formatHour = (hour: number) => {
|
||||
return `${hour.toString().padStart(2, '0')}:00`;
|
||||
const formatTime = (hour: number, minute: number) => {
|
||||
return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
const isSlotTooSoon = (dateStr: string, hour: number) => {
|
||||
const isSlotTooSoon = (dateStr: string, hour: number, minute: number) => {
|
||||
// Convert to UTC and compare with current time
|
||||
const slotTimeUTC = toUTCDate(dateStr, hour, displayTimezone);
|
||||
const slotTimeUTC = toUTCDate(dateStr, hour, minute, displayTimezone);
|
||||
const now = new Date();
|
||||
const twoHoursFromNow = new Date(now.getTime() + 2 * 60 * 60 * 1000);
|
||||
return slotTimeUTC < twoHoursFromNow;
|
||||
@@ -271,11 +281,11 @@ export const AvailabilityHeatmap = ({
|
||||
return `${format(monday)} – ${format(friday)}`;
|
||||
};
|
||||
|
||||
// Format hour for display in popover (in the display timezone)
|
||||
const formatDisplayTime = (hour: number) => {
|
||||
// Create a date at that hour
|
||||
// Format time for display in popover (in the display timezone)
|
||||
const formatDisplayTime = (hour: number, minute: number) => {
|
||||
// Create a date at that time
|
||||
const date = new Date();
|
||||
date.setHours(hour, 0, 0, 0);
|
||||
date.setHours(hour, minute, 0, 0);
|
||||
return new Intl.DateTimeFormat('en-US', {
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
@@ -398,144 +408,152 @@ export const AvailabilityHeatmap = ({
|
||||
onScroll={handleScroll}
|
||||
>
|
||||
<div className="min-w-[600px]">
|
||||
<div className={cn(
|
||||
"grid gap-1 mb-2 sticky top-0 bg-card z-10",
|
||||
showSecondaryTimezone
|
||||
? "grid-cols-[50px_50px_repeat(5,1fr)]"
|
||||
: "grid-cols-[60px_repeat(5,1fr)]"
|
||||
)}>
|
||||
{showSecondaryTimezone ? (
|
||||
<>
|
||||
<div className="text-center text-xs font-medium text-primary py-2">
|
||||
{getTimezoneAbbrev(displayTimezone)}
|
||||
<div className={cn(
|
||||
"grid gap-1 mb-2 sticky top-0 bg-card z-10",
|
||||
showSecondaryTimezone
|
||||
? "grid-cols-[50px_50px_repeat(5,1fr)]"
|
||||
: "grid-cols-[60px_repeat(5,1fr)]"
|
||||
)}>
|
||||
{showSecondaryTimezone ? (
|
||||
<>
|
||||
<div className="text-center text-xs font-medium text-primary py-2">
|
||||
{getTimezoneAbbrev(displayTimezone)}
|
||||
</div>
|
||||
<div className="text-center text-xs font-medium text-muted-foreground py-2">
|
||||
{getTimezoneAbbrev(secondaryTimezone)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div></div>
|
||||
)}
|
||||
{dayNames.map((dayName, i) => (
|
||||
<div
|
||||
key={dayName}
|
||||
className="text-center text-sm font-medium text-muted-foreground py-2"
|
||||
>
|
||||
<div>{dayName}</div>
|
||||
<div className="text-xs opacity-70">
|
||||
{weekDates[i]?.slice(5).replace('-', '/')}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center text-xs font-medium text-muted-foreground py-2">
|
||||
{getTimezoneAbbrev(secondaryTimezone)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div></div>
|
||||
)}
|
||||
{dayNames.map((dayName, i) => (
|
||||
<div
|
||||
key={dayName}
|
||||
className="text-center text-sm font-medium text-muted-foreground py-2"
|
||||
>
|
||||
<div>{dayName}</div>
|
||||
<div className="text-xs opacity-70">
|
||||
{weekDates[i]?.slice(5).replace('-', '/')}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
{hours.map((hour) => (
|
||||
<div
|
||||
key={hour}
|
||||
ref={todayIndex >= 0 && hour === currentHour ? currentHourRef : undefined}
|
||||
className={cn(
|
||||
"grid gap-1",
|
||||
showSecondaryTimezone
|
||||
? "grid-cols-[50px_50px_repeat(5,1fr)]"
|
||||
: "grid-cols-[60px_repeat(5,1fr)]"
|
||||
)}
|
||||
>
|
||||
{showSecondaryTimezone ? (
|
||||
<>
|
||||
<div className="text-xs text-primary font-medium flex items-center justify-center gap-1">
|
||||
{todayIndex >= 0 && hour === currentHour && (
|
||||
<div className="space-y-1">
|
||||
{timeSlots.map(({ hour, minute }) => (
|
||||
<div
|
||||
key={`${hour}-${minute}`}
|
||||
ref={todayIndex >= 0 && hour === currentHour && minute === 0 ? currentHourRef : undefined}
|
||||
className={cn(
|
||||
"grid gap-1",
|
||||
showSecondaryTimezone
|
||||
? "grid-cols-[50px_50px_repeat(5,1fr)]"
|
||||
: "grid-cols-[60px_repeat(5,1fr)]"
|
||||
)}
|
||||
>
|
||||
{showSecondaryTimezone ? (
|
||||
<>
|
||||
<div className="text-xs text-primary font-medium flex items-center justify-center gap-1">
|
||||
{todayIndex >= 0 && hour === currentHour && minute === 0 && (
|
||||
<span className="w-2 h-2 rounded-full bg-primary animate-pulse" />
|
||||
)}
|
||||
{formatTime(hour, minute)}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground flex items-center justify-center">
|
||||
{(() => {
|
||||
const converted = convertTimeBetweenTimezones(hour, minute, weekDates[0] || '', displayTimezone, secondaryTimezone);
|
||||
return formatTime(converted.hour, converted.minute);
|
||||
})()}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="text-xs text-muted-foreground flex items-center justify-end pr-3 gap-1">
|
||||
{todayIndex >= 0 && hour === currentHour && minute === 0 && (
|
||||
<span className="w-2 h-2 rounded-full bg-primary animate-pulse" />
|
||||
)}
|
||||
{formatHour(hour)}
|
||||
{formatTime(hour, minute)}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground flex items-center justify-center">
|
||||
{formatHour(convertHourBetweenTimezones(hour, weekDates[0] || '', displayTimezone, secondaryTimezone))}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="text-xs text-muted-foreground flex items-center justify-end pr-3 gap-1">
|
||||
{todayIndex >= 0 && hour === currentHour && (
|
||||
<span className="w-2 h-2 rounded-full bg-primary animate-pulse" />
|
||||
)}
|
||||
{formatHour(hour)}
|
||||
</div>
|
||||
)}
|
||||
{weekDates.map((dateStr, dayIndex) => {
|
||||
const slot = getSlot(dateStr, hour);
|
||||
const dayName = dayNames[dayIndex];
|
||||
const tooSoon = isSlotTooSoon(dateStr, hour);
|
||||
if (!slot) return <div key={`${dateStr}-${hour}`} className="h-12 bg-muted rounded" />;
|
||||
)}
|
||||
{weekDates.map((dateStr, dayIndex) => {
|
||||
const slot = getSlot(dateStr, hour, minute);
|
||||
const dayName = dayNames[dayIndex];
|
||||
const tooSoon = isSlotTooSoon(dateStr, hour, minute);
|
||||
if (!slot) return <div key={`${dateStr}-${hour}-${minute}`} className="h-6 bg-muted rounded" />;
|
||||
|
||||
const effectiveAvailability = getEffectiveAvailability(slot);
|
||||
const effectiveAvailability = getEffectiveAvailability(slot);
|
||||
|
||||
return (
|
||||
<Popover key={`${dateStr}-${hour}`}>
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
className={cn(
|
||||
"h-12 rounded-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
||||
tooSoon && "opacity-40 cursor-not-allowed",
|
||||
!tooSoon && "hover:scale-105 hover:shadow-md",
|
||||
effectiveAvailability === 'full' && "bg-availability-full hover:bg-availability-full/90",
|
||||
effectiveAvailability === 'partial' && "bg-availability-partial hover:bg-availability-partial/90",
|
||||
effectiveAvailability === 'none' && "bg-availability-none hover:bg-availability-none/90"
|
||||
)}
|
||||
/>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-64 p-4 animate-scale-in" align="center">
|
||||
<div className="space-y-3">
|
||||
<div className="font-semibold text-foreground">
|
||||
{dayName} {formatDisplayTime(hour)}–{formatDisplayTime(hour + 1)}
|
||||
</div>
|
||||
{tooSoon && (
|
||||
<div className="text-sm text-muted-foreground italic">
|
||||
This time slot has passed or is too soon to schedule
|
||||
// Calculate end time for display
|
||||
const endMinute = minute + SLOT_INTERVAL_MINUTES;
|
||||
const endHour = hour + Math.floor(endMinute / 60);
|
||||
const endMinuteNormalized = endMinute % 60;
|
||||
|
||||
return (
|
||||
<Popover key={`${dateStr}-${hour}-${minute}`}>
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
className={cn(
|
||||
"h-6 rounded-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
||||
tooSoon && "opacity-40 cursor-not-allowed",
|
||||
!tooSoon && "hover:scale-105 hover:shadow-md",
|
||||
effectiveAvailability === 'full' && "bg-availability-full hover:bg-availability-full/90",
|
||||
effectiveAvailability === 'partial' && "bg-availability-partial hover:bg-availability-partial/90",
|
||||
effectiveAvailability === 'none' && "bg-availability-none hover:bg-availability-none/90"
|
||||
)}
|
||||
/>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-64 p-4 animate-scale-in" align="center">
|
||||
<div className="space-y-3">
|
||||
<div className="font-semibold text-foreground">
|
||||
{dayName} {formatDisplayTime(hour, minute)}–{formatDisplayTime(endHour, endMinuteNormalized)}
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
{selectedParticipants.map((participant) => {
|
||||
const isAvailable = slot.availableParticipants.includes(participant.name);
|
||||
{tooSoon && (
|
||||
<div className="text-sm text-muted-foreground italic">
|
||||
This time slot has passed or is too soon to schedule
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
{selectedParticipants.map((participant) => {
|
||||
const isAvailable = slot.availableParticipants.includes(participant.name);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={participant.id}
|
||||
className="flex items-center gap-2 text-sm"
|
||||
>
|
||||
{isAvailable ? (
|
||||
<Check className="w-4 h-4 text-availability-full" />
|
||||
) : (
|
||||
<X className="w-4 h-4 text-destructive" />
|
||||
)}
|
||||
<span className={cn(
|
||||
isAvailable ? "text-foreground" : "text-muted-foreground"
|
||||
)}>
|
||||
{participant.name.split(' ')[0]}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
return (
|
||||
<div
|
||||
key={participant.id}
|
||||
className="flex items-center gap-2 text-sm"
|
||||
>
|
||||
{isAvailable ? (
|
||||
<Check className="w-4 h-4 text-availability-full" />
|
||||
) : (
|
||||
<X className="w-4 h-4 text-destructive" />
|
||||
)}
|
||||
<span className={cn(
|
||||
isAvailable ? "text-foreground" : "text-muted-foreground"
|
||||
)}>
|
||||
{participant.name.split(' ')[0]}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{effectiveAvailability !== 'none' && !tooSoon && (
|
||||
<Button
|
||||
variant="schedule"
|
||||
className="w-full mt-2"
|
||||
onClick={() => onSlotSelect(slot)}
|
||||
>
|
||||
Schedule
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{effectiveAvailability !== 'none' && !tooSoon && (
|
||||
<Button
|
||||
variant="schedule"
|
||||
className="w-full mt-2"
|
||||
onClick={() => onSlotSelect(slot)}
|
||||
>
|
||||
Schedule
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center gap-6 mt-6 pt-4 border-t border-border">
|
||||
<div className="flex items-center gap-2">
|
||||
|
||||
Reference in New Issue
Block a user