import { EventEmitter } from "events"; import * as React from "react"; import { BrowserNotificationOptions } from "./NotificationHandler/BrowserNotificationHandler.definitions"; import * as NotificationIds from "./NotificationIds"; export { NotificationIds }; /** * Properties of the Notification. * @typedef NotificationContentProps * @property {object} [notificationContext] - A optional context for the Notification. * @memberof NotificationManager */ export interface NotificationContentProps { notificationContext?: object; } /** * Notification options for handlers. * @typedef NotificationOptions * @property {BrowserNotificationOptions} browser - Browser notification options. * @property {string} [target] - Name of target component. * @memberof NotificationManager */ export interface NotificationOptions { browser?: BrowserNotificationOptions; target?: string; } /** * @typedef NotificationClickFunction * @callback NotificationClickFunction * @param {any} event Click event. * @returns {void} * @memberof NotificationManager */ export type NotificationClickFunction = (event: any) => void; /** * @typedef NotificationIsApplicableFunction * @callback NotificationIsApplicableFunction * @param {NotificationManager.Notification} notificationInstance Instance of notification to be shown. * @returns {boolean} Determines whether particular instance should be shown. * @memberof NotificationManager */ export type NotificationIsApplicableFunction = (notificationInstance: Notification) => boolean; /** * @typedef Notification * @property {string} id - The id for the notification. * @property {string} instanceId - The id for the shown instance of this notification. Not assignable: generated automatically for an active notification in showNotification. * @property {React.ReactText | React.ReactElement} [content] - A content for the in-app notification. In-app notification is not shown if value is falsy. * @property {Array} [dropdownContent] - Listed additional content that is initially collapsed. * @property {NotificationManager.NotificationType} [type] - The type of the notification. * @property {string} [backgroundColor] - Define the notification background color. * @property {string} [icon] - An optional icon to be rendered inside the notification message. * @property {number} [timeout] - It will dismiss the notification after a certain time. * @property {number} [recurrenceTimeout] - If set, it will re-show the notification a certain time after it is dismissed. * @property {boolean} [closeButton] - Show a close button. * @property {NotificationManager.NotificationClickFunction} [onClick] - Function called when notification message is clicked. * @property {object} [context] - Optional context for the notification. * @property {NotificationManager.NotificationIsApplicableFunction} [isApplicable] - Callback determining whether particular notification instance should be shown. * @property {NotificationManager.NotificationOptions} [options] - Options for the notification handlers. * @property {Array} [actions] - Array of notification actions. * @memberof NotificationManager */ export interface Notification { id: string; instanceId?: string; content?: React.ReactText | React.ReactElement; dropdownContent?: Array>; type?: NotificationType; backgroundColor?: string; icon?: string; timeout?: number; recurrenceTimeout?: number; closeButton?: boolean; onClick?: NotificationClickFunction; context?: Record; options?: NotificationOptions; actions?: Array; isApplicable?: NotificationIsApplicableFunction; } /** * Callback to cancel showing the notification. * @typedef NotificationCancelFunction * @callback NotificationCancelFunction * @returns {void} * @memberof NotificationManager */ export type NotificationCancelFunction = () => void; /** * @typedef NotificationFilterFunction * @callback NotificationFilterFunction * @param {Notification} notification Notification to filter. * @returns {boolean} Whether notification should be handled. * @memberof NotificationHandler */ export type NotificationFilterFunction = (notification: Notification) => boolean; /** * @typedef NotificationEventListener * @callback NotificationEventListener * @param {NotificationManager.Notification} notification - The subject of the notification event. Mutate it to modify the notification properties. * @param {NotificationManager.NotificationCancelFunction} cancel - Cancel the event. * @category Notifications * @ignore * @memberof NotificationManager */ export type NotificationEventListener = (notification: Notification, cancel: NotificationCancelFunction) => void; /** * DefaultNotificationHandlerType Default types of notification handlers. * @enum { Browser | InApp | ScreenReader} NotificationHandlerType * @static * @property {string} Browser - Browser notification handler type. * @property {string} InApp - InApp notification handler type. * @property {string} ScreenReader - ScreenReader notification handler type. * @memberof NotificationManager */ export declare enum DefaultNotificationHandlerType { Browser = "browser", InApp = "inapp", ScreenReader = "screenreader" } /** * Notification handler type. * @typedef { NotificationManager.DefaultNotificationHandlerType | string } NotificationHandlerType * @memberof NotificationManager */ export type NotificationHandlerType = DefaultNotificationHandlerType | string; /** * Notification Handler interface. * @category Core / Manager * @example * const handler: NotificationHandler = { * id: "some_notification", * enabled: true, * clearFilters: () => {}, * getFilters: (): NotificationFilterFunction[] => [], * addFilter: (_filter: NotificationFilterFunction): Function => () => {} * }; */ export interface NotificationHandler { /** * Id of the handler. * @type {NotificationManager.NotificationHandlerType} * @readonly */ readonly id: NotificationHandlerType; /** * Whether the handler is enabled. * @public */ enabled: boolean; /** * What mode the handler is in. * @public */ mode: string; /** * Clear current filters. * @method * @example * handler.clearFilters(); */ clearFilters(): void; /** * Get all current filters. * @method * @returns {Array} Array of current filters. * @example * const filters = handler.getFilters(); */ getFilters(): Array; /** * Adds a new filter. * @param {NotificationHandler.NotificationFilterFunction} filter Filter function to be added. * @method * @returns {Function} Callback to remove the filter. * @example * import { NotificationIds, NotificationFilterFunction } from "@twilio/flex-ui"; * const filter: NotificationFilterFunction = (notification) => notification.id === NotificationIds.OutboundCallCanceledNoAnswer; * const removeFilterCB = handler.addFilter(filter); */ addFilter(filter: NotificationFilterFunction): Function; } /** * Default notification handlers. * @typedef DefaultNotificationHandlers * @property {NotificationHandler} browser Browser notification handler. * @property {NotificationHandler} inapp In-app notification handler. * @property {NotificationHandler} screenreader Screen reader notification handler. * @memberof NotificationManager */ type DefaultNotificationHandlers = { [k in NotificationHandlerType]: NotificationHandler; }; /** * Notification Dismissed Event. * @event NotificationManager.notificationDismissed * @param {NotificationManager.Notification} notification Dismissed notification. * @example * import { NotificationEvent } from "@twilio/flex-ui"; * NotificationEvent.notificationDismissed */ /** * Notification Added Event. * @event NotificationManager.notificationAdded * @param {NotificationManager.Notification} notification Added notification. * @example * import { NotificationEvent } from "@twilio/flex-ui"; * NotificationEvent.notificationAdded */ /** * Event fired before notification is added. * @event NotificationManager.beforeAddNotification * @param {NotificationManager.Notification} notification Notification to be added. * @param {NotificationManager.NotificationCancelFunction} cancelFunction Function to invoke to cancel the notification. * @example * import { NotificationEvent } from "@twilio/flex-ui"; * NotificationEvent.beforeAddNotification */ /** * List of Notification events. * @enum {"notificationAdded"|"notificationDismissed"|"beforeAddNotification"} NotificationEvent * @property {"notificationAdded"} notificationAdded - Notification added. * @property {"notificationDismissed"} notificationDismissed - Notification dismissed. * @property {"beforeAddNotification"} beforeAddNotification - Before notification is added. * @property {"notificationStatusChanged"} notificationStatusChanged - Notification changed. * @memberof NotificationManager */ export declare enum NotificationEvent { notificationAdded = "notificationAdded", notificationDismissed = "notificationDismissed", beforeAddNotification = "beforeAddNotification", notificationStatusChanged = "notificationStatusChanged" } /** * @readonly * @enum {"information"|"success"|"warning"|"error"} NotificationType * @property {"information"} information - Information notification. * @property {"success"} success - Success notification. * @property {"warning"} warning - Warning notification. * @property {"error"} error - Error notification. * @memberof NotificationManager */ export declare enum NotificationType { information = "information", success = "success", warning = "warning", error = "error" } /** * @category Notifications * @menuorder 300 * @class NotificationManager * @classdesc NotificationsManager provides a client-side API to manage notifications in Flex UI. * For more go to [Flex Notifications](https://www.twilio.com/docs/flex/developer/ui/notifications) * @hideconstructor * @extends {EventEmitter} */ export declare class NotificationManager extends EventEmitter { constructor(); /** * Map of registered notifications. * @type {Map} * @readonly */ readonly registeredNotifications: Map; /** * Array of active notifications. * @type {Array} * @readonly */ readonly activeNotifications: Array; /** * Registered notification handlers. * @type {NotificationManager.DefaultNotificationHandlers} * @readonly */ readonly handlers: Partial; /** * Default timeout in milliseconds for the notifications. * @static * @default 8000 * @type {number} */ static defaultTimeout: number; /** * Register notification. * @param {NotificationManager.Notification} notification - The notification to be registered. * @returns {void} * @example * Notification.registerNotification({ * id: "newNotification", * closeButton: true, * content: "New Notification handler", * timeout: 0, * type: NotificationType.warning, * actions: [ * {}} icon="Bell" />, // using the action component. * // using custom action button * ] * }); */ registerNotification(notification: Notification): void; /** * Show an instance of registered notification if not already shown * @param {string} id - The id of the notification to be shown * @private */ showNotificationSingle(id: string): void; /** * Show an instance of registered notification. * @param {string} id - The id of the notification to be shown. * @param {object} [context] - A context to be rendered in the notification. * @param {Array} [dropdownContent] - Content to be rendered in a dropdown when expanded * @fires NotificationManager#notificationAdded * @fires NotificationManager#beforeAddNotification * @returns {NotificationManager.Notification | null} Notification instance, can be used to dismiss later. `null` is returned if action was not shown. * @example * import { Notifications, NotificationIds } from "@twilio/flex-ui"; * Notifications.showNotification(NotificationIds.OutboundCallCanceledNoAnswer); */ showNotification(id: string, context?: object, dropdownContent?: Array>): Notification | null; /** * Dismiss notifications. * @param {NotificationManager.Notification} notification - The notification to be dismissed. * @fires NotificationManager#notificationDismissed * @returns {void} * @example * import { Notifications, NotificationIds } from "@twilio/flex-ui"; * const notification = Notifications.showNotification(NotificationIds.OutboundCallCanceledNoAnswer); * Notifications.dismissNotification(notification); */ dismissNotification(notification: Notification): void; /** * Dismiss notifications with the id. * @param {string} id - The id of the notification(s) to be dismissed. * @returns {void} * @example * import { Notifications, NotificationIds } from "@twilio/flex-ui"; * Notifications.dismissNotificationById(NotificationIds.OutboundCallCanceledNoAnswer); */ dismissNotificationById(id: string): void; /** * Dismiss all the active notifications. * @returns {void} * @example * import { Notifications } from "@twilio/flex-ui"; * Notifications.dismissAll(); */ dismissAll(): void; /** * Register notification handler. Use to expose your notification handler. * @param {NotificationManager.NotificationHandler} handler Notification handler. * @returns {void} * @example * import { Notifications, NotificationHandler } from "@twilio/flex-ui"; * * const handler: NotificationHandler = new MyNotificationHandler(); * Notifications.registerHandler(handler); */ registerHandler(handler: NotificationHandler): void; /** * Enable or disable notification handler. * @param {NotificationManager.NotificationHandlerType} id Of the notification handler. * @param {boolean} enabled Whether or not to enable or disable the handler. * @param {string} mode Mode of the handler. * @returns {void} * @example * import { Notifications, DefaultNotificationHandlerType } from "@twilio/flex-ui"; * Notifications.toggleNotificationHandler(DefaultNotificationHandlerType.Browser, false); */ toggleNotificationHandler(id: NotificationHandlerType, enabled: boolean, mode: string): void; /** * Returns whether the notification handler for the given id is enabled or not. * @returns {boolean} Whether the notification handler is enabled or not. * @example * import { Notifications, DefaultNotificationHandlerType } from "@twilio/flex-ui"; * Notifications.isNotificationHandlerEnabled(DefaultNotificationHandlerType.Browser); */ isNotificationHandlerEnabled(id: NotificationHandlerType): boolean; /** * Check whether the notification is already present. * @param {string} id - The id of the notification that may already be present. * @returns {boolean} - Whether the notification is already present. * @example * import { Notifications, NotificationIds } from "@twilio/flex-ui"; * Notifications.isNotificationActive(NotificationIds.OutboundCallCanceledNoAnswer); */ isNotificationActive(id: string): boolean; } /** * @classdesc Predefined Flex UI notifications * * @name Notifications * @type {NotificationManager} * @category Notifications * @private */ export declare const Notifications: NotificationManager;