Skip to content

feat: new booker embed#9023

Merged
hariombalhara merged 30 commits into
mainfrom
feat/new-booker-embed
Jun 14, 2023
Merged

feat: new booker embed#9023
hariombalhara merged 30 commits into
mainfrom
feat/new-booker-embed

Conversation

@JeroenReumkens
Copy link
Copy Markdown
Contributor

@JeroenReumkens JeroenReumkens commented May 22, 2023

What does this PR do?

Make booker work with embed:

  • Enables routes when cookie is set
  • Gives an option in the embed configurator to select the layout you want to see
  • No layout toggle in embed possible, we show the layout the user selects in the settings.

Fixes CAL-1716

Environment: Staging(main branch)

Type of change

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

How should this be tested?

  • View the embed playground in /packages/embed/embed-core by running yarn dev.
  • Test the embed settings on the event types (<> icon in top right when editing an event) to test new layout toggle

@vercel
Copy link
Copy Markdown

vercel Bot commented May 22, 2023

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
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 22, 2023

📦 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 "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.

@deploysentinel
Copy link
Copy Markdown

deploysentinel Bot commented May 22, 2023

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: 60ff75a

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 2Retry 1Initial 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 2Retry 1Initial 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
Copy link
Copy Markdown
Member

hariombalhara commented May 24, 2023

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.
    image
  • 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.
Screenshot 2023-05-24 at 12 30 42 PM Screenshot 2023-05-24 at 12 31 12 PM
  • New layouts don't have rounded borders
    image

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

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

image

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.

@PeerRich PeerRich changed the title DRAFT: Feat/new booker embed feat: new booker embed May 24, 2023
@PeerRich PeerRich added the ✨ feature New feature or request label May 30, 2023
@linear
Copy link
Copy Markdown

linear Bot commented Jun 13, 2023

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?

</div>
</Label>
))}
{isBookerLayoutsEnabled && (
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adds the layout options to the embed settings popup.

Comment thread apps/web/next.config.js
destination: "/new-booker/:user/:type",
has: [{ type: "cookie", key: "new-booker-enabled" }],
},
{
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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]")}>
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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">
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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;
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the embed we don't show the layout toggles. You can't change layouts.

@hariombalhara hariombalhara added this pull request to the merge queue Jun 14, 2023
Merged via the queue into main with commit 8331059 Jun 14, 2023
@hariombalhara hariombalhara deleted the feat/new-booker-embed branch June 14, 2023 09:53
iamr-kumar pushed a commit to iamr-kumar/cal.com that referenced this pull request Jun 18, 2023
* 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

✨ feature New feature or request

Projects

No open projects
Status: No status

Development

Successfully merging this pull request may close these issues.

3 participants