@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 +11 -9
- package/dist/flows/Flow.d.ts +3 -3
- package/dist/flows/Flow.js +1 -5
- package/dist/types.d.ts +12 -13
- package/package.json +1 -1
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
|
-
- `
|
|
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
|
-
####
|
|
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
|
|
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("
|
|
197
|
-
if (
|
|
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
|
-
| `
|
|
203
|
+
| `type` | Emitted when | What you should do |
|
|
204
204
|
|---|---|---|
|
|
205
|
-
| `
|
|
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.
|
|
208
|
-
|
|
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
|
|
package/dist/flows/Flow.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FlowInstance, FlowEventType, FlowEventCallback, FlowCompletionData, NavigationData,
|
|
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: '
|
|
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: '
|
|
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;
|
package/dist/flows/Flow.js
CHANGED
|
@@ -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('
|
|
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
|
-
*
|
|
134
|
-
*
|
|
133
|
+
* Which button the user clicked inside the embedded Melio app, delivered by the
|
|
134
|
+
* `buttonClicked` event.
|
|
135
135
|
*
|
|
136
|
-
* `'
|
|
137
|
-
*
|
|
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
|
-
*
|
|
142
|
-
*
|
|
140
|
+
* Buttons that end a flow keep their existing events — "Back to bills" still arrives as
|
|
141
|
+
* `completed`.
|
|
143
142
|
*
|
|
144
|
-
* Further
|
|
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
|
|
148
|
-
|
|
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' | '
|
|
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 |
|
|
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: '
|
|
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.
|
|
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",
|