feat: taskList and IncomingTask widgets added

docs/react-samples/src/App.tsx

@@ -1,27 +1,43 @@
-import React, { useState } from 'react';
-import {StationLogin, UserState, store} from '@webex/cc-widgets'
+import React, {useState} from 'react';
+import {StationLogin, UserState, IncomingTask, TaskList, store} from '@webex/cc-widgets';
 
 function App() {
   const [isSdkReady, setIsSdkReady] = useState(false);
-  const [accessToken, setAccessToken] = useState("");
+  const [accessToken, setAccessToken] = useState('');
   const [isLoggedIn, setIsLoggedIn] = useState(false);
 
   const webexConfig = {
-      fedramp: false,
-      logger: {
-        level: 'log'
-      }
-  }
+    fedramp: false,
+    logger: {
+      level: 'log',
+    },
+  };
 
   const onLogin = () => {
     console.log('Agent login has been succesful');
     setIsLoggedIn(true);
-  }
+  };
 
   const onLogout = () => {
     console.log('Agent logout has been succesful');
     setIsLoggedIn(false);
-  }
+  };
+
+  const onAccepted = () => {
+    console.log('onAccepted Invoked');
+  };
+
+  const onDeclined = () => {
+    console.log('onDeclined invoked');
+  };
+
+  const onTaskAccepted = () => {
+    console.log('onTaskAccepted invoked');
+  };
+
+  const onTaskDeclined = () => {
+    console.log('onTaskDeclined invoked');
+  };
 
   return (
     <>
@@ -33,25 +49,30 @@ function App() {
         onChange={(e) => setAccessToken(e.target.value)}
       />
       <button
-        disabled={accessToken.trim() === ""}
+        disabled={accessToken.trim() === ''}
         onClick={() => {
           store.init({webexConfig, access_token: accessToken}).then(() => {
             setIsSdkReady(true);
           });
         }}
-      >Init Widgets</button>
-      {
-        isSdkReady && (
-          <>
-            <StationLogin  onLogin={onLogin} onLogout={onLogout} />
-            {
-              isLoggedIn && <UserState />
-            }
-          </>
-        )
-      }
+      >
+        Init Widgets
+      </button>
+      {isSdkReady && (
+        <>
+          <StationLogin onLogin={onLogin} onLogout={onLogout} />
+          {isLoggedIn && (
+            <>
+              <UserState />
+              <IncomingTask onAccepted={onAccepted} onDeclined={onDeclined} />
+              <TaskList onTaskAccepted={onTaskAccepted} onTaskDeclined={onTaskDeclined} />
+            </>
+          )}
+        </>
+      )}
     </>
   );
 }
-
+// @ts-ignore
+window.store = store;
 export default App;

docs/web-component-samples/app.js

@@ -2,6 +2,8 @@ const accessTokenElem = document.getElementById('access_token_elem');
 const widgetsContainer = document.getElementById('widgets-container');
 const ccStationLogin = document.getElementById('cc-station-login');
 const ccUserState = document.createElement('widget-cc-user-state');
