Events

You can use a custom window event that 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.

mistStatus

mistStatus is a generic custom window event that can be used to track processes.

Event details

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

• process (String): specifies the process that triggered the event. The value can be one of the following:

  • checkout
  • refund
  • deviceregistration
  • cashmanagement

• status (String): indicates the outcome of the process. The value can be one of the following:

  • 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

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}`);
  }
});