feat(cc): contact center agent login implementation

docs/samples/contact-center/app.js

@@ -22,6 +22,9 @@ 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');
+const teamsDropdown = document.querySelector('#teamsDropdown');
+const agentLogin = document.querySelector('#AgentLogin');
+const agentLoginButton = document.querySelector('#loginAgent');
 
 
 // Store and Grab `access-token` from localstorage
@@ -103,14 +106,55 @@ function initWebex(e) {
 
 credentialsFormElm.addEventListener('submit', initWebex);
 
+
 function register() {
-    webex.cc.register(true).then((data) => {
+    webex.cc.register().then((data) => {
         console.log('Event subscription successful: ', data);
-    }).catch(() => {
-        console.log('Event subscription failed');
+        const agentProfile = webex.cc.getAgentProfileData();
+        console.log('agent profile is', agentProfile);
+        teamsDropdown.innerHTML = ''; // Clear previously selected option on teamsDropdown
+        const listTeams = agentProfile.teamsList;
+        console.log('teams list is', listTeams);
+        listTeams.forEach((team) => {
+          console.log(team);
+          if(team.teamType === "AGENT") {
+            console.log('inside if condition!');
+            const option = document.createElement('option');
+            option.value = team.id;
+            option.text = team.name;
+            teamsDropdown.add(option);
+          }
+        });
+        const loginVoiceOptions = agentProfile.agentDesktopProfile.loginVoiceOptions;
+        agentLogin.innerHTML = '' // Clear previously selected option on agentLogin.
+        console.log('loginVoiceOptions is', loginVoiceOptions);
+        if(loginVoiceOptions.length > 0) agentLoginButton.disabled = false;
+        loginVoiceOptions.forEach((voiceOptions)=> {
+          const option = document.createElement('option');
+          option.text = voiceOptions;
+          option.value = voiceOptions;
+          agentLogin.add(option);
+        });
+    }).catch((error) => {
+        console.log('Event subscription failed', error);
     })
 }
 
+async function handleAgentLogin(e) {
+  const value = e.target.value;
+  if (value === 'Desktop') {
+    agentDeviceType = 'BROWSER';
+    deviceId = 'webrtc-6b310dff-569e-4ac7-b064-70f834ea56d8'
+  } else {
+    agentDeviceType = 'EXTENSION';
+    deviceId = '1001'
+  }
+}
+
+function doAgentLogin() {
+  webex.cc.doAgentLogin(teamsDropdown.value, agentDeviceType, deviceId);
+}
+
 const allCollapsibleElements = document.querySelectorAll('.collapsible');
 allCollapsibleElements.forEach((el) => {
   el.addEventListener('click', (event) => {

docs/samples/contact-center/index.html

@@ -85,19 +85,46 @@ <h2 class="collapsible">
   </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 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">
+          <fieldset>
+            <legend>Agent</legend>
+            <p class="note">
+              NOTE: Teams are fetched automatically for the Agent Login.
+            </p>
+            <div class="screenshare-section">
+              <div style="display: flex; gap: 1rem;">
+                <fieldset style="flex: 0.69;">
+                  <legend>Select Team</legend>
+                  <select id="teamsDropdown" class="form-control w-auto my-3">Teams</select>
+                </fieldset>
+                <fieldset>
+                  <legend>Agent Login</legend>
+                  <select name="AgentLogin" id="AgentLogin" class="AgentLogin" onchange="handleAgentLogin(event)">
+                    <option value="" selected hidden>Choose Agent Login ...</option>
+                  </select>
+                  <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" onclick="logoutAgent()">Logout Agent</button>
+                </fieldset>
+                <fieldset>
+                  <legend>Agent status</legend>
+                  <select id="statusDropdown" class="form-control w-auto my-3"></select>
+                  <button id="setAgentStatus" class="btn btn-primary my-3 ml-2" onclick="setAgentStatus()">set
+                    sate</button>
+                </fieldset>
+              </div>
             </div>
-          </div>
-        </fieldset>
-      </div>
-    </section>
+          </fieldset>
+        </div>
+      </section>
+    </div>
   </div>
 
   <script src="../webex.min.js"></script>