Feat/routing v3 design

[sean-brydon]

What does this PR do?

Early Loom from a few days ago: https://www.loom.com/share/69d2b756c67a42a3a651f419d0339b55

• Fixes [CAL-5255] New routing form design #19705 CAL-5255 DES-2

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).

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

Checklist

• I haven't read the contributing guide
• My code doesn't follow the style guidelines of this project
• I haven't commented my code, particularly in hard-to-understand areas
• I haven't checked if my changes generate no new warnings

[CLAassistant]

All committers have signed the CLA.

[github-actions]

Hey there and thank you for opening this pull request! 👋🏼

We require pull request titles to follow the Conventional Commits specification and it looks like your proposed title needs to be adjusted.

Details:

No release type found in pull request title "Feat/routing v3 design". Add a prefix to indicate what kind of release this pull request corresponds to. For reference, see https://www.conventionalcommits.org/

Available types:
 - feat: A new feature
 - fix: A bug fix
 - docs: Documentation only changes
 - style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
 - refactor: A code change that neither fixes a bug nor adds a feature
 - perf: A code change that improves performance
 - test: Adding missing tests or correcting existing tests
 - build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
 - ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
 - chore: Other changes that don't modify src or test files
 - revert: Reverts a previous commit

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
cal	⬜️ Ignored (Inspect)	Visit Preview		Apr 25, 2025 2:52pm
calcom-web-canary	⬜️ Ignored (Inspect)	Visit Preview		Apr 25, 2025 2:52pm

[sean-brydon]

• Fix spacing issue on Routing Form booking page
  I was unable to replicate this

• Address readability issues in zero state view

• Fix zero state showing momentarily instead of skeleton on form page refresh
  Also an issue in production. I think its because of this

  cal.com/packages/app-store/routing-forms/components/SingleForm.tsx

  Lines 949 to 952 in ca8ee74

  	if (isPending) {
  	// It shouldn't be possible because we are passing the data from SSR to it as initialData. So, no need for skeleton here
  	return null;
  	}

• Improvement: Add Edit Form button to allow changes to last filled form details

• Recommendation: Don't collapse Preview when switching Form/Routing tabs
  Not possible with how routing forms was setup initally. Maybe when this page has moved to app-dir we can do this

• Fix issue with saving changes to Routing Form due to empty preview fields

• Add matched Route information to Preview results view
  Fixed - this was the case already we just didnt show it for fallback routes

• Fix Submit button in preview not validating field types
  I cannot get this working at all. Nested forms make this pretty difficult. Spent a pretty long time trying to unnest them but this structure of routing forms makes that pretty impossible.

• Remove Attribute Matching and Contact owner status when showing custom message or external redirect

• Fix bug where pencil icon doesn't edit Form name

• Fix External Redirect match showing no results in preview

• Fix error when saving form after reordering fields
  Not sure what has happened here @hariombalhara do you have 5 to take a look at this? Don't quiet get it

• Fix Close CTA bug in Preview modal on smaller screens

• Update Close CTA text when on Routing results view

• Fix issue with pasting newline separated options
  Not sure this is an issue - The behaviour we have with the multiinput option component is the same shared with other platforms i.e vercel,render etc.