public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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 <peeroke@gmail.com>
pull/7623/head
Efraín Rochín 2023-03-09 03:18:22 -07:00 committed by GitHub
parent 18c1a6a3a2
commit 913466d06d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
apps/web/pages/booking/[uid].tsx
View File

@ -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<typeof getEventLocationValue>;
@ -477,6 +481,7 @@ export default function Success(props: SuccessProps) {
date={dayjs(formerTime)}
is24h={is24h}
isCancelled={isCancelled}
tz={tz}
/>
</p>
)}
@ -488,6 +493,7 @@ export default function Success(props: SuccessProps) {
date={date}
is24h={is24h}
isCancelled={isCancelled}
tz={tz}
/>
</div>
{(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) => (
<div key={idx} className={classNames("mb-2", isCancelled ? "line-through" : "")}>
{formatToLocalizedDate(dayjs.tz(dateStr, timeZone()), language, "full")}
{formatToLocalizedDate(dayjs.tz(dateStr, tz), language, "full", tz)}
<br />
{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)}{" "}
<span className="text-bookinglight">
({formatToLocalizedTimezone(dayjs(dateStr), language, timeZone())})
({formatToLocalizedTimezone(dayjs(dateStr), language, tz)})
</span>
</div>
))}
@ -842,12 +850,12 @@ export function RecurringBookings({
{eventType.recurringEvent?.count &&
recurringBookingsSorted.slice(4).map((dateStr: string, idx: number) => (
<div key={idx} className={classNames("mb-2", isCancelled ? "line-through" : "")}>
{formatToLocalizedDate(dayjs.tz(date, timeZone()), language, "full")}
{formatToLocalizedDate(dayjs.tz(date, tz), language, "full", tz)}
<br />
{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)}{" "}
<span className="text-bookinglight">
({formatToLocalizedTimezone(dayjs(dateStr), language, timeZone())})
({formatToLocalizedTimezone(dayjs(dateStr), language, tz)})
</span>
</div>
))}
@ -860,11 +868,11 @@ export function RecurringBookings({
return (
<div className={classNames(isCancelled ? "line-through" : "")}>
{formatToLocalizedDate(dayjs.tz(date, timeZone()), language, "full")}
{formatToLocalizedDate(date, language, "full", tz)}
<br />
{formatToLocalizedTime(date, language, undefined, !is24h)} -{" "}
{formatToLocalizedTime(dayjs(date).add(duration, "m"), language, undefined, !is24h)}{" "}
<span className="text-bookinglight">({formatToLocalizedTimezone(date, language, timeZone())})</span>
{formatToLocalizedTime(date, language, undefined, !is24h, tz)} -{" "}
{formatToLocalizedTime(dayjs(date).add(duration, "m"), language, undefined, !is24h, tz)}{" "}
<span className="text-bookinglight">({formatToLocalizedTimezone(date, language, tz)})</span>
</div>
);
}
@ -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,
},
},
},

10
packages/lib/date-fns/index.ts
View File

@ -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