From e27566f888e1e269f4d8891dda17de68ee0729d9 Mon Sep 17 00:00:00 2001 From: Danny Roosevelt Date: Fri, 30 May 2025 15:23:15 -0700 Subject: [PATCH 1/2] Adding onCancel and onClose callbacks --- packages/sdk/CHANGELOG.md | 11 +++++++++-- packages/sdk/package.json | 2 +- packages/sdk/src/browser/index.ts | 25 +++++++++++++++++++++++++ 3 files changed, 35 insertions(+), 3 deletions(-) diff --git a/packages/sdk/CHANGELOG.md b/packages/sdk/CHANGELOG.md index ceb0140affa03..9c4a7204b6ecd 100644 --- a/packages/sdk/CHANGELOG.md +++ b/packages/sdk/CHANGELOG.md @@ -2,6 +2,13 @@ # Changelog +## [1.6.4] - 2025-05-30 + +### Added + +- Added `onClose` callback to `connectAccount` method that fires whenever the Connect iFrame is closed (success or cancel) +- Added `onCancel` callback to `connectAccount` method that fires when the Connect iFrame is closed without successfully connecting + ## [1.6.3] - 2025-05-20b ### Added @@ -61,8 +68,8 @@ ### Added -- PD_SDK_DEBUG env var. Set it to true to enable debugging of Pipedream Connect - API requests. Simple sanitization is performed to prevent sensitive field leakage +- PD_SDK_DEBUG env var. Set it to true to enable debugging of Pipedream Connect + API requests. Simple sanitization is performed to prevent sensitive field leakage but use caution. ## [1.5.1] - 2025-04-15 diff --git a/packages/sdk/package.json b/packages/sdk/package.json index b99bb35ff4657..07683a7782da2 100644 --- a/packages/sdk/package.json +++ b/packages/sdk/package.json @@ -1,7 +1,7 @@ { "name": "@pipedream/sdk", "type": "module", - "version": "1.6.3", + "version": "1.6.4", "description": "Pipedream SDK", "main": "./dist/server.js", "module": "./dist/server.js", diff --git a/packages/sdk/src/browser/index.ts b/packages/sdk/src/browser/index.ts index 14965f2814ab6..ea36f1e544a5f 100644 --- a/packages/sdk/src/browser/index.ts +++ b/packages/sdk/src/browser/index.ts @@ -109,6 +109,17 @@ type StartConnectOpts = { * @param err - The error that occurred during the connection. */ onError?: (err: ConnectError) => void; + + /** + * Callback function to be called when the Connect iFrame is closed. + */ + onClose?: () => void; + + /** + * Callback function to be called when the user cancels/closes the Connect + * iFrame without successfully connecting an account. + */ + onCancel?: () => void; }; /** @@ -223,13 +234,22 @@ export class BrowserClient extends BaseClient { * onError: (err) => { * console.error("Connection error:", err); * }, + * onClose: () => { + * console.log("Connect iFrame closed"); + * }, + * onCancel: () => { + * console.log("User cancelled without connecting"); + * }, * }); * ``` */ public async connectAccount(opts: StartConnectOpts) { + let connectionSuccessful = false; + const onMessage = (e: MessageEvent) => { switch (e.data?.type) { case "success": + connectionSuccessful = true; opts.onSuccess?.({ id: e.data?.authProvisionId, }); @@ -239,6 +259,11 @@ export class BrowserClient extends BaseClient { break; case "close": this.cleanup(onMessage); + opts.onClose?.(); + // Call onCancel if the connection wasn't successful + if (!connectionSuccessful) { + opts.onCancel?.(); + } break; default: break; From 07704045e033baf4c169192474e76dd9fdaa8a8b Mon Sep 17 00:00:00 2001 From: Danny Roosevelt Date: Fri, 30 May 2025 15:39:06 -0700 Subject: [PATCH 2/2] Fixing it up --- packages/sdk/CHANGELOG.md | 4 +-- packages/sdk/src/browser/index.ts | 45 +++++++++++++++++++------------ 2 files changed, 30 insertions(+), 19 deletions(-) diff --git a/packages/sdk/CHANGELOG.md b/packages/sdk/CHANGELOG.md index 9c4a7204b6ecd..95c5039cc3f3b 100644 --- a/packages/sdk/CHANGELOG.md +++ b/packages/sdk/CHANGELOG.md @@ -6,8 +6,8 @@ ### Added -- Added `onClose` callback to `connectAccount` method that fires whenever the Connect iFrame is closed (success or cancel) -- Added `onCancel` callback to `connectAccount` method that fires when the Connect iFrame is closed without successfully connecting +- Added `onClose` callback to `connectAccount` method that receives a + `ConnectStatus` object with `successful` and `completed` boolean properties ## [1.6.3] - 2025-05-20b diff --git a/packages/sdk/src/browser/index.ts b/packages/sdk/src/browser/index.ts index ea36f1e544a5f..a89ea83412f87 100644 --- a/packages/sdk/src/browser/index.ts +++ b/packages/sdk/src/browser/index.ts @@ -70,6 +70,20 @@ type ConnectResult = { id: string; }; +/** + * The status when the Connect dialog is closed. + */ +type ConnectStatus = { + /** + * Whether the connection was successful (account was connected). + */ + successful: boolean; + /** + * Whether the connection process was completed (vs user closing early). + */ + completed: boolean; +}; + /** * Custom error class for handling connection errors. */ @@ -112,14 +126,10 @@ type StartConnectOpts = { /** * Callback function to be called when the Connect iFrame is closed. + * + * @param status - The status of the connection when closed. */ - onClose?: () => void; - - /** - * Callback function to be called when the user cancels/closes the Connect - * iFrame without successfully connecting an account. - */ - onCancel?: () => void; + onClose?: (status: ConnectStatus) => void; }; /** @@ -234,36 +244,37 @@ export class BrowserClient extends BaseClient { * onError: (err) => { * console.error("Connection error:", err); * }, - * onClose: () => { - * console.log("Connect iFrame closed"); - * }, - * onCancel: () => { - * console.log("User cancelled without connecting"); + * onClose: (status) => { + * if (!status.successful) { + * console.log("User closed without connecting"); + * } * }, * }); * ``` */ public async connectAccount(opts: StartConnectOpts) { let connectionSuccessful = false; + let connectionCompleted = false; const onMessage = (e: MessageEvent) => { switch (e.data?.type) { case "success": connectionSuccessful = true; + connectionCompleted = true; opts.onSuccess?.({ id: e.data?.authProvisionId, }); break; case "error": + connectionCompleted = true; opts.onError?.(new ConnectError(e.data.error)); break; case "close": this.cleanup(onMessage); - opts.onClose?.(); - // Call onCancel if the connection wasn't successful - if (!connectionSuccessful) { - opts.onCancel?.(); - } + opts.onClose?.({ + successful: connectionSuccessful, + completed: connectionCompleted, + }); break; default: break;