add click to call listener

README.md

@@ -63,7 +63,7 @@ Unavailable states programmed by default (One of these must be configured in Tas
 
 ## Changelog
 
-v1.3.1 - Simplified setup and installation instructions
+v1.4.0 - Simplified setup and installation instructions, click to call support via postMessage, new ringSound, minor fixes
 
 v1.3 - Moved dialpad to main header to avoid the responsive rendering of the side nav unmounting when resizing the canvas.
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "plugin-outbound-dialing-with-conference",
   "description": "Example front end implementation of a dialpad that creates outbound calls via a voice sdk and sends call to worker via task router",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "author": "Jared Hunter <[email protected]>",
   "private": true,
   "scripts": {

serverless/functions/outbound-dialing/callHandlerTwiml.protected.js

@@ -5,17 +5,23 @@ exports.handler = async function (context, event, callback) {
 	console.log("to:", event.To);
 	console.log("workflowSid:", context.TWILIO_WORKFLOW_SID);
 
-	var taskAttributes = {
+	let customAttributes = {};
+	try {
+		customAttributes = JSON.parse(event.attributes);
+	} catch (e) { }
+
+	const taskAttributes = Object.assign({
 		targetWorker: event.workerContactUri,
 		autoAnswer: "true",
 		type: "outbound",
 		direction: "outbound",
 		name: event.To
-	};
+	}, customAttributes);
 
-	let twiml = new Twilio.twiml.VoiceResponse();
+	console.log('attributes: ', taskAttributes);
 
-	var enqueue = twiml.enqueue({
+	const twiml = new Twilio.twiml.VoiceResponse();
+	const enqueue = twiml.enqueue({
 		workflowSid: `${context.TWILIO_WORKFLOW_SID}`
 	});
 

serverless/functions/outbound-dialing/makeCall.js

@@ -38,7 +38,7 @@ function makeOutboundCall(context, event) {
 			"https://" +
 			event.functionsDomain +
 			"/outbound-dialing/callHandlerTwiml?workerContactUri=" +
-			event.workerContactUri
+			event.workerContactUri + "&attributes=" + event.attributes
 		);
 
 		const statusCallbackURL = encodeURI(
@@ -96,4 +96,4 @@ exports.handler = TokenValidator(async function (context, event, callback) {
 
 	callback(null, response);
 
-});
+});

src/OutboundDialingWithConferencePlugin.js

@@ -5,6 +5,7 @@ import { Manager } from "@twilio/flex-ui";
 //independent features
 import { loadDialPadInterface } from "./components/dialpad"
 import { loadExternalTransferInterface } from "./components/external-transfer"
+import { CallControls } from './utilities/DialPadUtil'
 
 // common libraries
 import { registerReservationCreatedExtensions } from "./eventListeners/workerClient/reservationCreated";
@@ -32,15 +33,11 @@ function tokenUpdateHandler() {
 
 
 export default class OutboundDialingWithConferencePlugin extends FlexPlugin {
-
-
   constructor() {
     console.log('env', process.env);
     super(PLUGIN_NAME);
-
   }
 
-
   /**
    * This code is run when your plugin is being started
    * Use this to modify any UI components or attach to the actions framework
@@ -49,8 +46,7 @@ export default class OutboundDialingWithConferencePlugin extends FlexPlugin {
    * @param manager { import('@twilio/flex-ui').Manager }
    */
   init(flex, manager) {
-
-    var translationStrings = {
+    const translationStrings = {
       DIALPADExternalTransferHoverOver: "Add Conference Participant",
       DIALPADExternalTransferPhoneNumberPopupHeader: "Enter phone number to add to the conference",
       DIALPADExternalTransferPhoneNumberPopupTitle: "Phone Number",
@@ -68,5 +64,16 @@ export default class OutboundDialingWithConferencePlugin extends FlexPlugin {
     loadExternalTransferInterface.bind(this)(flex, manager)
     registerReservationCreatedExtensions(manager);
     registerActionExtensions();
+
+    window.addEventListener('message', this.onMessage, false);
   }
+
+  onMessage = e => {
+    try {
+      const data = JSON.parse(e.data);
+      if (data.action && data.action == 'outbound_dial' && data.to) {
+        CallControls.makeCall(data.to, data.from, data.attributes || {});
+      }
+    } catch (e) { }
+  };
 }

src/utilities/DialPadUtil.js

@@ -5,37 +5,33 @@ import {
 	SYNC_CLIENT
 } from "../OutboundDialingWithConferencePlugin"
 
-
-
 class CallControlsClass {
-
-	makeCall(to) {
-
+	makeCall(to, fromOverride, attributes) {
 		const manager = Manager.getInstance();
 		const workerPhoneNumber = manager.workerClient.attributes.phone;
 		const workerContactUri = manager.workerClient.attributes.contact_uri;
 		const workerSid = manager.workerClient.sid;
 		const token = manager.user.token;
 
-		const from = workerPhoneNumber ? workerPhoneNumber : DEFAULT_FROM_NUMBER;
+		const from = fromOverride || workerPhoneNumber ? workerPhoneNumber : DEFAULT_FROM_NUMBER;
 
 		const makeCallURL = `https://${FUNCTIONS_HOSTNAME}/outbound-dialing/makeCall`
 		const headers = {
 			'Content-Type': 'application/x-www-form-urlencoded'
 		}
+
 		const body = (
 			`Token=${encodeURIComponent(token)}`
 			+ `&To=${encodeURIComponent(to)}`
 			+ `&From=${encodeURIComponent(from)}`
 			+ `&workerContactUri=${encodeURIComponent(workerContactUri)}`
 			+ `&functionsDomain=${encodeURIComponent(FUNCTIONS_HOSTNAME)}`
 			+ `&workerSid=${encodeURIComponent(workerSid)}`
+			+ `&attributes=${encodeURIComponent(JSON.stringify(attributes))}`
 		)
 
 		console.log("OUTBOUND DIALPAD: Making remote request to dial: ", to);
-
-		return new Promise((resolve) => {
-
+		return new Promise(resolve => {
 			fetch(makeCallURL, {
 				headers,
 				method: 'POST',