@melio-eng/web-sdk 1.1.0-pr.94.438ff96 → 1.2.0-pr.94.95a5a43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -178,14 +178,14 @@ flow.on("navigated", (p) => console.log("Navigated to:", p.target));
178
178
  - `error`: A flow error occurred (e.g. `billsSyncFailed`)
179
179
  - `exit`: The user exited the iframe
180
180
  - `navigated`: Navigation occurred inside the iframe
181
- - `partnerActionRequired`: Melio needs your page to navigate somewhere it cannot reach itself (see below)
181
+ - `buttonClicked`: The user clicked a button whose destination is in your product (see below)
182
182
  - `authenticationSucceeded` / `authenticationFailed`: emitted on the `init` instance
183
183
 
184
- #### Partner actions (`partnerActionRequired`)
184
+ #### Button clicks (`buttonClicked`)
185
185
 
186
186
  Some Melio screens contain buttons whose destination lives in **your** product, not in Melio —
187
187
  today the "+ Quick payment" button on the payments dashboard, which should take the user to
188
- your own supplier selection page. Melio cannot navigate the host page, so it emits an event
188
+ your own supplier selection page. Melio cannot navigate the host page, so it reports the click
189
189
  and waits for you:
190
190
 
191
191
  ```typescript
@@ -193,19 +193,21 @@ const dashboard = melioSDK.openPaymentsDashboard({
193
193
  containerId: "melio-dashboard-container",
194
194
  });
195
195
 
196
- dashboard.on("partnerActionRequired", (action) => {
197
- if (action.requiredAction === "NAVIGATE_TO_NEW_PAYMENT") {
196
+ dashboard.on("buttonClicked", ({ type }) => {
197
+ if (type === "quickPayment") {
198
198
  window.location.assign("/suppliers/select");
199
199
  }
200
200
  });
201
201
  ```
202
202
 
203
- | `requiredAction` | Emitted when | What you should do |
203
+ | `type` | Emitted when | What you should do |
204
204
  |---|---|---|
205
- | `NAVIGATE_TO_NEW_PAYMENT` | The user clicks the new payment button on the payments dashboard | Take them to your supplier selection page, then open a pay flow |
205
+ | `quickPayment` | The user clicks the quick payment button on the payments dashboard | Take them to your supplier selection page, then open a pay flow |
206
206
 
207
- Without a listener the button does nothing at all. Further actions ship in minor releases, so
208
- switch on `requiredAction` and treat an unrecognised value as a no-op.
207
+ Without a listener the button does nothing at all. Only buttons whose destination is in your
208
+ product are reported here — buttons that end a flow keep their existing events, so "Back to
209
+ bills" still arrives as `completed`. Further button types ship in minor releases, so switch on
210
+ `type` and treat an unrecognised value as a no-op.
209
211
 
210
212
  ## 💡 Examples
211
213
 
@@ -1,4 +1,4 @@
1
- import { FlowInstance, FlowEventType, FlowEventCallback, FlowCompletionData, NavigationData, PartnerActionData, BaseFlowConfig, Environment, ErrorData } from '../types.js';
1
+ import { FlowInstance, FlowEventType, FlowEventCallback, FlowCompletionData, NavigationData, ButtonClickedData, BaseFlowConfig, Environment, ErrorData } from '../types.js';
2
2
  /**
3
3
  * Flow class implementation for handling iframe flows and events
4
4
  */
