From 74ca7b5dd99d978fadcdd5a56f95e33f9423b894 Mon Sep 17 00:00:00 2001 From: Martin Amps Date: Fri, 15 May 2020 01:02:14 -0500 Subject: [PATCH] add click to call listener --- README.md | 2 +- package.json | 2 +- .../callHandlerTwiml.protected.js | 14 ++++++++++---- .../functions/outbound-dialing/makeCall.js | 4 ++-- src/OutboundDialingWithConferencePlugin.js | 19 +++++++++++++------ src/utilities/DialPadUtil.js | 14 +++++--------- 6 files changed, 32 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index 7544d61..fbfaed8 100644 --- a/README.md +++ b/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. diff --git a/package.json b/package.json index 9f408be..b32d434 100644 --- a/package.json +++ b/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 ", "private": true, "scripts": { diff --git a/serverless/functions/outbound-dialing/callHandlerTwiml.protected.js b/serverless/functions/outbound-dialing/callHandlerTwiml.protected.js index d091736..0088c1c 100644 --- a/serverless/functions/outbound-dialing/callHandlerTwiml.protected.js +++ b/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}` }); diff --git a/serverless/functions/outbound-dialing/makeCall.js b/serverless/functions/outbound-dialing/makeCall.js index baf9dd2..a9bf89e 100644 --- a/serverless/functions/outbound-dialing/makeCall.js +++ b/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); -}); \ No newline at end of file +}); diff --git a/src/OutboundDialingWithConferencePlugin.js b/src/OutboundDialingWithConferencePlugin.js index 246b3d5..774f6a9 100644 --- a/src/OutboundDialingWithConferencePlugin.js +++ b/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) { } + }; } diff --git a/src/utilities/DialPadUtil.js b/src/utilities/DialPadUtil.js index 5223625..0ba7c32 100644 --- a/src/utilities/DialPadUtil.js +++ b/src/utilities/DialPadUtil.js @@ -5,24 +5,21 @@ 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)}` @@ -30,12 +27,11 @@ class CallControlsClass { + `&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',