[Feature]Booking Embed (#2227)

packages/embeds/embed-react/src/Cal.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useRef } from "react";
+
+import useEmbed from "./useEmbed";
+
+export default function Cal({
+  calLink,
+  config,
+  embedJsUrl,
+}: {
+  calLink: string;
+  config?: any;
+  embedJsUrl?: string;
+}) {
+  const Cal = useEmbed(embedJsUrl);
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!Cal) {
+      return;
+    }
+    Cal("init");
+    Cal("inline", {
+      elementOrSelector: ref.current,
+      calLink,
+      config,
+    });
+  }, [Cal, calLink, config]);
+
+  if (!Cal) {
+    return <div>Loading {calLink}</div>;
+  }
+
+  return <div ref={ref}></div>;
+}

packages/embeds/embed-react/src/useEmbed.ts

@@ -0,0 +1,13 @@
+import { useEffect, useState } from "react";
+
+import EmbedSnippet from "@calcom/embed-snippet";
+
+export default function useEmbed(embedJsUrl?: string) {
+  const [globalCal, setGlobalCal] = useState<ReturnType<typeof EmbedSnippet>>();
+  useEffect(() => {
+    setGlobalCal(() => {
+      return EmbedSnippet(embedJsUrl);
+    });
+  }, []);
+  return globalCal;
+}