Improvements: Prefill Routing Forms and connect prefilling with Booking Form #8780

hariombalhara · 2023-05-09T14:42:16Z

What does this PR do?

Routing Form can now be prefilled with Query Params. Similar to Booking Form - Requested here(Private Link)
Any query params that are provided to Routing Form aren't lost now in navigating to Booking Form or external redirect
Any responses provided in Routing Form are also forwarded to Booking Form for prefilling. So that a question if responsed in Routing Form can be prefilled in booking form if it's there as well.

Also, Fixes #8839

Demo

Environment: Production

Type of change

New feature (non-breaking change which adds functionality)

How should this be tested?

Test A
Test B

Checklist

I haven't added tests that prove my fix is effective or that my feature works
I haven't checked if new and existing unit tests pass locally with my changes

…outing form

vercel · 2023-05-09T14:42:23Z

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

Name	Status	Preview	Comments	Updated (UTC)
cal	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 17, 2023 4:53am

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
ui	⬜️ Ignored (Inspect)	Visit Preview		May 17, 2023 4:53am

github-actions · 2023-05-09T14:55:08Z

📦 Next.js Bundle Analysis for @calcom/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

deploysentinel · 2023-05-09T15:12:13Z

Current Playwright Test Results Summary

✅ 109 Passing - ❌ 3 Failing - ⚠️ 2 Flaky

Run may still be in progress, this comment will be updated as current testing workflow or job completes...

(Last updated on 05/17/2023 05:11:13am UTC)

Run Details

Running Workflow PR Update on Github Actions

Commit: 39c83d9

Started: 05/17/2023 04:59:28am UTC

❌ Failures

📄 packages/embeds/embed-core/playwright/tests/action-based.test.ts • 2 Failures

Top 1 Common Error Messages

`Expected to provide an iframe, got null`	2 Test Cases Affected

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Popup Tests should open embed iframe on click - Configured with light theme Retry 2 • Retry 1 • Initial Attempt Error: Expected to provide an iframe, got null `Expected to provide an iframe, got null`	5.52% (8) 8 / 145 runs failed over last 7 days	0% (0) 0 / 145 runs flaked over last 7 days
Popup Tests should be able to reschedule Retry 2 • Retry 1 • Initial Attempt Error: Expected to provide an iframe, got null `Expected to provide an iframe, got null`	10.20% (15) 15 / 147 runs failed over last 7 days	45.58% (67) 67 / 147 runs flaked over last 7 days

📄 packages/embeds/embed-core/playwright/tests/inline.e2e.ts • 1 Failure

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Inline Iframe - Configured with Dark Theme Retry 1 • Initial Attempt Error: Embed iframe not found `Embed iframe not found`	5.52% (8) 8 / 145 runs failed over last 7 days	5.52% (8) 8 / 145 runs flaked over last 7 days

⚠️ Flakes

📄 apps/web/playwright/reschedule.e2e.ts • 1 Flake

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Reschedule Tests -- new-booker Should display request reschedule send on bookings/cancelled Retry 1 • Initial Attempt	0% (0) 0 / 281 runs failed over last 7 days	2.49% (7) 7 / 281 runs flaked over last 7 days

📄 apps/web/playwright/booking-seats.e2e.ts • 1 Flake

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Booking with Seats -- new-booker Reschedule for booking with seats -- old-booker Should reschedule booking with seats and if everyone rescheduled it should be deleted Retry 1 • Initial Attempt	0% (0) 0 / 290 runs failed over last 7 days	82.07% (238) 238 / 290 runs flaked over last 7 days

View Detailed Build Results

hariombalhara · 2023-05-12T05:35:40Z

packages/features/form-builder/FormBuilder.tsx