+const ccIncomingTask = document.createElement('widget-cc-incoming-task');
+const ccTaskList = document.createElement('widget-cc-task-list');
 
 if (!ccStationLogin && !ccUserState) {
     console.error('Failed to find the required elements');
@@ -25,6 +27,10 @@ function initWidgets(){
     }).then(() => {
         ccStationLogin.onLogin = loginSuccess;
         ccStationLogin.onLogout = logoutSuccess;
+        ccIncomingTask.onAccepted = onAccepted;
+        ccIncomingTask.onDeclined = onDeclined;
+        ccTaskList.onTaskAccepted = onTaskAccepted;
+        ccTaskList.onTaskDeclined = onTaskDeclined;
         ccStationLogin.classList.remove('disabled');
     }).catch((error) => {
         console.error('Failed to initialize widgets:', error);
@@ -35,9 +41,27 @@ function loginSuccess(){
     console.log('Agent login has been succesful');
     ccUserState.classList.remove('disabled');
     widgetsContainer.appendChild(ccUserState);
+    widgetsContainer.appendChild(ccIncomingTask);
+    widgetsContainer.appendChild(ccTaskList);
 }
 
 function logoutSuccess(){
     console.log('Agent logout has been succesful');
     ccUserState.classList.add('disabled');
-}
+}
+
+function onAccepted(){
+    console.log('onAccepted Invoked');
+};
+
+function onDeclined(){
+    console.log('onDeclined invoked');
+};
+
+function onTaskAccepted(){
+    console.log('onTaskAccepted invoked');
+};
+
+function onTaskDeclined(){
+    console.log('onTaskDeclined invoked');
+};

packages/contact-center/cc-widgets/package.json

@@ -24,6 +24,7 @@
     "@r2wc/react-to-web-component": "2.0.3",
     "@webex/cc-station-login": "workspace:*",
     "@webex/cc-store": "workspace:*",
+    "@webex/cc-task": "workspace:*",
     "@webex/cc-user-state": "workspace:*"
   },
   "devDependencies": {

packages/contact-center/cc-widgets/src/index.ts

@@ -1,5 +1,6 @@
 import {StationLogin} from '@webex/cc-station-login';
 import {UserState} from '@webex/cc-user-state';
+import {IncomingTask, TaskList} from '@webex/cc-task';
 import store from '@webex/cc-store';
 
-export {StationLogin, UserState, store};
+export {StationLogin, UserState, IncomingTask, TaskList, store};

packages/contact-center/cc-widgets/src/wc.ts

@@ -2,8 +2,22 @@ import r2wc from '@r2wc/react-to-web-component';
 import {StationLogin} from '@webex/cc-station-login';
 import {UserState} from '@webex/cc-user-state';
 import store from '@webex/cc-store';
+import {TaskList, IncomingTask} from '@webex/cc-task';
 
 const WebUserState = r2wc(UserState);
+const WebIncomingTask = r2wc(IncomingTask, {
+  props: {
+    onAccepted: 'function',
+    onDeclined: 'function',
+  },
+});
+
+const WebTaskList = r2wc(TaskList, {
+  props: {
+    onTaskAccepted: 'function',
+    onTaskDeclined: 'function',
+  },
+});
 
 const WebStationLogin = r2wc(StationLogin, {
   props: {
@@ -20,4 +34,12 @@ if (!customElements.get('widget-cc-station-login')) {
   customElements.define('widget-cc-station-login', WebStationLogin);
 }
 
+if (!customElements.get('widget-cc-incoming-task')) {
+  customElements.define('widget-cc-incoming-task', WebIncomingTask);
+}
+
+if (!customElements.get('widget-cc-task-list')) {
+  customElements.define('widget-cc-task-list', WebTaskList);
+}
+
 export {store};

packages/contact-center/station-login/src/helper.ts

@@ -1,6 +1,7 @@
-import {useState} from "react";
+import {useState} from 'react';
 import {StationLoginSuccess, StationLogoutSuccess} from '@webex/plugin-cc';
-import {UseStationLoginProps} from "./station-login/station-login.types";
+import {UseStationLoginProps} from './station-login/station-login.types';
+import store from '@webex/cc-store'; // we need to import as we are losing the context of this in store
 
 export const useStationLogin = (props: UseStationLoginProps) => {
   const cc = props.cc;
@@ -17,10 +18,12 @@ export const useStationLogin = (props: UseStationLoginProps) => {
     cc.stationLogin({teamId: team, loginOption: deviceType, dialNumber: dialNumber})
       .then((res: StationLoginSuccess) => {
         setLoginSuccess(res);
-        if(loginCb){
+        store.setSelectedLoginOption(deviceType);
+        if (loginCb) {
           loginCb();
         }
-      }).catch((error: Error) => {
+      })
+      .catch((error: Error) => {
         console.error(error);
         setLoginFailure(error);
       });
@@ -30,14 +33,24 @@ export const useStationLogin = (props: UseStationLoginProps) => {
     cc.stationLogout({logoutReason: 'User requested logout'})
       .then((res: StationLogoutSuccess) => {
         setLogoutSuccess(res);
-        if(logoutCb){
+        if (logoutCb) {
           logoutCb();
         }
-      }).catch((error: Error) => {
+      })
+      .catch((error: Error) => {
         console.error(error);
       });
   };
 
-  return {name: 'StationLogin', setDeviceType, setDialNumber, setTeam, login, logout, loginSuccess, loginFailure, logoutSuccess};
-}
-
+  return {
+    name: 'StationLogin',
+    setDeviceType,
+    setDialNumber,
+    setTeam,
+    login,
+    logout,
+    loginSuccess,
+    loginFailure,
+    logoutSuccess,
+  };
+};

packages/contact-center/station-login/src/station-login/station-login.types.ts

@@ -18,7 +18,7 @@ export interface IStationLoginProps {
    */
   teams: Team[];
 
-   /**
+  /**
    * Station login options available for the agent
    */
   loginOptions: string[];
@@ -43,7 +43,7 @@ export interface IStationLoginProps {
    */
   loginFailure?: Error;
 
-    /**
+  /**
    * Response data received on agent login success
    */
   logoutSuccess?: StationLogoutSuccess;
@@ -74,8 +74,21 @@ export interface IStationLoginProps {
   setTeam: (team: string) => void;
 }
 
-export type StationLoginPresentationalProps = Pick<IStationLoginProps, 'name' | 'teams' | 'loginOptions' | 'login' | 'logout' | 'loginSuccess' | 'loginFailure' | 'logoutSuccess' | 'setDeviceType' | 'setDialNumber' | 'setTeam'>;
+export type StationLoginPresentationalProps = Pick<
+  IStationLoginProps,
+  | 'name'
+  | 'teams'
+  | 'loginOptions'
+  | 'login'
+  | 'logout'
+  | 'loginSuccess'
+  | 'loginFailure'
+  | 'logoutSuccess'
+  | 'setDeviceType'
+  | 'setDialNumber'
+  | 'setTeam'
+>;
 
 export type UseStationLoginProps = Pick<IStationLoginProps, 'cc' | 'onLogin' | 'onLogout'>;
 
-export type StationLoginProps = Pick<IStationLoginProps, 'onLogin' | 'onLogout'>;
+export type StationLoginProps = Pick<IStationLoginProps, 'onLogin' | 'onLogout'>;