feat: remove Cal.ai tab from navigation while preserving URL access

[PeerRich]

What does this PR do?

This PR implements two related changes to the Cal.ai integration in event types:

1. Adds Cal.ai Banner to Workflows Tab: Displays the same "Supercharge your Workflows with Cal.ai" banner that appears on /event-types to the workflows tab page (/event-types/{id}?tabName=workflows)

2. Removes Cal.ai Tab from Navigation: Completely removes the Cal.ai tab from the event types navigation while preserving URL access for backward compatibility

Link to Devin run: https://app.devin.ai/sessions/34ef1c121af3471bbe83b120b02327fe
Requested by: @PeerRich

Key Changes

Banner Addition (EventWorkflowsTab.tsx)

• Imported CalAiBanner component from @calcom/features/shell/CalAiBanner
• Added <CalAiBanner /> component after the LicenseRequired wrapper
• The banner uses existing pathname-based visibility logic to show on workflows pages

Tab Removal (useTabsNavigations.tsx)

• Removed the entire conditional block that added the Cal.ai tab to navigation
• Extracted eventTypeId variable to avoid repeated formMethods.getValues("id") calls
• Fixed ESLint warnings by adding missing dependencies to useMemo array

⚠️ Important Review Areas

Critical items to verify:

• Banner visibility: Confirm CalAiBanner actually appears on workflows tab page - the visibility logic depends on pathname checking
• Backward compatibility: Test that /event-types/{id}?tabName=ai URL still works for existing bookmarks/links, even though tab is removed from navigation
• Banner positioning: Verify banner appears in correct location and doesn't break layout
• ESLint dependency changes: The useMemo dependency fixes could affect re-rendering behavior

Testing limitation: ⚠️ Local testing was limited due to authentication issues, so visual functionality wasn't fully verified.

How should this be tested?

1. Banner functionality:

   • Navigate to /event-types/{id}?tabName=workflows
   • Verify Cal.ai banner appears at the top of the workflows tab
   • Test banner dismiss functionality

2. Navigation changes:

   • Confirm Cal.ai tab no longer appears in event type navigation
   • Test that /event-types/{id}?tabName=ai URL still works directly (backward compatibility)

3. Layout verification:

   • Check that banner positioning doesn't interfere with workflows content
   • Verify responsive behavior on mobile

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.

[devin-ai-integration]

🤖 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'.
• 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

[coderabbitai]

Walkthrough

Refactors tab navigation logic to derive a local eventTypeId from formMethods.getValues("id") and use it consistently for building navigation data and hrefs. Updates getNavigation and tab hrefs (recurring, availability, team, webhooks) to use eventTypeId. Removes the previously hidden "Cal.ai" tab and its associated navigation push logic. Expands dependencies for useMemo and effects to include eventTypeId, eventType.id, and formMethods, ensuring recomputation when the event type id changes. No exported/public API changes.

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title accurately describes the removal of the Cal.ai tab and the preservation of direct URL access, which reflects a significant aspect of the implemented changes; it is clear, specific, and directly tied to the PR’s functionality even though it does not mention the added banner feature.
Description Check	✅ Passed	The description clearly outlines both the addition of the Cal.ai banner to the workflows tab and the removal of the Cal.ai tab with preserved URL compatibility, provides testing steps, and highlights key review areas, demonstrating direct relevance to the changeset.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch devin/remove-cal-ai-tab-1758108209

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

2 Skipped Deployments

Project	Deployment	Preview	Comments	Updated (UTC)
cal	Ignored			Oct 7, 2025 6:36pm
cal-eu	Ignored			Oct 7, 2025 6:36pm

[github-actions]

This PR is being marked as stale due to inactivity.

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/platform/atoms/event-types/hooks/useTabsNavigations.tsx (1)

133-133: Fix inconsistent ID reference in instant tab href.

All other tab hrefs use eventTypeId (derived from formMethods.getValues("id")), but the instant tab uses eventType.id from props. This inconsistency could cause mismatched URLs if the prop and form values diverge.

Apply this diff to use eventTypeId consistently:

-          href: `/event-types/${eventType.id}?tabName=instant`,
+          href: `/event-types/${eventTypeId}?tabName=instant`,

🧹 Nitpick comments (1)

packages/platform/atoms/event-types/hooks/useTabsNavigations.tsx (1)

74-75: Consider extracting eventTypeId inside the useMemo for cleaner reactivity.

Extracting eventTypeId at the component level works but creates an inefficient update pattern: when formMethods changes, the component re-renders, eventTypeId recalculates, then useMemo re-runs because both formMethods and eventTypeId changed. A cleaner pattern would be to derive eventTypeId directly inside the useMemo block, or use formMethods.watch("id") if reactive updates are needed before the next render.

Apply this diff to extract eventTypeId inside the useMemo:

-  const eventTypeId = formMethods.getValues("id");
-
   const EventTypeTabs = useMemo(() => {
+    const eventTypeId = formMethods.getValues("id");
     const navigation: VerticalTabItemProps[] = getNavigation({

Then remove eventTypeId from the dependencies array at line 160 (it's no longer needed since it's computed inside the memoized function).

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 9ee06b4 and 7969ab6.

⛔ Files ignored due to path filters (1)

• yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (1)

• packages/platform/atoms/event-types/hooks/useTabsNavigations.tsx (5 hunks)

🧰 Additional context used

📓 Path-based instructions (3)

**/*.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/event-types/hooks/useTabsNavigations.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/event-types/hooks/useTabsNavigations.tsx

**/*.{ts,tsx,js,jsx}

⚙️ CodeRabbit configuration file

Flag default exports and encourage named exports. Named exports provide better tree-shaking, easier refactoring, and clearer imports. Exempt main components like pages, layouts, and components that serve as the primary export of a module.

Files:

• packages/platform/atoms/event-types/hooks/useTabsNavigations.tsx

🔇 Additional comments (1)

packages/platform/atoms/event-types/hooks/useTabsNavigations.tsx (1)

148-167: Dependency additions look correct given the current implementation.

Adding eventTypeId (line 160), eventType.id (line 165), and formMethods (line 166) to the dependencies ensures the memoized navigation re-computes when these values change. However, note that if eventTypeId is moved inside the useMemo as suggested above, remove it from the dependencies array.

[rodrigoehlers]

LGTM, tab is gone but manual URL update still works.

[github-actions]

E2E results are ready!

• Workflow #82233.3 latest results