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

docs/samples/contact-center/app.js

@@ -1,15 +1,3 @@
-/* eslint-disable no-underscore-dangle */
-/* eslint-env browser */
-
-/* global Webex */
-
-/* eslint-disable require-jsdoc */
-/* eslint-disable no-unused-vars */
-/* eslint-disable no-console */
-/* eslint-disable no-global-assign */
-/* eslint-disable no-multi-assign */
-/* eslint-disable max-len */
-
 // Globals
 let webex;
 let sdk;
@@ -18,6 +6,10 @@ let deviceId;
 let agentStatusId;
 let agentStatus;
 let agentId;
+let taskControl;
+let task;
+let taskId;
+let wrapupCodes = []; // Add this to store wrapup codes
 
 const authTypeElm = document.querySelector('#auth-type');
 const credentialsFormElm = document.querySelector('#credentials');
@@ -27,13 +19,24 @@ 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 holdResumeElm = document.querySelector('#hold-resume');
+const pauseResumeRecordingElm = document.querySelector('#pause-resume-recording');
+const endElm = document.querySelector('#end');
+const wrapupElm = document.querySelector('#wrapup');
+const wrapupCodesDropdownElm = document.querySelector('#wrapupCodesDropdown');
+const autoResumeCheckboxElm = document.querySelector('#auto-resume-checkbox'); // Add this
 
 // Store and Grab `access-token` from sessionStorage
 if (sessionStorage.getItem('date') > new Date().getTime()) {
@@ -70,6 +73,26 @@ 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 registerTaskListeners(task) {
+  task.on('task:assigned', (task) => {
+    console.info('Call has been accepted for task: ', task.data.interactionId);
+  });
+  task.on('task:media', (track) => {
+    document.getElementById('remote-audio').srcObject = new MediaStream([track]);
+  });
+  task.on('task:end', (task) => {
+    // Need to add check here to enable wrapup if the end button is not pressed
+    console.info('Call ended');
+  });
+}
+
 function generateWebexConfig({credentials}) {
   return {
     appName: 'sdk-samples',
@@ -122,6 +145,8 @@ function register() {
         teamsDropdown.innerHTML = ''; // Clear previously selected option on teamsDropdown
         const listTeams = agentProfile.teams;
         agentId = agentProfile.agentId;
+        wrapupCodes = agentProfile.wrapupCodes;
+        populateWrapupCodesDropdown();
         listTeams.forEach((team) => {
             const option = document.createElement('option');
             option.value = team.id;
@@ -132,7 +157,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;
@@ -142,6 +167,7 @@ function register() {
         });
 
         if (agentProfile.isAgentLoggedIn) {
+          loginAgentElm.disabled = true;
           logoutAgentElm.classList.remove('hidden');
         }
 
@@ -157,10 +183,25 @@ 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);
+    }) 
+}
+
+function populateWrapupCodesDropdown() {
+  wrapupCodesDropdownElm.innerHTML = ''; // Clear previous options
+  wrapupCodes.forEach((code) => {
+    const option = document.createElement('option');
+    option.text = code.name;
+    option.value = code.id;
+    wrapupCodesDropdownElm.add(option);
+  });
 }
 
 async function handleAgentLogin(e) {
@@ -178,6 +219,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 +247,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 +290,41 @@ 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;
+  registerTaskListeners(task);
+
+  if (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;
+  holdResumeElm.disabled = false;
+  holdResumeElm.innerText = 'Hold';
+  pauseResumeRecordingElm.disabled = false;
+  pauseResumeRecordingElm.innerText = 'Pause Recording';
+  endElm.disabled = false;
+  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 +382,82 @@ function expandAll() {
   });
 }
 
+function holdResumeCall() {
+  if (holdResumeElm.innerText === 'Hold') {
+    holdResumeElm.disabled = true;
+    task.hold().then(() => {
+      console.info('Call held successfully');
+      holdResumeElm.innerText = 'Resume';
+      holdResumeElm.disabled = false;
+    }).catch((error) => {
+      console.error('Failed to hold the call', error);
+      holdResumeElm.disabled = false;
+    });
+  } else {
+    holdResumeElm.disabled = true;
+    task.resume().then(() => {
+      console.info('Call resumed successfully');
+      holdResumeElm.innerText = 'Hold';
+      holdResumeElm.disabled = false;
+    }).catch((error) => {
+      console.error('Failed to resume the call', error);
+      holdResumeElm.disabled = false;
+    });
+  }
+}
+
+function togglePauseResumeRecording() {
+  const autoResumed = autoResumeCheckboxElm.checked;
+  if (pauseResumeRecordingElm.innerText === 'Pause Recording') {
+    pauseResumeRecordingElm.disabled = true;
+    task.pauseRecording().then(() => {
+      console.info('Recording paused successfully');
+      pauseResumeRecordingElm.innerText = 'Resume Recording';
+      pauseResumeRecordingElm.disabled = false;
+      autoResumeCheckboxElm.disabled = false;
+    }).catch((error) => {
+      console.error('Failed to pause recording', error);
+      pauseResumeRecordingElm.disabled = false;
+    });
+  } else {
+    pauseResumeRecordingElm.disabled = true;
+    task.resumeRecording({ autoResumed: autoResumed }).then(() => {
+      console.info('Recording resumed successfully');
+      pauseResumeRecordingElm.innerText = 'Pause Recording';
+      pauseResumeRecordingElm.disabled = false;
+      autoResumeCheckboxElm.disabled = true;
+    }).catch((error) => {
+      console.error('Failed to resume recording', error);
+      pauseResumeRecordingElm.disabled = false;
+    });
+  }
+}
+
+function endCall() {
+  endElm.disabled = true;
+  task.end().then(() => {
+    console.log('Call ended successfully');
+    holdResumeElm.disabled = true;
+    pauseResumeRecordingElm.disabled = true;
+    wrapupElm.disabled = false;
+    wrapupCodesDropdownElm.disabled = false;
+  }).catch((error) => {
+    console.error('Failed to end the call', error);
+    endElm.disabled = false;
+  });
+}
+
+function wrapupCall() {
+  wrapupElm.disabled = true;
+  const wrapupReason = wrapupCodesDropdownElm.options[wrapupCodesDropdownElm.selectedIndex].text;
+  const auxCodeId = wrapupCodesDropdownElm.options[wrapupCodesDropdownElm.selectedIndex].value;
+  task.wrapup({wrapUpReason: wrapupReason, auxCodeId: auxCodeId}).then(() => {
+    console.info('Call wrapped up successfully');
+    holdResumeElm.disabled = true;
+    endElm.disabled = true;
+    wrapupCodesDropdownElm.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,47 @@ <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>
+          <fieldset>
+            <legend>Remote Audio</legend>
+            <audio id="remote-audio" autoplay></audio>
+          </fieldset>
+        </div>
+          <!-- Agent Call Controls -->
+          <div id="callcontrolsection">
+            <fieldset>
+              <legend>Call Controls</legend>
+              <div class="u-mv">
+                <button onclick="holdResumeCall()" id="hold-resume" class="btn--yellow" disabled>Hold</button>
+                <button onclick="endCall()" id="end" class="btn--red" disabled>End</button>
+                <fieldset>
+                  <legend>Call Wrapup</legend>
+                  <button onclick="wrapupCall()" id="wrapup" class="btn--green" disabled>Wrapup</button>
+                  <select id="wrapupCodesDropdown" disabled>
+                    <option value="" selected hidden>Select Wrapup Code</option>
+                  </select>
+                </fieldset>
+                <fieldset>
+                  <legend>Recording Controls</legend>
+                  <div class="u-mv">
+                    <button onclick="togglePauseResumeRecording()" id="pause-resume-recording" class="btn--blue" disabled>Pause Recording</button>
+                    <label for="auto-resume-checkbox" style="margin-left: 10px;">
+                      <input type="checkbox" id="auto-resume-checkbox" disabled> Auto Resume
+                    </label>
+                  </div>
+                </fieldset>
+              </div>
+            </fieldset>
+          </div>
       </section>
     </div>
   </div>