Notifications Framework

1
interface NotificationBarActionProps {
2
    label: React.ReactText; // Can be simple text string or a template string
3
    onClick: NotificationBarActionCallback;
4
    icon?: string;
5
}

1
Flex.Notifications.registerNotification({
2
    id: "customNotification",
3
    closeButton: true,
4
    content: "Custom Notification",
5
    timeout: 0,
6
    type: NotificationType.warning,
7
    actions: [
8
        <NotificationBar.Action
9
            onClick={(_, notification) => {
10
                Flex.Notifications.dismissNotification(notification);
11
            }}
12
            label="Hello"
13
            icon="Bell"
14
        />
15
    ],
16
    options: {
17
      browser: {
18
          title: "Custom Notification",
19
          body: "Hello World!"
20
      }
21
  }
22
});

1
Flex.DefaultTaskChannels.Call.notifications.override.IncomingTask = () => {
2
  Flex.Notifications.showNotification("customNotification");
3
}

1
Flex.DefaultTaskChannels.Call.notifications.override.IncomingTask = (notification) => {
2
  notification.content: "Hello, world!";
3
};

1
Flex.DefaultTaskChannels.Call.notifications.override.NewChatMessage = (notification) => {
2
  notification.content = "Hello, world!";
3
};

1
const notification = Notifications.registeredNotifications.get("notificationId");
2
notification.content = "Display some text";

1
manager.strings.myNotification = "Current time: {{time}}"
2
const notification = Notifications.registeredNotifications.get("notificationId");
3
notification.content = "myNotification";
4
Notifications.showNotification("notificationId", {time: Date.now()})

1
const notification = Notifications.registeredNotifications.get("notificationId");
2
notification.content = <MyAwesomePopup/>;

1
const notification = Notifications.registeredNotifications.get("PendingReservationsOnActivityStateChange");
2
notification.content = "Some text to display";
3
notification.backgroundColor = "blue";
4
notification.closeButton = false;

1
Notifications.registerNotification({
2
id: "myNotificationId",
3
content: "Custom content", // string
4
type: NotificationType.error
5
});

1
Notifications.registerNotification({
2
id: "myNotificationId",
3
content: "NotificationMessage", // template
4
type: NotificationType.error
5
});

1
interface CustomNotificationProps extends NotificationContentProps {
2
   customProp?: string;
3
   notificationContext?: any;
4
}
5

6
export class CustomNotificationElement extends React.Component<CustomNotificationProps, undefined> {
7
   render() {
8
       const { customProp, notificationContext } = this.props;
9
       return(
10
           <div>
11
               {notificationContext.message}
12
               <div />
13
               {customProp}
14
           </div>
15
       );
16
   }
17
}
18

19

20
Notifications.registerNotification({
21
    id: "myNotificationId",
22
    content: <CustomNotificationElement customProp="custom prop" />,
23
    type: NotificationType.error
24
    }
25
);

1
import * as Flex from "@twilio/flex-ui";
2

3
Flex.Notifications.addListener("beforeAddNotification", (payload) => {
4
  console.log("<---beforeTransferTask Listener--->", payload);
5
});