feat(DEV-14246): event handlers for drop in component (multiple listeners)

[costa-monite]

Summary of Changes:

• Added event system to the drop-in component that emits typed DOM events (monite.event:*)
• Added component settings callbacks for direct integration
• Added EventListener component to demonstrate event handling
• Updated README with event system and component settings documentation
• Events and callbacks include detailed payloads (e.g., invoice details for invoice.created/updated)

How to:

Now you can listen for a specific event by passing its name to the addEventListener as the first argument
For example, monite.event:invoice.created will be called after successful invoice creation

// Add Event Listeners for specific events
const element = document.querySelector('monite-app');

// Listen for invoice creation
element.addEventListener('monite.event:invoice.created', (event) => {
  const { id, invoice } = event.detail;
  console.log('New invoice created:', id, invoice);
});

// Listen for invoice updates
element.addEventListener('monite.event:invoice.updated', (event) => {
  const { id, invoice } = event.detail;
  console.log('Invoice updated:', id, invoice);
});

// Listen for invoice deletion
element.addEventListener('monite.event:invoice.deleted', (event) => {
  const { id } = event.detail;
  console.log('Invoice deleted:', id);
});

Event Types and Payloads:

// Event names follow the pattern: monite.event:${eventType}
type MoniteEventName = 
  | 'monite.event:invoice.created'
  | 'monite.event:invoice.updated'
  | 'monite.event:invoice.deleted'
  // ... other event types

interface InvoiceEventPayload {
  id: string;
  invoice?: InvoiceResponsePayload; // Full invoice data for create/update events
}

// Events are strongly typed
interface MoniteEventMap {
  'monite.event:invoice.created': CustomEvent<InvoiceEventPayload>;
  'monite.event:invoice.updated': CustomEvent<InvoiceEventPayload>;
  'monite.event:invoice.deleted': CustomEvent<{ id: string }>;
  // ... other event types
}

Benefits of this Implementation:

1. Component Settings Callbacks:

• Type-safe integration within React
• Direct method calls

2. Typed DOM Events:

• Independent event handling per type
• Better TypeScript type inference
• No configuration needed for event filtering

How to Run:
The demo is available at packages/sdk-drop-in/monite-app-demo.html

To run it:

1. Follow the instructions in the drop-in folder
2. Run yarn dev
3. Open {address from the output}/monite-app-demo

Additional Info
There are some modifications to the sdk-react package, which aim to test other callbacks besides the invoice creation

TODO:
[ ] Remove excessive logging
[ ] Remove demo components from the app (Event log, event configuration)
[ ] Add comprehensive documentation for this integration methods
[ ] Add TypeScript types for all event types and payloads
[ ] Replace mapped listeners with actual receivables events

[changeset-bot]

🦋 Changeset detected

Latest commit: 1451160

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@monite/sdk-drop-in	Patch
@monite/sdk-react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

🚀 Preview URLs are now available! 🚀

• SDK Demo
• SDK Drop in
• SDK with NextJS