Skip to content

fix: Remove cancel button for past bookings #22667

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from

Conversation

husniabad
Copy link

What does this PR do?

This PR prevents users from canceling past bookings by hiding cancel buttons in the UI and adding server-side checks to block API bypass attempts. It keeps the existing cancellation flow and user experience unchanged for valid future bookings.

Visual Demo (For contributors especially)

A visual demonstration is strongly recommended, for both the original and new change (video / image - any one).

Video Demo (if applicable):

  • Show screen recordings of the issue or feature.
  • Demonstrate how to reproduce the issue, the behavior before and after the change.

Image Demo (if applicable):

  • Add side-by-side screenshots of the original and updated change.
  • Highlight any significant change(s).
image

image

image

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. If N/A, write N/A here and check the checkbox.
  • I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

  • Are there environment variables that should be set?
  • What are the minimal test data to have?
  • What is expected (happy path) to have (input and output)?
  • Any other important info that could help to test that PR

@husniabad husniabad requested review from a team as code owners July 22, 2025 00:09
Copy link

vercel bot commented Jul 22, 2025

@husniabad is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

Copy link
Contributor

coderabbitai bot commented Jul 22, 2025

Walkthrough

Refactors booking action wiring in BookingListItem, consolidating edit action initialization and dialog open handlers. Hides/disables the cancel option for bookings whose end time is past across multiple UI views and adds a tooltip explaining the disabled state. Backend cancellation handler now rejects cancel requests for bookings that have already ended (HTTP 400). Adds a Playwright E2E test asserting the cancel button and related prompt are hidden for past bookings.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~15 minutes

Assessment against linked issues