@@ -201,7 +201,7 @@ export const FormBuilder = function FormBuilder({
                      // It has the same drawback that if the label is changed, the value of the option will change. It is not a big deal for now.
                      value.splice(index, 1, {
                        label: e.target.value,
-                        value: e.target.value.toLowerCase().trim(),


Routing Form uses the strategy of not lowercasing the option label and using it as is.
Changed this logic here to match that, otherwise an option value forwarded from Routing Form won't be prefillable in Booking Form.
It also fixes #8839

hariombalhara · 2023-05-12T05:42:09Z

packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx


  return (
    <Select
      className="mb-2"
      onChange={(items) => {
        setValue(items?.map((item) => item.value));
      }}
-      defaultValue={defaultValue}
+      value={validValue}


This is a controlled input so it should use value field.

…support-routing-forms

hariombalhara · 2023-05-16T11:17:14Z

packages/app-store/routing-forms/components/FormActions.tsx

@@ -276,6 +276,9 @@ export function FormActionsProvider({ appUrl, children }: { appUrl: string; chil
      }
      return { previousValue };
    },
+    onSuccess: () => {
+      showToast(t("form_updated_successfully"), "success");


On toggling the form there was no toast coming up.

hariombalhara · 2023-05-16T11:20:06Z

packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx


  return (
    <Select
      className="mb-2"
      onChange={(items) => {
        setValue(items?.map((item) => item.value));
      }}
-      defaultValue={defaultValue}
+      value={optionsFromList}


It is supposed to be a controlled input

CarinaWolli

Nice looks good 🙏

…ng Form (#8780) * Support prefilling routing form and prefilling Booking form through routing form * Use Option Value as is instead of lowercasing * Fix prefill validation issue * Add prefill tests * Fix Routing Form tests * Small fix

hariombalhara added 2 commits May 9, 2023 18:50

Support prefilling routing form and prefilling Booking form through r…

c235b00

…outing form

Use Option Value as is instead of lowercasing

21319da

vercel bot deployed to Preview – cal May 9, 2023 14:47 View deployment

Fix prefill validation issue

45fb94c

hariombalhara force-pushed the improvements/prefill-support-routing-forms branch from 93164a9 to 45fb94c Compare May 9, 2023 14:54

vercel bot deployed to Preview – ui May 9, 2023 15:01 View deployment

vercel bot deployed to Preview – cal May 9, 2023 15:02 View deployment

hariombalhara commented May 12, 2023

View reviewed changes

Add prefill tests

10fa353

vercel bot deployed to Preview – cal May 12, 2023 12:53 View deployment

vercel bot deployed to Preview – cal May 12, 2023 14:08 View deployment

hariombalhara force-pushed the improvements/prefill-support-routing-forms branch from e560f1e to bb967f3 Compare May 12, 2023 14:12

vercel bot deployed to Preview – cal May 12, 2023 14:19 View deployment

Fix Routing Form tests

1221dd8

hariombalhara force-pushed the improvements/prefill-support-routing-forms branch from bb967f3 to 1221dd8 Compare May 12, 2023 15:02

vercel bot deployed to Preview – cal May 12, 2023 15:08 View deployment

Merge remote-tracking branch 'origin/main' into improvements/prefill-…

c58717c

…support-routing-forms

vercel bot deployed to Preview – ui May 16, 2023 11:05 View deployment

vercel bot deployed to Preview – cal May 16, 2023 11:07 View deployment

hariombalhara commented May 16, 2023

View reviewed changes

hariombalhara marked this pull request as ready for review May 16, 2023 11:30

hariombalhara requested a review from a team May 16, 2023 11:30

hariombalhara requested a review from zomars as a code owner May 16, 2023 11:30

Small fix

39c83d9

vercel bot deployed to Preview – cal May 17, 2023 04:53 View deployment

CarinaWolli approved these changes May 17, 2023

View reviewed changes

hariombalhara added this pull request to the merge queue May 17, 2023

Merged via the queue into main with commit b8b6c48 May 17, 2023
20 of 21 checks passed

hariombalhara deleted the improvements/prefill-support-routing-forms branch May 17, 2023 09:19

This was referenced May 29, 2023

[CAL-1809] Link Routing Fields to Event Type Fields #9176

Closed

[CAL-1138] Refill Booking Form with Routing Form fields effortlessly. #7292

Closed

PeerRich added the core area: core, team members only label Jul 24, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improvements: Prefill Routing Forms and connect prefilling with Booking Form #8780

Improvements: Prefill Routing Forms and connect prefilling with Booking Form #8780

hariombalhara commented May 9, 2023 •

edited

vercel bot commented May 9, 2023 •

edited

github-actions bot commented May 9, 2023 •

edited

deploysentinel bot commented May 9, 2023 •

edited

Top 1 Common Error Messages

Test Case Results

Test Case Results

Test Case Results

Test Case Results

hariombalhara May 12, 2023 •

edited

hariombalhara May 12, 2023

hariombalhara May 16, 2023

hariombalhara May 16, 2023

CarinaWolli left a comment

Improvements: Prefill Routing Forms and connect prefilling with Booking Form #8780

Improvements: Prefill Routing Forms and connect prefilling with Booking Form #8780

Conversation

hariombalhara commented May 9, 2023 • edited

What does this PR do?

Demo

Type of change

How should this be tested?

Checklist

vercel bot commented May 9, 2023 • edited

github-actions bot commented May 9, 2023 • edited

📦 Next.js Bundle Analysis for @calcom/web

deploysentinel bot commented May 9, 2023 • edited

Current Playwright Test Results Summary

❌ Failures

Top 1 Common Error Messages

Test Case Results

Test Case Results

⚠️ Flakes

Test Case Results

Test Case Results

hariombalhara May 12, 2023 • edited

Choose a reason for hiding this comment

hariombalhara May 12, 2023

Choose a reason for hiding this comment

hariombalhara May 16, 2023

Choose a reason for hiding this comment

hariombalhara May 16, 2023

Choose a reason for hiding this comment

CarinaWolli left a comment

Choose a reason for hiding this comment

hariombalhara commented May 9, 2023 •

edited

vercel bot commented May 9, 2023 •

edited

github-actions bot commented May 9, 2023 •

edited

deploysentinel bot commented May 9, 2023 •

edited

hariombalhara May 12, 2023 •

edited