Embed React improvements (#2782)

* Add off support. Add getApi export.

* Add publish command

* Add embed-snippet in prod deps

* Update README

* Update package.json

Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
Co-authored-by: zomars <zomars@me.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/embeds/embed-react/README.md

@@ -2,7 +2,7 @@
 
 Embed Cal Link as a React Component
 
-To know how to use it, follow the steps at <https://docs.cal.com/integrations/embed>
+To know how to use it, follow the steps at <https://developer.cal.com/embed/install-with-react>
 
 TODO
 

packages/embeds/embed-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calcom/embed-react",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "description": "Embed Cal Link as a React Component",
   "scripts": {
     "dev": "vite --port=3101 --open",
@@ -11,14 +11,16 @@
     "type-check": "tsc --pretty --noEmit",
     "lint": "eslint --ext .ts,.js,.tsx,.jsx ./src",
     "embed-tests": "yarn playwright test --config=./playwright/config/playwright.config.ts",
-    "embed-tests-quick": "QUICK=true yarn embed-tests"
+    "embed-tests-quick": "QUICK=true yarn embed-tests",
+    "publish-prod": "npm version patch && npm publish --access public",
+    "publish-beta": "npm version prepatch && npm publish --access public --tag beta"
   },
   "main": "./dist/Cal.umd.js",
   "module": "./dist/Cal.es.js",
   "types": "./dist/src/index.d.ts",
   "peerDependencies": {
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
   },
   "files": [
     "dist"

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

@@ -1,3 +1,17 @@
+import { CalWindow } from "@calcom/embed-snippet";
+
 import Cal from "./Cal";
 
+export const getCalApi = (): Promise<CalWindow["Cal"]> =>
+  new Promise(function tryReadingFromWindow(resolve) {
+    const api = (window as CalWindow).Cal;
+    if (!api) {
+      setTimeout(() => {
+        tryReadingFromWindow(resolve);
+      }, 50);
+      return;
+    }
+    resolve(api);
+  });
+
 export default Cal;

packages/embeds/embed-react/test-cal.tsx

@@ -2,13 +2,32 @@ import { useEffect } from "react";
 import { useState } from "react";
 import ReactDom from "react-dom";
 
-import Cal from "./src/index";
+import Cal, { getCalApi } from "./src/index";
+
+const api = getCalApi();
 
 function App() {
   const [loaded, setLoaded] = useState(false);
   useEffect(() => {
     // Simulate state change causing config object to change, causing rerender of Cal
     setTimeout(setLoaded.bind(true), 1000);
+    const callback = (event) => {
+      console.log(event.detail);
+    };
+    api.then((api) => {
+      api("on", {
+        action: "*",
+        callback,
+      });
+    });
+    return () => {
+      api.then((api) => {
+        api("off", {
+          action: "*",
+          callback,
+        });
+      });
+    };
   }, []);
   return (
     <>

packages/embeds/embed-react/vite.config.js

@@ -17,6 +17,7 @@ export default defineConfig({
       // into your library
       external: ["react", "react-dom"],
       output: {
+        exports: "named",
         // Provide global variables to use in the UMD build
         // for externalized deps
         globals: {