@23blocks/block-onboarding 3.0.0 → 3.0.1
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 +297 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,297 @@
|
|
|
1
|
+
# @23blocks/block-onboarding
|
|
2
|
+
|
|
3
|
+
Onboarding block for the 23blocks SDK - user onboarding flows and identity verification.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@23blocks/block-onboarding)
|
|
6
|
+
[](https://opensource.org/licenses/MIT)
|
|
7
|
+
|
|
8
|
+
## Installation
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install @23blocks/block-onboarding @23blocks/transport-http
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Overview
|
|
15
|
+
|
|
16
|
+
This package provides user onboarding functionality including:
|
|
17
|
+
|
|
18
|
+
- **Onboardings** - Onboarding configuration and management
|
|
19
|
+
- **Flows** - Multi-step onboarding flows
|
|
20
|
+
- **User Journeys** - Track user progress through onboarding
|
|
21
|
+
- **User Identities** - Identity verification during onboarding
|
|
22
|
+
|
|
23
|
+
## Quick Start
|
|
24
|
+
|
|
25
|
+
```typescript
|
|
26
|
+
import { createHttpTransport } from '@23blocks/transport-http';
|
|
27
|
+
import { createOnboardingBlock } from '@23blocks/block-onboarding';
|
|
28
|
+
|
|
29
|
+
const transport = createHttpTransport({
|
|
30
|
+
baseUrl: 'https://api.yourapp.com',
|
|
31
|
+
headers: () => {
|
|
32
|
+
const token = localStorage.getItem('access_token');
|
|
33
|
+
return token ? { Authorization: `Bearer ${token}` } : {};
|
|
34
|
+
},
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
const onboarding = createOnboardingBlock(transport, {
|
|
38
|
+
apiKey: 'your-api-key',
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
// Start user journey
|
|
42
|
+
const journey = await onboarding.userJourneys.start({
|
|
43
|
+
flowId: 'flow-id',
|
|
44
|
+
userId: 'user-id',
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
// Complete a step
|
|
48
|
+
await onboarding.userJourneys.completeStep({
|
|
49
|
+
journeyId: journey.id,
|
|
50
|
+
stepId: 'step-id',
|
|
51
|
+
data: { agreed_to_terms: true },
|
|
52
|
+
});
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## Services
|
|
56
|
+
|
|
57
|
+
### onboardings - Onboarding Configuration
|
|
58
|
+
|
|
59
|
+
```typescript
|
|
60
|
+
// List onboardings
|
|
61
|
+
const { data: onboardings } = await onboarding.onboardings.list();
|
|
62
|
+
|
|
63
|
+
// Get onboarding by ID
|
|
64
|
+
const ob = await onboarding.onboardings.get('onboarding-id');
|
|
65
|
+
|
|
66
|
+
// Create onboarding
|
|
67
|
+
const newOnboarding = await onboarding.onboardings.create({
|
|
68
|
+
name: 'New User Onboarding',
|
|
69
|
+
description: 'Onboarding flow for new users',
|
|
70
|
+
type: 'signup',
|
|
71
|
+
status: 'active',
|
|
72
|
+
});
|
|
73
|
+
|
|
74
|
+
// Update onboarding
|
|
75
|
+
await onboarding.onboardings.update('onboarding-id', {
|
|
76
|
+
status: 'inactive',
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
// Delete onboarding
|
|
80
|
+
await onboarding.onboardings.delete('onboarding-id');
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### flows - Flow Management
|
|
84
|
+
|
|
85
|
+
```typescript
|
|
86
|
+
// List flows
|
|
87
|
+
const { data: flows } = await onboarding.flows.list({
|
|
88
|
+
onboardingId: 'onboarding-id',
|
|
89
|
+
});
|
|
90
|
+
|
|
91
|
+
// Get flow by ID
|
|
92
|
+
const flow = await onboarding.flows.get('flow-id');
|
|
93
|
+
|
|
94
|
+
// Create flow
|
|
95
|
+
const newFlow = await onboarding.flows.create({
|
|
96
|
+
onboardingId: 'onboarding-id',
|
|
97
|
+
name: 'Standard Flow',
|
|
98
|
+
description: 'Standard onboarding for all users',
|
|
99
|
+
steps: [
|
|
100
|
+
{
|
|
101
|
+
order: 1,
|
|
102
|
+
name: 'Welcome',
|
|
103
|
+
type: 'info',
|
|
104
|
+
content: { title: 'Welcome!', message: 'Let\'s get started...' },
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
order: 2,
|
|
108
|
+
name: 'Profile',
|
|
109
|
+
type: 'form',
|
|
110
|
+
formId: 'profile-form-id',
|
|
111
|
+
required: true,
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
order: 3,
|
|
115
|
+
name: 'Verify Email',
|
|
116
|
+
type: 'verification',
|
|
117
|
+
verificationType: 'email',
|
|
118
|
+
required: true,
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
order: 4,
|
|
122
|
+
name: 'Complete',
|
|
123
|
+
type: 'completion',
|
|
124
|
+
content: { title: 'All done!', redirectUrl: '/dashboard' },
|
|
125
|
+
},
|
|
126
|
+
],
|
|
127
|
+
});
|
|
128
|
+
|
|
129
|
+
// Update flow
|
|
130
|
+
await onboarding.flows.update('flow-id', {
|
|
131
|
+
name: 'Updated Flow',
|
|
132
|
+
});
|
|
133
|
+
|
|
134
|
+
// Delete flow
|
|
135
|
+
await onboarding.flows.delete('flow-id');
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
### userJourneys - User Progress Tracking
|
|
139
|
+
|
|
140
|
+
```typescript
|
|
141
|
+
// List user journeys
|
|
142
|
+
const { data: journeys } = await onboarding.userJourneys.list({
|
|
143
|
+
userId: 'user-id',
|
|
144
|
+
status: 'in_progress',
|
|
145
|
+
});
|
|
146
|
+
|
|
147
|
+
// Get journey by ID
|
|
148
|
+
const journey = await onboarding.userJourneys.get('journey-id');
|
|
149
|
+
|
|
150
|
+
// Start journey
|
|
151
|
+
const newJourney = await onboarding.userJourneys.start({
|
|
152
|
+
flowId: 'flow-id',
|
|
153
|
+
userId: 'user-id',
|
|
154
|
+
metadata: {
|
|
155
|
+
source: 'signup',
|
|
156
|
+
referrer: 'google',
|
|
157
|
+
},
|
|
158
|
+
});
|
|
159
|
+
|
|
160
|
+
// Get current step
|
|
161
|
+
console.log('Current step:', journey.currentStep);
|
|
162
|
+
console.log('Progress:', journey.completedSteps.length, '/', journey.totalSteps);
|
|
163
|
+
|
|
164
|
+
// Complete step
|
|
165
|
+
await onboarding.userJourneys.completeStep({
|
|
166
|
+
journeyId: journey.id,
|
|
167
|
+
stepId: 'step-id',
|
|
168
|
+
data: {
|
|
169
|
+
firstName: 'John',
|
|
170
|
+
lastName: 'Doe',
|
|
171
|
+
},
|
|
172
|
+
});
|
|
173
|
+
|
|
174
|
+
// Skip step (if allowed)
|
|
175
|
+
await onboarding.userJourneys.skipStep({
|
|
176
|
+
journeyId: journey.id,
|
|
177
|
+
stepId: 'optional-step-id',
|
|
178
|
+
});
|
|
179
|
+
|
|
180
|
+
// Abandon journey
|
|
181
|
+
await onboarding.userJourneys.update(journey.id, {
|
|
182
|
+
status: 'abandoned',
|
|
183
|
+
abandonedAt: new Date().toISOString(),
|
|
184
|
+
abandonReason: 'user_request',
|
|
185
|
+
});
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
### userIdentities - Identity Verification
|
|
189
|
+
|
|
190
|
+
```typescript
|
|
191
|
+
// List user identities
|
|
192
|
+
const { data: identities } = await onboarding.userIdentities.list({
|
|
193
|
+
userId: 'user-id',
|
|
194
|
+
});
|
|
195
|
+
|
|
196
|
+
// Get identity by ID
|
|
197
|
+
const identity = await onboarding.userIdentities.get('identity-id');
|
|
198
|
+
|
|
199
|
+
// Create identity record
|
|
200
|
+
const newIdentity = await onboarding.userIdentities.create({
|
|
201
|
+
userId: 'user-id',
|
|
202
|
+
type: 'email',
|
|
203
|
+
value: 'user@example.com',
|
|
204
|
+
status: 'pending',
|
|
205
|
+
});
|
|
206
|
+
|
|
207
|
+
// Verify identity
|
|
208
|
+
const verified = await onboarding.userIdentities.verify({
|
|
209
|
+
identityId: 'identity-id',
|
|
210
|
+
code: '123456', // Verification code
|
|
211
|
+
});
|
|
212
|
+
|
|
213
|
+
if (verified.success) {
|
|
214
|
+
console.log('Identity verified!');
|
|
215
|
+
} else {
|
|
216
|
+
console.log('Verification failed:', verified.error);
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
// Resend verification
|
|
220
|
+
await onboarding.userIdentities.resendVerification('identity-id');
|
|
221
|
+
|
|
222
|
+
// Delete identity
|
|
223
|
+
await onboarding.userIdentities.delete('identity-id');
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
## Types
|
|
227
|
+
|
|
228
|
+
```typescript
|
|
229
|
+
import type {
|
|
230
|
+
Onboarding,
|
|
231
|
+
Flow,
|
|
232
|
+
UserJourney,
|
|
233
|
+
UserJourneyStatus,
|
|
234
|
+
UserIdentity,
|
|
235
|
+
CreateOnboardingRequest,
|
|
236
|
+
CreateFlowRequest,
|
|
237
|
+
StartJourneyRequest,
|
|
238
|
+
CompleteStepRequest,
|
|
239
|
+
CreateUserIdentityRequest,
|
|
240
|
+
VerifyUserIdentityRequest,
|
|
241
|
+
} from '@23blocks/block-onboarding';
|
|
242
|
+
```
|
|
243
|
+
|
|
244
|
+
### UserJourneyStatus
|
|
245
|
+
|
|
246
|
+
- `not_started` - Journey created but not started
|
|
247
|
+
- `in_progress` - User is progressing through steps
|
|
248
|
+
- `completed` - All required steps completed
|
|
249
|
+
- `abandoned` - User abandoned the journey
|
|
250
|
+
- `expired` - Journey expired
|
|
251
|
+
|
|
252
|
+
### Flow Step Types
|
|
253
|
+
|
|
254
|
+
- `info` - Information display step
|
|
255
|
+
- `form` - Form submission step
|
|
256
|
+
- `verification` - Identity verification step
|
|
257
|
+
- `completion` - Final completion step
|
|
258
|
+
- `action` - Custom action step
|
|
259
|
+
|
|
260
|
+
## Error Handling
|
|
261
|
+
|
|
262
|
+
```typescript
|
|
263
|
+
import { isBlockErrorException, ErrorCodes } from '@23blocks/contracts';
|
|
264
|
+
|
|
265
|
+
try {
|
|
266
|
+
await onboarding.userIdentities.verify({
|
|
267
|
+
identityId: 'id',
|
|
268
|
+
code: 'wrong-code',
|
|
269
|
+
});
|
|
270
|
+
} catch (error) {
|
|
271
|
+
if (isBlockErrorException(error)) {
|
|
272
|
+
switch (error.code) {
|
|
273
|
+
case 'INVALID_CODE':
|
|
274
|
+
console.log('Verification code is invalid');
|
|
275
|
+
break;
|
|
276
|
+
case 'CODE_EXPIRED':
|
|
277
|
+
console.log('Verification code has expired');
|
|
278
|
+
break;
|
|
279
|
+
case 'MAX_ATTEMPTS':
|
|
280
|
+
console.log('Too many attempts, please request a new code');
|
|
281
|
+
break;
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
```
|
|
286
|
+
|
|
287
|
+
## Related Packages
|
|
288
|
+
|
|
289
|
+
- [`@23blocks/block-authentication`](https://www.npmjs.com/package/@23blocks/block-authentication) - User authentication
|
|
290
|
+
- [`@23blocks/block-forms`](https://www.npmjs.com/package/@23blocks/block-forms) - Form handling
|
|
291
|
+
- [`@23blocks/angular`](https://www.npmjs.com/package/@23blocks/angular) - Angular integration
|
|
292
|
+
- [`@23blocks/react`](https://www.npmjs.com/package/@23blocks/react) - React integration
|
|
293
|
+
- [`@23blocks/sdk`](https://www.npmjs.com/package/@23blocks/sdk) - Full SDK package
|
|
294
|
+
|
|
295
|
+
## License
|
|
296
|
+
|
|
297
|
+
MIT - Copyright (c) 2024 23blocks
|
package/package.json
CHANGED