feat: firstAndLastName variant for name field

[hariombalhara]

What does this PR do?

Fixes #5784

Other things that were implemented as part of the PR to make it a clean and stable implementation

• Capability to define variants for a field type in a declarative way.
• Adds 2 variants to name type of field.
  • fullName -> Default for all existing Event Types and any new one that is being created.
  • firstAndLastName -> Adds the fields in the same row on the booking page.
• Cleans up Form Builder with a small refactor.
  • This ticks off some of the tasks to reuse FormBuilder for Routing Forms
  • Should make it easier to implement cancellationReason using Form Builder which is a different form than Booking Form.
• Components required by Booker are separated away from other components required by the App. This gave an improvement in bundle size.

Important

• [x] Merge https://github.com/calcom/cal.com/pull/8718 before this PR

Demo

https://www.loom.com/share/319379202da54e46a4f232d012807952

Changes in Prefill Params

• name param can still be used to prefill fullName variant and thus there would be no change required to prefill all existing event-types' and any new event-types' booking pages by default. So the format would remain as name=John Doe
  • You can also prefill fullName variant asname={"fullName": "John Doe"}
• If firstAndLastName variant is chosen then the two fields can be prefilled as name={"firstName":"John", "lastName": "Doe"}.
  • It can also be prefilled as name=John Johny Janardan where John would become firstName and John Janardan would be lastName

Changes in Webhook data

All listeners on webhooks for an existing event type would not have any change in data as those event-types would be using fullName variant which is the default.

