Adding onCancel and onClose callbacks (#16904)

* Adding onCancel and onClose callbacks

* Fixing it up

Author: dannyroosevelt

packages/sdk/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 # Changelog
 
+## [1.6.4] - 2025-05-30
+
+### Added
+
+- Added `onClose` callback to `connectAccount` method that receives a
+  `ConnectStatus` object with `successful` and `completed` boolean properties
+
 ## [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

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",

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.
  */
@@ -109,6 +123,13 @@ 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.
+   *
+   * @param status - The status of the connection when closed.
+   */
+  onClose?: (status: ConnectStatus) => void;
 };
 
 /**
@@ -223,22 +244,37 @@ export class BrowserClient extends BaseClient {
    *   onError: (err) => {
    *     console.error("Connection error:", err);
    *   },
+   *   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?.({
+          successful: connectionSuccessful,
+          completed: connectionCompleted,
+        });
         break;
       default:
         break;