@melio-eng/web-sdk 1.0.32 → 1.0.33-pr.61.157f964

package/dist/flows/Flow.d.ts

@@ -12,7 +12,7 @@ export declare class Flow implements FlowInstance {
     protected container: HTMLElement | null;
     private eventListeners;
     protected keepAliveInterval: number | null;
-    private messageHandler;
+    protected messageHandler: ((event: MessageEvent) => void) | null;
     constructor(containerId: string, config: BaseFlowConfig, partnerName: string, environment: Environment, branchOverride?: string | undefined);
     /**
      * Initialize the flow by creating and injecting the iframe
@@ -26,7 +26,7 @@ export declare class Flow implements FlowInstance {
      * Create flow URL using partner name and environment
      */
     protected createFlowUrl(): string;
-    private setupEventListeners;
+    protected setupEventListeners(): void;
     /**
      * Emit events to registered listeners
      */

package/dist/flows/Flow.js

@@ -80,12 +80,6 @@ export class Flow {
                 case 'NAVIGATED_TO_TARGET':
                     this.emit('navigated', data);
                     break;
-                case 'AUTHENTICATION_SUCCESS':
-                    this.emit('authenticationSucceeded');
-                    break;
-                case 'AUTHENTICATION_ERROR':
-                    this.emit('authenticationFailed');
-                    break;
                 case 'ONBOARDING_COMPLETED':
                     this.emit('completed', { flowName: 'onboarding', ...data });
                     break;

package/dist/flows/InitFlow.d.ts

@@ -1,11 +1,19 @@
-import { InitConfig, Environment } from '../types.js';
-import { Flow } from './Flow.js';
+import { InitConfig, Environment, FlowEventType, FlowEventCallback, InitFlowInstance } from '../types.js';
 /**
- * InitFlow subclass for handling initialization with callbacks
+ * Standalone InitFlow class for handling initialization with callbacks
  */
-export declare class InitFlow extends Flow {
+export declare class InitFlow implements InitFlowInstance {
+    private iframe;
+    private container;
+    private eventListeners;
+    private keepAliveInterval;
+    private messageHandler;
     private authorizationCode;
-    constructor(containerId: string, config: InitConfig, partnerName: string, environment: Environment, branchOverride?: string);
+    private config;
+    private partnerName;
+    private environment;
+    private branchOverride?;
+    constructor(config: InitConfig, partnerName: string, environment: Environment, branchOverride?: string);
     /**
      * Initialize the init flow by creating and injecting a hidden iframe
      */
@@ -13,6 +21,30 @@ export declare class InitFlow extends Flow {
     /**
      * Construct the specific flow URL for initialization
      */
-    protected constructFlowUrl(baseUrl: string): string;
+    private constructFlowUrl;
+    /**
+     * Create flow URL using partner name and environment
+     */
+    private createFlowUrl;
+    /**
+     * Setup event listeners to only handle authentication events
+     */
+    private setupEventListeners;
+    /**
+     * Emit events to registered listeners
+     */
+    private emit;
+    /**
+     * Register an event listener
+     */
+    on(event: 'authenticationSucceeded' | 'authenticationFailed', callback: FlowEventCallback): void;
+    /**
+     * Remove an event listener
+     */
+    off(event: FlowEventType, callback: FlowEventCallback): void;
+    /**
+     * Close the flow and clean up resources
+     */
+    close(): void;
     setupKeepAlive(): void;
 }

package/dist/flows/InitFlow.js

@@ -1,15 +1,23 @@
-import { Flow } from './Flow.js';
-import { isEmptyString } from './utils.js';
+import { isEmptyString, getBaseUrl } from './utils.js';
 /**
- * InitFlow subclass for handling initialization with callbacks
+ * Standalone InitFlow class for handling initialization with callbacks
  */
-export class InitFlow extends Flow {
-    constructor(containerId, config, partnerName, environment, branchOverride) {
-        super(containerId, config, partnerName, environment, branchOverride);
+export class InitFlow {
+    constructor(config, partnerName, environment, branchOverride) {
+        this.iframe = null;
+        this.container = null;
+        this.eventListeners = new Map();
+        this.keepAliveInterval = null;
+        this.messageHandler = null;
         if (isEmptyString(config.authCode)) {
             throw new Error('Authorization code is required for init flow');
         }
         this.authorizationCode = config.authCode;
+        this.config = config;
+        this.partnerName = partnerName;
+        this.environment = environment;
+        this.branchOverride = branchOverride;
+        this.setupEventListeners();
     }
     /**
      * Initialize the init flow by creating and injecting a hidden iframe
@@ -35,6 +43,98 @@ export class InitFlow extends Flow {
         });
         return `${baseUrl}/${this.partnerName}/auth?${params.toString()}`;
     }
+    /**
+     * Create flow URL using partner name and environment
+     */
+    createFlowUrl() {
+        const baseUrl = getBaseUrl(this.environment);
+        let finalUrl = this.constructFlowUrl(baseUrl);
+        // Add cdn_branch_override parameter for non-production environments
+        if (this.branchOverride && this.environment !== 'production') {
+            const separator = finalUrl.includes('?') ? '&' : '?';
+            finalUrl += `${separator}cdn_branch_override=${this.branchOverride}`;
+        }
+        return finalUrl;
+    }
+    /**
+     * Setup event listeners to only handle authentication events
+     */
+    setupEventListeners() {
+        this.messageHandler = (event) => {
+            if (!/melio\.com|melioservices\.com/.test(event.origin)) {
+                return;
+            }
+            const { type, ...data } = event.data;
+            console.log('📬 Received message from iframe:', {
+                type,
+                data,
+                origin: event.origin,
+            });
+            switch (type) {
+                case 'AUTHENTICATION_SUCCESS':
+                    this.emit('authenticationSucceeded');
+                    break;
+                case 'AUTHENTICATION_ERROR':
+                    this.emit('authenticationFailed');
+                    break;
+            }
+        };
+        window.addEventListener('message', this.messageHandler);
+    }
+    /**
+     * Emit events to registered listeners
+     */
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+    emit(event, data) {
+        const listeners = this.eventListeners.get(event);
+        if (listeners) {
+            listeners.forEach((callback) => {
+                try {
+                    callback(data);
+                }
+                catch (error) {
+                    console.error(`Error in ${event} event listener:`, error);
+                }
+            });
+        }
+    }
+    /**
+     * Register an event listener
+     */
+    on(event, callback) {
+        if (!this.eventListeners.has(event)) {
+            this.eventListeners.set(event, new Set());
+        }
+        this.eventListeners.get(event).add(callback);
+    }
+    /* eslint-enable no-dupe-class-members */
+    /**
+     * Remove an event listener
+     */
+    off(event, callback) {
+        const listeners = this.eventListeners.get(event);
+        if (listeners) {
+            listeners.delete(callback);
+        }
+    }
+    /**
+     * Close the flow and clean up resources
+     */
+    close() {
+        if (this.keepAliveInterval) {
+            clearInterval(this.keepAliveInterval);
+            this.keepAliveInterval = null;
+        }
+        if (this.iframe && this.container) {
+            this.container.removeChild(this.iframe);
+            this.iframe = null;
+        }
+        if (this.messageHandler) {
+            window.removeEventListener('message', this.messageHandler);
+            this.messageHandler = null;
+        }
+        this.eventListeners.clear();
+    }
     setupKeepAlive() {
         this.keepAliveInterval = window.setInterval(() => {
             if (this.iframe && this.iframe.contentWindow) {

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { InitOptions, OnboardingConfig, SettingsConfig, FlowInstance, PaymentsDashboardConfig, PayFlowConfig } from './types.js';
+import { InitOptions, OnboardingConfig, SettingsConfig, FlowInstance, PaymentsDashboardConfig, PayFlowConfig, InitFlowInstance } from './types.js';
 /**
  * Main SDK implementation - now partner agnostic
  */
@@ -13,7 +13,7 @@ export declare class MelioSDK implements MelioSDK {
     /**
      * Initialize the SDK - triggers auth event without creating iframe
      */
-    init(authenticationCode: string, options: InitOptions): FlowInstance;
+    init(authenticationCode: string, options: InitOptions): InitFlowInstance;
     /**
      * Launch the onboarding flow
      */

package/dist/index.js

@@ -27,8 +27,7 @@ export class MelioSDK {
             partnerName: this.partnerName,
             environment: this.environment,
         });
-        const initFlow = new InitFlow('', // no need container id for init flow as it is created inside the initialization
-        { authCode: authenticationCode, containerId: '' }, this.partnerName, this.environment, this.branchOverride);
+        const initFlow = new InitFlow({ authCode: authenticationCode, containerId: '' }, this.partnerName, this.environment, this.branchOverride);
         initFlow.initialize();
         console.log('InitFlow initialized successfully');
         if (options.keepAlive)

package/dist/types.d.ts

@@ -133,6 +133,25 @@ export interface FlowInstance {
      */
     close(): void;
 }
+export interface InitFlowInstance {
+    /**
+     * Register an event listener for this flow
+     * @param event - The event type to listen for
+     * @param callback - The callback function to execute when the event occurs
+     */
+    on(event: 'authenticationSucceeded', callback: () => void): void;
+    on(event: 'authenticationFailed', callback: () => void): void;
+    /**
+     * Remove an event listener for this flow
+     * @param event - The event type to remove listener for
+     * @param callback - The callback function to remove
+     */
+    off(event: FlowEventType, callback: FlowEventCallback): void;
+    /**
+     * Close the flow and clean up resources
+     */
+    close(): void;
+}
 /**
  * Main SDK interface
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@melio-eng/web-sdk",
-  "version": "1.0.32",
+  "version": "1.0.33-pr.61.157f964",
   "description": "Melio Web SDK - Embed core Melio workflows directly into partner UI with minimal effort",
   "main": "dist/index.js",
   "module": "dist/index.js",