fix: hyperlinks in booking questions are not highlighted

[Anshumancanrock]

What does this PR do?

This PR fixes an issue where hyperlinks in booking form checkbox option labels were rendered as plain text instead of clickable links. Now users create booking questions with checkbox options containing URLs, those URLs now appear as properly styled, clickable links.

• Fixes hyperlinks in booking questions are not highlighted #24059
• Fixes CAL-6462

Key Changes:

• Modified checkbox option rendering logic in Components.tsx to detect URLs with http:// or https:// protocols
• Replaced complex getCleanLabel helper function with inline conditional rendering for better performance
• Added proper security attributes (target="_blank", rel="noopener noreferrer") to external links

Visual Demo (For contributors especially)

Video Demo (if applicable):

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?

• No special environment variables needed
• Standard Cal.com development setup is sufficient

Checklist

• Read and followed contributing guidelines
• Code follows project style guidelines
• Code is self-documenting and clear
• Changes generate no new warnings
• Minimal, efficient solution with browser compatibility
• Proper security measures for external links

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

Updated packages/features/form-builder/Components.tsx. Checkbox option labels that match a URL or domain-like pattern are now conditionally rendered as anchor (<a>) elements; if the label includes a protocol the label is used as-is for href, otherwise https:// is prefixed. Anchors use target="_blank", rel="noopener noreferrer", and inline styling. Labels that do not match the URL/domain pattern continue to render as plain text inside the label span. No changes to exported or public APIs.

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title succinctly identifies the bug being addressed by stating that hyperlinks in booking questions are not highlighted and implies their proper rendering post-fix. It directly matches the main change in conditional URL detection and anchor rendering for checkbox labels.
Linked Issues Check	✅ Passed	The PR implements URL pattern detection and wraps matching checkbox labels in anchor tags with proper security attributes, directly addressing both GitHub issue #24059 and Linear issue CAL-6462 by ensuring hyperlinks in booking questions are highlighted and clickable.
Out of Scope Changes Check	✅ Passed	All changes are confined to the checkbox option rendering logic in Components.tsx and focus solely on enabling hyperlink detection and styling, with no unrelated modifications introduced.
Description Check	✅ Passed	The description clearly explains that the PR fixes plain-text hyperlinks in checkbox labels by rendering them as clickable links and details key changes, issue references, and testing instructions, which directly relates to the code modifications.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

---

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]

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

A member of the Team first needs to authorize it.

[coderabbitai]

Actionable comments posted: 1

📜 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 f11c4dd and 6475b4b.

📒 Files selected for processing (1)

• packages/features/form-builder/Components.tsx (3 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/features/form-builder/Components.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/features/form-builder/Components.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/features/form-builder/Components.tsx

🧠 Learnings (2)

📓 Common learnings

Learnt from: bandhan-majumder
PR: calcom/cal.com#23454
File: packages/features/form-builder/FormBuilder.tsx:11-11
Timestamp: 2025-08-29T22:57:30.382Z
Learning: FormBuilder.tsx in packages/features/form-builder/ does not have "use client" directive at the top despite using client-side React hooks and event handlers, which suggests it should be a client component.

📚 Learning: 2025-08-29T22:57:30.382Z

Learnt from: bandhan-majumder
PR: calcom/cal.com#23454
File: packages/features/form-builder/FormBuilder.tsx:11-11
Timestamp: 2025-08-29T22:57:30.382Z
Learning: FormBuilder.tsx in packages/features/form-builder/ does not have "use client" directive at the top despite using client-side React hooks and event handlers, which suggests it should be a client component.

Applied to files:

• packages/features/form-builder/Components.tsx

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

• GitHub Check: Tests / Unit
• GitHub Check: Type check / check-types