@melio-eng/web-sdk 1.0.5 → 1.0.7

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { InitOptions, OnboardingConfig, SinglePayFlowConfig, BatchPayConfig, SettingsConfig, FlowInstance } from './types';
+import { InitOptions, OnboardingConfig, SinglePayFlowConfig, BatchPayConfig, SettingsConfig, FlowInstance, PaymentsDashboardConfig, SinglePaymentConfig } from './types.js';
 /**
  * Main SDK implementation - now partner agnostic
  */
@@ -40,9 +40,17 @@ export declare class MelioSDK implements MelioSDK {
      * Launch the settings flow
      */
     openSettings(config: SettingsConfig): FlowInstance;
+    /**
+     * Launch the payments dashboard flow
+     */
+    openPaymentsDashboard(config: PaymentsDashboardConfig): FlowInstance;
+    /**
+     * Launch single payment details
+     */
+    openSinglePayment(config: SinglePaymentConfig): FlowInstance;
 }
 /**
  * Export the SDK instance
  */
 export declare const melioSDK: MelioSDK;
-export * from './types';
+export * from "./types.js";

package/dist/index.js

@@ -81,7 +81,11 @@ class Flow {
                 return;
             }
             const { type, data } = event.data;
-            console.log('📬 Received message from iframe:', { type, data, origin: event.origin });
+            console.log('📬 Received message from iframe:', {
+                type,
+                data,
+                origin: event.origin,
+            });
             switch (type) {
                 case 'FLOW_COMPLETED':
                     this.emit('completed', data);
@@ -103,7 +107,7 @@ class Flow {
     emit(event, data) {
         const listeners = this.eventListeners.get(event);
         if (listeners) {
-            listeners.forEach(callback => {
+            listeners.forEach((callback) => {
                 try {
                     callback(data);
                 }
@@ -155,7 +159,7 @@ class SinglePayFlow extends Flow {
      * Construct the specific flow URL for bill payment
      */
     constructFlowUrl(baseUrl) {
-        return `${baseUrl}/${this.partnerName}/payment/new?billId=bill_${this.billId}`;
+        return `${baseUrl}/${this.partnerName}/payment/new?billId=${this.billId}`;
     }
 }
 /**
@@ -170,7 +174,7 @@ class BatchPayFlow extends Flow {
      * Construct the specific flow URL for batch payments
      */
     constructFlowUrl(baseUrl) {
-        const billIds = this.bills.map(bill => `bill_${bill.billId}`).join(',');
+        const billIds = this.bills.join(',');
         return `${baseUrl}/${this.partnerName}/batch-payments/${billIds}`;
     }
 }
@@ -178,14 +182,31 @@ class BatchPayFlow extends Flow {
  * SettingsFlow subclass with custom URL construction
  */
 class SettingsFlow extends Flow {
+    /**
+     * Construct the specific flow URL for settings
+     */
+    constructFlowUrl(baseUrl) {
+        return `${baseUrl}/${this.partnerName}/settings`;
+    }
+}
+class PaymentsDashboardFlow extends Flow {
+    /**
+     * Construct the specific flow URL for payments dashboard
+     */
+    constructFlowUrl(baseUrl) {
+        return `${baseUrl}/${this.partnerName}/pay-dashboard/payments`;
+    }
+}
+class SinglePaymentFlow extends Flow {
     constructor(containerId, config, partnerName, environment) {
         super(containerId, config, partnerName, environment);
+        this.paymentId = config.paymentId;
     }
     /**
-     * Construct the specific flow URL for settings
+     * Construct the specific flow URL for single payment
      */
     constructFlowUrl(baseUrl) {
-        return `${baseUrl}/${this.partnerName}/settings`;
+        return `${baseUrl}/${this.partnerName}/pay-dashboard/payments/${this.paymentId}`;
     }
 }
 /**
@@ -241,7 +262,7 @@ export class MelioSDK {
     createAuthInitUrl(authorizationCode) {
         const params = new URLSearchParams({
             code: authorizationCode,
-            theme: this.partnerName
+            theme: this.partnerName,
         });
         const baseUrl = getBaseUrl(this.environment);
         let finalUrl = `${baseUrl}/${this.partnerName}/auth?${params.toString()}`;
@@ -256,7 +277,7 @@ export class MelioSDK {
         this.keepAliveInterval = window.setInterval(() => {
             if (this.keepAliveIframe && this.keepAliveIframe.contentWindow) {
                 this.keepAliveIframe.contentWindow.postMessage({
-                    type: 'USER_ACTIVE_PING'
+                    type: 'USER_ACTIVE_PING',
                 }, 'https://app.melio.com');
             }
         }, 30000); // Send ping every 30 seconds
@@ -293,10 +314,26 @@ export class MelioSDK {
         flow.initialize();
         return flow;
     }
+    /**
+     * Launch the payments dashboard flow
+     */
+    openPaymentsDashboard(config) {
+        const flow = new PaymentsDashboardFlow(config.containerId, config, this.partnerName, this.environment);
+        flow.initialize();
+        return flow;
+    }
+    /**
+     * Launch single payment details
+     */
+    openSinglePayment(config) {
+        const flow = new SinglePaymentFlow(config.containerId, config, this.partnerName, this.environment);
+        flow.initialize();
+        return flow;
+    }
 }
 /**
  * Export the SDK instance
  */
 export const melioSDK = new MelioSDK();
 // Export types for consumers
-export * from './types';
+export * from "./types.js";

package/dist/types.d.ts

@@ -48,6 +48,18 @@ export interface BatchPayConfig extends BaseFlowConfig {
  */
 export interface SettingsConfig extends BaseFlowConfig {
 }
+/**
+ * Configuration for payments dashboard flow
+ */
+export interface PaymentsDashboardConfig extends BaseFlowConfig {
+}
+/**
+ * Configuration for single payment
+ */
+export interface SinglePaymentConfig extends BaseFlowConfig {
+    /** The Melio bill ID to pay */
+    paymentId: string;
+}
 /**
  * Event payload for navigation events
  */
@@ -127,4 +139,16 @@ export interface MelioSDK {
      * @returns Flow instance for event handling
      */
     openSettings(config: SettingsConfig): FlowInstance;
+    /**
+     * Launch the payments dashboard flow
+     * @param config - Configuration for the payments dashboard flow
+     * @returns Flow instance for event handling
+     */
+    openPaymentsDashboard(config: PaymentsDashboardConfig): FlowInstance;
+    /**
+     * Launch the single payment flow
+     * @param config - Configuration for the single payment flow
+     * @returns Flow instance for event handling
+     */
+    openSinglePayment(config: SinglePaymentConfig): FlowInstance;
 }

package/package.json

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

package/dist/__tests__/setup.js

@@ -1,33 +0,0 @@
-"use strict";
-// Test setup file for Jest
-// This file is automatically loaded by Jest before running tests
-// Mock fetch globally for tests
-global.fetch = jest.fn();
-// Mock window.postMessage for iframe communication tests
-Object.defineProperty(window, 'postMessage', {
-    value: jest.fn(),
-    writable: true,
-});
-// Mock addEventListener for message events
-Object.defineProperty(window, 'addEventListener', {
-    value: jest.fn(),
-    writable: true,
-});
-// Mock document methods
-Object.defineProperty(document, 'getElementById', {
-    value: jest.fn(),
-    writable: true,
-});
-Object.defineProperty(document, 'createElement', {
-    value: jest.fn(),
-    writable: true,
-});
-Object.defineProperty(document, 'body', {
-    value: {
-        appendChild: jest.fn(),
-    },
-    writable: true,
-});
-// Mock setInterval and clearInterval
-global.setInterval = jest.fn();
-global.clearInterval = jest.fn();