@@ -33,7 +33,7 @@ export declare class Flow implements FlowInstance {
33
33
  protected emit(event: 'completed', data: FlowCompletionData): void;
34
34
  protected emit(event: 'loaded'): void;
35
35
  protected emit(event: 'exit'): void;
36
- protected emit(event: 'partnerActionRequired', data: PartnerActionData): void;
36
+ protected emit(event: 'buttonClicked', data: ButtonClickedData): void;
37
37
  protected emit(event: 'navigated', data: NavigationData): void;
38
38
  protected emit(event: 'authenticationSucceeded'): void;
39
39
  protected emit(event: 'authenticationFailed'): void;
@@ -45,7 +45,7 @@ export declare class Flow implements FlowInstance {
45
45
  */
46
46
  on(event: 'completed', callback: (data: FlowCompletionData) => void): void;
47
47
  on(event: 'exit', callback: () => void): void;
48
- on(event: 'partnerActionRequired', callback: (data: PartnerActionData) => void): void;
48
+ on(event: 'buttonClicked', callback: (data: ButtonClickedData) => void): void;
49
49
  on(event: 'navigated', callback: (payload: NavigationData) => void): void;
50
50
  on(event: 'authenticationSucceeded', callback: () => void): void;
51
51
  on(event: 'authenticationFailed', callback: () => void): void;
@@ -78,12 +78,8 @@ export class Flow {
78
78
  this.emit('exit');
79
79
  break;
80
80
  case 'PARTNER_ACTION_REQUIRED':
81
- // Only the new payment request is routed today; every other
82
- // requiredAction is ignored until the SDK declares it.
83
81
  if (data.data?.requiredAction === 'NAVIGATE_TO_NEW_PAYMENT') {
84
- this.emit('partnerActionRequired', {
85
- requiredAction: 'NAVIGATE_TO_NEW_PAYMENT',
86
- });
82
+ this.emit('buttonClicked', { type: 'quickPayment' });
87
83
  }
88
84
  break;
89
85
  case 'NAVIGATED_TO_TARGET':
package/dist/types.d.ts CHANGED
@@ -130,22 +130,21 @@ export interface NavigationData {
130
130
  targetAction: 'schedulePayment' | 'scheduleBatchPayments' | 'viewSubscriptionPlans' | 'viewSettingsCollaborators' | 'viewPayment' | 'viewPaidPayment' | 'viewBill' | 'addNewBill' | 'viewVendors' | 'addVendor' | 'viewSettings' | 'viewArInvoices' | 'redirect';
131
131
  }
132
132
  /**
133
- * An action the embedded Melio app cannot perform itself and is asking your page to
134
- * perform. Delivered by the `partnerActionRequired` event.
133
+ * Which button the user clicked inside the embedded Melio app, delivered by the
134
+ * `buttonClicked` event.
135
135
  *
136
- * `'NAVIGATE_TO_NEW_PAYMENT'` is emitted when the user clicks the new payment button on
137
- * the payments dashboard: take them to your own supplier selection page, from which you
138
- * open a payment flow.
136
+ * `'quickPayment'` is the new payment button on the payments dashboard: take the user to
137
+ * your own supplier selection page, from which you open a payment flow.
139
138
  *
140
139
  * @remarks
141
- * Melio cannot navigate your page, so an action with no listener registered is a button
142
- * that visibly does nothing when clicked.
140
+ * Buttons that end a flow keep their existing events — "Back to bills" still arrives as
141
+ * `completed`.
143
142
  *
144
- * Further actions are added in minor releases, so switch on `requiredAction` and treat an
143
+ * Further button types are added in minor releases, so switch on `type` and treat an
145
144
  * unrecognised value as a no-op rather than an error.
146
145
  */
147
- export interface PartnerActionData {
148
- requiredAction: 'NAVIGATE_TO_NEW_PAYMENT';
146
+ export interface ButtonClickedData {
147
+ type: 'quickPayment';
149
148
  }
150
149
  /**
151
150
  * Flow completion data
@@ -168,11 +167,11 @@ export interface ErrorData {
168
167
  /**
169
168
  * Event types that can be listened to
170
169
  */
171
- export type FlowEventType = 'completed' | 'exit' | 'partnerActionRequired' | 'navigated' | 'authenticationSucceeded' | 'authenticationFailed' | 'error' | 'loaded' | 'onboardingCompleted' | 'onboardingRequired';
170
+ export type FlowEventType = 'completed' | 'exit' | 'buttonClicked' | 'navigated' | 'authenticationSucceeded' | 'authenticationFailed' | 'error' | 'loaded' | 'onboardingCompleted' | 'onboardingRequired';
172
171
  /**
173
172
  * Event callback function types
174
173
  */
175
- export type FlowEventCallback = ((data: FlowCompletionData | NavigationData | ErrorData | PartnerActionData) => void) | (() => void);
174
+ export type FlowEventCallback = ((data: FlowCompletionData | NavigationData | ErrorData | ButtonClickedData) => void) | (() => void);
176
175
  /**
177
176
  * Flow instance interface for event handling
178
177
  */
@@ -184,7 +183,7 @@ export interface FlowInstance {
184
183
  */
185
184
  on(event: 'completed', callback: (data: FlowCompletionData) => void): void;
186
185
  on(event: 'exit', callback: () => void): void;
187
- on(event: 'partnerActionRequired', callback: (data: PartnerActionData) => void): void;
186
+ on(event: 'buttonClicked', callback: (data: ButtonClickedData) => void): void;
188
187
  on(event: 'navigated', callback: (payload: NavigationData) => void): void;
189
188
  on(event: 'authenticationSucceeded', callback: () => void): void;
190
189
  on(event: 'authenticationFailed', callback: () => void): void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@melio-eng/web-sdk",
3
- "version": "1.1.0-pr.94.438ff96",
3
+ "version": "1.2.0-pr.94.95a5a43",
4
4
  "description": "Melio Web SDK - Embed core Melio workflows directly into partner UI with minimal effort",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",