Slot Picker

1// Bookable-slot picker — pure UI. Slots, paging cursor, and the pick handler come from
2// useServiceDetail (all the slot data wiring lives in that hook). Slots are grouped by day — the
3// date shown once as a heading, then time-only chips — so a long availability list reads like a
4// calendar instead of a flat wall of repeated "Mon, Aug 10, 1:30 PM". Each chip's key combines the
5// start time with its schedule/event id so appointment and class slots stay distinct. Styled with
6// base44 design tokens (shadcn Tailwind classes).
7const chipCls = "px-3 py-2 cursor-pointer text-sm font-body border rounded-sm";
8const chipIdle = "border-border bg-card text-foreground";
9const chipActiveCls = "border-primary bg-primary text-primary-foreground";
10
11// Group slots by their local day, preserving order. localStartDate is "YYYY-MM-DDThh:mm:ss" (no zone),
12// so the first 10 chars are the day key.
13function groupByDay(slots) {
14  const days = new Map();
15  for (const slot of slots) {
16    const key = slot.localStartDate.slice(0, 10);
17    if (!days.has(key)) days.set(key, []);
18    days.get(key).push(slot);
19  }
20  return [...days.values()];
21}
22
23export default function SlotPicker({ slots, cursor, onLoadMore, selectedSlot, onPick }) {
24  if (!slots?.length) {
25    return <p className="text-muted-foreground">No available times in this range — try later.</p>;
26  }
27  return (
28    <div className="flex flex-col gap-6">
29      {groupByDay(slots).map((daySlots) => (
30        <div key={daySlots[0].localStartDate.slice(0, 10)}>
31          <h3 className="text-sm font-semibold text-muted-foreground mb-2">
32            {new Date(daySlots[0].localStartDate).toLocaleDateString(undefined, {
33              weekday: "short", month: "short", day: "numeric",
34            })}
35          </h3>
36          <div className="flex flex-wrap gap-2">
37            {daySlots.map((slot) => {
38              const active = selectedSlot?.localStartDate === slot.localStartDate;
39              return (
40                <button key={`${slot.localStartDate}-${slot.scheduleId || slot.eventInfo?.eventId}`}
41                  aria-pressed={active} onClick={() => onPick(slot)}
42                  className={`${chipCls} ${active ? chipActiveCls : chipIdle}`}>
43                  {new Date(slot.localStartDate).toLocaleTimeString(undefined, {
44                    hour: "numeric", minute: "2-digit",
45                  })}
46                </button>
47              );
48            })}
49          </div>
50        </div>
51      ))}
52      {cursor && (
53        <button onClick={onLoadMore}
54          className="px-4 py-2 cursor-pointer bg-card text-foreground border border-border rounded-sm">
55          Load more times
56        </button>
57      )}
58    </div>
59  );
60}