From 913466d06d6aaad0c35b07eb1f0948b0ea3b5ac3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Efra=C3=ADn=20Roch=C3=ADn?=
Date: Thu, 9 Mar 2023 03:18:22 -0700
Subject: [PATCH] fix/[cal-1091]-Changing the timezone in profile settings
doesn't change the date of the booking - only the time (#7598)
* set timezone to date and time displayed on booking details page
* type fixes
---------
Co-authored-by: Peer Richelsen
---
apps/web/pages/booking/[uid].tsx | 36 +++++++++++++++++++++-----------
packages/lib/date-fns/index.ts | 10 +++++----
2 files changed, 30 insertions(+), 16 deletions(-)
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