|
1 | 1 | import { FlexPlugin } from 'flex-plugin'; |
2 | 2 | import React from 'react'; |
3 | | -import CustomTaskListComponent from './CustomTaskListComponent'; |
4 | 3 |
|
5 | 4 | const PLUGIN_NAME = 'PushNotificationsPlugin'; |
6 | 5 |
|
7 | 6 | export default class PushNotificationsPlugin extends FlexPlugin { |
8 | 7 |
|
9 | | - constructor() { |
| 8 | + constructor(flex,manager) { |
10 | 9 | super(PLUGIN_NAME); |
| 10 | + |
| 11 | + this.currentTasks = []; |
| 12 | + this.manager = null; |
| 13 | + this.registration = null; |
| 14 | + this.permission = null; |
| 15 | + |
| 16 | + this.taskListener = this.taskListener.bind(this); |
| 17 | + this.registerServiceWorker = this.registerServiceWorker.bind(this); |
| 18 | + this.registerSuccess = this.registerSuccess.bind(this); |
| 19 | + this.init = this.init.bind(this) |
11 | 20 | } |
12 | 21 |
|
13 | 22 | /** |
14 | | - * This code is run when your plugin is being started |
15 | | - * Use this to modify any UI components or attach to the actions framework |
| 23 | + * Generates the message that will display in the push alert |
16 | 24 | * |
17 | | - * @param flex { typeof import('@twilio/flex-ui') } |
18 | | - * @param manager { import('@twilio/flex-ui').Manager } |
| 25 | + * @param newTask { 'task triggering the push' } |
| 26 | + * @param allTasks { 'all task reservations for user' } |
19 | 27 | */ |
20 | 28 |
|
| 29 | + alertMessage(newTask, allTasks) { |
21 | 30 |
|
22 | | - init(flex, manager) { |
23 | | - let permission; |
24 | | - let registration; |
25 | | - let currentTasks = []; |
| 31 | + let currentTask = allTasks.get(newTask); |
| 32 | + let name = currentTask._task.attributes.name; |
| 33 | + let channel = currentTask._task.attributes.channelType; |
26 | 34 |
|
27 | | - functionalertMessage(newTask,allTasks){ |
28 | | - console.log(newTask,allTasks); |
| 35 | + return`New ${channel} task from ${name}`; |
| 36 | + } |
29 | 37 |
|
30 | | - let currentTask = allTasks.get(newTask); |
31 | | - let name = currentTask._task.attributes.name; |
32 | | - let channel = currentTask._task.attributes.channelType; |
| 38 | + /** |
| 39 | + * Subscribes to the redux store. |
| 40 | + * Fires a notification when a new task SID is added. |
| 41 | + */ |
33 | 42 |
|
34 | | - return `New ${channel} task from ${name}`; |
35 | | - } |
| 43 | + taskListener() { |
| 44 | + const nextState = this.manager.store.getState(); |
| 45 | + const nextTasks = nextState.flex.worker.tasks; |
| 46 | + const nextTaskKeys = Array.from(nextTasks.keys()); |
36 | 47 |
|
37 | | - function taskListener() { |
38 | | - let nextState = manager.store.getState(); |
39 | | - let nextTasks = nextState.flex.worker.tasks; |
40 | | - let nextTaskKeys = Array.from(nextTasks.keys()); |
| 48 | + for(let i = 0; i < nextTaskKeys.length; i++) { |
| 49 | + if (!this.currentTasks.includes(nextTaskKeys[i])) { |
| 50 | + this.currentTasks = nextTaskKeys; |
41 | 51 |
|
42 | | - console.log(nextState.flex.worker.tasks); |
| 52 | + const newTask = nextTaskKeys[i]; |
| 53 | + const message = this.alertMessage(newTask, nextTasks); |
43 | 54 |
|
44 | | - for(var i = 0; i < nextTaskKeys.length; i++) { |
45 | | - if (!currentTasks.includes(nextTaskKeys[i])) { |
46 | | - currentTasks = nextTaskKeys; |
| 55 | + if(this.registration) { |
| 56 | + this.showLocalNotification('Twilio Flex', message, this.registration); |
| 57 | + } |
| 58 | + console.log('New task') |
| 59 | + } |
| 60 | + } |
| 61 | + } |
47 | 62 |
|
48 | | - let newTask = nextTaskKeys[i]; |
49 | | - let message = alertMessage(newTask, nextTasks); |
| 63 | + showLocalNotification(title, body, swRegistration) { |
| 64 | + const options = { |
| 65 | + body, |
| 66 | + "icon": "/img/flex_icon.png", |
| 67 | + // here you can add more properties like icon, image, vibrate, etc. |
| 68 | + }; |
50 | 69 |
|
51 | | - if(registration) { |
52 | | - showLocalNotification('Twilio Flex', message, registration); |
53 | | - } |
54 | | - console.log('New task') |
55 | | - } |
56 | | - } |
57 | | - } |
| 70 | + swRegistration.showNotification(title, options); |
| 71 | + } |
58 | 72 |
|
59 | | - const requestNotificationPermission = async () => { |
60 | | - const permission = await window.Notification.requestPermission(); |
61 | | - // value of permission can be 'granted', 'default', 'denied' |
62 | | - // granted: user has accepted the request |
63 | | - // default: user has dismissed the notification permission popup by clicking on x |
64 | | - // denied: user has denied the request. |
65 | | - if(permission !== 'granted'){ |
66 | | - throw new Error('Permission not granted for Notification'); |
67 | | - } |
| 73 | + registerServiceWorker() { |
| 74 | + if (!('serviceWorker' in navigator)) { |
| 75 | + return; |
68 | 76 | } |
69 | 77 |
|
70 | | - function showLocalNotification(title, body, swRegistration) { |
71 | | - const options = { |
72 | | - body, |
73 | | - // here you can add more properties like icon, image, vibrate, etc. |
74 | | - }; |
75 | | - |
76 | | - swRegistration.showNotification(title, options); |
| 78 | + if (!('PushManager' in window)) { |
| 79 | + return; |
77 | 80 | } |
78 | 81 |
|
79 | | - function registerServiceWorker() { |
80 | | - if (!('serviceWorker' in navigator)) { |
81 | | - return; |
82 | | - } |
83 | | - |
84 | | - if (!('PushManager' in window)) { |
85 | | - return; |
86 | | - } |
87 | | - |
88 | | - return navigator.serviceWorker.register('/agent-desktop/service-worker.js') |
| 82 | + return navigator.serviceWorker.register('/agent-desktop/service-worker.js') |
89 | 83 | .then(function(reg) { |
90 | | - console.log('Service worker successfully registered.'); |
91 | | - registration = reg; |
92 | | - permission = requestNotificationPermission(); |
93 | | - return registration; |
94 | | - }) |
| 84 | + this.registerSuccess(reg); |
| 85 | + }.bind(this)) |
95 | 86 | .catch(function(err) { |
96 | 87 | console.error('Unable to register service worker.', err); |
97 | 88 | }); |
98 | | - } |
| 89 | + } |
99 | 90 |
|
100 | | - registerServiceWorker(); |
101 | | - const listen = manager.store.subscribe(taskListener); |
| 91 | + registerSuccess(reg) { |
| 92 | + this.registration = reg; |
| 93 | + this.permission = this.requestNotificationPermission(); |
| 94 | + console.log('Service worker successfully registered.'); |
102 | 95 |
|
103 | | - flex.AgentDesktopView.Panel1.Content.add( |
104 | | - <CustomTaskListComponent key="demo-component" />, |
105 | | - { |
106 | | - sortOrder: -1, |
| 96 | + return this.registration; |
| 97 | + } |
| 98 | + |
| 99 | + /** |
| 100 | + * value of permission can be 'granted', 'default', 'denied' |
| 101 | + */ |
| 102 | + |
| 103 | + async requestNotificationPermission () { |
| 104 | + const permission = await window.Notification.requestPermission(); |
| 105 | + // value of permission can be 'granted', 'default', 'denied' |
| 106 | + // granted: user has accepted the request |
| 107 | + // default: user has dismissed the notification permission popup by clicking on x |
| 108 | + // denied: user has denied the request. |
| 109 | + if(permission !== 'granted'){ |
| 110 | + throw new Error('Permission not granted for Notification'); |
107 | 111 | } |
108 | | - ); |
| 112 | + } |
| 113 | + |
| 114 | + init(flex, manager) { |
| 115 | + this.manager = manager; |
| 116 | + this.registerServiceWorker(); |
| 117 | + |
| 118 | + const listen = manager.store.subscribe(this.taskListener); |
109 | 119 | } |
110 | 120 | } |
0 commit comments