Skip to content

fix: display phone numbers and localized timezone in BookingDetailsSheet#27909

Merged
sean-brydon merged 6 commits intomainfrom
devin/1770923111-fix-booking-details-sheet
Feb 13, 2026
Merged

fix: display phone numbers and localized timezone in BookingDetailsSheet#27909
sean-brydon merged 6 commits intomainfrom
devin/1770923111-fix-booking-details-sheet

Conversation

@eunjae-lee
Copy link
Copy Markdown
Contributor

@eunjae-lee eunjae-lee commented Feb 12, 2026

What does this PR do?

Aligns BookingDetailsSheet with the existing bookings-single-view.tsx in two ways:

  1. WhoSection – attendee phone numbers: Adds conditional rendering of attendee.phoneNumber between the attendee name and email, matching the pattern in bookings-single-view.tsx.

  2. When section – localized timezone: Replaces the raw IANA timezone identifier (e.g. America/New_York) with formatToLocalizedTimezone() from @calcom/lib/dayjs, which uses Intl.DateTimeFormat to produce a human-readable name (e.g. Eastern Standard Time), matching the existing behaviour in bookings-single-view.tsx. Includes a ?? timeZone fallback for the rare case where Intl.DateTimeFormat.formatToParts doesn't return a timeZoneName part.

Also adds unit tests for formatToLocalizedTimezone covering various timezones, locales, and the short/long name options.

Type of change

  • Bug fix (non-breaking change which fixes an issue)

Mandatory Tasks (DO NOT REMOVE)

  • I have self-reviewed the code (A decent size PR without self-review might be rejected).
  • I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. N/A
  • I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

  1. Open a booking that has an attendee with a phone number.
  2. Verify the phone number now appears in the Who section of the BookingDetailsSheet, between the attendee name and email.
  3. In the When section, verify the timezone is displayed as a localized name (e.g. "Eastern Standard Time") instead of the IANA identifier (e.g. "America/New_York").

Things for reviewers to verify

  • DisplayTimestamp now calls useLocale() (it was previously a pure render function with no hooks). Confirm this is acceptable given how the component is used.
  • Phone number display styling/placement matches expectations.
  • attendee.phoneNumber is available from the existing selectAll() query in get.handler.ts — no backend change was needed since selectAll() already includes all Attendee columns.

Link to Devin run: https://app.devin.ai/sessions/4c05d1442aea431c909b8b1d6cfcb087
Requested by: @eunjae-lee

@devin-ai-integration
Copy link
Copy Markdown
Contributor

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR that start with 'DevinAI' or '@devin'.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

@graphite-app graphite-app bot requested a review from a team February 12, 2026 19:08
@graphite-app graphite-app bot added the core area: core, team members only label Feb 12, 2026
Copy link
Copy Markdown
Contributor

@cubic-dev-ai cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1 issue found across 1 file

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="apps/web/modules/bookings/components/BookingDetailsSheet.tsx">

<violation number="1" location="apps/web/modules/bookings/components/BookingDetailsSheet.tsx:454">
P2: `formatToLocalizedTimezone` can return `undefined`, so the display can render `(undefined)` for some locales. Add a fallback to the raw `timeZone` (or offset) when the localized name is missing.</violation>
</file>

Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Feb 12, 2026

Devin AI is addressing Cubic AI's review feedback

New feedback has been sent to the existing Devin session.

View Devin Session


✅ No changes pushed

@paragon-review
Copy link
Copy Markdown

Paragon: tests updated

1 new test generated for this PR.

New Tests

  • formatToLocalizedTimezone unit tests — Tests formatToLocalizedTimezone which is the core utility used by the PR's DisplayTimestamp changes. Covers: Date vs Dayjs input, locale handling, timezone name formats (long/short), undefined locale fallback, and edge cases.

Accept Changes Open in Paragon

Details

New Tests

  • formatToLocalizedTimezone unit tests (unit)

… query

Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
@devin-ai-integration devin-ai-integration bot requested a review from a team as a code owner February 13, 2026 09:58
eunjae-lee and others added 2 commits February 13, 2026 10:59
Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
Copy link
Copy Markdown
Contributor Author

Tests Added by Paragon

The following test files have been added to this PR:

  • packages/lib/dayjs/formatToLocalizedTimezone.test.ts

These tests were generated from an approved test proposal.


Generated with Paragon

@pull-request-size pull-request-size bot added size/L and removed size/S labels Feb 13, 2026
Copy link
Copy Markdown
Contributor

@cubic-dev-ai cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1 issue found across 1 file (changes from recent commits).

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="packages/lib/dayjs/formatToLocalizedTimezone.test.ts">

<violation number="1" location="packages/lib/dayjs/formatToLocalizedTimezone.test.ts:73">
P3: This test hardcodes the UTC label as "Coordinated Universal Time", but Intl.DateTimeFormat time zone names are implementation-dependent. On some runtimes the canonicalized name (e.g., "UTC") is returned, so this assertion can be flaky. Consider asserting a non-empty value or allowing multiple valid labels instead.</violation>
</file>

Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Feb 13, 2026

Devin AI is addressing Cubic AI's review feedback

New feedback has been sent to the existing Devin session.

View Devin Session


✅ No changes pushed

@sean-brydon sean-brydon merged commit 1b6b91b into main Feb 13, 2026
88 of 90 checks passed
@sean-brydon sean-brydon deleted the devin/1770923111-fix-booking-details-sheet branch February 13, 2026 10:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

consumer core area: core, team members only ready-for-e2e size/L

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants