fix: add new end of month UI to mobile #22836

CarinaWolli · 2025-07-31T07:32:48Z

What does this PR do?

coderabbitai · 2025-07-31T07:32:55Z

Walkthrough

This change updates layout-based conditional logic across three files related to booking and calendar components. In the DatePicker component, the condition for the isCompact flag now excludes both "month_view" and "mobile" layouts from being considered compact, affecting component rendering. In both BookerPlatformWrapper and BookerWebWrapper, the logic for prefetching the next month is expanded to include the "mobile" layout in addition to MONTH_VIEW, altering when prefetching occurs based on the layout type. No changes were made to exported or public API signatures.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~7 minutes

Possibly related PRs

feat: Improving Booking Visibility at Month-End #22770: Refined the isCompact flag and its usage in the DatePicker component, which is directly related to the current update of the isCompact logic.

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0cc2367 and 02b5ba8.

📒 Files selected for processing (3)

packages/features/bookings/Booker/components/DatePicker.tsx (1 hunks)
packages/platform/atoms/booker/BookerPlatformWrapper.tsx (1 hunks)
packages/platform/atoms/booker/BookerWebWrapper.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

**/*.tsx

📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)

Always use t() for text localization in frontend code; direct text embedding should trigger a warning

Files:

packages/platform/atoms/booker/BookerWebWrapper.tsx
packages/platform/atoms/booker/BookerPlatformWrapper.tsx
packages/features/bookings/Booker/components/DatePicker.tsx

**/*.{ts,tsx}

📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)

Flag excessive Day.js use in performance-critical code; prefer native Date or Day.js .utc() in hot paths like loops

Files:

packages/platform/atoms/booker/BookerWebWrapper.tsx
packages/platform/atoms/booker/BookerPlatformWrapper.tsx
packages/features/bookings/Booker/components/DatePicker.tsx

🧠 Learnings (4)

📓 Common learnings

Learnt from: Anshumancanrock
PR: calcom/cal.com#22570
File: apps/web/modules/signup-view.tsx:253-253
Timestamp: 2025-07-21T21:33:23.371Z
Learning: In signup-view.tsx, when checking if redirectUrl contains certain strings, using explicit && checks (redirectUrl && redirectUrl.includes()) is preferred over optional chaining (redirectUrl?.includes()) to ensure the result is always a boolean rather than potentially undefined. This approach provides cleaner boolean contracts for downstream conditional logic.

packages/platform/atoms/booker/BookerWebWrapper.tsx (2)

Learnt from: Anshumancanrock
PR: #22570
File: apps/web/modules/signup-view.tsx:253-253
Timestamp: 2025-07-21T21:33:23.371Z
Learning: In signup-view.tsx, when checking if redirectUrl contains certain strings, using explicit && checks (redirectUrl && redirectUrl.includes()) is preferred over optional chaining (redirectUrl?.includes()) to ensure the result is always a boolean rather than potentially undefined. This approach provides cleaner boolean contracts for downstream conditional logic.

Learnt from: CR
PR: calcom/cal.com#0
File: .cursor/rules/review.mdc:0-0
Timestamp: 2025-07-28T11:50:23.946Z
Learning: Applies to **/*.{ts,tsx} : Flag excessive Day.js use in performance-critical code; prefer native Date or Day.js .utc() in hot paths like loops

packages/platform/atoms/booker/BookerPlatformWrapper.tsx (1)

Learnt from: Anshumancanrock
PR: #22570
File: apps/web/modules/signup-view.tsx:253-253
Timestamp: 2025-07-21T21:33:23.371Z
Learning: In signup-view.tsx, when checking if redirectUrl contains certain strings, using explicit && checks (redirectUrl && redirectUrl.includes()) is preferred over optional chaining (redirectUrl?.includes()) to ensure the result is always a boolean rather than potentially undefined. This approach provides cleaner boolean contracts for downstream conditional logic.

packages/features/bookings/Booker/components/DatePicker.tsx (3)

Learnt from: CR
PR: calcom/cal.com#0
File: .cursor/rules/review.mdc:0-0
Timestamp: 2025-07-28T11:50:23.946Z
Learning: Applies to **/*.{ts,tsx} : Flag excessive Day.js use in performance-critical code; prefer native Date or Day.js .utc() in hot paths like loops

