Events

Use a custom event to communicate the status of a specific process.

You can use a custom window event of type mistStatus, which the federated component sends, to communicate the status of a specific process. This event helps the host application understand the result of operations handled by the component. You can use the event to trigger UI changes, update logs, or perform other actions based on the process status.

Event details

The mistStatus event includes the following properties in its detail object:

process (String): specifies the process that triggered the event. Possible values include:
- "checkout"
- "refund"
- "deviceregistration"
- "cashmanagement"
status (String): indicates the outcome of the process. Possible values include:
- "success": the process completed successfully.
- "cancelled": the process was cancelled by the user or system.
- "error": an error occurred during the process.
- "activated": the process was successfully activated.
message (String): a description of the error, only present when the status is "error". This property provides additional context about the failure. Use try...catch blocks, where necessary, to handle potential errors when processing event details.

Example usage

Make sure your host application is properly set up to listen for window events.

Here is an example of how to listen for and handle the mistStatus event in your host application:

window.addEventListener('mistStatus', (event) => {
  const { process, status, message } = event.detail;

  switch (status) {
    case 'success':
      console.log(`Process ${process} completed successfully.`);
      break;
    case 'cancelled':
      console.log(`Process ${process} was cancelled.`);
      break;
    case 'error':
      console.error(`Process ${process} failed: ${message}`);
      break;
    case 'activated':
      console.log(`Process ${process} was activated.`);
      break;
    default:
      console.log(`Unknown status: ${status}`);
  }
});