diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx index fe33b6e9df..ea9efb0c74 100644 --- a/apps/web/components/booking/BookingListItem.tsx +++ b/apps/web/components/booking/BookingListItem.tsx @@ -32,8 +32,6 @@ import { } from "@calcom/ui"; import { Ban, Check, Clock, CreditCard, MapPin, RefreshCcw, Send, X } from "@calcom/ui/components/icon"; -import useMeQuery from "@lib/hooks/useMeQuery"; - import { ChargeCardDialog } from "@components/dialog/ChargeCardDialog"; import { EditLocationDialog } from "@components/dialog/EditLocationDialog"; import { RescheduleDialog } from "@components/dialog/RescheduleDialog"; @@ -45,14 +43,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 }, @@ -215,7 +217,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); @@ -301,7 +303,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 */} @@ -341,11 +343,11 @@ function BookingListItem(booking: BookingItemProps) {
- {formatTime(aDate, user?.timeFormat, user?.timeZone)} + {formatTime(aDate, userTimeFormat, userTimeZone)} {" - "} {dayjs(aDate).locale(language).format("D MMMM YYYY")}
@@ -536,7 +552,7 @@ const RecurringBookingsTooltip = ({ booking, recurringDates }: RecurringBookings />
{booking.status === BookingStatus.ACCEPTED
- ? `${t("event_remaining", {
+ ? `${t("event_remaining_other", {
count: recurringCount,
})}`
: getEveryFreqFor({
diff --git a/apps/web/pages/bookings/[status].tsx b/apps/web/pages/bookings/[status].tsx
index 712a627a8e..db5dcb07a8 100644
--- a/apps/web/pages/bookings/[status].tsx
+++ b/apps/web/pages/bookings/[status].tsx
@@ -5,6 +5,7 @@ import React from "react";
import { z } from "zod";
import { WipeMyCalActionButton } from "@calcom/app-store/wipemycalother/components";
+import dayjs from "@calcom/dayjs";
import { getLayout } from "@calcom/features/MainLayout";
import { FiltersContainer } from "@calcom/features/bookings/components/FiltersContainer";
import type { filterQuerySchema } from "@calcom/features/bookings/lib/useFilterQuery";
@@ -20,6 +21,7 @@ import { Alert, Button, EmptyScreen } from "@calcom/ui";
import { Calendar } from "@calcom/ui/components/icon";
import { useInViewObserver } from "@lib/hooks/useInViewObserver";
+import useMeQuery from "@lib/hooks/useMeQuery";
import PageWrapper from "@components/PageWrapper";
import BookingListItem from "@components/booking/BookingListItem";
@@ -78,6 +80,7 @@ export default function Bookings() {
const { data: filterQuery } = useFilterQuery();
const { status } = params ? querySchema.parse(params) : { status: "upcoming" as const };
const { t } = useLocale();
+ const user = useMeQuery().data;
const query = trpc.viewer.bookings.get.useInfiniteQuery(
{
@@ -119,7 +122,10 @@ export default function Bookings() {
}
shownBookings[booking.recurringEventId] = [booking];
} else if (status === "upcoming") {
- return new Date(booking.startTime).toDateString() !== new Date().toDateString();
+ return (
+ dayjs(booking.startTime).tz(user?.timeZone).format("YYYY-MM-DD") !==
+ dayjs().tz(user?.timeZone).format("YYYY-MM-DD")
+ );
}
return true;
};
@@ -132,7 +138,11 @@ export default function Bookings() {
recurringInfoToday = page.recurringInfo.find(
(info) => info.recurringEventId === booking.recurringEventId
);
- return new Date(booking.startTime).toDateString() === new Date().toDateString();
+
+ return (
+ dayjs(booking.startTime).tz(user?.timeZone).format("YYYY-MM-DD") ===
+ dayjs().tz(user?.timeZone).format("YYYY-MM-DD")
+ );
})
)[0] || [];
@@ -166,6 +176,12 @@ export default function Bookings() {
{bookingsToday.map((booking: BookingOutput) => (