@jpmorgan-payments/embedded-finance-components 0.7.2 → 0.7.4
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 +335 -46
- package/dist/{2FJCTAHO-NJFjF-Ev.js → 2FJCTAHO-DZ3eKRDE.js} +1 -1
- package/dist/esm/ef-components.js +30 -8
- package/dist/{index-C6-ZqNla.js → index-CRuJ-GQM.js} +30341 -27435
- package/dist/index.css +1 -1
- package/dist/index.d.ts +2381 -1028
- package/dist/mockServiceWorker.js +1 -1
- package/dist/{production-BnRfB45M.js → production-BKKtvTD3.js} +2 -2
- package/dist/umd/ef-components.js +1738 -1738
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -156,6 +156,8 @@ It is using @tanstack/react-query for handling API calls and authentication as w
|
|
|
156
156
|
- `apiBaseUrl`: The base URL for API calls (required)
|
|
157
157
|
- `theme`: Customization options for the components' appearance (optional)
|
|
158
158
|
- `headers`: Custom headers for API requests (optional)
|
|
159
|
+
- `queryParams`: Custom query parameters for API requests (optional)
|
|
160
|
+
- `contentTokens`: Custom content tokens for internationalization (optional)
|
|
159
161
|
|
|
160
162
|
#### Usage:
|
|
161
163
|
|
|
@@ -176,6 +178,12 @@ const EmbeddedFinanceSection = () => {
|
|
|
176
178
|
headers={{
|
|
177
179
|
'Custom-Header': 'value',
|
|
178
180
|
}}
|
|
181
|
+
queryParams={{
|
|
182
|
+
'custom-param': 'value',
|
|
183
|
+
}}
|
|
184
|
+
contentTokens={{
|
|
185
|
+
name: 'enUS',
|
|
186
|
+
}}
|
|
179
187
|
>
|
|
180
188
|
{/* Your Embedded UI Components go here */}
|
|
181
189
|
</EBComponentsProvider>
|
|
@@ -262,21 +270,68 @@ const OnboardingSection = () => {
|
|
|
262
270
|
};
|
|
263
271
|
```
|
|
264
272
|
|
|
265
|
-
|
|
273
|
+
### 2. OnboardingFlow
|
|
266
274
|
|
|
267
|
-
|
|
268
|
-
- `availableJurisdictions` is an array of country codes that are selectable. If only one is provided, it will default to that country.
|
|
269
|
-
- `availableOrganizationTypes` allows customization of the types of organizations that can be onboarded.
|
|
270
|
-
- `usePartyResource` enables using the party resource for onboarding, which may be required for certain integration scenarios.
|
|
271
|
-
- `blockPostVerification` can be used to prevent access to post-verification steps.
|
|
272
|
-
- `showLinkedAccountPanel` controls the visibility of the linked account panel.
|
|
273
|
-
- `initialStep` allows starting the onboarding process from a specific step.
|
|
274
|
-
- `variant` controls the visual style of the stepper component.
|
|
275
|
-
- `onboardingContentTokens` enables customization of text content and labels.
|
|
276
|
-
- `alertOnExit` provides a warning when users attempt to leave the onboarding process.
|
|
277
|
-
- `userEventsToTrack` and `userEventsHandler` enable tracking of user interactions during onboarding.
|
|
275
|
+
The `OnboardingFlow` component provides a modern, enhanced onboarding experience with improved UX and better flow management. It represents the next generation of the onboarding process with screen-based navigation and enhanced state management.
|
|
278
276
|
|
|
279
|
-
|
|
277
|
+
#### Main Features:
|
|
278
|
+
|
|
279
|
+
- Screen-based navigation with flow control
|
|
280
|
+
- Enhanced document upload with preview and drag-and-drop
|
|
281
|
+
- Improved mobile responsiveness
|
|
282
|
+
- Better error handling and recovery
|
|
283
|
+
- Streamlined user experience with intelligent navigation
|
|
284
|
+
- Support for document-only onboarding mode
|
|
285
|
+
|
|
286
|
+
#### Props:
|
|
287
|
+
|
|
288
|
+
| Prop Name | Type | Required | Description |
|
|
289
|
+
| ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------- |
|
|
290
|
+
| `initialClientId` | `string` | No | Initial client ID for existing client onboarding |
|
|
291
|
+
| `onGetClientSettled` | `(clientData: ClientResponse \| undefined, status: 'success' \| 'pending' \| 'error', error: ErrorType<SchemasApiError> \| null) => void` | No | Callback function triggered when client data is fetched |
|
|
292
|
+
| `onPostClientSettled` | `(response?: ClientResponse, error?: ApiError) => void` | No | Callback function for client creation response |
|
|
293
|
+
| `onPostPartySettled` | `(response?: PartyResponse, error?: ApiError) => void` | No | Callback function for party creation response |
|
|
294
|
+
| `onPostClientVerificationsSettled` | `(response?: ClientVerificationResponse, error?: ApiError) => void` | No | Callback function for client verification response |
|
|
295
|
+
| `availableProducts` | `Array<ClientProduct>` | Yes | List of available products for onboarding |
|
|
296
|
+
| `availableJurisdictions` | `Array<Jurisdiction>` | Yes | List of available jurisdictions for onboarding |
|
|
297
|
+
| `availableOrganizationTypes` | `Array<OrganizationType>` | No | List of available organization types |
|
|
298
|
+
| `usePartyResource` | `boolean` | No | Whether to use party resource for onboarding |
|
|
299
|
+
| `blockPostVerification` | `boolean` | No | Whether to block post-verification steps |
|
|
300
|
+
| `docUploadOnlyMode` | `boolean` | No | Whether to show only document upload screens |
|
|
301
|
+
| `height` | `string` | No | Minimum height for the component container |
|
|
302
|
+
| `onboardingContentTokens` | `DeepPartial<typeof defaultResources['enUS']['onboarding']>` | No | Custom content tokens for onboarding |
|
|
303
|
+
| `alertOnExit` | `boolean` | No | Whether to show alert when exiting onboarding |
|
|
304
|
+
| `userEventsToTrack` | `string[]` | No | List of user events to track |
|
|
305
|
+
| `userEventsHandler` | `({ actionName }: { actionName: string }) => void` | No | Handler for user events |
|
|
306
|
+
|
|
307
|
+
#### Usage:
|
|
308
|
+
|
|
309
|
+
```jsx
|
|
310
|
+
import {
|
|
311
|
+
EBComponentsProvider,
|
|
312
|
+
OnboardingFlow,
|
|
313
|
+
} from '@jpmorgan-payments/embedded-finance-components';
|
|
314
|
+
|
|
315
|
+
const OnboardingSection = () => {
|
|
316
|
+
return (
|
|
317
|
+
<EBComponentsProvider apiBaseUrl="https://your-api-base-url.com">
|
|
318
|
+
<OnboardingFlow
|
|
319
|
+
initialClientId="your-client-id"
|
|
320
|
+
availableProducts={['EMBEDDED_PAYMENTS']}
|
|
321
|
+
availableJurisdictions={['US']}
|
|
322
|
+
height="100vh"
|
|
323
|
+
onPostClientSettled={(response, error) => {
|
|
324
|
+
// Handle client creation
|
|
325
|
+
}}
|
|
326
|
+
docUploadOnlyMode={false}
|
|
327
|
+
alertOnExit={true}
|
|
328
|
+
/>
|
|
329
|
+
</EBComponentsProvider>
|
|
330
|
+
);
|
|
331
|
+
};
|
|
332
|
+
```
|
|
333
|
+
|
|
334
|
+
### 3. LinkedAccountWidget
|
|
280
335
|
|
|
281
336
|
The `LinkedAccountWidget` component facilitates the process of adding a client's linked account, as described in the [Add Linked Account API documentation](https://developer.payments.jpmorgan.com/docs/embedded-finance-solutions/embedded-payments/capabilities/embedded-payments/how-to/add-linked-account).
|
|
282
337
|
|
|
@@ -284,6 +339,7 @@ The `LinkedAccountWidget` component facilitates the process of adding a client's
|
|
|
284
339
|
|
|
285
340
|
- Add and manage external linked bank accounts for clients
|
|
286
341
|
- Handle complex micro-deposits initiation logic
|
|
342
|
+
- Support for multiple account types and verification methods
|
|
287
343
|
|
|
288
344
|
#### Usage:
|
|
289
345
|
|
|
@@ -302,7 +358,102 @@ const LinkedAccountSection = () => {
|
|
|
302
358
|
};
|
|
303
359
|
```
|
|
304
360
|
|
|
305
|
-
|
|
361
|
+
### 4. MakePayment
|
|
362
|
+
|
|
363
|
+
> **⚠️ Alpha State**: This component is currently in alpha state and not fully integrated with the OpenAPI Specification (OAS). It may have limited functionality and is subject to significant changes.
|
|
364
|
+
|
|
365
|
+
The `MakePayment` component provides a comprehensive payment interface that allows users to initiate payments between accounts with various payment methods.
|
|
366
|
+
|
|
367
|
+
#### Main Features:
|
|
368
|
+
|
|
369
|
+
- Payment initiation with multiple payment methods (ACH, RTP, WIRE)
|
|
370
|
+
- Fee calculation and display
|
|
371
|
+
- Form validation and error handling
|
|
372
|
+
- Success confirmation and repeat payment functionality
|
|
373
|
+
- Customizable payment methods and fees
|
|
374
|
+
- Auto-selection for single options
|
|
375
|
+
|
|
376
|
+
#### Props:
|
|
377
|
+
|
|
378
|
+
| Prop Name | Type | Required | Description |
|
|
379
|
+
| ---------------- | ------------------------------------------------------------------------ | -------- | ------------------------------------------------ |
|
|
380
|
+
| `triggerButton` | `React.ReactNode` | No | Custom trigger button for opening payment dialog |
|
|
381
|
+
| `accounts` | `Array<{ id: string; name: string }>` | No | List of available accounts to pay from |
|
|
382
|
+
| `recipients` | `Array<{ id: string; name: string; accountNumber: string }>` | No | List of available recipients |
|
|
383
|
+
| `paymentMethods` | `Array<{ id: string; name: string; fee: number; description?: string }>` | No | List of available payment methods with fees |
|
|
384
|
+
| `icon` | `string` | No | Icon name from Lucide React icons |
|
|
385
|
+
|
|
386
|
+
#### Usage:
|
|
387
|
+
|
|
388
|
+
```jsx
|
|
389
|
+
import {
|
|
390
|
+
EBComponentsProvider,
|
|
391
|
+
MakePayment,
|
|
392
|
+
} from '@jpmorgan-payments/embedded-finance-components';
|
|
393
|
+
|
|
394
|
+
const PaymentSection = () => {
|
|
395
|
+
return (
|
|
396
|
+
<EBComponentsProvider apiBaseUrl="https://your-api-base-url.com">
|
|
397
|
+
<MakePayment
|
|
398
|
+
accounts={[
|
|
399
|
+
{ id: 'account1', name: 'Main Account' },
|
|
400
|
+
{ id: 'account2', name: 'Savings Account' },
|
|
401
|
+
]}
|
|
402
|
+
recipients={[
|
|
403
|
+
{
|
|
404
|
+
id: 'recipient1',
|
|
405
|
+
name: 'John Doe',
|
|
406
|
+
accountNumber: '****1234',
|
|
407
|
+
},
|
|
408
|
+
]}
|
|
409
|
+
paymentMethods={[
|
|
410
|
+
{ id: 'ACH', name: 'ACH Transfer', fee: 2.5 },
|
|
411
|
+
{ id: 'WIRE', name: 'Wire Transfer', fee: 25.0 },
|
|
412
|
+
]}
|
|
413
|
+
icon="CirclePlus"
|
|
414
|
+
/>
|
|
415
|
+
</EBComponentsProvider>
|
|
416
|
+
);
|
|
417
|
+
};
|
|
418
|
+
```
|
|
419
|
+
|
|
420
|
+
### 5. TransactionsDisplay
|
|
421
|
+
|
|
422
|
+
> **⚠️ Alpha State**: This component is currently in alpha state and not fully integrated with the OpenAPI Specification (OAS). It may have limited functionality and is subject to significant changes.
|
|
423
|
+
|
|
424
|
+
The `TransactionsDisplay` component provides a comprehensive view of transaction history with detailed information and filtering capabilities.
|
|
425
|
+
|
|
426
|
+
#### Main Features:
|
|
427
|
+
|
|
428
|
+
- Transaction listing with sorting and filtering
|
|
429
|
+
- Transaction details view with expandable information
|
|
430
|
+
- Support for different transaction types (PAYIN/PAYOUT)
|
|
431
|
+
- Currency formatting and localization
|
|
432
|
+
- Pagination and search capabilities
|
|
433
|
+
- Mobile-responsive design
|
|
434
|
+
|
|
435
|
+
#### Props:
|
|
436
|
+
|
|
437
|
+
| Prop Name | Type | Required | Description |
|
|
438
|
+
| ----------- | -------- | -------- | ------------------------------------ |
|
|
439
|
+
| `accountId` | `string` | Yes | Account ID to fetch transactions for |
|
|
440
|
+
|
|
441
|
+
#### Usage:
|
|
442
|
+
|
|
443
|
+
```jsx
|
|
444
|
+
import {
|
|
445
|
+
EBComponentsProvider,
|
|
446
|
+
TransactionsDisplay,
|
|
447
|
+
} from '@jpmorgan-payments/embedded-finance-components';
|
|
448
|
+
|
|
449
|
+
const TransactionsSection = () => {
|
|
450
|
+
return (
|
|
451
|
+
<EBComponentsProvider apiBaseUrl="https://your-api-base-url.com">
|
|
452
|
+
<TransactionsDisplay accountId="your-account-id" />
|
|
453
|
+
</EBComponentsProvider>
|
|
454
|
+
);
|
|
455
|
+
};
|
|
456
|
+
```
|
|
306
457
|
|
|
307
458
|
## Theming
|
|
308
459
|
|
|
@@ -319,33 +470,134 @@ The `EBComponentsProvider` accepts a `theme` prop that allows for extensive cust
|
|
|
319
470
|
|
|
320
471
|
Here's an updated table of available theme design tokens that can be used in the `variables`, `light`, and `dark` properties:
|
|
321
472
|
|
|
322
|
-
| Token Name
|
|
323
|
-
|
|
|
324
|
-
| fontFamily
|
|
325
|
-
|
|
|
326
|
-
|
|
|
327
|
-
|
|
|
328
|
-
|
|
|
329
|
-
|
|
|
330
|
-
|
|
|
331
|
-
|
|
|
332
|
-
|
|
|
333
|
-
|
|
|
334
|
-
|
|
|
335
|
-
|
|
|
336
|
-
|
|
|
337
|
-
|
|
|
338
|
-
|
|
|
339
|
-
|
|
|
340
|
-
|
|
|
341
|
-
|
|
|
342
|
-
|
|
|
343
|
-
|
|
|
344
|
-
|
|
|
345
|
-
|
|
|
346
|
-
|
|
|
347
|
-
|
|
|
348
|
-
|
|
|
473
|
+
| Token Name | Description | Type | Default |
|
|
474
|
+
| -------------------------------- | -------------------------------------------- | ------- | --------------------------- |
|
|
475
|
+
| fontFamily | Main font family for text | String | `"Geist"` |
|
|
476
|
+
| headerFontFamily | Font family for headers | String | inherits `fontFamily` |
|
|
477
|
+
| buttonFontFamily | Font family for buttons | String | inherits `fontFamily` |
|
|
478
|
+
| backgroundColor | Background color of the main container | String | `"hsl(0 0% 100%)"` |
|
|
479
|
+
| foregroundColor | Main text color | String | `"hsl(240 10% 3.9%)"` |
|
|
480
|
+
| formLabelForegroundColor | Form label text color | String | `"hsl(240 10% 3.9%)"` |
|
|
481
|
+
| primaryColor | Primary brand color | String | `"#155C93"` |
|
|
482
|
+
| primaryHoverColor | Hover state of primary color | String | calculated automatically |
|
|
483
|
+
| primaryActiveColor | Active state of primary color | String | calculated automatically |
|
|
484
|
+
| primaryForegroundColor | Text color on primary background | String | `"hsl(0 0% 98%)"` |
|
|
485
|
+
| primaryForegroundHoverColor | Text color on primary background hover | String | calculated automatically |
|
|
486
|
+
| primaryForegroundActiveColor | Text color on primary background active | String | calculated automatically |
|
|
487
|
+
| secondaryColor | Secondary brand color | String | `"hsl(240 4.8% 95.9%)"` |
|
|
488
|
+
| secondaryHoverColor | Hover state of secondary color | String | calculated automatically |
|
|
489
|
+
| secondaryActiveColor | Active state of secondary color | String | calculated automatically |
|
|
490
|
+
| secondaryForegroundColor | Text color on secondary background | String | `"hsl(240 5.9% 10%)"` |
|
|
491
|
+
| secondaryForegroundHoverColor | Text color on secondary background hover | String | calculated automatically |
|
|
492
|
+
| secondaryForegroundActiveColor | Text color on secondary background active | String | calculated automatically |
|
|
493
|
+
| destructiveColor | Color for destructive actions | String | `"hsl(0 84.2% 60.2%)"` |
|
|
494
|
+
| destructiveHoverColor | Hover state of destructive color | String | calculated automatically |
|
|
495
|
+
| destructiveActiveColor | Active state of destructive color | String | calculated automatically |
|
|
496
|
+
| destructiveForegroundColor | Text color on destructive background | String | `"hsl(0 0% 98%)"` |
|
|
497
|
+
| destructiveForegroundHoverColor | Text color on destructive background hover | String | calculated automatically |
|
|
498
|
+
| destructiveForegroundActiveColor | Text color on destructive background active | String | calculated automatically |
|
|
499
|
+
| destructiveAccentColor | Accent color for destructive elements | String | `"#FFECEA"` |
|
|
500
|
+
| informativeColor | Color for informational elements | String | `"#0078CF"` |
|
|
501
|
+
| informativeAccentColor | Accent color for informational elements | String | `"#EAF6FF"` |
|
|
502
|
+
| warningColor | Color for warning elements | String | `"#C75300"` |
|
|
503
|
+
| warningAccentColor | Accent color for warning elements | String | `"#FFECD9"` |
|
|
504
|
+
| successColor | Color for success elements | String | `"#00875D"` |
|
|
505
|
+
| successAccentColor | Accent color for success elements | String | `"#EAF5F2"` |
|
|
506
|
+
| alertColor | Background color for alerts | String | `"hsl(0 0% 100%)"` |
|
|
507
|
+
| alertForegroundColor | Text color for alerts | String | `"hsl(240 10% 3.9%)"` |
|
|
508
|
+
| mutedColor | Color for muted elements | String | `"hsl(240 4.8% 95.9%)"` |
|
|
509
|
+
| mutedForegroundColor | Text color on muted background | String | `"hsl(240 3.8% 46.1%)"` |
|
|
510
|
+
| accentColor | Accent color for highlights | String | `"hsl(240 4.8% 95.9%)"` |
|
|
511
|
+
| accentForegroundColor | Text color on accent background | String | `"hsl(240 5.9% 10%)"` |
|
|
512
|
+
| cardColor | Background color for card elements | String | `"hsl(0 0% 100%)"` |
|
|
513
|
+
| cardForegroundColor | Text color for card elements | String | `"hsl(240 10% 3.9%)"` |
|
|
514
|
+
| popoverColor | Background color for popovers | String | `"hsl(0 0% 100%)"` |
|
|
515
|
+
| popoverForegroundColor | Text color for popovers | String | `"hsl(240 10% 3.9%)"` |
|
|
516
|
+
| borderRadius | Default border radius for elements | String | `"0.375rem"` |
|
|
517
|
+
| inputBorderRadius | Border radius for input elements | String | inherits `borderRadius` |
|
|
518
|
+
| buttonBorderRadius | Border radius specifically for buttons | String | inherits `borderRadius` |
|
|
519
|
+
| buttonFontWeight | Font weight for buttons | String | `"500"` |
|
|
520
|
+
| buttonFontSize | Font size for buttons | String | `"0.875rem"` |
|
|
521
|
+
| buttonLineHeight | Line height for buttons | String | `"1.25rem"` |
|
|
522
|
+
| primaryButtonFontWeight | Font weight for primary buttons | String | inherits `buttonFontWeight` |
|
|
523
|
+
| secondaryButtonFontWeight | Font weight for secondary buttons | String | inherits `buttonFontWeight` |
|
|
524
|
+
| destructiveButtonFontWeight | Font weight for destructive buttons | String | inherits `buttonFontWeight` |
|
|
525
|
+
| primaryBorderWidth | Border width for primary elements | String | `"0rem"` |
|
|
526
|
+
| secondaryBorderWidth | Border width for secondary elements | String | `"0rem"` |
|
|
527
|
+
| destructiveBorderWidth | Border width for destructive elements | String | `"0rem"` |
|
|
528
|
+
| shiftButtonOnActive | Whether to shift button position when active | Boolean | `true` |
|
|
529
|
+
| buttonTextTransform | Text transform for buttons | String | `"none"` |
|
|
530
|
+
| buttonLetterSpacing | Letter spacing for buttons | String | `"0em"` |
|
|
531
|
+
| formLabelFontSize | Font size for form labels | String | `"0.875rem"` |
|
|
532
|
+
| formLabelLineHeight | Line height for form labels | String | `"1.25rem"` |
|
|
533
|
+
| formLabelFontWeight | Font weight for form labels | String | `"500"` |
|
|
534
|
+
| spacingUnit | Unit for the numeric spacing scale | String | `"0.25rem"` |
|
|
535
|
+
| borderColor | Color for borders | String | `"hsl(240 5.9% 90%)"` |
|
|
536
|
+
| inputColor | Background color for input fields | String | `"hsl(0 0% 100%)"` |
|
|
537
|
+
| inputBorderColor | Border color for input fields | String | `"hsl(240 5.9% 90%)"` |
|
|
538
|
+
| ringColor | Color for focus rings | String | `"hsl(240 10% 3.9%)"` |
|
|
539
|
+
| zIndexOverlay | z-index for overlay elements | Number | `100` |
|
|
540
|
+
|
|
541
|
+
### Theme Usage Example
|
|
542
|
+
|
|
543
|
+
```jsx
|
|
544
|
+
import { EBComponentsProvider } from '@jpmorgan-payments/embedded-finance-components';
|
|
545
|
+
|
|
546
|
+
const ThemedApplication = () => {
|
|
547
|
+
return (
|
|
548
|
+
<EBComponentsProvider
|
|
549
|
+
apiBaseUrl="https://api.example.com"
|
|
550
|
+
theme={{
|
|
551
|
+
colorScheme: 'light',
|
|
552
|
+
variables: {
|
|
553
|
+
fontFamily: 'Inter, system-ui, sans-serif',
|
|
554
|
+
primaryColor: '#2563eb',
|
|
555
|
+
borderRadius: '0.5rem',
|
|
556
|
+
buttonFontWeight: '600',
|
|
557
|
+
},
|
|
558
|
+
light: {
|
|
559
|
+
backgroundColor: '#ffffff',
|
|
560
|
+
foregroundColor: '#1f2937',
|
|
561
|
+
cardColor: '#f9fafb',
|
|
562
|
+
},
|
|
563
|
+
dark: {
|
|
564
|
+
backgroundColor: '#1f2937',
|
|
565
|
+
foregroundColor: '#f9fafb',
|
|
566
|
+
cardColor: '#374151',
|
|
567
|
+
},
|
|
568
|
+
}}
|
|
569
|
+
>
|
|
570
|
+
{/* Your components */}
|
|
571
|
+
</EBComponentsProvider>
|
|
572
|
+
);
|
|
573
|
+
};
|
|
574
|
+
```
|
|
575
|
+
|
|
576
|
+
## Internationalization
|
|
577
|
+
|
|
578
|
+
The library supports internationalization with the following languages:
|
|
579
|
+
|
|
580
|
+
- **English (US)** - `en-US` (default)
|
|
581
|
+
- **French (Canada)** - `fr-CA`
|
|
582
|
+
|
|
583
|
+
### Language Configuration
|
|
584
|
+
|
|
585
|
+
```jsx
|
|
586
|
+
import { EBComponentsProvider } from '@jpmorgan-payments/embedded-finance-components';
|
|
587
|
+
|
|
588
|
+
const InternationalizedApp = () => {
|
|
589
|
+
return (
|
|
590
|
+
<EBComponentsProvider
|
|
591
|
+
apiBaseUrl="https://api.example.com"
|
|
592
|
+
contentTokens={{
|
|
593
|
+
name: 'frCA', // Use French Canadian
|
|
594
|
+
}}
|
|
595
|
+
>
|
|
596
|
+
{/* Your components */}
|
|
597
|
+
</EBComponentsProvider>
|
|
598
|
+
);
|
|
599
|
+
};
|
|
600
|
+
```
|
|
349
601
|
|
|
350
602
|
## Installation
|
|
351
603
|
|
|
@@ -374,19 +626,18 @@ To contribute to the development of this library, please follow these guidelines
|
|
|
374
626
|
|
|
375
627
|
Use the `files.associations` setting to tell VS Code to always open `.css` files in Tailwind CSS mode:
|
|
376
628
|
|
|
377
|
-
```
|
|
378
|
-
|
|
629
|
+
```json
|
|
379
630
|
"files.associations": {
|
|
380
|
-
"
|
|
631
|
+
"*.css": "tailwindcss"
|
|
381
632
|
}
|
|
382
|
-
|
|
383
633
|
```
|
|
384
634
|
|
|
385
635
|
#### `editor.quickSuggestions`
|
|
386
636
|
|
|
387
637
|
By default VS Code will not trigger completions when editing "string" content, for example within JSX attribute values. Updating the `editor.quickSuggestions` setting may improve your experience:
|
|
388
638
|
|
|
389
|
-
```
|
|
639
|
+
```json
|
|
640
|
+
"editor.quickSuggestions": {
|
|
390
641
|
"strings": "on"
|
|
391
642
|
}
|
|
392
643
|
```
|
|
@@ -433,3 +684,41 @@ This configuration file is a mapping utility that connects form fields to API fi
|
|
|
433
684
|
- `storybook` – starts storybook dev server
|
|
434
685
|
- `storybook:build` – build production storybook bundle to `storybook-static`
|
|
435
686
|
- `prettier:write` – formats all files with Prettier
|
|
687
|
+
- `generate-api` – generates API client from OpenAPI specifications using Orval
|
|
688
|
+
|
|
689
|
+
## Recent Updates (v0.7.2)
|
|
690
|
+
|
|
691
|
+
The library has been significantly enhanced with the following updates:
|
|
692
|
+
|
|
693
|
+
### New Components
|
|
694
|
+
|
|
695
|
+
- **MakePayment**: Complete payment interface with multiple payment methods and fee calculation _(Alpha - not fully integrated with OAS)_
|
|
696
|
+
- **TransactionsDisplay**: Transaction history viewer with detailed information and filtering _(Alpha - not fully integrated with OAS)_
|
|
697
|
+
- **OnboardingFlow**: Next-generation onboarding experience with improved UX and flow management
|
|
698
|
+
|
|
699
|
+
### Enhanced Features
|
|
700
|
+
|
|
701
|
+
- **Improved Document Upload**: Enhanced document upload with file preview, drag-and-drop support, and better error handling
|
|
702
|
+
- **Enhanced Theming**: More comprehensive theming system with additional design tokens and better customization options
|
|
703
|
+
- **Multi-language Support**: Added French Canadian (fr-CA) language support alongside English (US)
|
|
704
|
+
- **Better Mobile Experience**: Improved responsive design and mobile-first approach
|
|
705
|
+
- **Enhanced Error Handling**: Better error boundary implementation and user-friendly error messages
|
|
706
|
+
|
|
707
|
+
### Technical Improvements
|
|
708
|
+
|
|
709
|
+
- **Orval Integration**: Enhanced API code generation with better type safety and React Query integration
|
|
710
|
+
- **Testing Enhancements**: Improved test utilities with better MSW (Mock Service Worker) integration
|
|
711
|
+
- **Performance Optimizations**: Better memoization and rendering optimizations
|
|
712
|
+
- **Accessibility Improvements**: Enhanced ARIA support and keyboard navigation
|
|
713
|
+
|
|
714
|
+
### API Enhancements
|
|
715
|
+
|
|
716
|
+
- **Better State Management**: Improved state management with React Query integration
|
|
717
|
+
- **Enhanced Validation**: Better form validation with Zod schemas and improved error messages
|
|
718
|
+
- **Improved Data Fetching**: Better caching, error handling, and loading states
|
|
719
|
+
|
|
720
|
+
### Developer Experience
|
|
721
|
+
|
|
722
|
+
- **Better Documentation**: Enhanced Storybook stories with more comprehensive examples
|
|
723
|
+
- **Improved Testing**: Better test coverage and more robust testing utilities
|
|
724
|
+
- **Enhanced TypeScript Support**: Better type definitions and improved developer experience
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
var ps = Object.defineProperty;
|
|
2
2
|
var ws = (e, t, n) => t in e ? ps(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
|
|
3
3
|
var Le = (e, t, n) => ws(e, typeof t != "symbol" ? t + "" : t, n);
|
|
4
|
-
import { g as xs, c as M, a as m, b as be, d as K, o as Ot, e as B, P as qo, S as N, t as P, i as E, f as H, h as I, j as $s, k as tr, u as pe, l as G, s as Nn, m as Un, n as rt, p as T, q as Cs, r as kn, v as Ke, w as Ss, x as Dt, y as Tt, z as ks, A as Es, B as mn, F as Ds, C as zr, D as Ft, $ as Ro, E as Ms, G as As, H as j, I as Br, J as Ts, K as nr, L as Fs, M as Is, N as _n, O as Ls, Q as Os, R as te, T as Ps, U as _s } from "./production-
|
|
4
|
+
import { g as xs, c as M, a as m, b as be, d as K, o as Ot, e as B, P as qo, S as N, t as P, i as E, f as H, h as I, j as $s, k as tr, u as pe, l as G, s as Nn, m as Un, n as rt, p as T, q as Cs, r as kn, v as Ke, w as Ss, x as Dt, y as Tt, z as ks, A as Es, B as mn, F as Ds, C as zr, D as Ft, $ as Ro, E as Ms, G as As, H as j, I as Br, J as Ts, K as nr, L as Fs, M as Is, N as _n, O as Ls, Q as Os, R as te, T as Ps, U as _s } from "./production-BKKtvTD3.js";
|
|
5
5
|
var Ko = {
|
|
6
6
|
À: "A",
|
|
7
7
|
Á: "A",
|
|
@@ -1,10 +1,32 @@
|
|
|
1
|
-
import { E as
|
|
1
|
+
import { E as i, L as s, M as t, y as n, O as o, c, b as r, R as p, T as m, V as R, p as d, n as f, x as l, d as g, a as u, r as y, m as C, k as F, l as S, f as D, t as E, g as M, q as P, h as b, i as k, w as v, s as w, e as A, v as B } from "../index-CRuJ-GQM.js";
|
|
2
2
|
export {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
3
|
+
i as EBComponentsProvider,
|
|
4
|
+
s as LinkedAccountWidget,
|
|
5
|
+
t as MakePayment,
|
|
6
|
+
n as OnboardingFlow,
|
|
7
|
+
o as OnboardingWizardBasic,
|
|
8
|
+
c as RecipientDetails,
|
|
9
|
+
r as RecipientForm,
|
|
10
|
+
p as Recipients,
|
|
11
|
+
m as TransactionsDisplay,
|
|
12
|
+
R as VerificationFlow,
|
|
13
|
+
d as canEditRecipient,
|
|
14
|
+
f as canVerifyRecipient,
|
|
15
|
+
l as createRecipientSummary,
|
|
16
|
+
g as defaultPaymentMethodConfigs,
|
|
17
|
+
u as defaultRecipientsConfig,
|
|
18
|
+
y as filterRecipients,
|
|
19
|
+
C as formatAccountInfo,
|
|
20
|
+
F as formatRecipientAddress,
|
|
21
|
+
S as formatRecipientContacts,
|
|
22
|
+
D as formatRecipientName,
|
|
23
|
+
E as getRecipientTypeDisplayName,
|
|
24
|
+
M as getStatusColor,
|
|
25
|
+
P as getStatusDescription,
|
|
26
|
+
b as getStatusIcon,
|
|
27
|
+
k as initEBComponentsManager,
|
|
28
|
+
v as isSameRecipient,
|
|
29
|
+
w as sortRecipients,
|
|
30
|
+
A as useRecipientsFilters,
|
|
31
|
+
B as validateRecipientForPayments
|
|
10
32
|
};
|