From 9d0420992e50762259eb4c618e33b110333f2e5d Mon Sep 17 00:00:00 2001 From: pagour98 Date: Thu, 13 Feb 2025 17:05:23 +0530 Subject: [PATCH] feat(cc-widgets): Agent Multi-Login configurable, login button toggle (#385) Co-authored-by: Shreyas Sharma Co-authored-by: parv_gour --- .../station-login/src/helper.ts | 5 +- .../station-login/src/station-login/index.tsx | 4 +- .../station-login.presentational.tsx | 35 +++--- .../src/station-login/station-login.types.ts | 2 +- packages/contact-center/store/src/store.ts | 11 +- .../cc/samples-cc-react-app/src/App.tsx | 117 +++++++++++------- widgets-samples/cc/samples-cc-wc-app/app.js | 10 ++ .../cc/samples-cc-wc-app/index.html | 15 +++ 8 files changed, 130 insertions(+), 69 deletions(-) diff --git a/packages/contact-center/station-login/src/helper.ts b/packages/contact-center/station-login/src/helper.ts index 96d64460..1cda818d 100644 --- a/packages/contact-center/station-login/src/helper.ts +++ b/packages/contact-center/station-login/src/helper.ts @@ -39,8 +39,8 @@ export const useStationLogin = (props: UseStationLoginProps) => { const handleContinue = async () => { try { setShowMultipleLoginAlert(false); - const profile = await cc.register(); - if (profile.isAgentLoggedIn) { + await store.registerCC(); + if (store.isAgentLoggedIn) { logger.log(`Agent Relogin Success`, { module: 'widget-station-login#station-login/helper.ts', method: 'handleContinue', @@ -76,7 +76,6 @@ export const useStationLogin = (props: UseStationLoginProps) => { } }) .catch((error: Error) => { - logger.error(`Error logging in: ${error}`, { module: 'widget-station-login#helper.ts', method: 'login', diff --git a/packages/contact-center/station-login/src/station-login/index.tsx b/packages/contact-center/station-login/src/station-login/index.tsx index c7f6c523..ef75b551 100644 --- a/packages/contact-center/station-login/src/station-login/index.tsx +++ b/packages/contact-center/station-login/src/station-login/index.tsx @@ -7,15 +7,13 @@ import {useStationLogin} from '../helper'; import {StationLoginProps} from './station-login.types'; const StationLoginComponent: React.FunctionComponent = ({onLogin, onLogout}) => { - const {cc, teams, loginOptions, logger, deviceType, isAgentLoggedIn, handleContinue, showMultipleLoginAlert} = store; + const {cc, teams, loginOptions, logger, deviceType, isAgentLoggedIn} = store; const result = useStationLogin({ cc, onLogin, onLogout, logger, isAgentLoggedIn, - handleContinue, - showMultipleLoginAlert, }); const props = { diff --git a/packages/contact-center/station-login/src/station-login/station-login.presentational.tsx b/packages/contact-center/station-login/src/station-login/station-login.presentational.tsx index 829f8583..e32c9a2c 100644 --- a/packages/contact-center/station-login/src/station-login/station-login.presentational.tsx +++ b/packages/contact-center/station-login/src/station-login/station-login.presentational.tsx @@ -53,7 +53,8 @@ const StationLoginPresentational: React.FunctionComponent { + const selectLoginOption = (event: { target: { value: string } }) => + { const dialNumber = document.querySelector('#dialNumber') as HTMLInputElement; const deviceType = event.target.value; setDeviceType(deviceType); @@ -78,13 +79,15 @@ const StationLoginPresentational: React.FunctionComponent + <> {showMultipleLoginAlert && (

{MULTIPLE_SIGN_IN_ALERT_TITLE}

{MULTIPLE_SIGN_IN_ALERT_MESSAGE}

-
- +
+
)} @@ -93,8 +96,8 @@ const StationLoginPresentational: React.FunctionComponent
Agent -
-
+
+
- - + {isAgentLoggedIn ? ( + + ) : ( + + )}
- + ); }; - -export default StationLoginPresentational; \ No newline at end of file +export default StationLoginPresentational; diff --git a/packages/contact-center/station-login/src/station-login/station-login.types.ts b/packages/contact-center/station-login/src/station-login/station-login.types.ts index 5eb68b09..26c686c2 100644 --- a/packages/contact-center/station-login/src/station-login/station-login.types.ts +++ b/packages/contact-center/station-login/src/station-login/station-login.types.ts @@ -128,7 +128,7 @@ export type StationLoginPresentationalProps = Pick< export type UseStationLoginProps = Pick< IStationLoginProps, - 'cc' | 'onLogin' | 'onLogout' | 'logger' | 'isAgentLoggedIn' | 'handleContinue' | 'showMultipleLoginAlert' + 'cc' | 'onLogin' | 'onLogout' | 'logger' | 'isAgentLoggedIn' >; export type StationLoginProps = Pick; diff --git a/packages/contact-center/store/src/store.ts b/packages/contact-center/store/src/store.ts index 9c96c7dc..c07ca694 100644 --- a/packages/contact-center/store/src/store.ts +++ b/packages/contact-center/store/src/store.ts @@ -66,8 +66,15 @@ class Store implements IStore { this.currentTheme = theme; } - registerCC(webex: WithWebex['webex']): Promise { - this.cc = webex.cc; + registerCC(webex?: WithWebex['webex']): Promise { + if (webex) { + this.cc = webex.cc; + } + + if (typeof webex === 'undefined' && typeof this.cc === 'undefined') { + throw new Error('Webex SDK not initialized'); + } + this.logger = this.cc.LoggerProxy; return this.cc .register() diff --git a/widgets-samples/cc/samples-cc-react-app/src/App.tsx b/widgets-samples/cc/samples-cc-react-app/src/App.tsx index 942fdbd4..fc06909a 100644 --- a/widgets-samples/cc/samples-cc-react-app/src/App.tsx +++ b/widgets-samples/cc/samples-cc-react-app/src/App.tsx @@ -1,6 +1,6 @@ import React, {useState, useRef} from 'react'; import {StationLogin, UserState, IncomingTask, TaskList, CallControl, store} from '@webex/cc-widgets'; -import {ThemeProvider,IconProvider} from '@momentum-design/components/dist/react'; +import {ThemeProvider, IconProvider} from '@momentum-design/components/dist/react'; function App() { const [isSdkReady, setIsSdkReady] = useState(false); @@ -8,12 +8,16 @@ function App() { const [isLoggedIn, setIsLoggedIn] = useState(false); const themeCheckboxRef = useRef(null); const [currentTheme, setCurrentTheme] = useState(store.currentTheme); + const [isMultiLoginEnabled, setIsMultiLoginEnabled] = useState(false); const webexConfig = { fedramp: false, logger: { level: 'log', }, + cc: { + allowMultiLogin: isMultiLoginEnabled, + }, }; const onLogin = () => { @@ -54,52 +58,75 @@ function App() { console.log('onWrapup invoked'); }; + const enableDisableMultiLogin = () => { + if (isMultiLoginEnabled) { + setIsMultiLoginEnabled(false); + } else { + setIsMultiLoginEnabled(true); + } + }; + return (
- -

Contact Center widgets in a react app

- setAccessToken(e.target.value)} - /> -
- { - setCurrentTheme(themeCheckboxRef.current.checked ? 'DARK' : 'LIGHT'); - store.setCurrentTheme(themeCheckboxRef.current.checked ? 'DARK' : 'LIGHT'); - }} - /> Dark Theme -
- - {isSdkReady && ( - <> - - {isLoggedIn && ( - <> - - - - - - )} - - )} - + + +

Contact Center widgets in a react app

+ setAccessToken(e.target.value)} + /> +
+ { + setCurrentTheme(themeCheckboxRef.current.checked ? 'DARK' : 'LIGHT'); + store.setCurrentTheme(themeCheckboxRef.current.checked ? 'DARK' : 'LIGHT'); + }} + />{' '} + Dark Theme +
+
+ Note: The "Enable Multi Login" option must be set before initializing the SDK. Changes to + this setting after SDK initialization will not take effect. Please ensure you configure this option before + clicking the "Init Widgets" button. +
+ +
+ + {isSdkReady && ( + <> + + {isLoggedIn && ( + <> + + + + + + )} + + )} + +
); } diff --git a/widgets-samples/cc/samples-cc-wc-app/app.js b/widgets-samples/cc/samples-cc-wc-app/app.js index e98267e6..a7935178 100644 --- a/widgets-samples/cc/samples-cc-wc-app/app.js +++ b/widgets-samples/cc/samples-cc-wc-app/app.js @@ -1,3 +1,4 @@ +/* eslint-disable prettier/prettier */ const accessTokenElem = document.getElementById('access_token_elem'); const themeElem = document.getElementById('theme'); const widgetsContainer = document.getElementById('widgets-container'); @@ -7,6 +8,7 @@ const ccIncomingTask = document.createElement('widget-cc-incoming-task'); const ccTaskList = document.createElement('widget-cc-task-list'); const ccCallControl = document.createElement('widget-cc-call-control'); const themeProviderElem = document.getElementById('theme-provider-elem'); +let isMultiLoginEnabled = false; themeElem.addEventListener('change', () => { store.setCurrentTheme(themeElem.checked ? 'DARK' : 'LIGHT'); @@ -22,12 +24,20 @@ function switchButtonState(){ buttonElem.disabled = accessTokenElem.value.trim() === ''; } +function enableMultiLogin() { + if (isMultiLoginEnabled) isMultiLoginEnabled = false; + else isMultiLoginEnabled = true; +} + function initWidgets(){ const webexConfig = { fedramp: false, logger: { level: 'log' }, + cc: { + allowMultiLogin: isMultiLoginEnabled, + }, } store.init({ webexConfig, diff --git a/widgets-samples/cc/samples-cc-wc-app/index.html b/widgets-samples/cc/samples-cc-wc-app/index.html index da3fe9e2..074b46b9 100644 --- a/widgets-samples/cc/samples-cc-wc-app/index.html +++ b/widgets-samples/cc/samples-cc-wc-app/index.html @@ -30,6 +30,21 @@

Contact Center widgets as web-component

name='theme' /> Dark Theme
+
+ Note: The "Enable Multi Login" option must be set before initializing the SDK. Changes + to this setting after SDK initialization will not take effect. Please ensure you configure this option + before clicking the "Init Widgets" button. +
+
+ Enable Multi Login +