@benji-money/connect-sdk 1.1.0-beta.2 → 1.1.0-beta.3

package/README.md

@@ -86,6 +86,8 @@ The SDK accepts the following configuration options:
 
 - `environment` (required): One of `local`, `development`, `sandbox`, or `production`
 - `token` (required): Your API connect token
+- `mode` (optional): `BenjiConnectMode` — `CONNECT` (default), `TRANSFER`, `REDEEM`, or `LOGIN`
+- `authType` (optional): `PartnerIntegrationType` — LOGIN only; omit or set `DUMMY` for the visible modal iframe; set to your partner type (1–6) for popup-only auth
 - `onSuccess` (optional): Callback function called when connect completed successfully
 - `onError` (optional): Callback function called when error occurs in the connect flow
 - `onExit` (optional): Callback function called when the user exits the connect flow
@@ -94,6 +96,14 @@ The SDK accepts the following configuration options:
 - `placement` (optional): Placement relative to `anchor` — see [Placement](#placement) below
 - `offset` (optional): Pixel gap after placement — `{ top?: number; left?: number }` (default `{ top: 0, left: 0 }`)
 
+### Modes
+
+| Mode | Visible UX | Notes |
+| ---- | ---------- | ----- |
+| **CONNECT** (default) | Centered or anchored modal iframe | No `authType`; standard connect / verify flow |
+| **LOGIN + DUMMY / no `authType`** | Same visible modal iframe | Partner auth runs in a nested iframe inside Benji Connect |
+| **LOGIN + non-DUMMY** | Partner popup only | Pass `authType`; Benji Connect iframe is headless — see [LOGIN popup example](#login-popup-example) below |
+
 ### Placement
 
 Placement uses [Floating UI](https://floating-ui.com/docs/computePosition#placement) / CSS logical naming (`start` / `end`). In **LTR** layouts:
@@ -104,6 +114,11 @@ Placement uses [Floating UI](https://floating-ui.com/docs/computePosition#placem
 | `bottom-end` | Below the anchor, right edge aligned with anchor's right edge |
 | `bottom-start` | Below the anchor, left edge aligned with anchor's left edge |
 
+**What `anchor` positions:**
+
+- **CONNECT, TRANSFER, REDEEM, and LOGIN + DUMMY:** the modal iframe
+- **LOGIN + non-DUMMY:** the partner-auth popup window (modal iframe stays headless)
+
 **Defaults:**
 
 - No `anchor` → centered modal (unchanged behavior for existing integrations)
@@ -129,30 +144,35 @@ Prefer selector, ref, or getter when the anchor can re-render (e.g. disabled/loa
 - **Anchored** popovers use the full design size when width and height checks pass; otherwise they fall back to a scaled centered modal
 - Scroll, resize, and visual viewport changes while open recompute placement and size
 
-**LOGIN popover example** (dropdown under a top-right button):
+#### LOGIN popup example
+
+Popup below a top-right login button; pass `authType` for non-DUMMY partners:
 
 ```typescript
 import {
   ConnectSDK,
   BenjiConnectMode,
   BenjiConnectPlacement,
+  PartnerIntegrationType,
 } from "@benji-money/connect-sdk";
 
-// Prefer a live binding (selector or ref) when the button may re-render before open()
 const sdk = new ConnectSDK({
   environment: "sandbox",
   token: connectToken,
   mode: BenjiConnectMode.LOGIN,
+  authType: PartnerIntegrationType.OAUTH_PKCE,
   anchor: "#login-btn",
   placement: BenjiConnectPlacement.BOTTOM_END,
   offset: { top: 8 },
   onSuccess: (token) => { /* ... */ },
+  onError: (error) => { /* popup blocked, etc. */ },
+  onExit: (metadata) => { /* POPUP_CLOSED when user dismisses popup */ },
 });
 
 await sdk.open();
 ```
 
-> **`bottom-end`** opens below the anchor with the modal's right edge aligned to the anchor's right edge — matching a dropdown under a top-right LOGIN button.
+> **`bottom-end`** positions the **partner popup** below the anchor with its right edge aligned to the anchor's right edge. The Benji Connect iframe stays headless (not visible).
 
 ### Environments
 

package/dist/connect-sdk.umd.global.js

@@ -110,7 +110,7 @@ var ConnectSDK = (() => {
   // src/utils/config.ts
   var buildContext = () => ({
     namespace: "benji-connect-sdk" ? "benji-connect-sdk" : "benji-connect-sdk",
-    version: "1.1.0-beta.2" ? String("1.1.0-beta.2") : "0.0.0"
+    version: "1.1.0-beta.3" ? String("1.1.0-beta.3") : "0.0.0"
   });
   function isBenjiConnectEnvironment(environment) {
     return environment === "local" /* LOCAL */ || environment === "development" /* DEVELOPMENT */ || environment === "sandbox" /* SANDBOX */ || environment === "production" /* PRODUCTION */;
@@ -133,6 +133,8 @@ var ConnectSDK = (() => {
   // src/utils/placement.ts
   var IFRAME_WIDTH = 400;
   var IFRAME_HEIGHT = 645;
+  var POPUP_WIDTH = 420;
+  var POPUP_HEIGHT = 640;
   var IFRAME_STATIC_STYLE = {
     border: "none",
     borderRadius: "20px",
@@ -389,6 +391,165 @@ var ConnectSDK = (() => {
       left: `${state.layout.left + viewportOffset.left}px`
     });
   }
+  function popupFitsBelow(anchorBottom, offsetTop, viewportHeight) {
+    const top = anchorBottom + offsetTop;
+    const bottom = top + POPUP_HEIGHT;
+    return top >= VIEWPORT_PADDING && bottom <= viewportHeight - VIEWPORT_PADDING;
+  }
+  function popupFitsHorizontally(viewportWidth) {
+    return viewportWidth >= POPUP_WIDTH + 2 * VIEWPORT_PADDING;
+  }
+  function clampPopupHorizontal(left, viewportWidth) {
+    const min = VIEWPORT_PADDING;
+    const max = viewportWidth - POPUP_WIDTH - VIEWPORT_PADDING;
+    if (max < min) {
+      return min;
+    }
+    return Math.min(Math.max(left, min), max);
+  }
+  function centerPopupViewportRect(viewport) {
+    const left = Math.max(
+      VIEWPORT_PADDING,
+      (viewport.width - POPUP_WIDTH) / 2
+    );
+    const top = Math.max(
+      VIEWPORT_PADDING,
+      (viewport.height - POPUP_HEIGHT) / 2
+    );
+    return {
+      top,
+      left,
+      width: POPUP_WIDTH,
+      height: POPUP_HEIGHT,
+      placement: "center" /* CENTER */
+    };
+  }
+  function computePopupViewportRect(anchorElement, placement, offset, viewport, options = {}) {
+    const { warnOnInvalidAnchor = false } = options;
+    const resolvedOffset = defaultOffset(offset);
+    if (placement === "center" /* CENTER */) {
+      return centerPopupViewportRect(viewport);
+    }
+    if (!isAnchorVisible(anchorElement)) {
+      if (isPreservableAnchoredLayout(options.preserveAnchoredLayout)) {
+        return clampPreservedAnchoredLayout(
+          options.preserveAnchoredLayout,
+          viewport
+        );
+      }
+      if (warnOnInvalidAnchor) {
+        warnInvalidAnchor(
+          "anchor is hidden or detached; falling back to centered popup"
+        );
+      }
+      return centerPopupViewportRect(viewport);
+    }
+    const rect = anchorElement.getBoundingClientRect();
+    if (!popupFitsBelow(rect.bottom, resolvedOffset.top, viewport.height)) {
+      return centerPopupViewportRect(viewport);
+    }
+    if (!popupFitsHorizontally(viewport.width)) {
+      return centerPopupViewportRect(viewport);
+    }
+    const top = rect.bottom + resolvedOffset.top;
+    const idealLeft = placement === "bottom-end" /* BOTTOM_END */ ? rect.right - POPUP_WIDTH + resolvedOffset.left : rect.left + resolvedOffset.left;
+    if (idealLeft < VIEWPORT_PADDING) {
+      if (warnOnInvalidAnchor) {
+        warnInvalidAnchor(
+          "anchor rect is unusable for popup placement; falling back to centered popup"
+        );
+      }
+      return centerPopupViewportRect(viewport);
+    }
+    const left = clampPopupHorizontal(idealLeft, viewport.width);
+    return {
+      top,
+      left,
+      width: POPUP_WIDTH,
+      height: POPUP_HEIGHT,
+      placement
+    };
+  }
+  function resolvePopupViewportLayout(config, viewport = {
+    width: window.innerWidth,
+    height: window.innerHeight
+  }, options = {}) {
+    const { warnOnInvalidAnchor = true } = options;
+    const placement = resolveEffectivePlacement(config);
+    const anchorElement = resolveAnchor(config.anchor);
+    if (warnOnInvalidAnchor && placement !== "center" /* CENTER */ && !anchorElement) {
+      warnInvalidAnchor("anchor not found; falling back to centered popup");
+      if (isPreservableAnchoredLayout(options.preserveAnchoredLayout)) {
+        return clampPreservedAnchoredLayout(
+          options.preserveAnchoredLayout,
+          viewport
+        );
+      }
+      return centerPopupViewportRect(viewport);
+    }
+    if (placement === "center" /* CENTER */ || !anchorElement) {
+      return centerPopupViewportRect(viewport);
+    }
+    return computePopupViewportRect(
+      anchorElement,
+      placement,
+      config.offset,
+      viewport,
+      options
+    );
+  }
+  function computePopupScreenPosition(config, state = { lastValidAnchoredLayout: null }, options = {}) {
+    const layout = resolvePopupViewportLayout(config, void 0, {
+      ...options,
+      preserveAnchoredLayout: state.lastValidAnchoredLayout
+    });
+    if (layout.placement !== "center" /* CENTER */) {
+      state.lastValidAnchoredLayout = layout;
+    }
+    const viewportOffset = getVisualViewportOffset();
+    return {
+      left: window.screenX + layout.left + viewportOffset.left,
+      top: window.screenY + layout.top + viewportOffset.top,
+      width: layout.width,
+      height: layout.height
+    };
+  }
+  function buildLoginPopupFeatures(position) {
+    return [
+      `width=${position.width}`,
+      `height=${position.height}`,
+      `left=${Math.round(position.left)}`,
+      `top=${Math.round(position.top)}`,
+      "scrollbars=yes",
+      "resizable=yes"
+    ].join(",");
+  }
+  function applyHeadlessContainerStyle(container) {
+    Object.assign(container.style, {
+      position: "fixed",
+      top: "0",
+      left: "-9999px",
+      width: "1px",
+      height: "1px",
+      overflow: "hidden",
+      pointerEvents: "none",
+      backgroundColor: "transparent",
+      opacity: "0",
+      zIndex: "-1"
+    });
+  }
+  function applyHeadlessIframeStyle(iframe) {
+    Object.assign(iframe.style, {
+      position: "absolute",
+      top: "0",
+      left: "0",
+      width: "1px",
+      height: "1px",
+      border: "none",
+      opacity: "0",
+      pointerEvents: "none"
+    });
+  }
   function attachRepositionListeners(config, onReposition) {
     const repositionHandler = onReposition;
     const repositionScrollTargets = getRepositionScrollTargets(config.anchor);
@@ -418,6 +579,7 @@ var ConnectSDK = (() => {
     BenjiConnectEventType2["FLOW_SUCCESS"] = "FLOW_SUCCESS";
     BenjiConnectEventType2["EVENT"] = "EVENT";
     BenjiConnectEventType2["ERROR"] = "ERROR";
+    BenjiConnectEventType2["PARTNER_LOGIN_OPEN"] = "PARTNER_LOGIN_OPEN";
     return BenjiConnectEventType2;
   })(BenjiConnectEventType || {});
 
@@ -549,6 +711,8 @@ var ConnectSDK = (() => {
       this.onExit = config.onExit;
       this.onEvent = config.onEvent;
       this.close = config.close;
+      this.closeLoginPopup = config.closeLoginPopup;
+      this.navigateLoginPopup = config.navigateLoginPopup;
     }
     static setMode(mode) {
       this.mode = mode;
@@ -586,7 +750,7 @@ var ConnectSDK = (() => {
       }
     }
     static handleMessage(event) {
-      var _a, _b, _c, _d, _e, _f, _g;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
       if (!isConnectMessageType(event.data)) return;
       const expectedOrigin = new URL(Endpoints.benji_connect_auth_url).origin;
       if (!event || event.origin !== expectedOrigin) {
@@ -634,6 +798,16 @@ var ConnectSDK = (() => {
             (_g = this.onEvent) == null ? void 0 : _g.call(this, callbackData.type, callbackData.metadata);
             break;
           }
+          case "PARTNER_LOGIN_OPEN" /* PARTNER_LOGIN_OPEN */: {
+            const connectMessage = message;
+            const url = (_h = connectMessage.data) == null ? void 0 : _h.url;
+            if (url) {
+              (_i = this.navigateLoginPopup) == null ? void 0 : _i.call(this, url);
+            } else {
+              (_j = this.closeLoginPopup) == null ? void 0 : _j.call(this);
+            }
+            break;
+          }
         }
       } finally {
       }
@@ -650,6 +824,7 @@ var ConnectSDK = (() => {
   var MessageRouter = _MessageRouter;
 
   // src/connect-sdk.ts
+  var POPUP_CLOSED_POLL_MS = 500;
   var ConnectSDK = class {
     constructor(config) {
       this.iframe = null;
@@ -664,7 +839,20 @@ var ConnectSDK = (() => {
         },
         lastValidAnchoredLayout: null
       };
+      this.popupLayoutState = {
+        lastValidAnchoredLayout: null
+      };
       this.repositionListeners = null;
+      this.loginPopup = null;
+      this.popupClosedPollId = null;
+      this.isClosing = false;
+      /**
+       * Aborts a pending open() when close() runs before the iframe mounts.
+       * Non-DUMMY LOGIN opens the partner popup synchronously, then awaits initialize()
+       * before mounting a headless iframe. Without this, close() can tear down the popup
+       * while the in-flight open() still registers listeners and mounts the iframe.
+       */
+      this.openAbortController = null;
       this.sdkConfig = config;
       if (!this.sdkConfig.environment) throw new Error("Environment is required");
       if (!this.sdkConfig.token) throw new Error("Connect token is required");
@@ -672,26 +860,125 @@ var ConnectSDK = (() => {
       this.sdkConfig.environment = environment;
       configureConfig(environment);
     }
+    isLoginPopupOnly() {
+      var _a;
+      const mode = (_a = this.sdkConfig.mode) != null ? _a : 1 /* CONNECT */;
+      return mode === 5 /* LOGIN */ && this.sdkConfig.authType != null && this.sdkConfig.authType !== 0 /* DUMMY */;
+    }
+    isSessionActive() {
+      return this.iframe != null || this.loginPopup != null;
+    }
+    /** Cancels any open() still running between popup pre-open and iframe mount. */
+    abortInflightOpen() {
+      var _a;
+      (_a = this.openAbortController) == null ? void 0 : _a.abort();
+      this.openAbortController = null;
+    }
     async initialize() {
       MessageRouter.configureMessageRouter({
         onSuccess: this.sdkConfig.onSuccess,
         onError: this.sdkConfig.onError,
         onExit: this.sdkConfig.onExit,
         onEvent: this.sdkConfig.onEvent,
-        close: () => this.close()
+        close: () => this.close(),
+        closeLoginPopup: () => this.closeLoginPopup(),
+        navigateLoginPopup: (url) => this.navigateLoginPopup(url)
       });
     }
+    openLoginPopup() {
+      var _a, _b;
+      const position = computePopupScreenPosition(
+        this.sdkConfig,
+        this.popupLayoutState,
+        { warnOnInvalidAnchor: true }
+      );
+      this.loginPopup = window.open(
+        "about:blank",
+        "benji_partner_auth",
+        buildLoginPopupFeatures(position)
+      );
+      if (!this.loginPopup) {
+        console.warn("[Connect SDK] Failed to pre-open LOGIN partner auth popup");
+        (_b = (_a = this.sdkConfig).onError) == null ? void 0 : _b.call(
+          _a,
+          new Error("Popup blocked. Allow popups for this site and try again."),
+          "400",
+          { context: buildContext() }
+        );
+        return false;
+      }
+      this.startPopupClosedPoll();
+      return true;
+    }
+    startPopupClosedPoll() {
+      this.stopPopupClosedPoll();
+      this.popupClosedPollId = setInterval(() => {
+        var _a, _b, _c;
+        if (this.isClosing) return;
+        if ((_a = this.loginPopup) == null ? void 0 : _a.closed) {
+          (_c = (_b = this.sdkConfig).onExit) == null ? void 0 : _c.call(_b, {
+            context: buildContext(),
+            trigger: "POPUP_CLOSED" /* POPUP_CLOSED */
+          });
+          this.close();
+        }
+      }, POPUP_CLOSED_POLL_MS);
+    }
+    stopPopupClosedPoll() {
+      if (this.popupClosedPollId != null) {
+        clearInterval(this.popupClosedPollId);
+        this.popupClosedPollId = null;
+      }
+    }
+    repositionLoginPopup() {
+      if (!this.loginPopup || this.loginPopup.closed) return;
+      const position = computePopupScreenPosition(
+        this.sdkConfig,
+        this.popupLayoutState
+      );
+      try {
+        this.loginPopup.moveTo(
+          Math.round(position.left),
+          Math.round(position.top)
+        );
+        this.loginPopup.resizeTo(position.width, position.height);
+      } catch (error) {
+        console.warn("[Connect SDK] Failed to reposition LOGIN popup", error);
+      }
+    }
     async open() {
       var _a;
+      if (this.isSessionActive()) return;
+      const mode = (_a = this.sdkConfig.mode) != null ? _a : 1 /* CONNECT */;
+      const abortController = new AbortController();
+      this.openAbortController = abortController;
+      const { signal } = abortController;
+      if (this.isLoginPopupOnly()) {
+        const opened = this.openLoginPopup();
+        if (!opened) {
+          this.abortInflightOpen();
+          return;
+        }
+      }
       await this.initialize();
-      this.openUI();
-      MessageRouter.setMode((_a = this.sdkConfig.mode) != null ? _a : 1 /* CONNECT */);
+      if (signal.aborted) return;
+      MessageRouter.setMode(mode);
       MessageRouter.addEventListeners();
+      if (signal.aborted) {
+        MessageRouter.removeEventListeners();
+        return;
+      }
+      this.openUI();
     }
     openUI() {
       if (this.iframe) return;
+      const headless = this.isLoginPopupOnly();
       this.container = document.createElement("div");
-      applyOverlayBaseStyle(this.container);
+      if (headless) {
+        applyHeadlessContainerStyle(this.container);
+      } else {
+        applyOverlayBaseStyle(this.container);
+      }
       console.debug("[Connect SDK] endpoints", Endpoints);
       console.log("[Connect SDK] opeining URL", Endpoints.benji_connect_auth_url);
       const url = new URL(Endpoints.benji_connect_auth_url);
@@ -705,48 +992,88 @@ var ConnectSDK = (() => {
       this.iframe.src = url.toString();
       this.container.appendChild(this.iframe);
       document.body.appendChild(this.container);
-      applyIframeLayoutToElements(
-        this.sdkConfig,
-        this.container,
-        this.iframe,
-        this.layoutState,
-        { warnOnInvalidAnchor: true }
-      );
-      this.repositionListeners = attachRepositionListeners(
-        this.sdkConfig,
-        () => {
-          if (!this.iframe || !this.container) return;
-          applyIframeLayoutToElements(
-            this.sdkConfig,
-            this.container,
-            this.iframe,
-            this.layoutState
-          );
-        }
-      );
-      this.container.addEventListener("click", (e) => {
-        var _a, _b;
-        if (e.target === this.container) {
-          (_b = (_a = this.sdkConfig).onExit) == null ? void 0 : _b.call(_a, {
-            context: buildContext(),
-            trigger: "TAPPED_OUT_OF_BOUNDS" /* TAPPED_OUT_OF_BOUNDS */
-          });
-          this.close();
+      if (headless) {
+        applyHeadlessIframeStyle(this.iframe);
+        this.repositionListeners = attachRepositionListeners(
+          this.sdkConfig,
+          () => this.repositionLoginPopup()
+        );
+      } else {
+        applyIframeLayoutToElements(
+          this.sdkConfig,
+          this.container,
+          this.iframe,
+          this.layoutState,
+          { warnOnInvalidAnchor: true }
+        );
+        this.repositionListeners = attachRepositionListeners(
+          this.sdkConfig,
+          () => {
+            if (!this.iframe || !this.container) return;
+            applyIframeLayoutToElements(
+              this.sdkConfig,
+              this.container,
+              this.iframe,
+              this.layoutState
+            );
+          }
+        );
+        this.container.addEventListener("click", (e) => {
+          var _a, _b;
+          if (e.target === this.container) {
+            (_b = (_a = this.sdkConfig).onExit) == null ? void 0 : _b.call(_a, {
+              context: buildContext(),
+              trigger: "TAPPED_OUT_OF_BOUNDS" /* TAPPED_OUT_OF_BOUNDS */
+            });
+            this.close();
+          }
+        });
+      }
+    }
+    navigateLoginPopup(url) {
+      if (!this.loginPopup || this.loginPopup.closed) {
+        console.warn("[Connect SDK] Cannot navigate LOGIN popup \u2014 window unavailable");
+        return;
+      }
+      try {
+        this.loginPopup.location.href = url;
+      } catch (error) {
+        console.warn("[Connect SDK] Failed to navigate LOGIN popup", error);
+      }
+    }
+    closeLoginPopup() {
+      if (!this.loginPopup) return;
+      try {
+        if (!this.loginPopup.closed) {
+          this.loginPopup.close();
         }
-      });
+      } catch (error) {
+        console.warn("[Connect SDK] Error closing LOGIN popup", error);
+      } finally {
+        this.loginPopup = null;
+      }
     }
     close() {
       var _a, _b;
-      if (!this.iframe) return;
+      this.abortInflightOpen();
+      this.isClosing = true;
+      this.stopPopupClosedPoll();
+      this.closeLoginPopup();
+      MessageRouter.removeEventListeners();
+      if (!this.iframe) {
+        this.isClosing = false;
+        return;
+      }
       (_a = this.repositionListeners) == null ? void 0 : _a.remove();
       this.repositionListeners = null;
       this.layoutState.lastValidAnchoredLayout = null;
+      this.popupLayoutState.lastValidAnchoredLayout = null;
       if ((_b = this.container) == null ? void 0 : _b.parentNode) {
         this.container.parentNode.removeChild(this.container);
       }
-      MessageRouter.removeEventListeners();
       this.iframe = null;
       this.container = null;
+      this.isClosing = false;
     }
     cleanup() {
       if (this.iframe) this.close();