@melio-eng/web-sdk 1.0.6 → 1.0.8

package/dist/index.d.ts

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

package/dist/index.js

@@ -73,15 +73,19 @@ class Flow {
         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
+        // 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) => {
             // Verify origin for security
             if (event.origin !== 'https://app.melio.com') {
                 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}`;
     }
 }
 /**
@@ -164,13 +168,13 @@ class SinglePayFlow extends Flow {
 class BatchPayFlow extends Flow {
     constructor(containerId, config, partnerName, environment) {
         super(containerId, config, partnerName, environment);
-        this.bills = config.bills;
+        this.billIds = config.billIds;
     }
     /**
      * Construct the specific flow URL for batch payments
      */
     constructFlowUrl(baseUrl) {
-        const billIds = this.bills.map(bill => `bill_${bill.billId}`).join(',');
+        const billIds = this.billIds.join(',');
         return `${baseUrl}/${this.partnerName}/batch-payments/${billIds}`;
     }
 }
@@ -178,9 +182,6 @@ class BatchPayFlow extends Flow {
  * SettingsFlow subclass with custom URL construction
  */
 class SettingsFlow extends Flow {
-    constructor(containerId, config, partnerName, environment) {
-        super(containerId, config, partnerName, environment);
-    }
     /**
      * Construct the specific flow URL for settings
      */
@@ -188,6 +189,14 @@ class SettingsFlow extends Flow {
         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`;
+    }
+}
 /**
  * Main SDK implementation - now partner agnostic
  */
@@ -241,7 +250,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 +265,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,6 +302,14 @@ 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;
+    }
 }
 /**
  * Export the SDK instance

package/dist/types.d.ts

@@ -31,23 +31,26 @@ export interface OnboardingConfig extends BaseFlowConfig {
  * Configuration for single pay flow
  */
 export interface SinglePayFlowConfig extends BaseFlowConfig {
-    /** The Melio bill ID to pay */
+    /** The bill ID to pay */
     billId: string;
 }
 /**
  * Configuration for batch pay flow
  */
 export interface BatchPayConfig extends BaseFlowConfig {
-    /** Array of bills to pay */
-    bills: Array<{
-        billId: string;
-    }>;
+    /** Array of bill IDs to pay */
+    billIds: Array<string>;
 }
 /**
  * Configuration for settings flow
  */
 export interface SettingsConfig extends BaseFlowConfig {
 }
+/**
+ * Configuration for payments dashboard flow
+ */
+export interface PaymentsDashboardConfig extends BaseFlowConfig {
+}
 /**
  * Event payload for navigation events
  */
@@ -127,4 +130,10 @@ 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;
 }

package/package.json

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