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>

apps/web/ee/components/web3/CryptoSection.tsx

@@ -1,8 +1,7 @@
 import Router from "next/router";
-import { useCallback, useMemo, useState } from "react";
-import React from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import Web3 from "web3";
-import { AbstractProvider } from "web3-core";
+import type { AbstractProvider } from "web3-core";
 import { AbiItem } from "web3-utils";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -57,13 +56,12 @@ const CryptoSection = (props: CryptoSectionProps) => {
 
       const contract = new window.web3.eth.Contract(genericAbi as AbiItem[], props.smartContractAddress);
       const balance = await contract.methods.balanceOf(window.ethereum.selectedAddress).call();
-
       const hasToken = balance > 0;
 
       if (!hasToken) {
         throw new Error("Specified wallet does not own any tokens belonging to this smart contract");
       } else {
-        const account = (await window.web3.eth.getAccounts())[0];
+        const [account] = await window.web3.eth.getAccounts();
         const signature = await window.web3.eth.personal.sign(AUTH_MESSAGE, account, "");
         addContract({ address: props.smartContractAddress, signature });
 

apps/web/playwright/lib/testUtils.ts

@@ -1,9 +1,10 @@
 import { expect, Page, test } from "@playwright/test";
 import { createServer, IncomingMessage, ServerResponse } from "http";
+import noop from "lodash/noop";
 
 export function todo(title: string) {
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  test.skip(title, () => {});
+  // eslint-disable-next-line playwright/no-skipped-test
+  test.skip(title, noop);
 }
 
 type Request = IncomingMessage & { body?: unknown };

packages/embeds/embed-core/README.md

@@ -3,7 +3,7 @@
 This is the vanilla JS core script that embeds Cal Link.
 
 ## How to use embed on any webpage no matter what framework
-See <https://docs.cal.com/integrations/embed>
+See <https://developer.cal.com/embed/install-with-javascript>
 
 You can also see various example usages [here](https://github.com/calcom/cal.com/blob/main/packages/embeds/embed-core/index.html)
 

packages/embeds/embed-core/src/embed.ts

@@ -369,6 +369,16 @@ export class Cal {
     this.actionManager.on(action, callback);
   }
 
+  off({
+    action,
+    callback,
+  }: {
+    action: Parameters<SdkActionManager["on"]>[0];
+    callback: Parameters<SdkActionManager["on"]>[1];
+  }) {
+    this.actionManager.off(action, callback);
+  }
+
   preload({ calLink }: { calLink: string }) {
     // eslint-disable-next-line prefer-rest-params
     validate(arguments[0], {

packages/embeds/embed-core/src/sdk-action-manager.ts

@@ -51,6 +51,11 @@ export class SdkActionManager {
     window.addEventListener(fullName, callback as EventListener);
   }
 
+  off(name: string, callback: (arg0: CustomEvent<CustomEventDetail>) => void) {
+    const fullName = this.getFullActionName(name);
+    window.removeEventListener(fullName, callback as EventListener);
+  }
+
   constructor(ns: string | null) {
     ns = ns || "";
     this.namespace = ns;

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: {