Skip to content

Commit 405a4cc

Browse files
gutogalegoPeerRichsean-brydon
authored
fix: Time Buttons Should be Scroll not the Whole Right Side (#11412)
Co-authored-by: Peer Richelsen <[email protected]> Co-authored-by: sean-brydon <[email protected]>
1 parent eccab37 commit 405a4cc

File tree

6 files changed

+107
-69
lines changed

6 files changed

+107
-69
lines changed

‎packages/features/bookings/Booker/Booker.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -316,7 +316,7 @@ const BookerComponent = ({
316316
className={classNames(
317317
"border-subtle rtl:border-default flex h-full w-full flex-col overflow-x-auto px-5 py-3 pb-0 rtl:border-r ltr:md:border-l",
318318
layout === BookerLayouts.MONTH_VIEW &&
319-
"scroll-bar h-full overflow-auto md:w-[var(--booker-timeslots-width)]",
319+
"h-full overflow-hidden md:w-[var(--booker-timeslots-width)]",
320320
layout !== BookerLayouts.MONTH_VIEW && "sticky top-0"
321321
)}
322322
ref={timeslotsRef}

‎packages/features/bookings/Booker/components/AvailableTimeSlots.tsx‎

Lines changed: 43 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
1010
import { BookerLayouts } from "@calcom/prisma/zod-utils";
1111
import { trpc } from "@calcom/trpc";
1212

13+
import { AvailableTimesHeader } from "../../components/AvailableTimesHeader";
1314
import { useBookerStore } from "../store";
1415
import { useEvent, useScheduleForEvent } from "../utils/event";
1516

@@ -100,33 +101,47 @@ export const AvailableTimeSlots = ({
100101
}, [containerRef, schedule.isLoading, isEmbed, isMobile]);
101102

102103
return (
103-
<div
104-
ref={containerRef}
105-
className={classNames(
106-
limitHeight && "flex-grow md:h-[400px]",
107-
!limitHeight && "flex h-full w-full flex-row gap-4"
108-
)}>
109-
{schedule.isLoading
110-
? // Shows exact amount of days as skeleton.
111-
Array.from({ length: 1 + (extraDays ?? 0) }).map((_, i) => <AvailableTimesSkeleton key={i} />)
112-
: slotsPerDay.length > 0 &&
113-
slotsPerDay.map((slots) => (
114-
<AvailableTimes
115-
className="w-full"
116-
key={slots.date}
117-
showTimeFormatToggle={!isColumnView}
118-
onTimeSelect={onTimeSelect}
119-
date={dayjs(slots.date)}
120-
slots={slots.slots}
121-
seatsPerTimeSlot={seatsPerTimeSlot}
122-
showAvailableSeatsCount={showAvailableSeatsCount}
123-
availableMonth={
124-
dayjs(selectedDate).format("MM") !== dayjs(slots.date).format("MM")
125-
? dayjs(slots.date).format("MMM")
126-
: undefined
127-
}
128-
/>
129-
))}
130-
</div>
104+
<>
105+
<div className="flex">
106+
{schedule.isLoading
107+
? // Shows exact amount of days as skeleton.
108+
Array.from({ length: 1 + (extraDays ?? 0) }).map((_, i) => <AvailableTimesSkeleton key={i} />)
109+
: slotsPerDay.length > 0 &&
110+
slotsPerDay.map((slots) => (
111+
<AvailableTimesHeader
112+
key={slots.date}
113+
date={dayjs(slots.date)}
114+
showTimeFormatToggle={!isColumnView}
115+
availableMonth={
116+
dayjs(selectedDate).format("MM") !== dayjs(slots.date).format("MM")
117+
? dayjs(slots.date).format("MMM")
118+
: undefined
119+
}
120+
/>
121+
))}
122+
</div>
123+
<div
124+
ref={containerRef}
125+
className={classNames(
126+
limitHeight && "scroll-bar flex-grow overflow-auto md:h-[400px]",
127+
!limitHeight && "flex h-full w-full flex-row gap-4"
128+
)}>
129+
{schedule.isLoading
130+
? // Shows exact amount of days as skeleton.
131+
Array.from({ length: 1 + (extraDays ?? 0) }).map((_, i) => <AvailableTimesSkeleton key={i} />)
132+
: slotsPerDay.length > 0 &&
133+
slotsPerDay.map((slots) => (
134+
<AvailableTimes
135+
className="scroll-bar w-full overflow-auto"
136+
key={slots.date}
137+
showTimeFormatToggle={!isColumnView}
138+
onTimeSelect={onTimeSelect}
139+
slots={slots.slots}
140+
seatsPerTimeSlot={seatsPerTimeSlot}
141+
showAvailableSeatsCount={showAvailableSeatsCount}
142+
/>
143+
))}
144+
</div>
145+
</>
131146
);
132147
};

‎packages/features/bookings/components/AvailableTimes.tsx‎

Lines changed: 0 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,16 @@
11
import { CalendarX2 } from "lucide-react";
2-
import { shallow } from "zustand/shallow";
32

4-
import type { Dayjs } from "@calcom/dayjs";
53
import dayjs from "@calcom/dayjs";
64
import type { Slots } from "@calcom/features/schedules";
75
import { classNames } from "@calcom/lib";
86
import { useLocale } from "@calcom/lib/hooks/useLocale";
9-
import { nameOfDay } from "@calcom/lib/weekday";
10-
import { BookerLayouts } from "@calcom/prisma/zod-utils";
117
import { Button, SkeletonText } from "@calcom/ui";
128

139
import { useBookerStore } from "../Booker/store";
1410
import { useTimePreferences } from "../lib";
1511
import { SeatsAvailabilityText } from "./SeatsAvailabilityText";
16-
import { TimeFormatToggle } from "./TimeFormatToggle";
1712

1813
type AvailableTimesProps = {
19-
date: Dayjs;
2014
slots: Slots[string];
2115
onTimeSelect: (
2216
time: string,
@@ -28,58 +22,25 @@ type AvailableTimesProps = {
2822
showAvailableSeatsCount?: boolean | null;
2923
showTimeFormatToggle?: boolean;
3024
className?: string;
31-
availableMonth?: string | undefined;
3225
selectedSlots?: string[];
3326
};
3427

3528
export const AvailableTimes = ({
36-
date,
3729
slots,
3830
onTimeSelect,
3931
seatsPerTimeSlot,
4032
showAvailableSeatsCount,
4133
showTimeFormatToggle = true,
4234
className,
43-
availableMonth,
4435
selectedSlots,
4536
}: AvailableTimesProps) => {
4637
const { t, i18n } = useLocale();
4738
const [timeFormat, timezone] = useTimePreferences((state) => [state.timeFormat, state.timezone]);
4839
const bookingData = useBookerStore((state) => state.bookingData);
4940
const hasTimeSlots = !!seatsPerTimeSlot;
50-
const [layout] = useBookerStore((state) => [state.layout], shallow);
51-
const isColumnView = layout === BookerLayouts.COLUMN_VIEW;
52-
const isMonthView = layout === BookerLayouts.MONTH_VIEW;
53-
const isToday = dayjs().isSame(date, "day");
5441

5542
return (
5643
<div className={classNames("text-default flex flex-col", className)}>
57-
<header className="bg-default before:bg-default dark:bg-muted dark:before:bg-muted mb-3 flex w-full flex-row items-center font-medium">
58-
<span
59-
className={classNames(
60-
isColumnView && "w-full text-center",
61-
isColumnView ? "text-subtle text-xs uppercase" : "text-emphasis font-semibold"
62-
)}>
63-
<span className={classNames(isToday && "!text-default")}>
64-
{nameOfDay(i18n.language, Number(date.format("d")), "short")}
65-
</span>
66-
<span
67-
className={classNames(
68-
isColumnView && isToday && "bg-brand-default text-brand ml-2",
69-
"inline-flex items-center justify-center rounded-3xl px-1 pt-0.5 font-medium",
70-
isMonthView ? "text-default text-sm" : "text-xs"
71-
)}>
72-
{date.format("DD")}
73-
{availableMonth && `, ${availableMonth}`}
74-
</span>
75-
</span>
76-
77-
{showTimeFormatToggle && (
78-
<div className="ml-auto rtl:mr-auto">
79-
<TimeFormatToggle />
80-
</div>
81-
)}
82-
</header>
8344
<div className="h-full pb-4">
8445
{!slots.length && (
8546
<div className="bg-subtle border-subtle flex h-full flex-col items-center rounded-md border p-6 dark:bg-transparent">

‎packages/features/bookings/components/AvailableTimesHeader.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { shallow } from "zustand/shallow";
2+
3+
import type { Dayjs } from "@calcom/dayjs";
4+
import dayjs from "@calcom/dayjs";
5+
import { classNames } from "@calcom/lib";
6+
import { useLocale } from "@calcom/lib/hooks/useLocale";
7+
import { nameOfDay } from "@calcom/lib/weekday";
8+
import { BookerLayouts } from "@calcom/prisma/zod-utils";
9+
10+
import { useBookerStore } from "../Booker/store";
11+
import { TimeFormatToggle } from "./TimeFormatToggle";
12+
13+
type AvailableTimesHeaderProps = {
14+
date: Dayjs;
15+
showTimeFormatToggle?: boolean;
16+
availableMonth?: string | undefined;
17+
};
18+
19+
export const AvailableTimesHeader = ({
20+
date,
21+
22+
showTimeFormatToggle = true,
23+
24+
availableMonth,
25+
}: AvailableTimesHeaderProps) => {
26+
const { t, i18n } = useLocale();
27+
const [layout] = useBookerStore((state) => [state.layout], shallow);
28+
const isColumnView = layout === BookerLayouts.COLUMN_VIEW;
29+
const isMonthView = layout === BookerLayouts.MONTH_VIEW;
30+
const isToday = dayjs().isSame(date, "day");
31+
32+
return (
33+
<header className="bg-default before:bg-default dark:bg-muted dark:before:bg-muted mb-3 flex w-full flex-row items-center font-medium">
34+
<span
35+
className={classNames(
36+
isColumnView && "w-full text-center",
37+
isColumnView ? "text-subtle text-xs uppercase" : "text-emphasis font-semibold"
38+
)}>
39+
<span className={classNames(isToday && "!text-default")}>
40+
{nameOfDay(i18n.language, Number(date.format("d")), "short")}
41+
</span>
42+
<span
43+
className={classNames(
44+
isColumnView && isToday && "bg-brand-default text-brand ml-2",
45+
"inline-flex items-center justify-center rounded-3xl px-1 pt-0.5 font-medium",
46+
isMonthView ? "text-default text-sm" : "text-xs"
47+
)}>
48+
{date.format("DD")}
49+
{availableMonth && `, ${availableMonth}`}
50+
</span>
51+
</span>
52+
53+
{showTimeFormatToggle && (
54+
<div className="ml-auto rtl:mr-auto">
55+
<TimeFormatToggle />
56+
</div>
57+
)}
58+
</header>
59+
);
60+
};

‎packages/features/bookings/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@ export {
66
EventTitle,
77
} from "./components/event-meta";
88
export { AvailableTimes, AvailableTimesSkeleton } from "./components/AvailableTimes";
9+
export { AvailableTimesHeader } from "./components/AvailableTimesHeader";

‎packages/features/embed/Embed.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { shallow } from "zustand/shallow";
1010

1111
import type { Dayjs } from "@calcom/dayjs";
1212
import dayjs from "@calcom/dayjs";
13+
import { AvailableTimesHeader } from "@calcom/features/bookings";
1314
import { AvailableTimes } from "@calcom/features/bookings";
1415
import { useBookerStore, useInitializeBookerStore } from "@calcom/features/bookings/Booker/store";
1516
import { useEvent, useScheduleForEvent } from "@calcom/features/bookings/Booker/utils/event";
@@ -248,9 +249,9 @@ const EmailEmbed = ({ eventType, username }: { eventType?: EventType; username:
248249
<div className="mt-[9px] font-medium ">
249250
{selectedDate ? (
250251
<div className="flex h-full w-full flex-row gap-4">
252+
<AvailableTimesHeader date={dayjs(selectedDate)} />
251253
<AvailableTimes
252254
className="w-full"
253-
date={dayjs(selectedDate)}
254255
selectedSlots={
255256
eventType.slug &&
256257
selectedDatesAndTimes &&

0 commit comments

Comments
 (0)