@melio-eng/web-sdk 1.0.15 → 1.0.16-pr.31.45a86e9

package/dist/index.d.ts

@@ -1,29 +1,18 @@
-import { InitOptions, OnboardingConfig, SettingsConfig, FlowInstance, PaymentsDashboardConfig, PayFlowConfig } from './types.js';
+import { InitOptions, InitConfig, OnboardingConfig, SettingsConfig, FlowInstance, PaymentsDashboardConfig, PayFlowConfig } from './types.js';
 /**
  * Main SDK implementation - now partner agnostic
  */
 export declare class MelioSDK implements MelioSDK {
-    private isInitialized;
-    private authIframe;
     private keepAliveIframe;
     private keepAliveInterval;
-    private initPromise;
     private environment;
     private partnerName;
     private branchOverride;
     constructor();
     /**
-     * Initialize the SDK by creating an authentication iframe
+     * Initialize the SDK by creating an authentication flow
      */
-    init(authorizationCode: string, options: InitOptions): Promise<void>;
-    /**
-     * Perform the actual initialization
-     */
-    private performInit;
-    /**
-     * Create authentication initialization URL using partner name and environment
-     */
-    private createAuthInitUrl;
+    init(config: InitConfig, options: InitOptions): FlowInstance;
     private setupKeepAlive;
     /**
      * Launch the onboarding flow

package/dist/index.js

@@ -231,69 +231,62 @@ class PaymentsDashboardFlow extends Flow {
         return `${baseUrl}/${this.partnerName}/pay-dashboard/payments`;
     }
 }
+/**
+ * InitFlow subclass for handling initialization with callbacks
+ */
+class InitFlow extends Flow {
+    constructor(containerId, config, partnerName, environment, branchOverride) {
+        super(containerId, config, partnerName, environment, branchOverride);
+        this.authorizationCode = config.authorizationCode;
+    }
+    /**
+     * Initialize the init flow by creating and injecting a hidden iframe
+     */
+    async initialize() {
+        // For init flow, we create a hidden iframe instead of a visible one
+        this.iframe = document.createElement('iframe');
+        this.iframe.src = this.createFlowUrl();
+        this.iframe.style.width = '1px';
+        this.iframe.style.height = '1px';
+        this.iframe.style.position = 'absolute';
+        this.iframe.style.left = '-9999px';
+        this.iframe.style.top = '-9999px';
+        document.body.appendChild(this.iframe);
+    }
+    /**
+     * Construct the specific flow URL for initialization
+     */
+    constructFlowUrl(baseUrl) {
+        const params = new URLSearchParams({
+            token: this.authorizationCode,
+            theme: this.partnerName,
+        });
+        return `${baseUrl}/${this.partnerName}/start?${params.toString()}`;
+    }
+}
 /**
  * Main SDK implementation - now partner agnostic
  */
 export class MelioSDK {
     constructor() {
-        this.isInitialized = false;
-        this.authIframe = null;
         this.keepAliveIframe = null;
         this.keepAliveInterval = null;
-        this.initPromise = null;
         this.environment = 'production';
         this.partnerName = '';
         this.branchOverride = undefined;
     }
     /**
-     * Initialize the SDK by creating an authentication iframe
+     * Initialize the SDK by creating an authentication flow
      */
-    async init(authorizationCode, options) {
-        // Prevent multiple simultaneous init calls
-        if (this.initPromise) {
-            return this.initPromise;
-        }
+    init(config, options) {
         // Set partner name and environment from options
         this.partnerName = options.partnerName;
         this.environment = options.environment || 'production';
         this.branchOverride = options.branchOverride;
-        this.initPromise = this.performInit(authorizationCode, options);
-        return this.initPromise;
-    }
-    /**
-     * Perform the actual initialization
-     */
-    async performInit(authorizationCode, options) {
-        if (this.isInitialized) {
-            return;
-        }
-        return new Promise((resolve, reject) => {
-            // Create hidden iframe for authentication
-            this.authIframe = document.createElement('iframe');
-            this.authIframe.src = this.createAuthInitUrl(authorizationCode);
-            this.authIframe.style.width = '1px';
-            this.authIframe.style.height = '1px';
-            // Add iframe to document
-            document.body.appendChild(this.authIframe);
-            this.setupKeepAlive();
-            resolve();
-        });
-    }
-    /**
-     * Create authentication initialization URL using partner name and environment
-     */
-    createAuthInitUrl(authorizationCode) {
-        const params = new URLSearchParams({
-            token: authorizationCode,
-            theme: this.partnerName,
-        });
-        const baseUrl = getBaseUrl(this.environment);
-        let finalUrl = `${baseUrl}/${this.partnerName}/start?${params.toString()}`;
-        // Add cdn_branch_override parameter for non-production environments
-        if (this.branchOverride && this.environment !== 'production') {
-            finalUrl += `&cdn_branch_override=${this.branchOverride}`;
-        }
-        return finalUrl;
+        const flow = new InitFlow(config.containerId, config, this.partnerName, this.environment, this.branchOverride);
+        flow.initialize();
+        this.setupKeepAlive();
+        return flow;
     }
     setupKeepAlive() {
         // Send periodic pings to keep session alive

package/dist/types.d.ts

@@ -64,6 +64,13 @@ export interface SettingsConfig extends BaseFlowConfig {
  */
 export interface PaymentsDashboardConfig extends BaseFlowConfig {
 }
+/**
+ * Configuration for init flow
+ */
+export interface InitConfig extends BaseFlowConfig {
+    /** The authorization code for initialization */
+    authorizationCode: string;
+}
 /**
  * Event data for navigation events
  */
@@ -99,6 +106,8 @@ export interface FlowInstance {
     on(event: 'completed', callback: (data: FlowCompletionData) => void): void;
     on(event: 'exit', callback: () => void): void;
     on(event: 'navigated', callback: (payload: NavigationData) => void): void;
+    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
@@ -116,10 +125,11 @@ export interface FlowInstance {
 export interface MelioSDK {
     /**
      * Initialize the SDK with the provided authorization code
-     * @param authorizationCode - OAuth code received from the partner
+     * @param config - Configuration for the init flow
      * @param options - Initialization options
+     * @returns Flow instance for event handling
      */
-    init(authorizationCode: string, options: InitOptions): Promise<void>;
+    init(config: InitConfig, options: InitOptions): FlowInstance;
     /**
      * Launch the onboarding flow
      * @param config - Configuration for the onboarding flow

package/package.json

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