Learnt from: Anshumancanrock
PR: #22570
File: apps/web/modules/signup-view.tsx:253-253
Timestamp: 2025-07-21T21:33:23.371Z
Learning: In signup-view.tsx, when checking if redirectUrl contains certain strings, using explicit && checks (redirectUrl && redirectUrl.includes()) is preferred over optional chaining (redirectUrl?.includes()) to ensure the result is always a boolean rather than potentially undefined. This approach provides cleaner boolean contracts for downstream conditional logic.

Learnt from: eunjae-lee
PR: #22106
File: packages/features/insights/components/FailedBookingsByField.tsx:65-71
Timestamp: 2025-07-15T12:59:34.389Z
Learning: In the FailedBookingsByField component (packages/features/insights/components/FailedBookingsByField.tsx), although routingFormId is typed as optional in useInsightsParameters, the system automatically enforces a routing form filter, so routingFormId is always present in practice. This means the data always contains only one entry, making the single-entry destructuring approach safe.

🧬 Code Graph Analysis (1)

packages/platform/atoms/booker/BookerWebWrapper.tsx (1)

packages/embeds/embed-core/src/types.ts (1)

BookerLayouts (6-6)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: Codacy Static Code Analysis

🔇 Additional comments (3)

packages/features/bookings/Booker/components/DatePicker.tsx (1)

105-105: Ignore type safety concern: “mobile” is a valid local layout.

The local BookerLayout type (in packages/features/bookings/Booker/types.ts) is defined as BookerLayouts | "mobile", so using "mobile" in the condition is correct. No change needed.

Likely an incorrect or invalid review comment.

packages/platform/atoms/booker/BookerWebWrapper.tsx (1)

131-133: Type safety concern: "mobile" layout not in BookerLayouts type.

Similar to the DatePicker component, this condition includes "mobile" as a string literal, but it's not part of the BookerLayouts type union. This creates a type inconsistency across the codebase.

The logic change itself is correct and consistent with the mobile layout handling. However, ensure the type system properly accommodates the "mobile" layout.

packages/platform/atoms/booker/BookerPlatformWrapper.tsx (1)

210-212: Type safety concern: "mobile" layout not in BookerLayouts type.

This change mirrors the pattern in BookerWebWrapper.tsx, adding "mobile" to the prefetch condition. However, "mobile" is not included in the BookerLayouts type definition, creating a type inconsistency.

The coordinated changes across all three files show good consistency in mobile layout handling. The prefetch logic correctly includes mobile layout alongside MONTH_VIEW. However, the type system should be updated to include "mobile" as a valid layout option.

✨ Finishing Touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch fix/end-of-month-UI-mobile

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai generate unit tests to generate unit tests for this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

graphite-app · 2025-07-31T07:35:18Z

Graphite Automations

"Add consumer team as reviewer" took an action on this PR • (07/31/25)

1 reviewer was added to this PR based on Keith Williams's automation.

"Add ready-for-e2e label" took an action on this PR • (07/31/25)

1 label was added to this PR based on Keith Williams's automation.

github-actions · 2025-07-31T09:30:57Z

E2E results are ready!

Workflow #70110.1 latest results

Co-authored-by: CarinaWolli <wollencarina@gmail.com>

