diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx index f600c6e697..75c540e574 100644 --- a/apps/web/components/booking/BookingListItem.tsx +++ b/apps/web/components/booking/BookingListItem.tsx @@ -45,14 +45,18 @@ type BookingItem = RouterOutputs["viewer"]["bookings"]["get"]["bookings"][number type BookingItemProps = BookingItem & { listingStatus: BookingListingStatus; recurringInfo: RouterOutputs["viewer"]["bookings"]["get"]["recurringInfo"][number] | undefined; + loggedInUser: { + userId: number | undefined; + userTimeZone: string | undefined; + userTimeFormat: number | null | undefined; + userEmail: string | undefined; + }; }; function BookingListItem(booking: BookingItemProps) { - // Get user so we can determine 12/24 hour format preferences - const query = useMeQuery(); const bookerUrl = useBookerUrl(); + const { userId, userTimeZone, userTimeFormat, userEmail } = booking.loggedInUser; - const user = query.data; const { t, i18n: { language }, @@ -226,7 +230,7 @@ function BookingListItem(booking: BookingItemProps) { }; const startTime = dayjs(booking.startTime) - .tz(user?.timeZone) + .tz(userTimeZone) .locale(language) .format(isUpcoming ? "ddd, D MMM" : "D MMMM YYYY"); const [isOpenRescheduleDialog, setIsOpenRescheduleDialog] = useState(false); @@ -304,7 +308,7 @@ function BookingListItem(booking: BookingItemProps) { booking={booking} isOpenDialog={viewRecordingsDialogIsOpen} setIsOpenDialog={setViewRecordingsDialogIsOpen} - timeFormat={user?.timeFormat ?? null} + timeFormat={userTimeFormat ?? null} /> )} {/* NOTE: Should refactor this dialog component as is being rendered multiple times */} @@ -344,11 +348,11 @@ function BookingListItem(booking: BookingItemProps) {
{startTime}
- {formatTime(booking.startTime, user?.timeFormat, user?.timeZone)} -{" "} - {formatTime(booking.endTime, user?.timeFormat, user?.timeZone)} + {formatTime(booking.startTime, userTimeFormat, userTimeZone)} -{" "} + {formatTime(booking.endTime, userTimeFormat, userTimeZone)}
{startTime}
- {formatTime(booking.startTime, user?.timeFormat, user?.timeZone)} -{" "} - {formatTime(booking.endTime, user?.timeFormat, user?.timeZone)} + {formatTime(booking.startTime, userTimeFormat, userTimeZone)} -{" "} + {formatTime(booking.endTime, userTimeFormat, userTimeZone)} )} {isCancelled && booking.rescheduled && ( @@ -463,7 +467,7 @@ function BookingListItem(booking: BookingItemProps) { {isUpcoming && !isCancelled ? ( <> - {isPending && user?.id === booking.user?.id && } + {isPending && userId === booking.user?.id && } {isConfirmed && } {isRejected &&
{t("rejected")}
} @@ -526,7 +530,7 @@ const RecurringBookingsTooltip = ({ booking, recurringDates }: RecurringBookings .includes(aDate.toDateString()); return (

- {formatTime(aDate, user?.timeFormat, user?.timeZone)} + {formatTime(aDate, userTimeFormat, userTimeZone)} {" - "} {dayjs(aDate).locale(language).format("D MMMM YYYY")}

diff --git a/apps/web/pages/bookings/[status].tsx b/apps/web/pages/bookings/[status].tsx index ca321e6de1..db5dcb07a8 100644 --- a/apps/web/pages/bookings/[status].tsx +++ b/apps/web/pages/bookings/[status].tsx @@ -176,6 +176,12 @@ export default function Bookings() { {bookingsToday.map((booking: BookingOutput) => (