@melio-eng/web-sdk 1.0.30 → 1.0.31-pr.59.3147594

package/dist/flows/Flow.d.ts

@@ -9,7 +9,7 @@ export declare class Flow implements FlowInstance {
     protected environment: Environment;
     protected branchOverride?: string | undefined;
     protected iframe: HTMLIFrameElement | null;
-    private container;
+    protected container: HTMLElement | null;
     private eventListeners;
     protected keepAliveInterval: number | null;
     constructor(containerId: string, config: BaseFlowConfig, partnerName: string, environment: Environment, branchOverride?: string | undefined);

package/dist/flows/Flow.js

@@ -123,6 +123,7 @@ export class Flow {
         }
         this.eventListeners.get(event).add(callback);
     }
+    /* eslint-enable no-dupe-class-members */
     /**
      * Remove an event listener
      */

package/dist/flows/InitFlow.js

@@ -15,7 +15,15 @@ export class InitFlow extends Flow {
      * Initialize the init flow by creating and injecting a hidden iframe
      */
     async initialize() {
-        this.emit('authenticationSucceeded');
+        this.container = document.body;
+        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';
+        this.container.appendChild(this.iframe);
     }
     /**
      * Construct the specific flow URL for initialization

package/dist/flows/OnboardingFlow.js

@@ -18,7 +18,7 @@ export class OnboardingFlow extends Flow {
      * Construct the specific flow URL for onboarding - now goes through /auth
      */
     constructFlowUrl(baseUrl) {
-        const params = Object.fromEntries(Object.entries(this.preFilledParams).filter(([_, v]) => v !== undefined));
+        const params = Object.fromEntries(Object.entries(this.preFilledParams).filter(([, v]) => v !== undefined));
         let preFilledBase64 = '';
         if (Object.keys(params).length > 0) {
             try {

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export declare class MelioSDK implements MelioSDK {
     private partnerName;
     private branchOverride;
     private authCode;
+    private initFlow;
     constructor();
     /**
      * Initialize the SDK - triggers auth event without creating iframe

package/dist/index.js

@@ -1,322 +1,4 @@
-/**
- * Utility function to get the base URL for a given environment
- */
-function getBaseUrl(environment) {
-    switch (environment) {
-        case 'production':
-            return 'https://partnerships.production.melioservices.com';
-        case 'staging01':
-            return 'https://partnerships.staging01.melioservices.com';
-        case 'public-qa':
-            return 'https://partnerships.public-qa.melioservices.com';
-        case 'certification':
-            return 'https://partnerships.certification.melioservices.com';
-        case 'eilat':
-            return 'https://partnerships.eilat.melioservices.com';
-        case 'localhost':
-            return 'http://localhost:3005';
-        default:
-            return 'https://partnerships.melioservices.com';
-    }
-}
-const isEmptyString = (str) => {
-    return !str?.trim();
-};
-/**
- * Flow class implementation for handling iframe flows and events
- */
-class Flow {
-    constructor(containerId, config, partnerName, environment, branchOverride) {
-        this.containerId = containerId;
-        this.config = config;
-        this.partnerName = partnerName;
-        this.environment = environment;
-        this.branchOverride = branchOverride;
-        this.iframe = null;
-        this.container = null;
-        this.eventListeners = new Map();
-        this.keepAliveInterval = null;
-        this.setupEventListeners();
-    }
-    /**
-     * Initialize the flow by creating and injecting the iframe
-     */
-    async initialize() {
-        this.container = document.getElementById(this.containerId);
-        if (!this.container) {
-            throw new Error(`Container with ID "${this.containerId}" not found`);
-        }
-        this.iframe = document.createElement('iframe');
-        this.iframe.src = this.createFlowUrl();
-        this.iframe.style.width = '100%';
-        this.iframe.style.height = '1000px';
-        this.iframe.style.border = 'none';
-        this.iframe.style.display = 'block';
-        this.container.appendChild(this.iframe);
-    }
-    /**
-     * Construct the specific flow URL - can be overridden by subclasses
-     */
-    constructFlowUrl(baseUrl) {
-        return `${baseUrl}/${this.partnerName}/auth`;
-    }
-    /**
-     * Create flow URL using partner name and environment
-     */
-    createFlowUrl() {
-        console.log('🔧 Creating flow URL...');
-        console.log('📝 Config:', this.config);
-        console.log('🏢 Partner:', this.partnerName);
-        console.log('🌍 Environment:', this.environment);
-        console.log('🔝 Branch Override:', this.branchOverride);
-        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}`;
-        }
-        console.log('🌐 Final URL:', finalUrl);
-        return finalUrl;
-    }
-    setupEventListeners() {
-        // Add post message handlers for internal events - setHeight, scroll etc
-        // Also need to implement callbacks for flow completed exit etc in the platform-app
-        window.addEventListener('message', (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 'FLOW_COMPLETED':
-                    this.emit('completed', data);
-                    break;
-                case 'FLOW_EXIT':
-                    this.emit('exit');
-                    break;
-                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;
-                case 'READY_FOR_INTERACTION':
-                    this.emit('loaded');
-                    break;
-                case 'MELIO_ERROR':
-                    if (data.code === 'failed_to_sync_bills') {
-                        this.emit('error', { errorCode: 'billsSyncFailed' });
-                    }
-                    break;
-                case 'HEIGHT_CHANGE':
-                    if (this.iframe) {
-                        this.iframe.style.height = `${data.height}px`;
-                    }
-                    break;
-            }
-        });
-    }
-    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);
-                }
-            });
-        }
-    }
-    on(event, callback) {
-        if (!this.eventListeners.has(event)) {
-            this.eventListeners.set(event, new Set());
-        }
-        this.eventListeners.get(event).add(callback);
-    }
-    /**
-     * 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;
-        }
-        this.eventListeners.clear();
-    }
-}
-/**
- * OnboardingFlow subclass with custom URL construction
- */
-class OnboardingFlow extends Flow {
-    constructor(containerId, config, partnerName, environment, authCode, branchOverride) {
-        super(containerId, config, partnerName, environment, branchOverride);
-        const { userDetails, organizationDetails, enforceOnboarding } = config;
-        this.preFilledParams = { userDetails, organizationDetails };
-        this.enforceOnboarding = enforceOnboarding;
-        this.authCode = authCode;
-        if (isEmptyString(this.authCode)) {
-            throw new Error('Authorization code is required for onboarding flow. Please call init() before opening onboarding flow.');
-        }
-    }
-    /**
-     * Construct the specific flow URL for onboarding - now goes through /auth
-     */
-    constructFlowUrl(baseUrl) {
-        const params = Object.fromEntries(Object.entries(this.preFilledParams).filter(([_, v]) => v !== undefined));
-        let preFilledBase64 = '';
-        if (Object.keys(params).length > 0) {
-            try {
-                const json = JSON.stringify(params);
-                preFilledBase64 = btoa(unescape(encodeURIComponent(json)));
-            }
-            catch (e) {
-                preFilledBase64 = '';
-            }
-        }
-        const targetQueryParams = [];
-        if (preFilledBase64) {
-            targetQueryParams.push(`preFilledParams=${encodeURIComponent(preFilledBase64)}`);
-        }
-        if (this.enforceOnboarding !== undefined) {
-            targetQueryParams.push(`enforceOnboarding=${this.enforceOnboarding}`);
-        }
-        targetQueryParams.push(`externalOrigin=${this.partnerName}`);
-        const target = `/welcome?${targetQueryParams.join('&')}`;
-        const encodedTarget = encodeURIComponent(target);
-        return `${baseUrl}/${this.partnerName}/auth?token=${this.authCode}&redirectUrl=${encodedTarget}`;
-    }
-}
-/**
- * PayFlow subclass with custom URL construction
- */
-class PayFlow extends Flow {
-    constructor(containerId, config, partnerName, environment, authCode, branchOverride) {
-        super(containerId, config, partnerName, environment, branchOverride);
-        this.billIds = config.billIds;
-        this.authCode = authCode;
-        if (isEmptyString(this.authCode)) {
-            throw new Error('Authorization code is required for pay flow. Please call init() before opening pay flow.');
-        }
-    }
-    /**
-     * Construct the specific flow URL for bill payment - now goes through /auth
-     */
-    constructFlowUrl(baseUrl) {
-        const billIdsParam = this.billIds.join(',');
-        const target = `/external-entries/payment-flow?billIds=${billIdsParam}&externalOrigin=${this.partnerName}`;
-        const encodedTarget = encodeURIComponent(target);
-        return `${baseUrl}/${this.partnerName}/auth?token=${this.authCode}&redirectUrl=${encodedTarget}`;
-    }
-}
-/**
- * SettingsFlow subclass with custom URL construction
- */
-class SettingsFlow extends Flow {
-    constructor(containerId, config, partnerName, environment, authCode, branchOverride) {
-        super(containerId, config, partnerName, environment, branchOverride);
-        this.authCode = authCode;
-        if (isEmptyString(this.authCode)) {
-            throw new Error('Authorization code is required for settings flow. Please call init() before opening settings flow.');
-        }
-    }
-    /**
-     * Construct the specific flow URL for settings - now goes through /auth
-     */
-    constructFlowUrl(baseUrl) {
-        const target = '/view-settings';
-        const encodedTarget = encodeURIComponent(target);
-        return `${baseUrl}/${this.partnerName}/auth?token=${this.authCode}&redirectUrl=${encodedTarget}`;
-    }
-}
-class PaymentsDashboardFlow extends Flow {
-    constructor(containerId, config, partnerName, environment, authCode, branchOverride) {
-        super(containerId, config, partnerName, environment, branchOverride);
-        this.paymentId = config.paymentId;
-        this.authCode = authCode;
-        if (isEmptyString(this.authCode)) {
-            throw new Error('Authorization code is required for payments dashboard flow. Please call init() before opening payments dashboard flow.');
-        }
-    }
-    /**
-     * Construct the specific flow URL for payments dashboard - now goes through /auth
-     */
-    constructFlowUrl(baseUrl) {
-        const target = `/pay-dashboard/payments${this.paymentId ? `/${this.paymentId}` : ''}`;
-        const encodedTarget = encodeURIComponent(target);
-        return `${baseUrl}/${this.partnerName}/auth?token=${this.authCode}&redirectUrl=${encodedTarget}`;
-    }
-}
-/**
- * InitFlow subclass for handling initialization with callbacks
- */
-class InitFlow extends Flow {
-    constructor(containerId, config, partnerName, environment, branchOverride) {
-        super(containerId, config, partnerName, environment, branchOverride);
-        if (isEmptyString(config.authCode)) {
-            throw new Error('Authorization code is required for init flow');
-        }
-        this.authorizationCode = config.authCode;
-    }
-    /**
-     * 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
-        // Set container to document.body so parent's close() method can remove it
-        this.container = document.body;
-        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';
-        this.container.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}/auth?${params.toString()}`;
-    }
-    setupKeepAlive() {
-        this.keepAliveInterval = window.setInterval(() => {
-            if (this.iframe && this.iframe.contentWindow) {
-                this.iframe.contentWindow.postMessage({ type: 'USER_ACTIVE_PING' }, '*');
-            }
-        }, 30000); // Send ping every 30 seconds
-    }
-}
+import { InitFlow, OnboardingFlow, PayFlow, SettingsFlow, PaymentsDashboardFlow, isEmptyString, } from './flows/index.js';
 /**
  * Main SDK implementation - now partner agnostic
  */
@@ -327,11 +9,16 @@ export class MelioSDK {
         this.partnerName = '';
         this.branchOverride = undefined;
         this.authCode = '';
+        this.initFlow = null;
     }
     /**
      * Initialize the SDK - triggers auth event without creating iframe
      */
     init(authenticationCode, options) {
+        if (this.initFlow) {
+            console.log('SDK already initialized. Returning existing init flow instance.');
+            return this.initFlow;
+        }
         this.partnerName = options.partnerName;
         this.environment = options.environment || 'production';
         this.branchOverride = options.branchOverride;
@@ -346,7 +33,8 @@ export class MelioSDK {
         console.log('InitFlow initialized successfully');
         if (options.keepAlive)
             initFlow.setupKeepAlive();
-        return initFlow;
+        this.initFlow = initFlow;
+        return this.initFlow;
     }
     /**
      * Launch the onboarding flow

package/package.json

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