CA
Feat/routing forms UI
calcom/cal.com#21662

What does this PR do?

  • Fixes #18987 (GitHub issue number)
  • /claim #18987

Technical Summary:

Have re-used the Booking questions UI here in routing forms, to maintain the sanity of the currently built forms have made the zod schema of routing forms extend that of booking form so that the other old fields are included as optional thus breaking nothing.

Major changes are the use of booking questions UI and widgets, defining a new boolean and number widget configuration in react awesome query builder to handle checkbox and number inputs, Transforming the “name” field used as identifier to “id” field in routing forms. Major changes are schema based.

Benefits of this change? Now we don’t have to maintain separate widgets and components for questions thus forming regularity in the UI and the codebase

Visual Demo (For contributors especially)

Current Routing form flows:

https://www.loom.com/share/315ef5c28a5a410f8199becf218fcb28?sid=cf392281-33af-4540-89de-f7a9a383c969

New Routing form flows:

https://www.loom.com/share/bb6fce98264b43098aa4ab87393323ea?sid=e972a994-8979-43b2-8c48-bb375eed321e

Current form sanity in new form:

https://www.loom.com/share/29f7620c66934dbea2ee979e1b1d1961?sid=881ac07e-ffb0-40b1-9eae-32c9d6618324

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?

  • Checkout this branch and run it locally
  • go to routing forms
  • create a new routing forms
  • see that the UI is similar to booking questions form
  • Add questions and routing logic
  • test it out
  • see that it works correctly

Summary by cubic

Updated routing forms to use the booking questions UI and unified form schema, making the UI consistent and reducing duplicate code.

  • Refactors
    • Replaced custom routing form field editor with the shared FormBuilder component.
    • Extended the routing form schema from the booking form schema to support all field types and options.
    • Improved support for boolean and number fields in routing logic and UI.
    • Updated field identifiers and option handling for better compatibility.

Claim

Total prize pool $50
Total paid $0
Status Pending
Submitted May 31, 2025
Last updated May 31, 2025

Contributors

PR

Pradumn Kumar

@Pradumn27

100%

Sponsors

CA

Cal.com, Inc.

@cal

$50