DRAFT: Feat/new booker embed

[JeroenReumkens]

What does this PR do?

Make booker work with embed.

Fixes # (issue)

Environment: Staging(main branch) / Production

Type of change

• Bug fix (non-breaking change which fixes an issue)
• Chore (refactoring code, technical debt, workflow improvements)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How should this be tested?

• [ ] Test A
• [ ] Test B

Checklist

• I haven't read the contributing guide
• My code doesn't follow the style guidelines of this project
• I haven't performed a self-review of my own code and corrected any misspellings
• I haven't commented my code, particularly in hard-to-understand areas
• I haven't checked if my PR needs changes to the documentation
• I haven't checked if my changes generate no new warnings
• 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

[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	Jun 13, 2023 2:07pm
cal	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 13, 2023 2:07pm
web	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 13, 2023 2:07pm
website	❌ Failed (Inspect)			Jun 13, 2023 2:07pm

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
ui	⬜️ Ignored (Inspect)	Visit Preview		Jun 13, 2023 2:07pm

[github-actions[bot]]

📦 Next.js Bundle Analysis for @calcom/web

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

New Pages Added

The following pages were added to the bundle from the code in this PR:

Page	Size (compressed)	First Load	% of Budget (350 KB)
/new-booker/[user]/[type]/embed	394.31 KB	545.27 KB	155.79%
/new-booker/[user]/embed	136.74 KB	287.7 KB	82.20%
/new-booker/team/[slug]/[type]/embed	394.32 KB	545.27 KB	155.79%
/new-booker/team/[slug]/embed	224.73 KB	375.68 KB	107.34%

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)
/apps/installed/[category]	277.41 KB	428.37 KB	122.39% (🟡 +0.20%)
/event-types	427.07 KB	578.02 KB	165.15% (🟡 +0.15%)
/getting-started/[[...step]]	425.6 KB	576.55 KB	164.73% (🟡 +0.23%)
/new-booker/[user]/[type]	394.29 KB	545.24 KB	155.78% (🟡 +0.25%)
/new-booker/d/[link]/[slug]	394.23 KB	545.18 KB	155.77% (🟡 +0.23%)
/new-booker/team/[slug]/[type]	394.29 KB	545.24 KB	155.78% (🟡 +0.25%)
/settings/my-account/calendars	252.11 KB	403.07 KB	115.16% (🟡 +0.24%)

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]]

Current Playwright Test Results Summary

✅ 113 Passing - ⚠️ 2 Flaky

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

(Last updated on 06/13/2023 02:08:23pm UTC)

Run Details

Running Workflow PR Update on Github Actions

Commit: 60ff75ad950272dc8296b65c87320e418a60c1f9

Started: 06/13/2023 02:05:51pm UTC

⚠️ Flakes

📄   apps/web/playwright/managed-event-types.e2e.ts • 1 Flake

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Managed Event Types tests Can create managed event type Retry 2 • Retry 1 • Initial Attempt	6.87% (20) 20 / 291 runs failed over last 7 days	18.90% (55) 55 / 291 runs flaked over last 7 days

---

📄   packages/embeds/embed-core/playwright/tests/action-based.e2e.ts • 1 Flake

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Popup Tests should be able to reschedule Retry 2 • Retry 1 • Initial Attempt	6.52% (12) 12 / 184 runs failed over last 7 days	93.48% (172) 172 / 184 runs flaked over last 7 days

---

View Detailed Build Results

---

[hariombalhara]

Adding a single comment for all the feedback here. [WIP]

• We should disable layout toggle buttons in embed atleast for inline mode. Having those buttons might break the inline embed experience. For popup embeds, it might be okay as Embed owns the entire screen in that case.
• I think we should provide API to toggle layouts. Allowing that would let users configure embed layout based on his requirement. The API show also allow enabling/disabling the toggle buttons, so that website visitors can't do that themselves.
• For Popup embed, I think we should move the toggles close to the embed main content or maybe merge it with the cross icon(that closes the popup). It looks disconnected currently IMHO.
• Would it make sense to add Layout toggles on Routing Form as well for the case when Routing Form routes to an event. https://www.loom.com/share/68a9f5fb70b049f39f56d1103061f851. Right now toggles aren't initially visible and come later when user routes to event page. Having the toggles on Routing Form allows him to give his preference earlier and open the routing form with a bigger layout(maybe?)

Bugs:

• Too much blank space at the bottom and top here.

• New layouts don't have rounded borders

• Cal.com branding logo is missing on User Profile page. Might be the same with Team profile page.

• Not sure if it's a bug in old booker as well but Paid event icon is there without any text for /paid event

• New Booker doesn't let it's borders configured. It was a feature requested not so long ago by a customer(I am not sure if he is using it right now) https://www.loom.com/share/1afd7361abe548049f9e1b4aa8cdeac8

Some Observations:

• Align Left and Align Right options aren't working in new booker. I would prefer to not implement them in new booker as they are deprecated and I am not sure if someone is using them.

[hariombalhara]

Cal.com branding for new booker won't be visible well for all backgrounds. Here is how it looks on playground. We need to keep the background fixed for it to be visible in all cases.

[hariombalhara]

@JeroenReumkens Layout toggle is now working. https://www.loom.com/share/135b967eb283484ea30ac3bd6571f58a

[linear[bot]]

CAL-1716 Test embed for new booker

Notes during testing:

• Booker border isn't used anymore. Do we want that back? We use Sean's new variables now.
• Layout toggles kind of float in nowhere. What do we want to do with this?