Custom Minimized Component Code Samples

1({
2	onInit: function(cmp, evt, hlp) {
3        // Register the generic event handler for all the minimized events
4        cmp.find("minimizedAPI").registerEventHandler( hlp.minimizedEventHandler.bind(hlp, cmp));
5	},
6    
7    handleMaximize: function(cmp, evt, hlp) {
8        cmp.find("minimizedAPI").maximize();
9    }
10})

1({
2	minimizedEventHandler: function(cmp, eventName, eventData) {
3        switch(eventName) {
4			case "prechatState":
5				this.onPrechatState(cmp, eventData);
6				break;
7			case "offlineSupportState":
8				this.onOfflineSupportState(cmp, eventData);
9				break;
10			case "waitingState":
11				this.onWaitingState(cmp, eventData);
12				break;
13			case "queueUpdate":
14				this.onQueueUpdate(cmp, eventData);
15				break;
16			case "waitingEndedState":
17				this.onWaitingEndedState(cmp, eventData);
18				break;
19			case "chatState":
20				this.onChatState(cmp, eventData);
21				break;
22			case "chatTimeoutUpdate":
23				this.onChatTimeoutUpdate(cmp, eventData);
24				break;
25			case "chatUnreadMessage":
26				this.onChatUnreadMessage(cmp, eventData);
27				break;
28			case "chatTransferringState":
29				this.onChatTransferringState(cmp, eventData);
30				break;
31			case "chatEndedState":
32				this.onChatEndedState(cmp, eventData);
33				break;
34			case "reconnectingState":
35				this.onReconnectingState(cmp, eventData);
36				break;
37			case "postchatState":
38				this.onPostchatState(cmp, eventData);
39				break;
40			default:
41				throw new Error("Received unexpected minimized event '" + eventName + "'.");
42		}
43	},
44
45	/**
46	 * "prechatState" event handler. This fires when pre-chat state is initialized.
47	 *
48	 * @param {Aura.Component} cmp - This component.
49	 * @param {Object} eventData - The data associated with the event. Always contains a "label" property.
50	 */
51	onPrechatState: function(cmp, eventData) {
52		this.setMinimizedContent(cmp, eventData.label);
53	},
54
55	/**
56	 * "offlineSupportState" event handler. This fires when offline support state is initialized.
57	 *
58	 * @param {Aura.Component} cmp - This component.
59	 * @param {Object} eventData - The data associated with the event. Always contains a "label" property.
60	 */
61	onOfflineSupportState: function(cmp, eventData) {
62		this.setMinimizedContent(cmp, eventData.label);
63	},
64
65	/**
66	 * "waitingState" and "queueUpdate" are fired when EITHER
67	 * 1) waiting state is initialized, either with a new session or via page navigation or refresh, OR
68	 * 2) the visitor was previously in reconnecting, and they've regained connection.
69	 *
70	 * Only one of "waitingState" and "queueUpdate" is ever fired - never both.
71	 * - "waitingState" is fired if EITHER queue position is DISABLED, OR snippet version under 5.0.
72	 * - "queueUpdate" is fired if queue position is ENABLED, AND snippet version is 5.0 or later.
73	 */
74
75	/**
76	 * "waitingState" event handler. See above doc.
77	 *
78	 * @param {Aura.Component} cmp - This component.
79	 * @param {Object} eventData - The data associated with the event. Always contains a "label" property.
80	 */
81	onWaitingState: function(cmp, eventData) {
82		this.setMinimizedContent(cmp, eventData.label);
83	},
84
85	/**
86	 * "queueUpdate" event handler. See above doc.
87	 *
88	 * @param {Aura.Component} cmp - This component.
89	 * @param {Object} eventData - Event data. For this event, this contains label and queuePosition.
90	 */
91	onQueueUpdate: function(cmp, eventData) {
92		this.setMinimizedContent(cmp, eventData.label + " " + eventData.queuePosition);
93	},
94
95	/**
96	 * "waitingEndedState" event handler. This fires in waiting state when the chat request fails.
97	 *
98	 * @param {SampleCustomMinimizedUI.SampleCustomMinimizedUIComponent} cmp - This component.
99	 * @param {Object} eventData - Event data. For this event, this contains label and reason. We don't use reason though.
100	 */
101	onWaitingEndedState: function(cmp, eventData) {
102		this.setMinimizedContent(cmp, eventData.label);
103	},
104
105	/**
106	 * "chatState" event handler. This fires when EITHER
107	 * 1) chat state is initialized, either with a new session or via page navigation or refresh, OR
108	 * 2) the visitor was previously in chat transfer, and they've been connected to a new agent, OR
109	 * 3) the visitor was previously in reconnecting, and they've regained connection.
110	 *
111	 * @param {Aura.Component} cmp - This component.
112	 * @param {Object} eventData - The data associated with the event. Always contains a "label" property.
113	 */
114	onChatState: function(cmp, eventData) {
115		this.setMinimizedContent(cmp, eventData.label);
116	},
117
118	/**
119	 * "chatTimeoutUpdate" event handler. This fires when the visitor idle timeout has started.
120	 *
121	 * @param {Aura.Component} cmp - This component.
122	 * @param {Object} eventData - Event data. For this event, this contains label and timeoutSecondsRemaining.
123	 */
124	onChatTimeoutUpdate: function(cmp, eventData) {
125		this.setMinimizedContent(cmp, eventData.label);
126	},
127
128	/**
129	 * "chatUnreadMessage" event handler. This fires when the agent sends a message but the visitor hasn't seen it
130	 * yet, either because they are scrolled up in the chat message area, or because the widget is minimized.
131	 *
132	 * @param {Aura.Component} cmp - This component.
133	 * @param {Object} eventData - Event data. For this event, this contains label and unreadMessageCount.
134	 */
135	onChatUnreadMessage: function(cmp, eventData) {
136		this.setMinimizedContent(cmp, eventData.label);
137	},
138
139	/**
140	 * "chatTransferringState" event handler. This fires when a chat transfer has been initiated.
141	 *
142	 * @param {Aura.Component} cmp - This component.
143	 * @param {Object} eventData - The data associated with the event. Always contains a "label" property.
144	 */
145	onChatTransferringState: function(cmp, eventData) {
146		this.setMinimizedContent(cmp, eventData.label);
147	},
148
149	/**
150	 * "chatEndedState" event handler. This fires in chat state when the chat ends for any reason.
151	 *
152	 * @param {Aura.Component} cmp - This component.
153	 * @param {Object} eventData - Event data. For this event, this contains label and reason.
154	 */
155	onChatEndedState: function(cmp, eventData) {
156		this.setMinimizedContent(cmp, eventData.label);
157	},
158
159	/**
160	 * "reconnectingState" event handler. This fires in both waiting and chat state when the visitor loses connection.
161	 *
162	 * @param {Aura.Component} cmp - This component.
163	 * @param {Object} eventData - The data associated with the event. Always contains a "label" property.
164	 */
165	onReconnectingState: function(cmp, eventData) {
166		this.setMinimizedContent(cmp, eventData.label);
167	},
168
169	/**
170	 * "postchatState" event handler. This fires when the visitor enters post chat by clicking "Give Feedback".
171	 *
172	 * @param {Aura.Component} cmp - This component.
173	 * @param {Object} eventData - The data associated with the event. Always contains a "label" property.
174	 */
175	onPostchatState: function(cmp, eventData) {
176		this.setMinimizedContent(cmp, eventData.label);
177	},
178
179	/**
180	 * Update the contents of the sample minimized component.
181	 *
182	 * @param {Aura.Component} cmp - This component.
183	 * @param {String} message - The text to display.
184	 */
185	setMinimizedContent: function(cmp, message) {
186		cmp.set("v.message", message);
187	}
188});