ForfirstAndLastName variant the format would be{"label":"your_name","value":{"firstName":"ABC","lastName":"DEF"}

Changes in Emails

As expected there would be no changes in the case of fullName variant in terms of how and what is shown for User name.

For the firstAndLastName variant, the attendee.name is stored as ${firstName} ${lastName} and thus email would also mention the name as the concatenation of two parts of the name.

Feedback

Ciaran

• [ ] nit - https://www.loom.com/share/319379202da54e46a4f232d012807952?highlightComment=12303054&t=100

Type of change

• [x] New feature (non-breaking change which adds functionality)

How should this be tested?

• [x] Create a new Event Type and see that booking form, which asks for full name, can be successfully submitted
  • [x] Verify that Email has correct Name for the attendee
  • [x] Verify that Webhook has correct data in payload.responses and payload.attendees.
• [x] Repeat the above test after Splitting Full Name.
• [x] Duplicate an Event Type that Full Name split enabled and see that it works too, repeating the very first test.

[vercel[bot]]

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

Name	Status	Preview	Comments	Updated (UTC)
api	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 20, 2023 4:02am
cal-demo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 20, 2023 4:02am
dev	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 20, 2023 4:02am
ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 20, 2023 4:02am

2 Ignored Deployments

Name	Status	Preview	Comments	Updated (UTC)
cal	⬜️ Ignored (Inspect)	Visit Preview		Jul 20, 2023 4:02am
qa	⬜️ Ignored (Inspect)			Jul 20, 2023 4:02am

[github-actions[bot]]

📦 Next.js Bundle Analysis for @calcom/web

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

Ninety-seven Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load	% of Budget (350 KB)
/404	118.22 KB	272.32 KB	77.81% (🟡 +0.41%)
/500	117.21 KB	271.31 KB	77.52% (🟡 +0.41%)
/[user]	138.88 KB	292.99 KB	83.71% (🟡 +0.41%)
/[user]/[type]	393.99 KB	548.09 KB	156.60% (🟢 -1.77%)
/[user]/[type]/embed	394.02 KB	548.12 KB	156.61% (🟢 -1.77%)
/[user]/embed	138.93 KB	293.03 KB	83.72% (🟡 +0.41%)
/apps	277 KB	431.1 KB	123.17% (🟡 +0.43%)
/apps/[slug]	295.05 KB	449.16 KB	128.33% (🟡 +0.43%)
/apps/[slug]/[...pages]	427.9 KB	582 KB	166.29% (🟡 +0.43%)
/apps/[slug]/setup	115.58 KB	269.68 KB	77.05% (🟡 +0.41%)
/apps/categories	256.16 KB	410.26 KB	117.22% (🟡 +0.43%)
/apps/categories/[category]	260.21 KB	414.32 KB	118.38% (🟡 +0.43%)
/apps/installed/[category]	276.45 KB	430.55 KB	123.02% (🟡 +0.43%)
/auth/error	117.02 KB	271.12 KB	77.46% (🟡 +0.42%)
/auth/forgot-password	162.54 KB	316.64 KB	90.47% (🟡 +0.43%)
/auth/forgot-password/[id]	161.91 KB	316.01 KB	90.29% (🟡 +0.42%)
/auth/login	166.88 KB	320.99 KB	91.71% (🟡 +0.43%)
/auth/logout	116.7 KB	270.8 KB	77.37% (🟡 +0.41%)
/auth/saml-idp	111.61 KB	265.71 KB	75.92% (🟡 +0.41%)
/auth/setup	188.99 KB	343.09 KB	98.03% (🟡 +0.42%)
/auth/signin	111.68 KB	265.78 KB	75.94% (🟡 +0.41%)
/auth/sso/[provider]	111.74 KB	265.84 KB	75.95% (🟡 +0.42%)
/auth/sso/direct	111.65 KB	265.75 KB	75.93% (🟡 +0.41%)
/auth/verify	117.97 KB	272.07 KB	77.73% (🟡 +0.42%)
/auth/verify-email	117.05 KB	271.16 KB	77.47% (🟡 +0.42%)
/availability	261.69 KB	415.79 KB	118.80% (🟡 +0.43%)
/availability/[schedule]	347.87 KB	501.97 KB	143.42% (🟡 +0.43%)
/availability/troubleshoot	256.9 KB	411 KB	117.43% (🟡 +0.43%)
/booking/[uid]	220.26 KB	374.37 KB	106.96% (🟡 +0.45%)
/bookings/[status]	341.42 KB	495.52 KB	141.58% (🟡 +0.24%)
/d/[link]/[slug]	393.94 KB	548.04 KB	156.58% (🟢 -1.76%)
/event-types	433.98 KB	588.08 KB	168.02% (🟡 +0.31%)
/event-types/[type]	285.37 KB	439.47 KB	125.56% (🟡 +0.54%)
/getting-started/[[...step]]	411.39 KB	565.49 KB	161.57% (🟡 +0.42%)
/insights	467.96 KB	622.06 KB	177.73% (🟡 +0.43%)
/maintenance	111.82 KB	265.92 KB	75.98% (🟡 +0.41%)
/more	255.79 KB	409.89 KB	117.11% (🟡 +0.43%)
/org/[orgSlug]	226.82 KB	380.92 KB	108.83% (🟡 +0.41%)
/org/[orgSlug]/[user]	246.55 KB	400.66 KB	114.47% (🟡 +0.41%)
/org/[orgSlug]/[user]/[type]	394.14 KB	548.24 KB	156.64% (🟢 -1.77%)
/org/[orgSlug]/[user]/[type]/embed	394.16 KB	548.27 KB	156.65% (🟢 -1.77%)
/org/[orgSlug]/team/[slug]	226.82 KB	380.92 KB	108.84% (🟡 +0.41%)
/org/[orgSlug]/team/[slug]/[type]	394.03 KB	548.13 KB	156.61% (🟢 -1.77%)
/payment/[uid]	132.26 KB	286.36 KB	81.82% (🟡 +0.41%)
/settings/admin	261.55 KB	415.65 KB	118.76% (🟡 +0.43%)
/settings/admin/apps	272.77 KB	426.88 KB	121.96% (🟡 +0.44%)
/settings/admin/apps/[category]	272.73 KB	426.83 KB	121.95% (🟡 +0.43%)
/settings/admin/flags	265.04 KB	419.14 KB	119.75% (🟡 +0.44%)
/settings/admin/impersonation	261.82 KB	415.92 KB	118.84% (🟡 +0.43%)
/settings/admin/organizations	262.61 KB	416.71 KB	119.06% (🟡 +0.43%)
/settings/admin/users	263.59 KB	417.69 KB	119.34% (🟡 +0.43%)
/settings/admin/users/[id]/edit	343.14 KB	497.24 KB	142.07% (🟡 +0.43%)
/settings/admin/users/add	342.82 KB	496.92 KB	141.98% (🟡 +0.43%)
/settings/billing	261.71 KB	415.81 KB	118.80% (🟡 +0.43%)
/settings/developer/api-keys	266.23 KB	420.33 KB	120.09% (🟡 +0.44%)
/settings/developer/webhooks	265.71 KB	419.81 KB	119.95% (🟡 +0.43%)
/settings/developer/webhooks/[id]	267.09 KB	421.19 KB	120.34% (🟡 +0.43%)
/settings/developer/webhooks/new	266.96 KB	421.06 KB	120.30% (🟡 +0.43%)
/settings/my-account/appearance	273.26 KB	427.36 KB	122.10% (🟡 +0.43%)
/settings/my-account/calendars	268.06 KB	422.16 KB	120.62% (🟡 +0.43%)
/settings/my-account/conferencing	267.54 KB	421.64 KB	120.47% (🟡 +0.43%)
/settings/my-account/general	347.21 KB	501.32 KB	143.23% (🟡 +0.44%)
/settings/my-account/profile	389.42 KB	543.52 KB	155.29% (🟡 +0.43%)
/settings/organizations/[id]/about	186.38 KB	340.48 KB	97.28% (🟡 +0.43%)
/settings/organizations/[id]/add-teams	186.42 KB	340.52 KB	97.29% (🟡 +0.43%)
/settings/organizations/[id]/onboard-admins	186.44 KB	340.54 KB	97.30% (🟡 +0.42%)
/settings/organizations/[id]/set-password	186.38 KB	340.48 KB	97.28% (🟡 +0.43%)
/settings/organizations/appearance	268.41 KB	422.51 KB	120.72% (🟡 +0.43%)
/settings/organizations/billing	261.55 KB	415.66 KB	118.76% (🟡 +0.43%)
/settings/organizations/general	342.18 KB	496.28 KB	141.79% (🟡 +0.43%)
/settings/organizations/members	292.37 KB	446.47 KB	127.56% (🟡 +0.43%)
/settings/organizations/new	186.36 KB	340.46 KB	97.28% (🟡 +0.42%)
/settings/organizations/profile	384.11 KB	538.21 KB	153.77% (🟡 +0.44%)
/settings/security/impersonation	264.2 KB	418.3 KB	119.52% (🟡 +0.43%)
/settings/security/password	267.39 KB	421.49 KB	120.43% (🟡 +0.43%)
/settings/security/sso	270.98 KB	425.09 KB	121.45% (🟡 +0.43%)
/settings/security/two-factor-auth	266.79 KB	420.89 KB	120.25% (🟡 +0.44%)
/settings/teams	261.31 KB	415.41 KB	118.69% (🟡 +0.43%)
/settings/teams/[id]/appearance	271.01 KB	425.11 KB	121.46% (🟡 +0.43%)
/settings/teams/[id]/billing	261.56 KB	415.66 KB	118.76% (🟡 +0.43%)
/settings/teams/[id]/members	376.23 KB	530.33 KB	151.52% (🟡 +0.43%)
/settings/teams/[id]/onboard-members	183.53 KB	337.63 KB	96.46% (🟡 +0.43%)
/settings/teams/[id]/profile	451.83 KB	605.93 KB	173.12% (🟡 +0.43%)
/settings/teams/[id]/sso	271.08 KB	425.18 KB	121.48% (🟡 +0.43%)
/settings/teams/new	206.92 KB	361.02 KB	103.15% (🟡 +0.44%)
/signup	162.8 KB	316.91 KB	90.54% (🟡 +0.43%)
/team/[slug]	226.77 KB	380.87 KB	108.82% (🟡 +0.41%)
/team/[slug]/[type]	394 KB	548.1 KB	156.60% (🟢 -1.76%)
/team/[slug]/[type]/embed	394.03 KB	548.13 KB	156.61% (🟢 -1.77%)
/team/[slug]/embed	226.82 KB	380.92 KB	108.83% (🟡 +0.42%)
/teams	255.94 KB	410.04 KB	117.15% (🟡 +0.43%)
/video/[uid]	248.85 KB	402.96 KB	115.13% (🟡 +0.41%)
/video/meeting-ended/[uid]	116.29 KB	270.39 KB	77.25% (🟡 +0.42%)
/video/meeting-not-started/[uid]	115.93 KB	270.03 KB	77.15% (🟡 +0.41%)
/video/no-meeting-found	115.32 KB	269.42 KB	76.98% (🟡 +0.41%)
/workflows	282.58 KB	436.68 KB	124.77% (🟡 +0.43%)
/workflows/[workflow]	395.5 KB	549.6 KB	157.03% (🟡 +0.30%)

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/-

[deploysentinel[bot]]

No failed tests 🎉

[hariombalhara]

Thanks @Udit-takkar. Fixed all occurrences that I found wrong.

[hariombalhara]

Thanks @Udit-takkar 🙏 I will resolve the conflicts and merge it later. Will wait for v3.1 to go live first though as it might introduce accidental issues(it being a big PR)

[github-actions[bot]]

Thank you for following the naming conventions! 🙏

[alwaysmeticulous[bot]]

🤖 Meticulous spotted visual differences in 103 of 308 screens tested: view and approve differences detected.

_{Last updated for commit b12acff. This comment will update as new commits are pushed.}

[hariombalhara]

@Udit-takkar Fixed spacing issue

I don't see the pinkish background issue. I didn't make any changes in that area anyway.

[hariombalhara]

@CarinaWolli For quick review this is how it looks after my recent commit push https://www.loom.com/share/ea05df6d80084ef7b307507951511bd4

[PeerRich]

i hope i fixed the merge conflict correctly

[automationsClub]

I opened a new event type (web account) and can't seem to find the split name flag. Is it in production yet?

[CarinaWolli]

I opened a new event type (web account) and can't seem to find the split name flag. Is it in production yet?

@automationsClub Only merged to main so far, so this will go live soon with the next release