feat(plugin-cc): added-call-control

docs/samples/contact-center/app.js

@@ -18,6 +18,10 @@ let deviceId;
 let agentStatusId;
 let agentStatus;
 let agentId;
+let taskControl;
+let task;
+let taskId;
+let agentAuxCodeId;
 
 const authTypeElm = document.querySelector('#auth-type');
 const credentialsFormElm = document.querySelector('#credentials');
@@ -27,13 +31,22 @@ const authStatusElm = document.querySelector('#access-token-status');
 const registerBtn = document.querySelector('#webexcc-register');
 const teamsDropdown = document.querySelector('#teamsDropdown');
 const agentLogin = document.querySelector('#AgentLogin');
-const agentLoginButton = document.querySelector('#loginAgent');
+const loginAgentElm = document.querySelector('#loginAgent');
 const dialNumber = document.querySelector('#dialNumber');
 const registerStatus = document.querySelector('#ws-connection-status');
 const idleCodesDropdown = document.querySelector('#idleCodesDropdown')
 const setAgentStatusButton = document.querySelector('#setAgentStatus');
 const logoutAgentElm = document.querySelector('#logoutAgent');
 const buddyAgentsDropdownElm = document.getElementById('buddyAgentsDropdown');
+const incomingCallListener = document.querySelector('#incomingsection');
+const incomingDetailsElm = document.querySelector('#incoming-call');
+const answerElm = document.querySelector('#answer');
+const declineElm = document.querySelector('#decline');
+const callControlListener = document.querySelector('#callcontrolsection');
+const holdElm = document.querySelector('#hold');
+const resumeElm = document.querySelector('#resume');
+const endElm = document.querySelector('#end');
+const wrapupElm = document.querySelector('#wrapup');
 
 // Store and Grab `access-token` from sessionStorage
 if (sessionStorage.getItem('date') > new Date().getTime()) {
@@ -70,6 +83,19 @@ function toggleDisplay(elementId, status) {
   }
 }
 
