feat: new booker embed#9023
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Ignored Deployment
|
📦 Next.js Bundle Analysis for @calcom/webThis analysis was generated by the Next.js Bundle Analysis action. 🤖 New Pages AddedThe following pages were added to the bundle from the code in this PR:
Seven Pages Changed SizeThe following pages changed size from the code in this PR compared to its base branch:
DetailsOnly 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 Any third party scripts you have added directly to your app using the 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 "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored. |
Current Playwright Test Results Summary✅ 113 Passing - 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 DetailsRunning Workflow PR Update on Github Actions Commit: 60ff75a Started: 06/13/2023 02:05:51pm UTC
|
| 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 runsfailed over last 7 days |
18.90% (55)55 / 291 runsflaked 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 runsfailed over last 7 days |
93.48% (172)172 / 184 runsflaked over last 7 days |
|
Adding a single comment for all the feedback here. [WIP]
Bugs:
Some Observations:
|
CAL-1716 Test embed for new booker
Notes during testing:
|
| </div> | ||
| </Label> | ||
| ))} | ||
| {isBookerLayoutsEnabled && ( |
There was a problem hiding this comment.
Adds the layout options to the embed settings popup.
| destination: "/new-booker/:user/:type", | ||
| has: [{ type: "cookie", key: "new-booker-enabled" }], | ||
| }, | ||
| { |
There was a problem hiding this comment.
Enables the urls for the embed.
| const isEmbed = typeof window !== "undefined" && window?.isEmbed?.(); | ||
| return ( | ||
| <main className="flex h-full min-h-[100dvh] items-center justify-center"> | ||
| <main className={classNames("flex h-full items-center justify-center", !isEmbed && "min-h-[100dvh]")}> |
There was a problem hiding this comment.
Small overflow / scroll tweaks.
| data-cal-link="forms/948ae412-d995-4865-875a-48302588de03"> | ||
| Book through Routing Form [Dark Theme] | ||
| </button> | ||
| <button data-cal-namespace="popupPaidEvent" data-cal-config='{"layout":"week_view"}' data-cal-link="pro/paid"> |
There was a problem hiding this comment.
More examples in the embed palyground.
| // We only want the initial url value, that's why we memo it. The embed seems to change the url, which sometimes drops | ||
| // the layout query param. | ||
| const layoutFromQueryParam = useMemo(() => validateLayout(getQueryParam("layout") as BookerLayouts), []); | ||
| const defaultLayout = isEmbed |
There was a problem hiding this comment.
Embed won't use event settings, but rather will take the layout from the query param. That's set in the settings of the embed.
| ); | ||
|
|
||
| if (isMobile || !enabledLayouts) return null; | ||
| if (isMobile || isEmbed || !enabledLayouts) return null; |
There was a problem hiding this comment.
In the embed we don't show the layout toggles. You can't change layouts.
* Added embed files for new booker routes. * Updated nextjs config to redirect to correct embed url. * Notify embed of booker size after animation completes. * Don't use animations and 100vh in embed. * Added booker layout toggles to embed settings (wip) * Booker header positioning tweaks * Show correct layout in embed * Don't show pricing event meta if stripe app is not installed * Support custom border booker for embed * wip on passing layout prop to iframe for previews * Only show booker layout settings in embed-create-popup if booker layout feature is enabled. * Made layout prop in preview state for embed optional * Made layout prop in preview state for embed optional * Get layout toggle working * Fixed types * Added themebasis prop * Fix potential circular import that should then fix type errors * Fixed type error by fixing casing. * Type fixes * Added translations * More translations * Remove comment * Removed uneccessary addition to package.json * Removed todo since it's solved in another way --------- Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>






What does this PR do?
Make booker work with embed:
Fixes CAL-1716
Environment: Staging(main branch)
Type of change
How should this be tested?
yarn dev.<>icon in top right when editing an event) to test new layout toggle