@melio-eng/web-sdk 1.0.29 → 1.0.30

package/dist/flows/Flow.d.ts

@@ -0,0 +1,57 @@
+import { FlowInstance, FlowEventType, FlowEventCallback, FlowCompletionData, NavigationData, BaseFlowConfig, Environment, ErrorData } from '../types.js';
+/**
+ * Flow class implementation for handling iframe flows and events
+ */
+export declare class Flow implements FlowInstance {
+    private containerId;
+    protected config: BaseFlowConfig;
+    protected partnerName: string;
+    protected environment: Environment;
+    protected branchOverride?: string | undefined;
+    protected iframe: HTMLIFrameElement | null;
+    private container;
+    private eventListeners;
+    protected keepAliveInterval: number | null;
+    constructor(containerId: string, config: BaseFlowConfig, partnerName: string, environment: Environment, branchOverride?: string | undefined);
+    /**
+     * Initialize the flow by creating and injecting the iframe
+     */
+    initialize(): Promise<void>;
+    /**
+     * Construct the specific flow URL - can be overridden by subclasses
+     */
+    protected constructFlowUrl(baseUrl: string): string;
+    /**
+     * Create flow URL using partner name and environment
+     */
+    protected createFlowUrl(): string;
+    private setupEventListeners;
+    /**
+     * Emit events to registered listeners
+     */
+    protected emit(event: 'completed', data: FlowCompletionData): void;
+    protected emit(event: 'loaded'): void;
+    protected emit(event: 'exit'): void;
+    protected emit(event: 'navigated', data: NavigationData): void;
+    protected emit(event: 'authenticationSucceeded'): void;
+    protected emit(event: 'authenticationFailed'): void;
+    protected emit(event: 'error', data: ErrorData): void;
+    /**
+     * Register an event listener
+     */
+    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;
+    on(event: 'error', callback: (data: ErrorData) => void): void;
+    on(event: 'loaded', callback: () => void): void;
+    /**
+     * Remove an event listener
+     */
+    off(event: FlowEventType, callback: FlowEventCallback): void;
+    /**
+     * Close the flow and clean up resources
+     */
+    close(): void;
+}

package/dist/flows/Flow.js

@@ -0,0 +1,149 @@
+import { getBaseUrl } from './utils.js';
+/**
+ * Flow class implementation for handling iframe flows and events
+ */
+export 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();
+    }
+}

package/dist/flows/InitFlow.d.ts

@@ -0,0 +1,18 @@
+import { InitConfig, Environment } from '../types.js';
+import { Flow } from './Flow.js';
+/**
+ * InitFlow subclass for handling initialization with callbacks
+ */
+export declare class InitFlow extends Flow {
+    private authorizationCode;
+    constructor(containerId: string, config: InitConfig, partnerName: string, environment: Environment, branchOverride?: string);
+    /**
+     * Initialize the init flow by creating and injecting a hidden iframe
+     */
+    initialize(): Promise<void>;
+    /**
+     * Construct the specific flow URL for initialization
+     */
+    protected constructFlowUrl(baseUrl: string): string;
+    setupKeepAlive(): void;
+}

package/dist/flows/InitFlow.js

@@ -0,0 +1,37 @@
+import { Flow } from './Flow.js';
+import { isEmptyString } from './utils.js';
+/**
+ * InitFlow subclass for handling initialization with callbacks
+ */
+export 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() {
+        this.emit('authenticationSucceeded');
+    }
+    /**
+     * 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
+    }
+}

package/dist/flows/OnboardingFlow.d.ts

@@ -0,0 +1,15 @@
+import { OnboardingConfig, Environment } from '../types.js';
+import { Flow } from './Flow.js';
+/**
+ * OnboardingFlow subclass with custom URL construction
+ */
+export declare class OnboardingFlow extends Flow {
+    private preFilledParams;
+    private enforceOnboarding?;
+    private authCode;
+    constructor(containerId: string, config: OnboardingConfig, partnerName: string, environment: Environment, authCode: string, branchOverride?: string);
+    /**
+     * Construct the specific flow URL for onboarding - now goes through /auth
+     */
+    protected constructFlowUrl(baseUrl: string): string;
+}

package/dist/flows/OnboardingFlow.js

