From 6148e894251688f9534b3d69b50efbc2ff3e511d Mon Sep 17 00:00:00 2001 From: Hariom Balhara Date: Wed, 18 May 2022 21:55:30 +0530 Subject: [PATCH] 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 Co-authored-by: zomars Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- apps/web/ee/components/web3/CryptoSection.tsx | 8 +++---- apps/web/playwright/lib/testUtils.ts | 5 +++-- packages/embeds/embed-core/README.md | 2 +- packages/embeds/embed-core/src/embed.ts | 10 +++++++++ .../embed-core/src/sdk-action-manager.ts | 5 +++++ packages/embeds/embed-react/README.md | 2 +- packages/embeds/embed-react/package.json | 10 +++++---- packages/embeds/embed-react/src/index.ts | 14 +++++++++++++ packages/embeds/embed-react/test-cal.tsx | 21 ++++++++++++++++++- packages/embeds/embed-react/vite.config.js | 1 + 10 files changed, 64 insertions(+), 14 deletions(-) diff --git a/apps/web/ee/components/web3/CryptoSection.tsx b/apps/web/ee/components/web3/CryptoSection.tsx index 8fad5713..4d570429 100644 --- a/apps/web/ee/components/web3/CryptoSection.tsx +++ b/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 }); diff --git a/apps/web/playwright/lib/testUtils.ts b/apps/web/playwright/lib/testUtils.ts index fe840114..23f57bea 100644 --- a/apps/web/playwright/lib/testUtils.ts +++ b/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 }; diff --git a/packages/embeds/embed-core/README.md b/packages/embeds/embed-core/README.md index 9b68c9a9..ec048232 100644 --- a/packages/embeds/embed-core/README.md +++ b/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 +See You can also see various example usages [here](https://github.com/calcom/cal.com/blob/main/packages/embeds/embed-core/index.html) diff --git a/packages/embeds/embed-core/src/embed.ts b/packages/embeds/embed-core/src/embed.ts index 181ba552..7a2ba637 100644 --- a/packages/embeds/embed-core/src/embed.ts +++ b/packages/embeds/embed-core/src/embed.ts @@ -369,6 +369,16 @@ export class Cal { this.actionManager.on(action, callback); } + off({ + action, + callback, + }: { + action: Parameters[0]; + callback: Parameters[1]; + }) { + this.actionManager.off(action, callback); + } + preload({ calLink }: { calLink: string }) { // eslint-disable-next-line prefer-rest-params validate(arguments[0], { diff --git a/packages/embeds/embed-core/src/sdk-action-manager.ts b/packages/embeds/embed-core/src/sdk-action-manager.ts index 68b4b959..f42de359 100644 --- a/packages/embeds/embed-core/src/sdk-action-manager.ts +++ b/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) => void) { + const fullName = this.getFullActionName(name); + window.removeEventListener(fullName, callback as EventListener); + } + constructor(ns: string | null) { ns = ns || ""; this.namespace = ns; diff --git a/packages/embeds/embed-react/README.md b/packages/embeds/embed-react/README.md index ab61cf6c..23332efe 100644 --- a/packages/embeds/embed-react/README.md +++ b/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 +To know how to use it, follow the steps at TODO diff --git a/packages/embeds/embed-react/package.json b/packages/embeds/embed-react/package.json index cc35c4f3..261a8d04 100644 --- a/packages/embeds/embed-react/package.json +++ b/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" diff --git a/packages/embeds/embed-react/src/index.ts b/packages/embeds/embed-react/src/index.ts index 85e2f4ef..e5743a0a 100644 --- a/packages/embeds/embed-react/src/index.ts +++ b/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 => + new Promise(function tryReadingFromWindow(resolve) { + const api = (window as CalWindow).Cal; + if (!api) { + setTimeout(() => { + tryReadingFromWindow(resolve); + }, 50); + return; + } + resolve(api); + }); + export default Cal; diff --git a/packages/embeds/embed-react/test-cal.tsx b/packages/embeds/embed-react/test-cal.tsx index b1483d5b..e08856a2 100644 --- a/packages/embeds/embed-react/test-cal.tsx +++ b/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 ( <> diff --git a/packages/embeds/embed-react/vite.config.js b/packages/embeds/embed-react/vite.config.js index 8f4335db..991b5f4a 100644 --- a/packages/embeds/embed-react/vite.config.js +++ b/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: {