Objective Addressed Explanation
Disable or hide the "Cancel Event" button for any call bookings that are in the past (#22370, CAL-6072)
Ensure the UI reflects this change consistently across all relevant views (#22370, CAL-6072)
Provide a tooltip or status indicator explaining that past events cannot be cancelled (#22370, CAL-6072)
Prevent backend cancellation processing for past bookings (#22370, CAL-6072)

Assessment against linked issues: Out-of-scope changes

Code Change Explanation
Refactor of edit action initialization and onClick dialog handlers (apps/web/components/booking/BookingListItem.tsx) Structural refactor of action wiring/dialog routing not required by the linked issues; it changes component internals unrelated to past-booking cancellation objective.
Simplified cancel action disable logic (apps/web/components/booking/bookingActions.ts) Disable condition was broadened (now disables whenever booking is in the past) — functionally related but represents a behavioral change beyond strictly hiding cancel UI for past call bookings; inclusion noted as a separate change.

Possibly related PRs

✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment

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.
    • 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.
  • 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 the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

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

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

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

Status, Documentation and Community

  • Visit our Status Page to check the current availability of CodeRabbit.
  • 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 graphite-app bot added the community Created by Linear-GitHub Sync label Jul 22, 2025
@graphite-app graphite-app bot requested a review from a team July 22, 2025 00:09
@github-actions github-actions bot added consumer linear Sync Github Issue from community members to Linear.app Medium priority Created by Linear-GitHub Sync ✨ feature New feature or request 🧹 Improvements Improvements to existing features. Mostly UX/UI labels Jul 22, 2025
Copy link

graphite-app bot commented Jul 22, 2025

Graphite Automations

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

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

"Add community label" took an action on this PR • (07/22/25)

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

@dosubot dosubot bot added bookings area: bookings, availability, timezones, double booking 🐛 bug Something isn't working labels Jul 22, 2025
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

🧹 Nitpick comments (1)
packages/features/bookings/lib/handleCancelBooking.ts (1)

123-129: Consider using native Date comparison for better performance.

The server-side validation logic is correct and essential for preventing past booking cancellations. However, according to the coding guidelines, Day.js methods like .isAfter() can be slow in performance-critical code. Consider using native Date comparison for better performance:

-  if (bookingToDelete.endTime && dayjs().isAfter(bookingToDelete.endTime)) {
+  if (bookingToDelete.endTime && new Date() > new Date(bookingToDelete.endTime)) {

This maintains the same functionality while potentially improving performance in this critical validation path.

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 3784421 and 8545ad1.

📒 Files selected for processing (5)
  • apps/web/components/booking/BookingListItem.tsx (1 hunks)
  • apps/web/modules/bookings/views/bookings-single-view.tsx (2 hunks)
  • apps/web/playwright/booking-pages.e2e.ts (1 hunks)
  • packages/features/bookings/lib/handleCancelBooking.ts (1 hunks)
  • packages/platform/examples/base/src/pages/[bookingUid].tsx (2 hunks)
📓 Path-based instructions (1)
**/*.{js,jsx,ts,tsx}

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

Flag excessive Day.js use in performance-critical code. Functions like .add, .diff, .isBefore, and .isAfter are slow, especially in timezone mode. Prefer .utc() for better performance. Where possible, replace with native Date and direct .valueOf() comparisons for faster execution. Recommend using native methods or Day.js .utc() consistently in hot paths like loops.

Files:

  • packages/platform/examples/base/src/pages/[bookingUid].tsx
  • apps/web/components/booking/BookingListItem.tsx
  • packages/features/bookings/lib/handleCancelBooking.ts
  • apps/web/playwright/booking-pages.e2e.ts
  • apps/web/modules/bookings/views/bookings-single-view.tsx
🧠 Learnings (3)
packages/platform/examples/base/src/pages/[bookingUid].tsx (4)

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.

Learnt from: Anshumancanrock
PR: #22570
File: apps/web/modules/signup-view.tsx:253-253
Timestamp: 2025-07-21T21:33:23.343Z
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: alishaz-polymath
PR: #22304
File: packages/features/eventtypes/components/MultiplePrivateLinksController.tsx:92-94
Timestamp: 2025-07-16T06:42:27.024Z
Learning: In the MultiplePrivateLinksController component (packages/features/eventtypes/components/MultiplePrivateLinksController.tsx), the currentLink.maxUsageCount ?? 1 fallback in the openSettingsDialog function is intentional. Missing maxUsageCount values indicate old/legacy private links that existed before the expiration feature was added, and they should default to single-use behavior (1) for backward compatibility.

Learnt from: eunjae-lee
PR: #22106
File: packages/features/insights/components/RoutingFunnel.tsx:15-17
Timestamp: 2025-07-15T12:58:40.539Z
Learning: In the insights routing funnel component (packages/features/insights/components/RoutingFunnel.tsx), the useColumnFilters exclusions are intentionally different from the general useInsightsParameters exclusions. RoutingFunnel specifically excludes only ["createdAt"] while useInsightsParameters excludes ["bookingUserId", "formId", "createdAt", "eventTypeId"]. This difference is by design.

apps/web/components/booking/BookingListItem.tsx (1)

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.

apps/web/modules/bookings/views/bookings-single-view.tsx (3)

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.

Learnt from: Anshumancanrock
PR: #22570
File: apps/web/modules/signup-view.tsx:253-253
Timestamp: 2025-07-21T21:33:23.343Z
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: alishaz-polymath
PR: #22304
File: packages/features/eventtypes/components/MultiplePrivateLinksController.tsx:92-94
Timestamp: 2025-07-16T06:42:27.024Z
Learning: In the MultiplePrivateLinksController component (packages/features/eventtypes/components/MultiplePrivateLinksController.tsx), the currentLink.maxUsageCount ?? 1 fallback in the openSettingsDialog function is intentional. Missing maxUsageCount values indicate old/legacy private links that existed before the expiration feature was added, and they should default to single-use behavior (1) for backward compatibility.

🧬 Code Graph Analysis (1)
packages/features/bookings/lib/handleCancelBooking.ts (1)
packages/platform/libraries/index.ts (1)
  • HttpError (49-49)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{js,jsx,ts,tsx}

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

Flag excessive Day.js use in performance-critical code. Functions like .add, .diff, .isBefore, and .isAfter are slow, especially in timezone mode. Prefer .utc() for better performance. Where possible, replace with native Date and direct .valueOf() comparisons for faster execution. Recommend using native methods or Day.js .utc() consistently in hot paths like loops.

Files:

  • packages/platform/examples/base/src/pages/[bookingUid].tsx
  • apps/web/components/booking/BookingListItem.tsx
  • packages/features/bookings/lib/handleCancelBooking.ts
  • apps/web/playwright/booking-pages.e2e.ts
  • apps/web/modules/bookings/views/bookings-single-view.tsx
🧠 Learnings (3)
packages/platform/examples/base/src/pages/[bookingUid].tsx (4)

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.

Learnt from: Anshumancanrock
PR: #22570
File: apps/web/modules/signup-view.tsx:253-253
Timestamp: 2025-07-21T21:33:23.343Z
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: alishaz-polymath
PR: #22304
File: packages/features/eventtypes/components/MultiplePrivateLinksController.tsx:92-94
Timestamp: 2025-07-16T06:42:27.024Z
Learning: In the MultiplePrivateLinksController component (packages/features/eventtypes/components/MultiplePrivateLinksController.tsx), the currentLink.maxUsageCount ?? 1 fallback in the openSettingsDialog function is intentional. Missing maxUsageCount values indicate old/legacy private links that existed before the expiration feature was added, and they should default to single-use behavior (1) for backward compatibility.

Learnt from: eunjae-lee
PR: #22106
File: packages/features/insights/components/RoutingFunnel.tsx:15-17
Timestamp: 2025-07-15T12:58:40.539Z
Learning: In the insights routing funnel component (packages/features/insights/components/RoutingFunnel.tsx), the useColumnFilters exclusions are intentionally different from the general useInsightsParameters exclusions. RoutingFunnel specifically excludes only ["createdAt"] while useInsightsParameters excludes ["bookingUserId", "formId", "createdAt", "eventTypeId"]. This difference is by design.

apps/web/components/booking/BookingListItem.tsx (1)

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.

apps/web/modules/bookings/views/bookings-single-view.tsx (3)

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.

Learnt from: Anshumancanrock
PR: #22570
File: apps/web/modules/signup-view.tsx:253-253
Timestamp: 2025-07-21T21:33:23.343Z
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: alishaz-polymath
PR: #22304
File: packages/features/eventtypes/components/MultiplePrivateLinksController.tsx:92-94
Timestamp: 2025-07-16T06:42:27.024Z
Learning: In the MultiplePrivateLinksController component (packages/features/eventtypes/components/MultiplePrivateLinksController.tsx), the currentLink.maxUsageCount ?? 1 fallback in the openSettingsDialog function is intentional. Missing maxUsageCount values indicate old/legacy private links that existed before the expiration feature was added, and they should default to single-use behavior (1) for backward compatibility.

🧬 Code Graph Analysis (1)
packages/features/bookings/lib/handleCancelBooking.ts (1)
packages/platform/libraries/index.ts (1)
  • HttpError (49-49)
⏰ 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). (3)
  • GitHub Check: Install dependencies / Yarn install & cache
  • GitHub Check: Codacy Static Code Analysis
  • GitHub Check: Security Check
🔇 Additional comments (7)
apps/web/components/booking/BookingListItem.tsx (1)

372-374: LGTM! Simplified logic correctly prevents cancellation of past bookings.

The condition has been appropriately simplified to remove the cancel action for any past booking, regardless of its confirmation status. This aligns with the PR objective and provides a cleaner, more consistent user experience.

packages/platform/examples/base/src/pages/[bookingUid].tsx (2)

30-30: Good choice using native Date comparison for performance.

The use of native Date objects for the time comparison is appropriate and aligns with the coding guidelines that recommend avoiding Day.js methods like .isBefore() in performance-critical code.


134-165: LGTM! Correctly hides reschedule and cancel options for past bookings.

The conditional rendering properly restricts access to booking modification options for past bookings, ensuring consistency with the overall PR objective. The logic is clear and the implementation is correct.

apps/web/playwright/booking-pages.e2e.ts (1)

759-784: Excellent E2E test coverage for past booking restrictions.

The test comprehensively verifies that both the cancel button and the "Need to make a change?" text are properly hidden for past bookings. The test setup correctly creates a past booking scenario and the assertions ensure the UI behaves as expected according to the PR requirements.

apps/web/modules/bookings/views/bookings-single-view.tsx (3)

817-818: LGTM: Conditional logic correctly prevents past booking cancellation

The updated condition properly restricts reschedule/cancel options for past bookings while preserving the ability to reschedule past bookings when explicitly configured via eventType.allowReschedulingPastBookings.


843-843: Good UX improvement: Hide "or" separator for past bookings

This prevents displaying the "or" text when the cancel button is hidden for past bookings, maintaining clean UI consistency.


849-849: Core feature implemented correctly: Cancel button hidden for past bookings

This change successfully implements the PR objective by preventing the cancel button from appearing for bookings that have already ended, based on the booking's end time.

@husniabad husniabad force-pushed the fix/remove-cancel-button-for-past-bookings branch from 8545ad1 to 8aadb25 Compare July 22, 2025 00:25
@kart1ka kart1ka self-assigned this Jul 23, 2025
Copy link
Contributor

github-actions bot commented Aug 7, 2025

This PR is being marked as stale due to inactivity.

@github-actions github-actions bot added the Stale label Aug 7, 2025
@anikdhabal
Copy link
Contributor

@husniabad pls fix the conflicts

@husniabad husniabad force-pushed the fix/remove-cancel-button-for-past-bookings branch from 8aadb25 to 909efa5 Compare August 7, 2025 17:08
@husniabad
Copy link
Author

Hi @anikdhabal I have fixed the conflicts and updated the PR to fit the latest design, there could be some failed tests but none of them related to my PR
Please review and approve🙏

@github-actions github-actions bot removed the Stale label Aug 8, 2025
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🧹 Nitpick comments (1)
apps/web/components/booking/BookingListItem.tsx (1)

272-288: Initialize edit-actions handlers after hook declarations to avoid TDZ surprises

These onClick handlers reference state setters declared later (Lines 305-309). While closures make this work at runtime, it’s easy to trip eslint “no-use-before-define” and it’s less readable.

Consider moving this block below the useState declarations (Lines 305-309), or memoize it after those hooks:

// After lines 309 (state hooks)
const editEventActions: ActionType[] = getEditEventActions(actionContext).map((action) => ({
  ...action,
  onClick:
    action.id === "reschedule_request"
      ? () => setIsOpenRescheduleDialog(true)
      : action.id === "reroute"
      ? () => setRerouteDialogIsOpen(true)
      : action.id === "change_location"
      ? () => setIsOpenLocationDialog(true)
      : action.id === "add_members"
      ? () => setIsOpenAddGuestsDialog(true)
      : action.id === "reassign"
      ? () => setIsOpenReassignDialog(true)
      : undefined,
}));
📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 909efa5 and 2d88099.

📒 Files selected for processing (2)
  • apps/web/components/booking/BookingListItem.tsx (2 hunks)
  • apps/web/components/booking/bookingActions.ts (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • apps/web/components/booking/bookingActions.ts
🧰 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:

  • apps/web/components/booking/BookingListItem.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:

  • apps/web/components/booking/BookingListItem.tsx
🧬 Code Graph Analysis (1)
apps/web/components/booking/BookingListItem.tsx (2)
apps/web/components/booking/bookingActions.ts (1)
  • getEditEventActions (98-162)
packages/ui/components/dropdown/Dropdown.tsx (1)
  • DropdownItem (161-181)
⏰ 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). (2)
  • GitHub Check: Install dependencies / Yarn install & cache
  • GitHub Check: Codacy Static Code Analysis

Comment on lines +690 to +719
{cancelEventAction.disabled && isBookingInPast ? (
<Tooltip content={t("cannot_cancel_booking")}>
<div className="w-full">
<DropdownItem
type="button"
color={cancelEventAction.color}
StartIcon={cancelEventAction.icon}
disabled={true}
data-bookingid={cancelEventAction.bookingId}
data-testid={cancelEventAction.id}
className="text-muted cursor-not-allowed"
onClick={(e) => e.preventDefault()}>
{cancelEventAction.label}
</DropdownItem>
</div>
</Tooltip>
) : (
<DropdownItem
type="button"
color={cancelEventAction.color}
StartIcon={cancelEventAction.icon}
href={cancelEventAction.href}
onClick={cancelEventAction.onClick}
disabled={cancelEventAction.disabled}
data-bookingid={cancelEventAction.bookingId}
data-testid={cancelEventAction.id}
className={cancelEventAction.disabled ? "text-muted" : undefined}>
{cancelEventAction.label}
</DropdownItem>
)}
Copy link
Contributor

Choose a reason for hiding this comment

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

💡 Verification agent

🧩 Analysis chain

Make the “disabled cancel” tooltip accessible and reliable (avoid disabling the Radix MenuItem when showing tooltip)

With DropdownMenuItem disabled, Radix prevents focus/selection, and tooltips may not fire on hover/focus. Also keyboard users won’t discover the reason. Keep the MenuItem interactive when showing the tooltip and use aria-disabled on the inner control, preventing selection manually.

Apply the following within this block to keep tooltip + keyboard accessibility:

- {cancelEventAction.disabled && isBookingInPast ? (
+ {cancelEventAction.disabled && isBookingInPast ? (
   <Tooltip content={t("cannot_cancel_booking")}>
     <div className="w-full">
       <DropdownItem
         type="button"
         color={cancelEventAction.color}
         StartIcon={cancelEventAction.icon}
-        disabled={true}
+        aria-disabled="true"
         data-bookingid={cancelEventAction.bookingId}
         data-testid={cancelEventAction.id}
-        className="text-muted cursor-not-allowed"
-        onClick={(e) => e.preventDefault()}>
+        className="text-muted cursor-not-allowed"
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }}>
         {cancelEventAction.label}
       </DropdownItem>
     </div>
   </Tooltip>
 ) : (

Additionally, adjust the wrapper item so it stays focusable when showing the tooltip (outside the selected lines):

// On the DropdownMenuItem wrapper (line 689)
<DropdownMenuItem
  className="rounded-lg"
  key={cancelEventAction.id}
  disabled={cancelEventAction.disabled && !isBookingInPast}
  onSelect={
    cancelEventAction.disabled && isBookingInPast
      ? (e) => e.preventDefault()
      : undefined
  }
>

This preserves pointer/keyboard interactions for the tooltip, prevents activation, and improves a11y (screen reader semantics via aria-disabled).

To ensure behavior is consistent across all cancel entry points, verify getCancelEventAction disables past-booking cancellation:


🏁 Script executed:

#!/bin/bash
# Inspect cancel action logic to confirm it disables when isBookingInPast
rg -n "function getCancelEventAction|getCancelEventAction\s*\(" -A 60 apps/web/components/booking
rg -n "isBookingInPast" apps/web/components/booking/bookingActions.ts -A 40

Length of output: 25030


To confirm the wrapper behavior, please verify the <DropdownMenuItem> props around where cancelEventAction is rendered:


🏁 Script executed:

#!/bin/bash
# Show the DropdownMenuItem wrapper around cancelEventAction
rg -n "cancelEventAction" -n -A5 -B5 apps/web/components/booking/BookingListItem.tsx | rg -m1 "DropdownMenuItem"

Length of output: 156


Please show more context around where cancelEventAction is rendered so we can inspect the wrapping <DropdownMenuItem> props:


🏁 Script executed:

#!/bin/bash
# Display ~20 lines around cancelEventAction for wrapper inspection
rg -n "cancelEventAction" -A20 -B20 apps/web/components/booking/BookingListItem.tsx

Length of output: 5744


Refactor Cancel MenuItem to preserve tooltip accessibility

Keep the menu item focusable when showing the “cannot cancel” tooltip and move the actual disabling into the inner control:

• In apps/web/components/booking/BookingListItem.tsx (at the <DropdownMenuItem> wrapper, line 688):

<DropdownMenuItem
  className="rounded-lg"
  key={cancelEventAction.id}
- disabled={cancelEventAction.disabled}
+ disabled={cancelEventAction.disabled && !isBookingInPast}
+ onSelect={
+   cancelEventAction.disabled && isBookingInPast
+     ? e => e.preventDefault()
+     : undefined
+ }
>

• Inside that block (lines 690–703), update the inner <DropdownItem> under the tooltip:

<Tooltip content={t("cannot_cancel_booking")}>
  <div className="w-full">
    <DropdownItem
      type="button"
      color={cancelEventAction.color}
      StartIcon={cancelEventAction.icon}
-     disabled={true}
+     aria-disabled="true"
      data-bookingid={cancelEventAction.bookingId}
      data-testid={cancelEventAction.id}
-     className="text-muted cursor-not-allowed"
-     onClick={(e) => e.preventDefault()}>
+     className="text-muted cursor-not-allowed"
+     onClick={e => {
+       e.preventDefault();
+       e.stopPropagation();
+     }}>
      {cancelEventAction.label}
    </DropdownItem>
  </div>
</Tooltip>

These changes ensure:

  • Tooltip fires on hover/focus (menu item remains interactive).
  • Keyboard users can tab into the item and hear the “cannot cancel” message.
  • Actual cancellation is blocked via aria-disabled and suppressing click/select events.

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents
In apps/web/components/booking/BookingListItem.tsx around lines 688–703, the
cancel menu item is fully disabled which prevents tooltip accessibility; instead
make the menu wrapper stay focusable and interactive so the Tooltip can fire,
but move the "disabled" behavior into the inner control: render the
<DropdownMenuItem>/<div> as focusable (do not set disabled), wrap the inner
<DropdownItem> with aria-disabled={true} when cancelEventAction.disabled &&
isBookingInPast, add role="button" and tabIndex={0} to the wrapper if needed,
and suppress activation by preventing onClick/onKeyDown (ignore Enter/Space) on
the inner control when aria-disabled is true so the action is not performed;
keep styling (text-muted/cursor-not-allowed) and data attributes on the inner
control so keyboard and screen-reader users can focus the item and hear the
tooltip while clicks/selections remain blocked.

Copy link
Contributor

@kart1ka kart1ka left a comment

Choose a reason for hiding this comment

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

Left a comment

@@ -27,6 +27,7 @@ export default function Bookings(props: { calUsername: string; calEmail: string
const year = dayjs(booking?.start).year();
const day = dayjs(date).format("dddd");
const month = dayjs(date).format("MMMM");
const isBookingInPast = new Date(booking?.end) < new Date();
Copy link
Contributor

Choose a reason for hiding this comment

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

There is a type error here. Can you please fix that?

image

Copy link
Contributor

github-actions bot commented Aug 21, 2025

E2E results are ready!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bookings area: bookings, availability, timezones, double booking 🐛 bug Something isn't working community Created by Linear-GitHub Sync consumer ✨ feature New feature or request 🧹 Improvements Improvements to existing features. Mostly UX/UI linear Sync Github Issue from community members to Linear.app Medium priority Created by Linear-GitHub Sync ready-for-e2e
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Past call bookings shouldn’t have the cancel event option.
4 participants