From 1b6b91b0adedb2c85c71d4246143fa48689cc2b0 Mon Sep 17 00:00:00 2001 From: Eunjae Lee Date: Fri, 13 Feb 2026 11:27:01 +0100 Subject: [PATCH] fix: display phone numbers and localized timezone in BookingDetailsSheet (#27909) * fix: display phone numbers and localized timezone in BookingDetailsSheet Co-Authored-By: eunjae@cal.com * refactor: replace selectAll with explicit column selects for Attendee query Co-Authored-By: eunjae@cal.com * Update apps/web/modules/bookings/components/BookingDetailsSheet.tsx Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com> * Add tests: packages/lib/dayjs/formatToLocalizedTimezone.test.ts Generated by Paragon from proposal for PR #27909 * Revert "refactor: replace selectAll with explicit column selects for Attendee query" This reverts commit f810ba801c900c8f065e5e1ce1d02a1700322257. --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com> --- .../components/BookingDetailsSheet.tsx | 12 ++- .../dayjs/formatToLocalizedTimezone.test.ts | 91 +++++++++++++++++++ 2 files changed, 102 insertions(+), 1 deletion(-) create mode 100644 packages/lib/dayjs/formatToLocalizedTimezone.test.ts diff --git a/apps/web/modules/bookings/components/BookingDetailsSheet.tsx b/apps/web/modules/bookings/components/BookingDetailsSheet.tsx index ee9bdfc607..0532bdc9bc 100644 --- a/apps/web/modules/bookings/components/BookingDetailsSheet.tsx +++ b/apps/web/modules/bookings/components/BookingDetailsSheet.tsx @@ -4,6 +4,7 @@ import dayjs from "@calcom/dayjs"; import { useBookingLocation } from "@calcom/features/bookings/hooks"; import { shouldShowFieldInCustomResponses } from "@calcom/lib/bookings/SystemField"; import { formatPrice } from "@calcom/lib/currencyConversions"; +import { formatToLocalizedTimezone } from "@calcom/lib/dayjs"; import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage"; import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl"; import { useLocale } from "@calcom/lib/hooks/useLocale"; @@ -445,14 +446,20 @@ function DisplayTimestamp({ endTime: Date | dayjs.Dayjs; timeZone?: string; }) { + const { + i18n: { language }, + } = useLocale(); const start = startTime instanceof Date ? dayjs(startTime).tz(timeZone) : startTime; const end = endTime instanceof Date ? dayjs(endTime).tz(timeZone) : endTime; + const localizedTimezone = timeZone + ? formatToLocalizedTimezone(start, language, timeZone) ?? timeZone + : start.format("Z"); return ( <> {start.format("dddd, MMMM D, YYYY")} - {start.format("h:mma")} - {end.format("h:mma")} ({timeZone || start.format("Z")}) + {start.format("h:mma")} - {end.format("h:mma")} ({localizedTimezone}) ); @@ -507,6 +514,9 @@ function WhoSection({ booking }: { booking: BookingOutput }) { />

{name}

+ {attendee.phoneNumber && ( +

{attendee.phoneNumber}

+ )}

{attendee.email}

diff --git a/packages/lib/dayjs/formatToLocalizedTimezone.test.ts b/packages/lib/dayjs/formatToLocalizedTimezone.test.ts new file mode 100644 index 0000000000..60371bc61c --- /dev/null +++ b/packages/lib/dayjs/formatToLocalizedTimezone.test.ts @@ -0,0 +1,91 @@ +import { describe, expect, it, beforeAll, vi } from "vitest"; + +import dayjs from "@calcom/dayjs"; + +import { formatToLocalizedTimezone } from "./index"; + +beforeAll(() => { + vi.setSystemTime(dayjs.utc("2024-06-15T12:00:00Z").toDate()); +}); + +describe("formatToLocalizedTimezone", () => { + it("returns a localized timezone string for a Date object with explicit timezone", () => { + const date = new Date("2024-06-15T12:00:00Z"); + const result = formatToLocalizedTimezone(date, "en", "America/New_York"); + expect(result).toBeDefined(); + expect(typeof result).toBe("string"); + // Should contain recognizable timezone name like "Eastern Daylight Time" + expect(result!.length).toBeGreaterThan(0); + }); + + it("returns a localized timezone string for a Dayjs object with explicit timezone", () => { + const date = dayjs.utc("2024-06-15T12:00:00Z"); + const result = formatToLocalizedTimezone(date, "en", "America/New_York"); + expect(result).toBeDefined(); + expect(typeof result).toBe("string"); + expect(result!.length).toBeGreaterThan(0); + }); + + it("returns consistent results for Date and Dayjs objects with same timezone", () => { + const jsDate = new Date("2024-06-15T12:00:00Z"); + const djsDate = dayjs.utc("2024-06-15T12:00:00Z"); + const resultDate = formatToLocalizedTimezone(jsDate, "en", "America/New_York"); + const resultDayjs = formatToLocalizedTimezone(djsDate, "en", "America/New_York"); + expect(resultDate).toBe(resultDayjs); + }); + + it("returns different results for different timezones", () => { + const date = new Date("2024-06-15T12:00:00Z"); + const nyResult = formatToLocalizedTimezone(date, "en", "America/New_York"); + const tokyoResult = formatToLocalizedTimezone(date, "en", "Asia/Tokyo"); + expect(nyResult).not.toBe(tokyoResult); + }); + + it("returns a short timezone name when timeZoneName is 'short'", () => { + const date = new Date("2024-06-15T12:00:00Z"); + const longResult = formatToLocalizedTimezone(date, "en", "America/New_York", "long"); + const shortResult = formatToLocalizedTimezone(date, "en", "America/New_York", "short"); + expect(shortResult).toBeDefined(); + expect(longResult).toBeDefined(); + // Short name should be shorter than or equal to long name + expect(shortResult!.length).toBeLessThanOrEqual(longResult!.length); + }); + + it("defaults to long timezone name when timeZoneName is not provided", () => { + const date = new Date("2024-06-15T12:00:00Z"); + const defaultResult = formatToLocalizedTimezone(date, "en", "America/New_York"); + const longResult = formatToLocalizedTimezone(date, "en", "America/New_York", "long"); + expect(defaultResult).toBe(longResult); + }); + + it("works with undefined locale (falls back to environment default)", () => { + const date = new Date("2024-06-15T12:00:00Z"); + const result = formatToLocalizedTimezone(date, undefined, "America/New_York"); + expect(result).toBeDefined(); + expect(typeof result).toBe("string"); + expect(result!.length).toBeGreaterThan(0); + }); + + it("handles UTC timezone", () => { + const date = new Date("2024-06-15T12:00:00Z"); + const result = formatToLocalizedTimezone(date, "en", "UTC"); + expect(result).toBeDefined(); + expect(result).toContain("Coordinated Universal Time"); + }); + + it("handles Europe/London timezone", () => { + const date = new Date("2024-06-15T12:00:00Z"); + const result = formatToLocalizedTimezone(date, "en", "Europe/London"); + expect(result).toBeDefined(); + expect(typeof result).toBe("string"); + expect(result!.length).toBeGreaterThan(0); + }); + + it("handles Pacific/Auckland timezone", () => { + const date = new Date("2024-06-15T12:00:00Z"); + const result = formatToLocalizedTimezone(date, "en", "Pacific/Auckland"); + expect(result).toBeDefined(); + expect(typeof result).toBe("string"); + expect(result!.length).toBeGreaterThan(0); + }); +});