@@ -0,0 +1,44 @@
+import { Flow } from './Flow.js';
+import { isEmptyString } from './utils.js';
+/**
+ * OnboardingFlow subclass with custom URL construction
+ */
+export 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}`;
+    }
+}

package/dist/flows/PayFlow.d.ts

@@ -0,0 +1,14 @@
+import { PayFlowConfig, Environment } from '../types.js';
+import { Flow } from './Flow.js';
+/**
+ * PayFlow subclass with custom URL construction
+ */
+export declare class PayFlow extends Flow {
+    private billIds;
+    private authCode;
+    constructor(containerId: string, config: PayFlowConfig, partnerName: string, environment: Environment, authCode: string, branchOverride?: string);
+    /**
+     * Construct the specific flow URL for bill payment - now goes through /auth
+     */
+    protected constructFlowUrl(baseUrl: string): string;
+}

package/dist/flows/PayFlow.js

@@ -0,0 +1,24 @@
+import { Flow } from './Flow.js';
+import { isEmptyString } from './utils.js';
+/**
+ * PayFlow subclass with custom URL construction
+ */
+export 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}`;
+    }
+}

package/dist/flows/PaymentsDashboardFlow.d.ts

@@ -0,0 +1,14 @@
+import { PaymentsDashboardConfig, Environment } from '../types.js';
+import { Flow } from './Flow.js';
+/**
+ * PaymentsDashboardFlow subclass with custom URL construction
+ */
+export declare class PaymentsDashboardFlow extends Flow {
+    private paymentId?;
+    private authCode;
+    constructor(containerId: string, config: PaymentsDashboardConfig, partnerName: string, environment: Environment, authCode: string, branchOverride?: string);
+    /**
+     * Construct the specific flow URL for payments dashboard - now goes through /auth
+     */
+    protected constructFlowUrl(baseUrl: string): string;
+}

package/dist/flows/PaymentsDashboardFlow.js

@@ -0,0 +1,23 @@
+import { Flow } from './Flow.js';
+import { isEmptyString } from './utils.js';
+/**
+ * PaymentsDashboardFlow subclass with custom URL construction
+ */
+export 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}`;
+    }
+}

package/dist/flows/SettingsFlow.d.ts

@@ -0,0 +1,13 @@
+import { SettingsConfig, Environment } from '../types.js';
+import { Flow } from './Flow.js';
+/**
+ * SettingsFlow subclass with custom URL construction
+ */
+export declare class SettingsFlow extends Flow {
+    private authCode;
+    constructor(containerId: string, config: SettingsConfig, partnerName: string, environment: Environment, authCode: string, branchOverride?: string);
+    /**
+     * Construct the specific flow URL for settings - now goes through /auth
+     */
+    protected constructFlowUrl(baseUrl: string): string;
+}

package/dist/flows/SettingsFlow.js

@@ -0,0 +1,22 @@
+import { Flow } from './Flow.js';
+import { isEmptyString } from './utils.js';
+/**
+ * SettingsFlow subclass with custom URL construction
+ */
+export 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}`;
+    }
+}

package/dist/flows/index.d.ts

@@ -0,0 +1,7 @@
+export { Flow } from './Flow.js';
+export { InitFlow } from './InitFlow.js';
+export { OnboardingFlow } from './OnboardingFlow.js';
+export { PayFlow } from './PayFlow.js';
+export { SettingsFlow } from './SettingsFlow.js';
+export { PaymentsDashboardFlow } from './PaymentsDashboardFlow.js';
+export { getBaseUrl, isEmptyString } from './utils.js';

package/dist/flows/index.js

@@ -0,0 +1,7 @@
+export { Flow } from './Flow.js';
+export { InitFlow } from './InitFlow.js';
+export { OnboardingFlow } from './OnboardingFlow.js';
+export { PayFlow } from './PayFlow.js';
+export { SettingsFlow } from './SettingsFlow.js';
+export { PaymentsDashboardFlow } from './PaymentsDashboardFlow.js';
+export { getBaseUrl, isEmptyString } from './utils.js';

package/dist/flows/utils.d.ts

@@ -0,0 +1,6 @@
+import { Environment } from '../types.js';
+/**
+ * Utility function to get the base URL for a given environment
+ */
+export declare function getBaseUrl(environment: Environment): string;
+export declare const isEmptyString: (str: string) => boolean;

package/dist/flows/utils.js

@@ -0,0 +1,24 @@
+/**
+ * Utility function to get the base URL for a given environment
+ */
+export 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';
+    }
+}
+export const isEmptyString = (str) => {
+    return !str?.trim();
+};

package/dist/index.js

@@ -287,7 +287,17 @@ class InitFlow extends Flow {
      * Initialize the init flow by creating and injecting a hidden iframe
      */
     async initialize() {
-        this.emit('authenticationSucceeded');
+        // 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
@@ -332,11 +342,10 @@ export class MelioSDK {
         });
         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);
-        // Defer to next tick to prevent race condition
-        setTimeout(() => {
-            initFlow.initialize();
-            console.log('InitFlow initialized successfully');
-        }, 0);
+        initFlow.initialize();
+        console.log('InitFlow initialized successfully');
+        if (options.keepAlive)
+            initFlow.setupKeepAlive();
         return initFlow;
     }
     /**

package/package.json

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