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

package/README.md

@@ -102,7 +102,7 @@ The SDK accepts the following configuration options:
 | ---- | ---------- | ----- |
 | **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 |
+| **LOGIN + non-DUMMY** | Partner popup only | Pass `authType`; Benji Connect iframe is headless — popup shows a loading spinner until partner auth navigates — see [LOGIN popup example](#login-popup-example) below |
 
 ### Placement
 
@@ -172,7 +172,7 @@ const sdk = new ConnectSDK({
 await sdk.open();
 ```
 
-> **`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).
+> **`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). The pre-opened popup shows generic loading UI (`Loading sign-in…`) until Benji Connect sends the partner auth URL.
 
 ### Environments
 

package/dist/connect-sdk.umd.d.ts

@@ -0,0 +1,14 @@
+// These are compile-time constants replaced by tsup's `define` option.
+// Declaring them globally prevents TypeScript errors.
+
+
+declare global {
+  const __VERSION__: string;
+  const __NAMESPACE__: string;
+
+  // Global browser exposure for UMD builds 
+  interface Window {
+    // SDK main class (UMD builds attach this)
+    ConnectSDK?: any;
+  }
+}

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.3" ? String("1.1.0-beta.3") : "0.0.0"
+    version: "1.1.0-beta.5" ? String("1.1.0-beta.5") : "0.0.0"
   });
   function isBenjiConnectEnvironment(environment) {
     return environment === "local" /* LOCAL */ || environment === "development" /* DEVELOPMENT */ || environment === "sandbox" /* SANDBOX */ || environment === "production" /* PRODUCTION */;
@@ -130,6 +130,92 @@ var ConnectSDK = (() => {
     return defaultEnvironment;
   }
 
+  // src/utils/loginPopupLoading.ts
+  var LOGIN_POPUP_TITLE = "User sign-in";
+  var LOGIN_POPUP_MESSAGE = "Loading sign-in\u2026";
+  function buildLoginPopupLoadingHtml() {
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>${LOGIN_POPUP_TITLE}</title>
+  <style>
+    * { box-sizing: border-box; }
+    html, body {
+      margin: 0;
+      height: 100%;
+      background: #fff;
+    }
+    body {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-family: Inter, system-ui, -apple-system, sans-serif;
+    }
+    .loading-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 14px;
+      padding: 24px;
+      max-width: 320px;
+      transform: translateY(-28px);
+    }
+    .loader {
+      width: 48px;
+      height: 48px;
+      border: 3px solid #e5e7eb;
+      border-top-color: #9ca3af;
+      border-radius: 50%;
+      animation: spin 0.75s linear infinite;
+    }
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+    .loading-text {
+      font-size: 16px;
+      text-align: center;
+      font-family: Inter, sans-serif;
+      margin: 0;
+      background: linear-gradient(
+        90deg,
+        #374151 0%,
+        #9ca3af 50%,
+        #374151 100%
+      );
+      background-size: 200% 100%;
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+      animation: shimmer 1.8s ease-in-out infinite;
+    }
+    @keyframes shimmer {
+      0% { background-position: 100% 0; }
+      100% { background-position: -100% 0; }
+    }
+  </style>
+</head>
+<body>
+  <div class="loading-content">
+    <div class="loader" aria-hidden="true"></div>
+    <p class="loading-text">${LOGIN_POPUP_MESSAGE}</p>
+  </div>
+</body>
+</html>`;
+  }
+  function writeLoginPopupLoadingDocument(popup) {
+    try {
+      popup.document.open();
+      popup.document.write(buildLoginPopupLoadingHtml());
+      popup.document.close();
+    } catch (error) {
+      console.warn("[Connect SDK] Failed to write LOGIN popup loading document", error);
+    }
+  }
+
   // src/utils/placement.ts
   var IFRAME_WIDTH = 400;
   var IFRAME_HEIGHT = 645;
@@ -584,7 +670,28 @@ var ConnectSDK = (() => {
   })(BenjiConnectEventType || {});
 
   // src/utils/auth.ts
+  var AUTH_MESSAGE_TYPES = /* @__PURE__ */ new Set([
+    "auth_config",
+    "code_received",
+    "code_verification_error",
+    "loyalty_verification",
+    "phone_verification",
+    "request_auth_config",
+    "request_code_exchange",
+    "request_code_with_login",
+    "request_code_with_phone",
+    "request_loyalty_verification",
+    "request_phone_verification"
+  ]);
   var CONNECT_MESSAGE_TYPES = new Set(Object.values(BenjiConnectEventType));
+  function isAuthMessageType(data2) {
+    if (!data2 || typeof data2 !== "object") return false;
+    const type = data2.type;
+    return typeof type === "string" && AUTH_MESSAGE_TYPES.has(type);
+  }
+  function shouldRelayMessage(mode, data2) {
+    return mode === 5 /* LOGIN */ && isAuthMessageType(data2);
+  }
   function isConnectMessageType(data2) {
     if (!data2 || typeof data2 !== "object") return false;
     const type = data2.type;
@@ -714,6 +821,12 @@ var ConnectSDK = (() => {
       this.closeLoginPopup = config.closeLoginPopup;
       this.navigateLoginPopup = config.navigateLoginPopup;
     }
+    static setLoginContext(context) {
+      this.iframe = context.iframe;
+      this.loginPopup = context.loginPopup;
+      this.mode = context.mode;
+      this.connectOrigin = new URL(Endpoints.benji_connect_auth_url).origin;
+    }
     static setMode(mode) {
       this.mode = mode;
     }
@@ -729,7 +842,10 @@ var ConnectSDK = (() => {
       window.removeEventListener("unhandledrejection", this.errorEventHandler);
       window.removeEventListener("message", this.messageEventHandler);
       this.configuredListeners = false;
+      this.iframe = null;
+      this.loginPopup = null;
       this.mode = 1 /* CONNECT */;
+      this.connectOrigin = "";
     }
     static handleErrorMessage(event) {
       switch (event.type) {
@@ -749,8 +865,49 @@ var ConnectSDK = (() => {
         }
       }
     }
+    static relayToIframe(event) {
+      var _a;
+      const iframeWindow = (_a = this.iframe) == null ? void 0 : _a.contentWindow;
+      if (!iframeWindow) {
+        console.warn("[Benji Connect SDK] Skipping login auth relay, iframe not ready");
+        return;
+      }
+      iframeWindow.postMessage(event.data, this.connectOrigin);
+    }
+    static relayToPopup(payload) {
+      if (!this.loginPopup) {
+        console.warn("[Benji Connect SDK] Skipping login auth relay, no login popup");
+        return;
+      }
+      try {
+        this.loginPopup.postMessage(payload, "*");
+      } catch (error) {
+        console.error("[Benji Connect SDK] Failed to forward login auth message to popup", error);
+      }
+    }
     static handleMessage(event) {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+      if (shouldRelayMessage(this.mode, event.data) && this.loginPopup) {
+        const expectedOrigin2 = this.connectOrigin || new URL(Endpoints.benji_connect_auth_url).origin;
+        const iframeWindow = (_a = this.iframe) == null ? void 0 : _a.contentWindow;
+        if (event.source === this.loginPopup) {
+          this.relayToIframe(event);
+          return;
+        }
+        if (iframeWindow && event.source === iframeWindow) {
+          if (event.origin !== expectedOrigin2) {
+            console.warn(
+              "[Benji Connect SDK] Skipped auth relay, unexpected origin",
+              event.origin,
+              expectedOrigin2
+            );
+            return;
+          }
+          this.relayToPopup(event.data);
+          return;
+        }
+        return;
+      }
       if (!isConnectMessageType(event.data)) return;
       const expectedOrigin = new URL(Endpoints.benji_connect_auth_url).origin;
       if (!event || event.origin !== expectedOrigin) {
@@ -764,48 +921,53 @@ var ConnectSDK = (() => {
       const message = partial;
       try {
         switch (message.type) {
+          case "PARTNER_LOGIN_OPEN" /* PARTNER_LOGIN_OPEN */: {
+            const connectMessage = message;
+            const url = (_b = connectMessage.data) == null ? void 0 : _b.url;
+            if (url) {
+              (_c = this.navigateLoginPopup) == null ? void 0 : _c.call(this, url);
+            } else {
+              (_d = this.closeLoginPopup) == null ? void 0 : _d.call(this);
+            }
+            break;
+          }
           case "AUTH_SUCCESS" /* AUTH_SUCCESS */: {
             const connectMessage = message;
             const callbackData = BenjiConnectCallbackMapperMap.AUTH_SUCCESS(connectMessage, connectMessage.data);
-            (_a = this.onEvent) == null ? void 0 : _a.call(this, callbackData.type, callbackData.metadata);
+            (_e = this.onEvent) == null ? void 0 : _e.call(this, callbackData.type, callbackData.metadata);
             break;
           }
           case "FLOW_EXIT" /* FLOW_EXIT */: {
             const connectMessage = message;
             const callbackData = BenjiConnectCallbackMapperMap.FLOW_EXIT(connectMessage.data);
-            (_b = this.onExit) == null ? void 0 : _b.call(this, callbackData.metadata);
-            (_c = this.close) == null ? void 0 : _c.call(this);
+            (_f = this.onExit) == null ? void 0 : _f.call(this, callbackData.metadata);
+            (_g = this.close) == null ? void 0 : _g.call(this);
             break;
           }
           case "FLOW_SUCCESS" /* FLOW_SUCCESS */: {
             const connectMessage = message;
             const callbackData = BenjiConnectCallbackMapperMap.FLOW_SUCCESS(connectMessage.data);
-            (_d = this.onSuccess) == null ? void 0 : _d.call(this, callbackData.token, callbackData.metadata);
+            (_h = this.onSuccess) == null ? void 0 : _h.call(this, callbackData.token, callbackData.metadata);
             if (this.mode === 5 /* LOGIN */) {
-              (_e = this.close) == null ? void 0 : _e.call(this);
+              (_i = this.close) == null ? void 0 : _i.call(this);
             }
             break;
           }
           case "ERROR" /* ERROR */: {
             const connectMessage = message;
             const callbackData = BenjiConnectCallbackMapperMap.ERROR(connectMessage.data);
-            (_f = this.onError) == null ? void 0 : _f.call(this, callbackData.error, callbackData.error_id, callbackData.metadata);
+            (_j = this.onError) == null ? void 0 : _j.call(this, callbackData.error, callbackData.error_id, callbackData.metadata);
             break;
           }
           case "EVENT" /* EVENT */: {
             const connectMessage = message;
             const callbackData = mapToOnEventData(connectMessage, connectMessage.data);
-            (_g = this.onEvent) == null ? void 0 : _g.call(this, callbackData.type, callbackData.metadata);
+            (_k = this.onEvent) == null ? void 0 : _k.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);
-            }
+          default: {
+            const _exhaustive = message.type;
+            console.warn("[Benji Connect SDK] Unhandled connect message type", _exhaustive);
             break;
           }
         }
@@ -814,7 +976,10 @@ var ConnectSDK = (() => {
     }
   };
   _MessageRouter.configuredListeners = false;
+  _MessageRouter.iframe = null;
+  _MessageRouter.loginPopup = null;
   _MessageRouter.mode = 1 /* CONNECT */;
+  _MessageRouter.connectOrigin = "";
   _MessageRouter.errorEventHandler = (event) => {
     return _MessageRouter.handleErrorMessage(event);
   };
@@ -907,6 +1072,7 @@ var ConnectSDK = (() => {
         );
         return false;
       }
+      writeLoginPopupLoadingDocument(this.loginPopup);
       this.startPopupClosedPoll();
       return true;
     }
@@ -969,8 +1135,17 @@ var ConnectSDK = (() => {
         return;
       }
       this.openUI();
+      this.syncLoginContext(mode);
+    }
+    syncLoginContext(mode) {
+      MessageRouter.setLoginContext({
+        iframe: this.iframe,
+        loginPopup: this.loginPopup,
+        mode
+      });
     }
     openUI() {
+      var _a;
       if (this.iframe) return;
       const headless = this.isLoginPopupOnly();
       this.container = document.createElement("div");
@@ -1019,9 +1194,9 @@ var ConnectSDK = (() => {
           }
         );
         this.container.addEventListener("click", (e) => {
-          var _a, _b;
+          var _a2, _b;
           if (e.target === this.container) {
-            (_b = (_a = this.sdkConfig).onExit) == null ? void 0 : _b.call(_a, {
+            (_b = (_a2 = this.sdkConfig).onExit) == null ? void 0 : _b.call(_a2, {
               context: buildContext(),
               trigger: "TAPPED_OUT_OF_BOUNDS" /* TAPPED_OUT_OF_BOUNDS */
             });
@@ -1029,6 +1204,7 @@ var ConnectSDK = (() => {
           }
         });
       }
+      this.syncLoginContext((_a = this.sdkConfig.mode) != null ? _a : 1 /* CONNECT */);
     }
     navigateLoginPopup(url) {
       if (!this.loginPopup || this.loginPopup.closed) {