feat(contact-center): Added new package for contact-center

docs/index.html

@@ -77,6 +77,8 @@ <h2 class="page-header">Samples</h2>
 
             <a href="./samples/calling/" class="list-group-item">Calling</a>
 
+            <a href="./samples/contact-center/" class="list-group-item">Contact Center</a>
+
             <a href="./samples/browser-plugin-meetings/" class="list-group-item">Meetings Plugin</a>
 
             <a href="./samples/browser-read-status/" class="list-group-item">Read Status</a>

docs/samples/contact-center/app.js

@@ -0,0 +1,171 @@
+/* eslint-disable no-underscore-dangle */
+/* eslint-env browser */
+
+/* global Webex */
+/* global Calling */
+
+/* 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;
+let agentDeviceType;
+let deviceId;
+
+const authTypeElm = document.querySelector('#auth-type');
+const credentialsFormElm = document.querySelector('#credentials');
+const tokenElm = document.querySelector('#access-token');
+const saveElm = document.querySelector('#access-token-save');
+const authStatusElm = document.querySelector('#access-token-status');
+const registerBtn = document.querySelector('#webexcc-register');
+
+
+// Store and Grab `access-token` from localstorage
+if (localStorage.getItem('date') > new Date().getTime()) {
+  tokenElm.value = localStorage.getItem('access-token');
+}
+else {
+  localStorage.removeItem('access-token');
+}
+
+tokenElm.addEventListener('change', (event) => {
+  localStorage.setItem('access-token', event.target.value);
+  localStorage.setItem('date', new Date().getTime() + (12 * 60 * 60 * 1000));
+});
+
+function changeAuthType() {
+  switch (authTypeElm.value) {
+    case 'accessToken':
+      toggleDisplay('credentials', true);
+      toggleDisplay('oauth', false);
+      break;
+    default:
+      break;
+  }
+}
+
+function toggleDisplay(elementId, status) {
+  const element = document.getElementById(elementId);
+
+  if (status) {
+    element.classList.remove('hidden');
+  }
+  else {
+    element.classList.add('hidden');
+  }
+}
+
+function generateWebexConfig({credentials}) {
+  return {
+    appName: 'sdk-samples',
+    appPlatform: 'testClient',
+    fedramp: false,
+    logger: {
+      level: 'log'
+    },
+    credentials,
+    // Any other sdk config we need
+  };
+}
+
+
+function initWebex(e) {
+  e.preventDefault();
+  console.log('Authentication#initWebex()');
+
+  tokenElm.disabled = true;
+  saveElm.disabled = true;
+  authStatusElm.innerText = 'initializing...';
+
+  const webexConfig = generateWebexConfig({})
+
+  webex = window.webex = Webex.init({
+    config: webexConfig,
+    credentials: {
+      access_token: tokenElm.value
+    }
+  });
+
+  webex.once('ready', async () => {
+    console.log('Authentication#initWebex() :: Webex Ready');
+
+    authStatusElm.innerText = 'Saved access token!';
+
+    registerBtn.disabled = false;
+  });
+
+  return false;
+}
+
+credentialsFormElm.addEventListener('submit', initWebex);
+
+function register() {
+    webex.cc.register(true).then((data) => {
+        console.log('Event subscription successful: ', data);
+    }).catch(() => {
+        console.log('Event subscription failed');
+    })
+}
+
+const allCollapsibleElements = document.querySelectorAll('.collapsible');
+allCollapsibleElements.forEach((el) => {
+  el.addEventListener('click', (event) => {
+    const {parentElement} = event.currentTarget;
+
+    const sectionContentElement = parentElement.querySelector('.section-content');
+    const arrowIcon = parentElement.querySelector('.arrow');
+
+    sectionContentElement.classList.toggle('collapsed');
+    arrowIcon.classList.contains('fa-angle-down') ? arrowIcon.classList.replace('fa-angle-down', 'fa-angle-up') : arrowIcon.classList.replace('fa-angle-up', 'fa-angle-down');
+
+    if(el.innerText !== 'Auth & Registration' && !sectionContentElement.classList.contains('collapsed')) {
+      // Note: Index of the Auth & Registration section may change if further re-ordering is done
+      allCollapsibleElements[1].parentElement.querySelector('.section-content').classList.add('collapsed');
+      allCollapsibleElements[1].parentElement.querySelector('.arrow').classList.replace('fa-angle-down', 'fa-angle-up');
+    }
+  });
+});
+
+// Get Access Token from URL and put in access token field
+if (window.location.hash) {
+  // hacky way to get access token from hash
+  const urlParams = new URLSearchParams(window.location.hash.replace('#', '?'));
+
+  const accessToken = urlParams.get('access_token');
+  const expiresIn = urlParams.get('expires_in');
+
+  if (accessToken) {
+    localStorage.setItem('access-token', accessToken);
+    localStorage.setItem('date', new Date().getTime() + parseInt(expiresIn, 10));
+    tokenElm.value = accessToken;
+  }
+}
+
+const allSectionContentElements = document.querySelectorAll('.section-content');
+const allArrowElements = document.querySelectorAll('.arrow');
+
+function collapseAll() {
+  allSectionContentElements.forEach((el) => {
+    el.classList.add('collapsed');
+  });
+
+  allArrowElements.forEach((el) => {
+    el.classList.replace('fa-angle-down', 'fa-angle-up');
+  });
+}
+
+function expandAll() {
+  allSectionContentElements.forEach((el) => {
+    el.classList.remove('collapsed');
+  });
+
+  allArrowElements.forEach((el) => {
+    el.classList.replace('fa-angle-up', 'fa-angle-down');
+  });
+}
+

docs/samples/contact-center/index.html

@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Webex JavaScript SDK Sample: Meetings Plugin</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css">
+  <link rel="stylesheet" href="./style.css" />
+</head>
+
+<body>
+  <!-- Expand and Collapse -->
+  <div class="box global-toggle-btn-wrapper">
+    <button onclick="expandAll()" class="global-toggle-btn" title="Expand all">
+      <div style="display: flex; align-items: center; gap: 0.5rem;">
+        <div style="display: flex; flex-direction: column;">
+          <i class="g-arrow fa fa-angle-up" aria-hidden="true"></i>
+          <i class="g-arrow fa fa-angle-down" aria-hidden="true" style="margin-top: -6px;"></i>
+        </div>
+        <div>EXPAND ALL</div>
+      </div>
+    </button>
+
+    <button onclick="collapseAll()" class="global-toggle-btn" title="Collapse all">
+      <div style="display: flex; align-items: center; gap: 0.5rem;">
+        <div style="display: flex; flex-direction: column;">
+          <i class="g-arrow fa fa-angle-down" aria-hidden="true"></i>
+          <i class="g-arrow fa fa-angle-up" aria-hidden="true" style="margin-top: -8px;"></i>
+        </div>
+        <div>COLLAPSE ALL</div>
+      </div>
+    </button>
+  </div>
+
+  <!-- Webex CC / authentication-credentials -->
+  <div class="box">
+    <section class="section-box">
+      <h2 class="collapsible">
+        Auth & Registration
+        <i class="arrow fa fa-angle-up" aria-hidden="true"></i>
+      </h2>
+
+      <div class="section-content">
+        <div>
+          <select name="auth-type" id="auth-type" onchange="changeAuthType()">
+            <option value="accessToken">Access Token</option>
+          </select>
+        </div>
+
+        <fieldset>
+          <legend>Authentication</legend>
+
+          <form id="credentials">
+            <p class="note">
+              NOTE: Click <a href="https://developer.webex.com/docs/getting-started" target="_blank">here</a> for
+              access token
+            </p>
+            <div>
+              <input id="access-token" name="accessToken" placeholder="Access Token" value="" type="text">
+              <button id="access-token-save" class="btn-code" type="submit">webex.init()</button>
+              <p id="access-token-status" class="status-par">Not initialized</p>
+            </div>
+          </form>
+        </fieldset>
+      </div>
+
+       <!-- contact-center / web socket connection setup -->
+       <div>
+        <form id="webexcc-registration">
+          <fieldset>
+            <legend>Registration</legend>
+            <p class="note">
+              NOTE: Webex CC SDK websocket connection setup
+            </p>
+            <div class="u-mv">
+              <button id="webexcc-register" type="button" onclick="register()" disabled=""
+                class="btn-code">webex.cc.register()</button>
+              <p id="ws-connection-status" class="status-par">Not Subscribed</p>
+            </div>
+          </fieldset>
+        </form>
+      </div>   
+  </div>
+  </section>
+  </div>
+
+  <div class="box">
+    <section class="section-box">
+      <h2 class="collapsible">
+        Agent Desktop Using Webex CC SDK
+        <i class="arrow fa fa-angle-down" aria-hidden="true"></i>
+      </h2>
+
+      <div class="section-content">
+            </div>
+          </div>
+        </fieldset>
+      </div>
+    </section>
+  </div>
+
+  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
+  <script src="../webex.min.js"></script>
+  <script src="../calling.min.js"></script>
+  <script src="../webexcc.min.js"></script>
+  <script src="app.js"></script>
+</body>
+
+</html>