diff --git a/apps/web/pages/booking/[uid].tsx b/apps/web/pages/booking/[uid].tsx index 469c1254fe..84ca08284a 100644 --- a/apps/web/pages/booking/[uid].tsx +++ b/apps/web/pages/booking/[uid].tsx @@ -199,6 +199,10 @@ export default function Success(props: SuccessProps) { if ((isCancellationMode || changes) && typeof window !== "undefined") { window.scrollTo(0, document.body.scrollHeight); } + const tz = + (isSuccessBookingPage + ? props.bookingInfo.attendees.find((attendee) => attendee.email === email)?.timeZone + : props.bookingInfo.eventType?.timeZone || props.bookingInfo.user?.timeZone) || timeZone(); const location = props.bookingInfo.location as ReturnType; @@ -477,6 +481,7 @@ export default function Success(props: SuccessProps) { date={dayjs(formerTime)} is24h={is24h} isCancelled={isCancelled} + tz={tz} />

)} @@ -488,6 +493,7 @@ export default function Success(props: SuccessProps) { date={date} is24h={is24h} isCancelled={isCancelled} + tz={tz} /> {(bookingInfo?.user || bookingInfo?.attendees) && ( @@ -785,6 +791,7 @@ type RecurringBookingsProps = { is24h: boolean; allRemainingBookings: boolean; isCancelled: boolean; + tz: string; }; export function RecurringBookings({ @@ -795,6 +802,7 @@ export function RecurringBookings({ allRemainingBookings, is24h, isCancelled, + tz, }: RecurringBookingsProps) { const [moreEventsVisible, setMoreEventsVisible] = useState(false); const { @@ -822,12 +830,12 @@ export function RecurringBookings({ {eventType.recurringEvent?.count && recurringBookingsSorted.slice(0, 4).map((dateStr: string, idx: number) => (
- {formatToLocalizedDate(dayjs.tz(dateStr, timeZone()), language, "full")} + {formatToLocalizedDate(dayjs.tz(dateStr, tz), language, "full", tz)}
- {formatToLocalizedTime(dayjs(dateStr), language, undefined, !is24h)} -{" "} - {formatToLocalizedTime(dayjs(dateStr).add(duration, "m"), language, undefined, !is24h)}{" "} + {formatToLocalizedTime(dayjs(dateStr), language, undefined, !is24h, tz)} -{" "} + {formatToLocalizedTime(dayjs(dateStr).add(duration, "m"), language, undefined, !is24h, tz)}{" "} - ({formatToLocalizedTimezone(dayjs(dateStr), language, timeZone())}) + ({formatToLocalizedTimezone(dayjs(dateStr), language, tz)})
))} @@ -842,12 +850,12 @@ export function RecurringBookings({ {eventType.recurringEvent?.count && recurringBookingsSorted.slice(4).map((dateStr: string, idx: number) => (
- {formatToLocalizedDate(dayjs.tz(date, timeZone()), language, "full")} + {formatToLocalizedDate(dayjs.tz(date, tz), language, "full", tz)}
- {formatToLocalizedTime(date, language, undefined, !is24h)} -{" "} - {formatToLocalizedTime(dayjs(date).add(duration, "m"), language, undefined, !is24h)}{" "} + {formatToLocalizedTime(date, language, undefined, !is24h, tz)} -{" "} + {formatToLocalizedTime(dayjs(date).add(duration, "m"), language, undefined, !is24h, tz)}{" "} - ({formatToLocalizedTimezone(dayjs(dateStr), language, timeZone())}) + ({formatToLocalizedTimezone(dayjs(dateStr), language, tz)})
))} @@ -860,11 +868,11 @@ export function RecurringBookings({ return (
- {formatToLocalizedDate(dayjs.tz(date, timeZone()), language, "full")} + {formatToLocalizedDate(date, language, "full", tz)}
- {formatToLocalizedTime(date, language, undefined, !is24h)} -{" "} - {formatToLocalizedTime(dayjs(date).add(duration, "m"), language, undefined, !is24h)}{" "} - ({formatToLocalizedTimezone(date, language, timeZone())}) + {formatToLocalizedTime(date, language, undefined, !is24h, tz)} -{" "} + {formatToLocalizedTime(dayjs(date).add(duration, "m"), language, undefined, !is24h, tz)}{" "} + ({formatToLocalizedTimezone(date, language, tz)})
); } @@ -901,6 +909,7 @@ const getEventTypesFromDB = async (id: number) => { currency: true, bookingFields: true, disableGuests: true, + timeZone: true, owner: { select: userSelect, }, @@ -1019,12 +1028,14 @@ export async function getServerSideProps(context: GetServerSidePropsContext) { name: true, email: true, username: true, + timeZone: true, }, }, attendees: { select: { name: true, email: true, + timeZone: true, }, }, eventTypeId: true, @@ -1032,6 +1043,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) { select: { eventName: true, slug: true, + timeZone: true, }, }, }, diff --git a/packages/lib/date-fns/index.ts b/packages/lib/date-fns/index.ts index 5f474a6f9e..a6e12f1100 100644 --- a/packages/lib/date-fns/index.ts +++ b/packages/lib/date-fns/index.ts @@ -52,8 +52,9 @@ export const formatLocalizedDateTime = ( export const formatToLocalizedDate = ( date: Date | Dayjs, locale: string | undefined = undefined, - dateStyle: Intl.DateTimeFormatOptions["dateStyle"] = "long" -) => formatLocalizedDateTime(date, { dateStyle }, locale); + dateStyle: Intl.DateTimeFormatOptions["dateStyle"] = "long", + timeZone?: string +) => formatLocalizedDateTime(date, { dateStyle, timeZone }, locale); /** * Returns a localized and translated time of day based on the @@ -64,8 +65,9 @@ export const formatToLocalizedTime = ( date: Date | Dayjs, locale: string | undefined = undefined, timeStyle: Intl.DateTimeFormatOptions["timeStyle"] = "short", - hour12: Intl.DateTimeFormatOptions["hour12"] = undefined -) => formatLocalizedDateTime(date, { timeStyle, hour12 }, locale); + hour12: Intl.DateTimeFormatOptions["hour12"] = undefined, + timeZone?: string +) => formatLocalizedDateTime(date, { timeStyle, hour12, timeZone }, locale); /** * Returns a translated timezone based on the given Date object and