feat: taskList and IncomingTask widgets added

docs/react-samples/src/App.tsx

@@ -1,27 +1,27 @@
-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);
-  }
+  };
 
   return (
     <>
@@ -33,25 +33,26 @@ 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 />}
+          {isLoggedIn && <IncomingTask />}
+          {isLoggedIn && <TaskList />}
+        </>
+      )}
     </>
   );
 }
-
+// @ts-ignore
+window.store = store;
 export default App;

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,17 @@ 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);
 
 const WebStationLogin = r2wc(StationLogin, {
   props: {
@@ -20,4 +29,11 @@ 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,7 +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;
   const loginCb = props.onLogin;
@@ -17,10 +17,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 +32,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'>;

packages/contact-center/store/package.json

@@ -22,7 +22,7 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "typescript": "5.6.3",
-    "webex": "3.6.0-wxcc.5"
+    "webex": "3.7.0-wxcc.4"
   },
   "devDependencies": {
     "@babel/core": "7.25.2",

packages/contact-center/store/src/store.ts

@@ -1,67 +1,67 @@
 import {makeAutoObservable, observable} from 'mobx';
 import Webex from 'webex';
-import {
-  IContactCenter,
-  Profile,
-  Team,
-  WithWebex,
-  IdleCode,
-  InitParams,
-  IStore
-} from './store.types';
+import {IContactCenter, Profile, Team, WithWebex, IdleCode, InitParams, IStore} from './store.types';
 
 class Store implements IStore {
   teams: Team[] = [];
   loginOptions: string[] = [];
   cc: IContactCenter;
   idleCodes: IdleCode[] = [];
   agentId: string = '';
+  selectedLoginOption: string = '';
 
   constructor() {
     makeAutoObservable(this, {cc: observable.ref});
   }
 
+  setSelectedLoginOption(option: string): void {
+    this.selectedLoginOption = option;
+  }
+
   registerCC(webex: WithWebex['webex']): Promise<void> {
     this.cc = webex.cc;
-    return this.cc.register().then((response: Profile) => {
-      this.teams = response.teams;
-      this.loginOptions = response.loginVoiceOptions;
-      this.idleCodes = response.idleCodes;
-      this.agentId = response.agentId;
-    }).catch((error) => {
-      console.error('Error registering contact center', error);
-      return Promise.reject(error);
-    });
+    return this.cc
+      .register()
+      .then((response: Profile) => {
+        this.teams = response.teams;
+        this.loginOptions = response.loginVoiceOptions;
+        this.idleCodes = response.idleCodes;
+        this.agentId = response.agentId;
+      })
+      .catch((error) => {
+        console.error('Error registering contact center', error);
+        return Promise.reject(error);
+      });
   }
 
   init(options: InitParams): Promise<void> {
-    if('webex' in options) {
+    if ('webex' in options) {
       // If devs decide to go with webex, they will have to listen to the ready event before calling init
-      // This has to be documented 
+      // This has to be documented
       return this.registerCC(options.webex);
     }
     return new Promise((resolve, reject) => {
-
       const timer = setTimeout(() => {
         reject(new Error('Webex SDK failed to initialize'));
       }, 6000);
 
       const webex = Webex.init({
         config: options.webexConfig,
         credentials: {
-          access_token: options.access_token
-        }
+          access_token: options.access_token,
+        },
       });
-  
+
       webex.once('ready', () => {
         clearTimeout(timer);
-        this.registerCC(webex).then(() => {
-          resolve();
-        })
-        .catch((error) => {
-          reject(error);
-        })
-      })
+        this.registerCC(webex)
+          .then(() => {
+            resolve();
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
     });
   }
 }

packages/contact-center/task/.babelrc.js

@@ -0,0 +1,3 @@
+const baseConfig = require('../../../.babelrc');
+
+module.exports = baseConfig;

packages/contact-center/task/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@webex/cc-task",
+  "description": "Webex Contact Center Widgets: Task",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist/",
+    "package.json"
+  ],
+  "scripts": {
+    "build": "yarn run -T tsc",
+    "build:src": "webpack && yarn run build",
+    "build:watch": "webpack --watch",
+    "test:unit": "jest --coverage"
+  },
+  "dependencies": {
+    "@webex/cc-store": "workspace:*",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "typescript": "5.6.3",
+    "webex": "3.7.0-wxcc.4"
+  },
+  "devDependencies": {
+    "@babel/core": "7.25.2",
+    "@babel/preset-env": "7.25.4",
+    "@babel/preset-react": "7.24.7",
+    "@babel/preset-typescript": "7.25.9",
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/jest-dom": "6.6.2",
+    "@testing-library/react": "16.0.1",
+    "@types/jest": "29.5.14",
+    "@types/react-test-renderer": "18",
+    "babel-jest": "29.7.0",
+    "babel-loader": "9.2.1",
+    "file-loader": "6.2.0",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "ts-loader": "9.5.1",
+    "webpack": "5.94.0",
+    "webpack-cli": "5.1.4",
+    "webpack-merge": "6.0.1"
+  },
+  "jest": {
+    "testEnvironment": "jsdom",
+    "testMatch": [
+      "**/tests/**/*.ts",
+      "**/tests/**/*.tsx"
+    ]
+  }
+}