fix: Avoid duplicate inline embeds

[hariombalhara]

What does this PR do?

Fixes #12983

Type of change

• Bug fix (non-breaking change which fixes an issue)

How should this be tested?

• Simply execute inline embed twice. See the issue in production in Codesandbox here

Mandatory Tasks

• Make sure you have self-reviewed the code. A decent size PR without self-review might be rejected.

Checklist

• I haven't added tests that prove my fix is effective or that my feature works

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
ai	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 5, 2024 5:36am
api	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 5, 2024 5:36am
dev	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 5, 2024 5:36am

4 Ignored Deployments

Name	Status	Preview	Comments	Updated (UTC)
cal	⬜️ Ignored (Inspect)	Visit Preview		Jan 5, 2024 5:36am
cal-demo	⬜️ Ignored (Inspect)	Visit Preview		Jan 5, 2024 5:36am
qa	⬜️ Ignored (Inspect)	Visit Preview		Jan 5, 2024 5:36am
ui	⬜️ Ignored (Inspect)	Visit Preview		Jan 5, 2024 5:36am

[hariombalhara]

Current dependencies on/for this PR:

• main
  • PR fix: Avoid duplicate inline embeds #13048 👈

This stack of pull requests is managed by Graphite.

[github-actions]

Thank you for following the naming conventions! 🙏 Feel free to join our discord and post your PR link.

[hariombalhara]

Every namespace has his own cal instance, so we just check if the instance has inlineEl already defined.

[github-actions]

📦 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! 🙌

[emrysal]

Nice, simple fix.

[xta]

This is breaking my usage of the embed. After opening the embed with a modal, closing the modal, and re-opening the modal, I'm getting the "fix" or error Inline embed already exists. Ignoring this call.

When I look at the DOM, I don't see the embed in my re-opened modal body.

[xta]

I was able to work around this, but I think there is a bug. The Cal.instance.inlineEl keeps a reference to the template.content.children[0] even though that part of the DOM no longer exists (since React removed it in my app). https://github.com/calcom/cal.com/blob/main/packages/embeds/embed-core/src/embed.ts#L494C25-L494C53

This prevents the component from creating the iframe in the future when it should be able to.

cc @hariombalhara

[itsfaraaz]

I was able to work around this, but I think there is a bug. The Cal.instance.inlineEl keeps a reference to the template.content.children[0] even though that part of the DOM no longer exists (since React removed it in my app). https://github.com/calcom/cal.com/blob/main/packages/embeds/embed-core/src/embed.ts#L494C25-L494C53

This prevents the component from creating the iframe in the future when it should be able to.

cc @hariombalhara

How'd you work around this? Can't figure this out

[xta]

with my setup, I can access global window.Cal.instance.inlineEl