* fix: resolve username constraint violation in removeMember - Update username to - format when removing users from organizations - Fix unique constraint violation on (username, organizationId) when organizationId is null - Add test case to verify username format change and successful removal - Fix skipped test by adding proper imports and removing describe.skip Co-Authored-By: anik@cal.com <adhabal2002@gmail.com> * test: update removeMember test to verify constraint violation scenario - Create two users with same username (one with null orgId, one with orgId) - Verify removing org user updates username without unique constraint error - Test ensures username gets updated to - format Co-Authored-By: anik@cal.com <adhabal2002@gmail.com> * test: add comprehensive unit tests for handleInstantMeeting - Revert previous removeMember changes - Add full test coverage for instant meeting functionality - Test team validation, booking creation, token generation - Test webhook triggers and browser notifications - Mock external dependencies for isolated unit tests - Translation issue to be addressed in future iteration Co-Authored-By: anik@cal.com <adhabal2002@gmail.com> * update * Update handleInstantMeeting.test.ts * fix: redir parameter for connect atoms (#22815) * encode redirect url to make sure it has all parameters * add changesets * feat: Support an array response for a field when used as `Value of Field` (#22740) * Passing tests and fixed * self review addressed adn more tests * fix: flaky e2e (#22819) * fix: merge working hours when adjacent (#21912) * fix: Adjacency issue when working hours connect over multiple days * Add tests to validate the new merging of day end logic * Update to correct annotation. Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com> * Implement subsequent date ranges for date overrides also * The map needs to be updated on successful resolve. * test: add failing test for overlapping ranges with same end time Demonstrates bug where overlapping working hour ranges (6:00-10:00 and 8:00-10:00) lose the earlier portion (6:00-8:00), showing only 8:00 and 9:00 slots instead of all 4 slots (6:00, 7:00, 8:00, 9:00). Related to Carina's comment on PR #21912. Co-Authored-By: alex@cal.com <me@alexvanandel.com> * fix: properly merge overlapping ranges with same end time Fixes bug where overlapping working hour ranges with the same end time (e.g., 6:00-10:00 and 8:00-10:00) would lose the earlier portion of the first range. The merging logic now correctly preserves the earliest start time when ranges overlap and share the same end time. This ensures all expected time slots are available (6:00, 7:00, 8:00, 9:00) instead of losing the earlier slots (6:00, 7:00). Resolves the issue identified in Carina's comment on PR #21912. Co-Authored-By: alex@cal.com <me@alexvanandel.com> * perf: optimize overlapping range detection from O(n²) to O(n) Replaces Object.keys().find() with Map-based lookup for ranges with same end time. This optimization handles 2000+ date ranges efficiently, reducing complexity from 4M operations to linear time while maintaining the same merging behavior. Performance improvement for high-volume event types with many availability ranges. Co-Authored-By: alex@cal.com <me@alexvanandel.com> --------- Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com> Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> * feat: Improving Booking Visibility at Month-End (#22770) * remove first weeks and add last * fix added last week * prefetch availability of next month * don't switch month * On hover show month * only show new UI in monthly view * show month tooldtip only when needed * show month on first day of month * remove isFirstDayOfNextMonth * fix prefetching next month * fix datePicker tests * preventMonthSwitching in monthly view * add tests * code clean up * code clean up * code clena up for ooo days * push first day of month * remove bg color for the month badge * fix text colour * remove not needed * use object param * revert: use object param * use object param * fix DatePicker tests --------- Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: Sean Brydon <sean@cal.com> Co-authored-by: Eunjae Lee <hey@eunjae.dev> * chore: Refactor logs (#22824) * Refactor logs * Add specific info to log * fix: Errors in org onboarding in some edge cases (#22711) * Automatically enable migration of a team that conflicts with Orgs slug * Allow changing the orgs slug and name if user goes back and changes it * avoid crashing on some scenarios * Revert "Allow changing the orgs slug and name if user goes back and changes it" This reverts commit f8872b0. * fix: handle unpublished teams gracefully in org migration - Change 'No oldSlug for team' from error to warning for unpublished teams - Keep 'No slug for team' as error since org onboarding ensures teams have names - Add test for migrating unpublished teams without oldSlug - Add clarifying comments about when each condition can occur * feat: enable PBAC checking on organization settings page (#22467) * refactor: convert checkBookingLimits to class service with dependency injection (#22768) * refactor: convert checkBookingLimits to class service with dependency injection - Create CheckBookingLimitsService class following AvailableSlotsService pattern - Add countBookingsByEventTypeAndDateRange method to BookingRepository - Move direct prisma calls from service to repository layer - Implement dependency injection with proper DI tokens and modules - Update all usage points to use the new service through DI - Maintain backward compatibility with error-throwing wrapper functions - Update tests to use the new service pattern - Resolve TODO comment in AvailableSlotsService for DI integration Co-Authored-By: morgan@cal.com <morgan@cal.com> * chore: DI CheckBookingLimitsService in v2 slots service * chore: bump libraries * chore: create getCheckBookingLimitsService * refactor: convert checkBookingAndDurationLimits to service class with DI - Create CheckBookingAndDurationLimitsService class following DI pattern - Add DI tokens and module for the new service - Update booking-limits container to provide the new service - Refactor handleNewBooking.ts to use service through DI - Maintain backward compatibility with deprecated function export - Preserve all existing functionality while improving code organization Co-Authored-By: morgan@cal.com <morgan@cal.com> * chore: CheckBookingAndDurationLimitsService * chore: bump platform libs --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: morgan@cal.com <morgan@cal.com> Co-authored-by: Morgan <33722304+ThyMinimalDev@users.noreply.github.com> * fix: Return empty available days if error querying calendar (#22828) * Return a busy block placeholder if calendar throws an error * Refactor `getCalendarsEvents` to return an object with a success prop * Throw error in `getBusyTimes` if failed to fetch calendar availability * Return empty available days if error getting busy times * yeet. * Type fix * Fix type error in getLuckyUsers * Type fixes * Type fix * Type fix * Fix test * Fix test mocks * Refactor calendars.service to use new calendarBusyTimesQuery --------- Co-authored-by: Alex van Andel <me@alexvanandel.com> * chore: release v5.5.9 * include mobile layout (#22836) Co-authored-by: CarinaWolli <wollencarina@gmail.com> * test: fix handleInstantMeeting test with setupAndTeardown and proper mocking - Add setupAndTeardown() for proper test environment setup - Use mockNoTranslations() to fix translation function mocking - Simplify NextApiRequest mock to resolve TypeScript errors - Both test cases now pass successfully Co-Authored-By: anik@cal.com <adhabal2002@gmail.com> * fix typo --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: Rajiv Sahal <sahalrajiv-extc@atharvacoe.ac.in> Co-authored-by: Hariom Balhara <hariombalhara@gmail.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com> Co-authored-by: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com> Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: Sean Brydon <sean@cal.com> Co-authored-by: Eunjae Lee <hey@eunjae.dev> Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com> Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Co-authored-by: morgan@cal.com <morgan@cal.com> Co-authored-by: Morgan <33722304+ThyMinimalDev@users.noreply.github.com>

include mobile layout

02b5ba8

CarinaWolli requested review from a team as code owners July 31, 2025 07:32

graphite-app bot requested a review from a team July 31, 2025 07:32

keithwillcode added consumer core area: core, team members only labels Jul 31, 2025

dosubot bot added the 🧹 Improvements Improvements to existing features. Mostly UX/UI label Jul 31, 2025

vercel bot deployed to Preview – dev July 31, 2025 07:48 View deployment

CarinaWolli enabled auto-merge (squash) July 31, 2025 07:59

eunjae-lee approved these changes Jul 31, 2025

View reviewed changes

Ryukemeister approved these changes Jul 31, 2025

View reviewed changes

graphite-app bot added the ready-for-e2e label Jul 31, 2025

CarinaWolli merged commit 3601a9a into main Jul 31, 2025
101 of 107 checks passed

CarinaWolli deleted the fix/end-of-month-UI-mobile branch July 31, 2025 09:27

devin-ai-integration bot pushed a commit that referenced this pull request Jul 31, 2025

include mobile layout (#22836)

72094fc

Co-authored-by: CarinaWolli <wollencarina@gmail.com>

emrysal pushed a commit that referenced this pull request Jul 31, 2025

include mobile layout (#22836)

291ead1

Co-authored-by: CarinaWolli <wollencarina@gmail.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: add new end of month UI to mobile #22836

fix: add new end of month UI to mobile #22836

Uh oh!

CarinaWolli commented Jul 31, 2025

Uh oh!

coderabbitai bot commented Jul 31, 2025 •

edited

Loading

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

graphite-app bot commented Jul 31, 2025 •

edited

Loading

Uh oh!

Uh oh!

github-actions bot commented Jul 31, 2025

Uh oh!

Uh oh!

fix: add new end of month UI to mobile #22836

fix: add new end of month UI to mobile #22836

Uh oh!

Conversation

CarinaWolli commented Jul 31, 2025

What does this PR do?

Uh oh!

coderabbitai bot commented Jul 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Estimated code review effort

Possibly related PRs

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

graphite-app bot commented Jul 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Graphite Automations

Uh oh!

Uh oh!

github-actions bot commented Jul 31, 2025

E2E results are ready!

Uh oh!

Uh oh!

coderabbitai bot commented Jul 31, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

graphite-app bot commented Jul 31, 2025 •

edited

Loading