Skip to content

Commit 52d5261

Browse files
eunjae-leedevin-ai-integration[bot]sean-brydon
authored
feat(booking): implement cross-page/week navigation in booking details sheet with view persistence (calcom#25545)
* display UTM parameters * persist view (list | calendar) in localStorage * move to next page on clicking "next" of last item in the page improve navigation ^ Conflicts: ^ apps/web/modules/bookings/components/BookingCalendarContainer.tsx * fix navigation on calendar view * Delete apps/web/modules/bookings/NAVIGATION_IMPLEMENTATION.md * avoid page size being 0 * check feature flag on user level * use map to improve useBookingListData * address feedback * feat(bookings): add smart navigation for calendar view - Add sort option to tRPC bookings.get schema and handler - Create NAVIGATION_PROBE_WINDOW_MONTHS constant (3 months) - Create useNearestFutureBooking hook to find nearest future booking - Create useNearestPastBooking hook to find nearest past booking - Update useCalendarNavigationCapabilities to use probe results - Update BookingCalendarContainer to wire up probe hooks This enables the booking details sheet to: - Disable next/prev buttons when no bookings exist in that direction - Jump directly to the week containing the nearest booking Co-Authored-By: eunjae@cal.com <hey@eunjae.dev> * fix type error * feat: add booking selection state when using slideover (calcom#25637) * implement booking selection when using slideover * remove pixel shift * fix * auto scroll to selected event on calendar * make DateValues header sticky when scrolling --------- Co-authored-by: Eunjae Lee <hey@eunjae.dev> * prefetch previous / next weeks on calendar view * clean up classes * handle "fetched & but no data" situation more correctly in useCalendarAutoSelector --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
1 parent 53776d2 commit 52d5261

30 files changed

Lines changed: 991 additions & 135 deletions

‎apps/web/app/(use-page-wrapper)/(main-nav)/bookings/[status]/page.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,11 +53,9 @@ const Page = async ({ params }: PageProps) => {
5353
canReadOthersBookings = teamIdsWithPermission.length > 0;
5454
}
5555

56-
const userProfile = session?.user?.profile;
57-
const orgId = userProfile?.organizationId ?? session?.user.org?.id;
5856
const featuresRepository = new FeaturesRepository(prisma);
59-
const bookingsV3Enabled = orgId
60-
? await featuresRepository.checkIfTeamHasFeature(orgId, "bookings-v3")
57+
const bookingsV3Enabled = session?.user?.id
58+
? await featuresRepository.checkIfUserHasFeature(session.user.id, "bookings-v3")
6159
: false;
6260

6361
return (

‎apps/web/components/booking/BookingListItem.tsx‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Link from "next/link";
2-
import { useState } from "react";
2+
import { useState, useEffect, useRef } from "react";
33
import { Controller, useFieldArray, useForm } from "react-hook-form";
44

55
import { getPaymentAppData } from "@calcom/app-store/_utils/payments/getPaymentAppData";
@@ -41,6 +41,7 @@ import { Tooltip } from "@calcom/ui/components/tooltip";
4141
import assignmentReasonBadgeTitleMap from "@lib/booking/assignmentReasonBadgeTitleMap";
4242

4343
import { buildBookingLink } from "../../modules/bookings/lib/buildBookingLink";
44+
import { useBookingDetailsSheetStore } from "../../modules/bookings/store/bookingDetailsSheetStore";
4445
import type { BookingAttendee } from "../../modules/bookings/types";
4546
import { AcceptBookingButton } from "./AcceptBookingButton";
4647
import { RejectBookingButton } from "./RejectBookingButton";
@@ -136,6 +137,7 @@ const ConditionalLink = ({
136137

137138
function BookingListItem(booking: BookingItemProps) {
138139
const parsedBooking = buildParsedBooking(booking);
140+
const itemRef = useRef<HTMLDivElement>(null);
139141

140142
const { userTimeZone, userTimeFormat, userEmail } = booking.loggedInUser;
141143
const { onClick } = booking;
@@ -144,6 +146,21 @@ function BookingListItem(booking: BookingItemProps) {
144146
i18n: { language },
145147
} = useLocale();
146148

149+
// Get selected booking UID from store
150+
// The provider should always be available when BookingListItem is rendered (bookingsV3Enabled is true)
151+
const selectedBookingUid = useBookingDetailsSheetStore((state) => state.selectedBookingUid);
152+
const isSelected = !!selectedBookingUid && selectedBookingUid === booking.uid;
153+
154+
// Scroll into view when this booking becomes selected
155+
useEffect(() => {
156+
if (isSelected && itemRef.current) {
157+
itemRef.current.scrollIntoView({
158+
behavior: "smooth",
159+
block: "nearest",
160+
});
161+
}
162+
}, [isSelected]);
163+
147164
const attendeeList = booking.attendees.map((attendee) => ({
148165
...attendee,
149166
noShow: attendee.noShow || false,
@@ -265,10 +282,17 @@ function BookingListItem(booking: BookingItemProps) {
265282

266283
return (
267284
<div
285+
ref={itemRef}
268286
data-testid="booking-item"
269287
data-today={String(booking.isToday)}
270288
data-booking-list-item="true"
271-
className="hover:bg-cal-muted group w-full">
289+
data-booking-uid={booking.uid}
290+
className={classNames(
291+
"group relative w-full transition-all duration-100 ease-out",
292+
"hover:bg-cal-muted",
293+
isSelected &&
294+
"bg-cal-muted before:bg-brand-default rounded-r-md before:absolute before:left-0 before:top-0 before:h-full before:w-1"
295+
)}>
272296
<div className="flex flex-col sm:flex-row">
273297
<div className="sm:min-w-48 hidden align-top ltr:pl-3 rtl:pr-6 sm:table-cell">
274298
<div className="flex h-full items-center">
@@ -381,7 +405,7 @@ function BookingListItem(booking: BookingItemProps) {
381405
<div
382406
title={title}
383407
className={classNames(
384-
"max-w-10/12 sm:max-w-56 text-emphasis break-words text-sm font-medium leading-6 md:max-w-full",
408+
"max-w-10/12 text-emphasis sm:max-w-56 break-words text-sm font-medium leading-6 md:max-w-full",
385409
isCancelled ? "line-through" : ""
386410
)}>
387411
{title}
@@ -395,7 +419,7 @@ function BookingListItem(booking: BookingItemProps) {
395419
</div>
396420
{booking.description && (
397421
<div
398-
className="max-w-10/12 sm:max-w-32 md:max-w-52 xl:max-w-80 text-default truncate text-sm"
422+
className="max-w-10/12 text-default sm:max-w-32 md:max-w-52 xl:max-w-80 truncate text-sm"
399423
title={booking.description}>
400424
&quot;{booking.description}&quot;
401425
</div>

‎apps/web/modules/bookings/components/BookingCalendarContainer.tsx‎

Lines changed: 39 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ import { Icon } from "@calcom/ui/components/icon";
1616
import { useBookingCalendarData } from "~/bookings/hooks/useBookingCalendarData";
1717
import { useBookingFilters } from "~/bookings/hooks/useBookingFilters";
1818
import { useCalendarAllowedFilters } from "~/bookings/hooks/useCalendarAllowedFilters";
19+
import { useCalendarAutoSelector } from "~/bookings/hooks/useCalendarAutoSelector";
20+
import { useCalendarNavigationCapabilities } from "~/bookings/hooks/useCalendarNavigationCapabilities";
1921
import { useCurrentWeekStart } from "~/bookings/hooks/useCurrentWeekStart";
2022
import { useFacetedUniqueValues } from "~/bookings/hooks/useFacetedUniqueValues";
2123

@@ -36,6 +38,7 @@ interface BookingCalendarContainerProps {
3638
permissions: {
3739
canReadOthersBookings: boolean;
3840
};
41+
bookingsV3Enabled: boolean;
3942
}
4043

4144
interface BookingCalendarInnerProps extends BookingCalendarContainerProps {
@@ -48,20 +51,39 @@ interface BookingCalendarInnerProps extends BookingCalendarContainerProps {
4851
isPending: boolean;
4952
hasError: boolean;
5053
errorMessage?: string;
54+
hasNextPage: boolean;
55+
isFetched: boolean;
56+
isFetchingNextPage: boolean;
5157
}
5258

5359
function BookingCalendarInner({
5460
status,
5561
permissions,
62+
bookingsV3Enabled,
5663
data,
5764
allowedFilterIds,
5865
hasError,
5966
errorMessage,
67+
hasNextPage,
68+
isFetched,
69+
isFetchingNextPage,
6070
}: BookingCalendarInnerProps) {
6171
const { t } = useLocale();
6272
const user = useMeQuery().data;
6373
const { currentWeekStart, setCurrentWeekStart, userWeekStart } = useCurrentWeekStart();
6474

75+
const rowData = useBookingCalendarData({ data, status });
76+
77+
// Extract bookings from table data
78+
const bookings = useMemo(() => {
79+
return rowData
80+
.filter((row): row is Extract<RowData, { type: "data" }> => row.type === "data")
81+
.map((row) => row.booking);
82+
}, [rowData]);
83+
84+
// Handle auto-selection for calendar view
85+
useCalendarAutoSelector(bookings, hasNextPage, isFetched, isFetchingNextPage);
86+
6587
const goToPreviousWeek = () => {
6688
setCurrentWeekStart(currentWeekStart.subtract(1, "week"));
6789
};
@@ -86,8 +108,6 @@ function BookingCalendarInner({
86108

87109
const getFacetedUniqueValues = useFacetedUniqueValues();
88110

89-
const rowData = useBookingCalendarData({ data, status });
90-
91111
const table = useReactTable<RowData>({
92112
data: rowData,
93113
columns,
@@ -99,13 +119,6 @@ function BookingCalendarInner({
99119
getFacetedUniqueValues,
100120
});
101121

102-
// Extract bookings from table data
103-
const bookings = useMemo(() => {
104-
return rowData
105-
.filter((row): row is Extract<RowData, { type: "data" }> => row.type === "data")
106-
.map((row) => row.booking);
107-
}, [rowData]);
108-
109122
return (
110123
<>
111124
<div className="mb-4 flex items-center justify-between">
@@ -132,7 +145,7 @@ function BookingCalendarInner({
132145
<Icon name="chevron-right" className="h-4 w-4" />
133146
</Button>
134147
</ButtonGroup>
135-
<ViewToggleButton />
148+
<ViewToggleButton bookingsV3Enabled={bookingsV3Enabled} />
136149
</div>
137150
</div>
138151
{hasError && ErrorView ? (
@@ -158,7 +171,7 @@ function BookingCalendarInner({
158171
export function BookingCalendarContainer(props: BookingCalendarContainerProps) {
159172
const { canReadOthersBookings } = props.permissions;
160173
const { userIds } = useBookingFilters();
161-
const { currentWeekStart } = useCurrentWeekStart();
174+
const { currentWeekStart, setCurrentWeekStart, userWeekStart } = useCurrentWeekStart();
162175

163176
const allowedFilterIds = useCalendarAllowedFilters({
164177
canReadOthersBookings,
@@ -182,8 +195,9 @@ export function BookingCalendarContainer(props: BookingCalendarContainerProps) {
182195
}
183196
);
184197

198+
const { isFetched, hasNextPage, isFetchingNextPage, fetchNextPage } = query;
199+
185200
// Automatically fetch all pages until no more data
186-
const { hasNextPage, isFetchingNextPage, fetchNextPage } = query;
187201
useEffect(() => {
188202
if (hasNextPage && !isFetchingNextPage) {
189203
fetchNextPage();
@@ -208,15 +222,27 @@ export function BookingCalendarContainer(props: BookingCalendarContainerProps) {
208222

209223
const bookings = useMemo(() => data?.bookings ?? [], [data?.bookings]);
210224

225+
// Create navigation capabilities for calendar view
226+
// This hook handles probe queries and prefetching internally
227+
const capabilities = useCalendarNavigationCapabilities({
228+
currentWeekStart,
229+
setCurrentWeekStart,
230+
userWeekStart,
231+
filters: { statuses: STATUSES, userIds },
232+
});
233+
211234
return (
212-
<BookingDetailsSheetStoreProvider bookings={bookings}>
235+
<BookingDetailsSheetStoreProvider bookings={bookings} capabilities={capabilities}>
213236
<BookingCalendarInner
214237
{...props}
215238
data={data}
216239
allowedFilterIds={allowedFilterIds}
217240
isPending={query.isPending}
218241
hasError={!!query.error}
219242
errorMessage={query.error?.message}
243+
hasNextPage={hasNextPage}
244+
isFetched={isFetched}
245+
isFetchingNextPage={isFetchingNextPage}
220246
/>
221247
</BookingDetailsSheetStoreProvider>
222248
);

‎apps/web/modules/bookings/components/BookingCalendarView.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export function BookingCalendarView({
2424
onWeekStartChange,
2525
}: BookingCalendarViewProps) {
2626
const setSelectedBookingUid = useBookingDetailsSheetStore((state) => state.setSelectedBookingUid);
27+
const selectedBookingUid = useBookingDetailsSheetStore((state) => state.selectedBookingUid);
2728
const { timezone } = useTimePreferences();
2829
const { resolvedTheme, forcedTheme } = useGetTheme();
2930
const { bannersHeight } = useBanners();
@@ -91,6 +92,7 @@ export function BookingCalendarView({
9192
showBackgroundPattern={false}
9293
showBorder={false}
9394
borderColor="subtle"
95+
selectedBookingUid={selectedBookingUid}
9496
onEventClick={(event) => {
9597
const bookingUid = event.options?.bookingUid;
9698
if (bookingUid) {

‎apps/web/modules/bookings/components/BookingDetailsSheet.tsx‎

Lines changed: 61 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,7 @@ import { BookingActionsDropdown } from "../../../components/booking/actions/Book
4242
import { BookingActionsStoreProvider } from "../../../components/booking/actions/BookingActionsStoreProvider";
4343
import type { BookingListingStatus } from "../../../components/booking/types";
4444
import { usePaymentStatus } from "../hooks/usePaymentStatus";
45-
import {
46-
useBookingDetailsSheetStore,
47-
useBookingDetailsSheetStoreApi,
48-
} from "../store/bookingDetailsSheetStore";
45+
import { useBookingDetailsSheetStore } from "../store/bookingDetailsSheetStore";
4946
import type { BookingOutput } from "../types";
5047
import { JoinMeetingButton } from "./JoinMeetingButton";
5148

@@ -103,35 +100,38 @@ function BookingDetailsSheetInner({
103100
const { data: bookingDetails } = trpc.viewer.bookings.getBookingDetails.useQuery(
104101
{ uid: booking.uid },
105102
{
106-
enabled: Boolean(booking.rescheduled || booking.fromReschedule),
107103
// Keep data fresh but don't refetch too aggressively
108104
staleTime: 5 * 60 * 1000, // 5 minutes
109105
}
110106
);
111107

112-
// Get navigation state directly from the store
113-
const hasNext = useBookingDetailsSheetStore((state) => state.hasNext());
114-
const hasPrevious = useBookingDetailsSheetStore((state) => state.hasPrevious());
115-
const setSelectedBookingUid = useBookingDetailsSheetStore((state) => state.setSelectedBookingUid);
108+
// Get navigation state from the store in a single selector
109+
const navigation = useBookingDetailsSheetStore((state) => {
110+
const hasNextInArray = state.hasNextInArray();
111+
const hasPreviousInArray = state.hasPreviousInArray();
112+
const isLastInArray = state.isLastInArray();
113+
const isFirstInArray = state.isFirstInArray();
114+
115+
return {
116+
navigateNext: state.navigateNext,
117+
navigatePrevious: state.navigatePrevious,
118+
isTransitioning: state.isTransitioning,
119+
setSelectedBookingUid: state.setSelectedBookingUid,
120+
canGoNext: hasNextInArray || (isLastInArray && state.capabilities?.canNavigateToNextPeriod()),
121+
canGoPrev: hasPreviousInArray || (isFirstInArray && state.capabilities?.canNavigateToPreviousPeriod()),
122+
};
123+
});
116124

117125
const handleClose = () => {
118-
setSelectedBookingUid(null);
126+
navigation.setSelectedBookingUid(null);
119127
};
120128

121-
const storeApi = useBookingDetailsSheetStoreApi();
122-
123129
const handleNext = () => {
124-
const nextUid = storeApi.getState().getNextBookingUid();
125-
if (nextUid !== null) {
126-
setSelectedBookingUid(nextUid);
127-
}
130+
navigation.navigateNext();
128131
};
129132

130133
const handlePrevious = () => {
131-
const prevUid = storeApi.getState().getPreviousBookingUid();
132-
if (prevUid !== null) {
133-
setSelectedBookingUid(prevUid);
134-
}
134+
navigation.navigatePrevious();
135135
};
136136

137137
const startTime = dayjs(booking.startTime).tz(userTimeZone);
@@ -214,7 +214,7 @@ function BookingDetailsSheetInner({
214214
size="sm"
215215
color="secondary"
216216
StartIcon="chevron-up"
217-
disabled={!hasPrevious}
217+
disabled={!navigation.canGoPrev || navigation.isTransitioning}
218218
onClick={(e) => {
219219
e.preventDefault();
220220
handlePrevious();
@@ -225,7 +225,7 @@ function BookingDetailsSheetInner({
225225
size="sm"
226226
color="secondary"
227227
StartIcon="chevron-down"
228-
disabled={!hasNext}
228+
disabled={!navigation.canGoNext || navigation.isTransitioning}
229229
onClick={(e) => {
230230
e.preventDefault();
231231
handleNext();
@@ -289,6 +289,8 @@ function BookingDetailsSheetInner({
289289
customResponses={customResponses}
290290
bookingFields={booking.eventType?.bookingFields}
291291
/>
292+
293+
<TrackingSection tracking={bookingDetails?.tracking} />
292294
</div>
293295
</SheetBody>
294296

@@ -841,6 +843,43 @@ function BookingHeaderBadges({
841843
);
842844
}
843845

846+
function TrackingSection({
847+
tracking,
848+
}: {
849+
tracking?: {
850+
utm_source: string | null;
851+
utm_medium: string | null;
852+
utm_campaign: string | null;
853+
utm_term: string | null;
854+
utm_content: string | null;
855+
} | null;
856+
}) {
857+
const { t } = useLocale();
858+
859+
if (!tracking) {
860+
return null;
861+
}
862+
863+
const utmEntries = Object.entries(tracking).filter(([_, value]) => Boolean(value));
864+
865+
if (utmEntries.length === 0) {
866+
return null;
867+
}
868+
869+
return (
870+
<Section title={t("utm_params")}>
871+
<div className="text-default text-sm">
872+
{utmEntries.map(([key, value]) => (
873+
<div key={key} className="mb-1 last:mb-0">
874+
<span className="font-medium">{key}</span>:{" "}
875+
<code className="bg-subtle text-default rounded px-1 py-0.5 font-mono text-xs">{value}</code>
876+
</div>
877+
))}
878+
</div>
879+
</Section>
880+
);
881+
}
882+
844883
function Section({
845884
title,
846885
className,

0 commit comments

Comments
 (0)