+const taskEvents = new CustomEvent('task:incoming', {
+  detail: {
+    task: task,
+  },
+});
+
+// TODO: Activate the call control buttons once the call is accepted and refctor this
+function registerListeners(task) {
+  task.on('task:assigned', (task) => {
+    console.log('Call has been accepted');
+  }) 
+}
+
 function generateWebexConfig({credentials}) {
   return {
     appName: 'sdk-samples',
@@ -122,6 +148,7 @@ function register() {
         teamsDropdown.innerHTML = ''; // Clear previously selected option on teamsDropdown
         const listTeams = agentProfile.teams;
         agentId = agentProfile.agentId;
+        agentAuxCodeId = agentProfile.defaultWrapupCode;
         listTeams.forEach((team) => {
             const option = document.createElement('option');
             option.value = team.id;
@@ -132,7 +159,7 @@ function register() {
         agentLogin.innerHTML = '<option value="" selected>Choose Agent Login ...</option>'; // Clear previously selected option on agentLogin.
         dialNumber.value = agentProfile.defaultDn ? agentProfile.defaultDn : '';
         dialNumber.disabled = agentProfile.defaultDn ? false : true;
-        if(loginVoiceOptions.length > 0) agentLoginButton.disabled = false;
+        if (loginVoiceOptions.length > 0) loginAgentElm.disabled = false;
         loginVoiceOptions.forEach((voiceOptions)=> {
           const option = document.createElement('option');
           option.text = voiceOptions;
@@ -157,10 +184,15 @@ function register() {
             idleCodesDropdown.add(option);
           }
         });
-
     }).catch((error) => {
         console.error('Event subscription failed', error);
     })
+
+    webex.cc.eventEmitter.on('task:incoming', (task) => {
+      taskEvents.detail.task = task;
+
+      incomingCallListener.dispatchEvent(taskEvents);
+    }) 
 }
 
 async function handleAgentLogin(e) {
@@ -178,6 +210,7 @@ async function handleAgentLogin(e) {
 function doAgentLogin() {
   webex.cc.stationLogin({teamId: teamsDropdown.value, loginOption: agentDeviceType, dialNumber: dialNumber.value}).then((response) => {
     console.log('Agent Logged in successfully', response);
+    loginAgentElm.disabled = true;
     logoutAgentElm.classList.remove('hidden');
   }
   ).catch((error) => {
@@ -205,6 +238,7 @@ function setAgentStatus() {
 function logoutAgent() {
   webex.cc.stationLogout({logoutReason: 'logout'}).then((response) => {
     console.log('Agent logged out successfully', response);
+    loginAgentElm.disabled = false;
 
     setTimeout(() => {
       logoutAgentElm.classList.add('hidden');
@@ -247,6 +281,39 @@ async function fetchBuddyAgents() {
   }
 }
 
+incomingCallListener.addEventListener('task:incoming', (event) => {
+  taskId = event.detail.task.data.interactionId;
+  task = event.detail.task;
+  const callerDisplay = event.detail.task.data.interaction.callAssociatedDetails.ani;
+
+  if (event.detail.task.webCallingService.loginOption === 'BROWSER') {
+    answerElm.disabled = false;
+    declineElm.disabled = false;
+
+    incomingDetailsElm.innerText = `Call from ${callerDisplay}`;
+  } else {
+    incomingDetailsElm.innerText = `Call from ${callerDisplay}...please answer on the endpoint where the agent's extension is registered`;
+  }
+});
+
+function answer() {
+  answerElm.disabled = true;
+  declineElm.disabled = true;
+  holdElm.disabled = false;
+  resumeElm.disabled = true;
+  endElm.disabled = false;
+  wrapupElm.disabled = true;
+  task.accept(taskId);
+  incomingDetailsElm.innerText = 'Call Accepted';
+}
+
+function decline() {
+  answerElm.disabled = true;
+  declineElm.disabled = true;
+  task.decline(taskId);
+  incomingDetailsElm.innerText = 'No incoming calls';
+}
+
 const allCollapsibleElements = document.querySelectorAll('.collapsible');
 allCollapsibleElements.forEach((el) => {
   el.addEventListener('click', (event) => {
@@ -304,3 +371,51 @@ function expandAll() {
   });
 }
 
+function holdCall() {
+  holdElm.disabled = true;
+  webex.cc.taskManager.task.hold(taskId).then(() => {
+    console.info('Call held successfully');
+    resumeElm.disabled = false;
+  }).catch((error) => {
+    console.error('Failed to hold the call', error);
+    holdElm.disabled = false;
+  });
+}
+
+function resumeCall() {
+  resumeElm.disabled = true;
+  webex.cc.taskManager.task.resume(taskId).then(() => {
+    console.info('Call resumed successfully');
+    holdElm.disabled = false;
+  }).catch((error) => {
+    console.error('Failed to resume the call', error);
+    resumeElm.disabled = false;
+  });
+}
+
+function endCall() {
+  endElm.disabled = true;
+  webex.cc.taskManager.task.end(taskId).then((agent) => {
+    console.log('Call ended successfully');
+    holdElm.disabled = true;
+    resumeElm.disabled = true;
+    wrapupElm.disabled = false;
+  }).catch((error) => {
+    console.error('Failed to end the call', error);
+    endElm.disabled = false;
+  });
+}
+
+function wrapupCall() {
+  wrapupElm.disabled = true;
+  webex.cc.taskManager.task.wrapup(taskId, {wrapUpReason: 'Sale', auxCodeId: agentAuxCodeId}).then((wrapup) => {
+    console.info('Call wrapped up successfully');
+    holdElm.disabled = true;
+    resumeElm.disabled = true;
+    endElm.disabled = true;
+  }).catch((error) => {
+    console.error('Failed to wrap up the call', error);
+    wrapupElm.disabled = false;
+  });
+}
+

docs/samples/contact-center/index.html

@@ -110,9 +110,8 @@ <h2 class="collapsible">
                     <option value="" selected hidden>Choose Agent Login ...</option>
                   </select>
                   <input id="dialNumber" name="dialNumber" placeholder="Dial Number" value="" type="text">
-                  <button id="loginAgent" disabled class="btn btn-primary my-3" onclick="doAgentLogin()">Login With
-                    Selected Team</button>
-                  <button id="logoutAgent" class="btn btn-primary my-3 ml-2 hidden" onclick="logoutAgent()">Logout Agent</button>
+                  <button id="loginAgent" disabled class="btn btn-primary my-3" onclick="doAgentLogin()">Login</button>
+                  <button id="logoutAgent" class="btn btn-primary my-3 ml-2 hidden" onclick="logoutAgent()">Logout</button>
                 </fieldset>
                 <fieldset>
                   <legend>Agent status</legend>
@@ -131,6 +130,29 @@ <h2 class="collapsible">
             </div>
           </fieldset>
         </div>
+         <!-- calling / incoming -->
+         <div id="incomingsection">
+          <fieldset>
+            <legend>Incoming Call</legend>
+            <div class="u-mv">
+              <pre id="incoming-call"> No Incoming Calls</pre>
+              <button onclick="answer()" disabled="" id="answer" class="btn--green">Answer</button>
+              <button onclick="decline()" disabled="" id="decline" class="btn--red">Decline</button>
+            </div>
+          </fieldset>
+        </div>
+          <!-- Agent Call Controls -->
+          <div id="callcontrolsection">
+            <fieldset>
+              <legend>Call Controls</legend>
+              <div class="u-mv">
+                <button onclick="holdCall()" id="hold" class="btn--yellow" disabled>Hold</button>
+                <button onclick="resumeCall()" id="resume" class="btn--blue" disabled>Resume</button>
+                <button onclick="endCall()" id="end" class="btn--red" disabled>End</button>
+                <button onclick="wrapupCall()" id="wrapup" class="btn--green" disabled>Wrapup</button>
+              </div>
+            </fieldset>
+          </div>
       </section>
     </div>
   </div>

packages/@webex/plugin-cc/src/cc.ts

@@ -1,4 +1,5 @@
 import {WebexPlugin} from '@webex/webex-core';
+import EventEmitter from 'events';
 import {
   SetStateResponse,
   CCPluginConfig,
@@ -14,7 +15,6 @@ import {
   SubscribeRequest,
 } from './types';
 import {READY, CC_FILE, EMPTY_STRING} from './constants';
-import WebCallingService from './services/WebCallingService';
 import {AGENT, WEB_RTC_PREFIX} from './services/constants';
 import Services from './services';
 import HttpRequest from './services/core/HttpRequest';
@@ -24,19 +24,25 @@ import {getErrorDetails} from './services/core/Utils';
 import {Profile, WelcomeEvent} from './services/config/types';
 import {AGENT_STATE_AVAILABLE} from './services/config/constants';
 import {ConnectionLostDetails} from './services/core/WebSocket/types';
+import TaskManager from './services/task/TaskManager';
+import WebCallingService from './services/WebCallingService';
+import {ITask, TASK_EVENTS} from './services/task/types';
 
 export default class ContactCenter extends WebexPlugin implements IContactCenter {
   namespace = 'cc';
   private $config: CCPluginConfig;
   private $webex: WebexSDK;
+  private eventEmitter: EventEmitter;
   private agentConfig: Profile;
   private webCallingService: WebCallingService;
   private services: Services;
   private httpRequest: HttpRequest;
+  private taskManager: TaskManager;
 
   constructor(...args) {
     super(...args);
 
+    this.eventEmitter = new EventEmitter();
     // @ts-ignore
     this.$webex = this.webex;
 
@@ -57,11 +63,26 @@ export default class ContactCenter extends WebexPlugin implements IContactCenter
       });
 
       this.webCallingService = new WebCallingService(this.$webex, this.$config.callingClientConfig);
+      this.taskManager = TaskManager.getTaskManager(
+        this.services.contact,
+        this.webCallingService,
+        this.services.webSocketManager
+      );
 
+      this.incomingTaskListener();
       LoggerProxy.initialize(this.$webex.logger);
     });
   }
 
+  /**
+   * An Incoming Call listener.
+   */
+  private incomingTaskListener() {
+    this.taskManager.on(TASK_EVENTS.TASK_INCOMING, (task: ITask) => {
+      this.eventEmitter.emit(TASK_EVENTS.TASK_INCOMING, task);
+    });
+  }
+
   /**
    * This is used for making the CC SDK ready by setting up the cc mercury connection.
    */
@@ -164,7 +185,7 @@ export default class ContactCenter extends WebexPlugin implements IContactCenter
       });
 
       if (data.loginOption === LoginOption.BROWSER) {
-        await this.webCallingService.registerWebCallingLine();
+        await this.webCallingService.registerWebCallingLine(data.loginOption);
       }
 
       await loginResponse;
@@ -333,7 +354,7 @@ export default class ContactCenter extends WebexPlugin implements IContactCenter
   private async handleDeviceType(deviceType: LoginOption, dn: string): Promise<void> {
     switch (deviceType) {
       case LoginOption.BROWSER:
-        await this.webCallingService.registerWebCallingLine();
+        await this.webCallingService.registerWebCallingLine(deviceType);
         break;
       case LoginOption.AGENT_DN:
       case LoginOption.EXTENSION: