Skip to content

Commit 9d04209

Browse files
pagour98Shreyas281299parv_gour
authored
feat(cc-widgets): Agent Multi-Login configurable, login button toggle (#385)
Co-authored-by: Shreyas Sharma <shreyassharma9912@gmail.com> Co-authored-by: parv_gour <parv_gour@PAGOUR-M-D8B2>
1 parent 4944e35 commit 9d04209

File tree

8 files changed

+130
-69
lines changed

8 files changed

+130
-69
lines changed

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

+2-3
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,8 @@ export const useStationLogin = (props: UseStationLoginProps) => {
3939
const handleContinue = async () => {
4040
try {
4141
setShowMultipleLoginAlert(false);
42-
const profile = await cc.register();
43-
if (profile.isAgentLoggedIn) {
42+
await store.registerCC();
43+
if (store.isAgentLoggedIn) {
4444
logger.log(`Agent Relogin Success`, {
4545
module: 'widget-station-login#station-login/helper.ts',
4646
method: 'handleContinue',
@@ -76,7 +76,6 @@ export const useStationLogin = (props: UseStationLoginProps) => {
7676
}
7777
})
7878
.catch((error: Error) => {
79-
8079
logger.error(`Error logging in: ${error}`, {
8180
module: 'widget-station-login#helper.ts',
8281
method: 'login',

‎packages/contact-center/station-login/src/station-login/index.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,13 @@ import {useStationLogin} from '../helper';
77
import {StationLoginProps} from './station-login.types';
88

99
const StationLoginComponent: React.FunctionComponent<StationLoginProps> = ({onLogin, onLogout}) => {
10-
const {cc, teams, loginOptions, logger, deviceType, isAgentLoggedIn, handleContinue, showMultipleLoginAlert} = store;
10+
const {cc, teams, loginOptions, logger, deviceType, isAgentLoggedIn} = store;
1111
const result = useStationLogin({
1212
cc,
1313
onLogin,
1414
onLogout,
1515
logger,
1616
isAgentLoggedIn,
17-
handleContinue,
18-
showMultipleLoginAlert,
1917
});
2018

2119
const props = {

‎packages/contact-center/station-login/src/station-login/station-login.presentational.tsx

+20-15
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,8 @@ const StationLoginPresentational: React.FunctionComponent<StationLoginPresentati
5353
}
5454
}, [isAgentLoggedIn]);
5555

56-
const selectLoginOption = (event: { target: { value: string } }) => {
56+
const selectLoginOption = (event: { target: { value: string } }) =>
57+
{
5758
const dialNumber = document.querySelector('#dialNumber') as HTMLInputElement;
5859
const deviceType = event.target.value;
5960
setDeviceType(deviceType);
@@ -78,13 +79,15 @@ const StationLoginPresentational: React.FunctionComponent<StationLoginPresentati
7879
}
7980

8081
return (
81-
<div>
82+
<>
8283
{showMultipleLoginAlert && (
8384
<dialog ref={modalRef} className="modal">
8485
<h2>{MULTIPLE_SIGN_IN_ALERT_TITLE}</h2>
8586
<p>{MULTIPLE_SIGN_IN_ALERT_MESSAGE}</p>
86-
<div className='modal-content'>
87-
<button id="ContinueButton" data-testid="ContinueButton" onClick={continueClicked}>Continue</button>
87+
<div className="modal-content">
88+
<button id="ContinueButton" data-testid="ContinueButton" onClick={continueClicked}>
89+
Continue
90+
</button>
8891
</div>
8992
</dialog>
9093
)}
@@ -93,8 +96,8 @@ const StationLoginPresentational: React.FunctionComponent<StationLoginPresentati
9396
<section className="section-box">
9497
<fieldset className="fieldset">
9598
<legend className="legend-box">Agent</legend>
96-
<div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
97-
<div style={{ display: 'flex', gap: '1rem' }}>
99+
<div style={{display: 'flex', flexDirection: 'column', flexGrow: 1}}>
100+
<div style={{display: 'flex', gap: '1rem'}}>
98101
<fieldset
99102
style={{
100103
border: '1px solid #ccc',
@@ -124,20 +127,22 @@ const StationLoginPresentational: React.FunctionComponent<StationLoginPresentati
124127
type="text"
125128
onInput={updateDN}
126129
/>
127-
<button id="AgentLogin" className="btn" onClick={login}>
128-
Login
129-
</button>
130-
<button id="logoutAgent" className="btn" onClick={logout}>
131-
Logout
132-
</button>
130+
{isAgentLoggedIn ? (
131+
<button id="logoutAgent" className="btn" onClick={logout}>
132+
Logout
133+
</button>
134+
) : (
135+
<button id="AgentLogin" className="btn" onClick={login}>
136+
Login
137+
</button>
138+
)}
133139
</fieldset>
134140
</div>
135141
</div>
136142
</fieldset>
137143
</section>
138144
</div>
139-
</div>
145+
</>
140146
);
141147
};
142-
143-
export default StationLoginPresentational;
148+
export default StationLoginPresentational;

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ export type StationLoginPresentationalProps = Pick<
128128

129129
export type UseStationLoginProps = Pick<
130130
IStationLoginProps,
131-
'cc' | 'onLogin' | 'onLogout' | 'logger' | 'isAgentLoggedIn' | 'handleContinue' | 'showMultipleLoginAlert'
131+
'cc' | 'onLogin' | 'onLogout' | 'logger' | 'isAgentLoggedIn'
132132
>;
133133

134134
export type StationLoginProps = Pick<IStationLoginProps, 'onLogin' | 'onLogout'>;

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

+9-2
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,15 @@ class Store implements IStore {
6666
this.currentTheme = theme;
6767
}
6868

69-
registerCC(webex: WithWebex['webex']): Promise<void> {
70-
this.cc = webex.cc;
69+
registerCC(webex?: WithWebex['webex']): Promise<void> {
70+
if (webex) {
71+
this.cc = webex.cc;
72+
}
73+
74+
if (typeof webex === 'undefined' && typeof this.cc === 'undefined') {
75+
throw new Error('Webex SDK not initialized');
76+
}
77+
7178
this.logger = this.cc.LoggerProxy;
7279
return this.cc
7380
.register()

‎widgets-samples/cc/samples-cc-react-app/src/App.tsx

+72-45
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,23 @@
11
import React, {useState, useRef} from 'react';
22
import {StationLogin, UserState, IncomingTask, TaskList, CallControl, store} from '@webex/cc-widgets';
3-
import {ThemeProvider,IconProvider} from '@momentum-design/components/dist/react';
3+
import {ThemeProvider, IconProvider} from '@momentum-design/components/dist/react';
44

55
function App() {
66
const [isSdkReady, setIsSdkReady] = useState(false);
77
const [accessToken, setAccessToken] = useState('');
88
const [isLoggedIn, setIsLoggedIn] = useState(false);
99
const themeCheckboxRef = useRef(null);
1010
const [currentTheme, setCurrentTheme] = useState(store.currentTheme);
11+
const [isMultiLoginEnabled, setIsMultiLoginEnabled] = useState(false);
1112

1213
const webexConfig = {
1314
fedramp: false,
1415
logger: {
1516
level: 'log',
1617
},
18+
cc: {
19+
allowMultiLogin: isMultiLoginEnabled,
20+
},
1721
};
1822

1923
const onLogin = () => {
@@ -54,52 +58,75 @@ function App() {
5458
console.log('onWrapup invoked');
5559
};
5660

61+
const enableDisableMultiLogin = () => {
62+
if (isMultiLoginEnabled) {
63+
setIsMultiLoginEnabled(false);
64+
} else {
65+
setIsMultiLoginEnabled(true);
66+
}
67+
};
68+
5769
return (
5870
<div className="mds-typography">
59-
<ThemeProvider themeclass={currentTheme === 'LIGHT' ? 'mds-theme-stable-lightWebex': 'mds-theme-stable-darkWebex'}><IconProvider>
60-
<h1>Contact Center widgets in a react app</h1>
61-
<input
62-
type="text"
63-
placeholder="Enter your access token"
64-
value={accessToken}
65-
onChange={(e) => setAccessToken(e.target.value)}
66-
/>
67-
<br />
68-
<input
69-
type='checkbox'
70-
id='theme'
71-
name='theme'
72-
ref={themeCheckboxRef}
73-
onChange={() => {
74-
setCurrentTheme(themeCheckboxRef.current.checked ? 'DARK' : 'LIGHT');
75-
store.setCurrentTheme(themeCheckboxRef.current.checked ? 'DARK' : 'LIGHT');
76-
}}
77-
/> Dark Theme
78-
<br />
79-
<button
80-
disabled={accessToken.trim() === ''}
81-
onClick={() => {
82-
store.init({webexConfig, access_token: accessToken}).then(() => {
83-
setIsSdkReady(true);
84-
});
85-
}}
86-
>
87-
Init Widgets
88-
</button>
89-
{isSdkReady && (
90-
<>
91-
<StationLogin onLogin={onLogin} onLogout={onLogout} />
92-
{isLoggedIn && (
93-
<>
94-
<UserState />
95-
<IncomingTask onAccepted={onAccepted} onDeclined={onDeclined} />
96-
<TaskList onTaskAccepted={onTaskAccepted} onTaskDeclined={onTaskDeclined} />
97-
<CallControl onHoldResume={onHoldResume} onEnd={onEnd} onWrapup={onWrapup} />
98-
</>
99-
)}
100-
</>
101-
)}
102-
</IconProvider></ThemeProvider>
71+
<ThemeProvider
72+
themeclass={currentTheme === 'LIGHT' ? 'mds-theme-stable-lightWebex' : 'mds-theme-stable-darkWebex'}
73+
>
74+
<IconProvider>
75+
<h1>Contact Center widgets in a react app</h1>
76+
<input
77+
type="text"
78+
placeholder="Enter your access token"
79+
value={accessToken}
80+
onChange={(e) => setAccessToken(e.target.value)}
81+
/>
82+
<br />
83+
<input
84+
type="checkbox"
85+
id="theme"
86+
name="theme"
87+
ref={themeCheckboxRef}
88+
onChange={() => {
89+
setCurrentTheme(themeCheckboxRef.current.checked ? 'DARK' : 'LIGHT');
90+
store.setCurrentTheme(themeCheckboxRef.current.checked ? 'DARK' : 'LIGHT');
91+
}}
92+
/>{' '}
93+
Dark Theme
94+
<br />
95+
<div className="warning-note" style={{color: 'red', marginBottom: '10px'}}>
96+
<strong>Note:</strong> The "Enable Multi Login" option must be set before initializing the SDK. Changes to
97+
this setting after SDK initialization will not take effect. Please ensure you configure this option before
98+
clicking the "Init Widgets" button.
99+
</div>
100+
<label>
101+
<input type="checkbox" id="multiLoginFlag" name="multiLoginFlag" onChange={enableDisableMultiLogin} />{' '}
102+
Enable Multi Login
103+
</label>
104+
<br />
105+
<button
106+
disabled={accessToken.trim() === ''}
107+
onClick={() => {
108+
store.init({webexConfig, access_token: accessToken}).then(() => {
109+
setIsSdkReady(true);
110+
});
111+
}}
112+
>
113+
Init Widgets
114+
</button>
115+
{isSdkReady && (
116+
<>
117+
<StationLogin onLogin={onLogin} onLogout={onLogout} />
118+
{isLoggedIn && (
119+
<>
120+
<UserState />
121+
<IncomingTask onAccepted={onAccepted} onDeclined={onDeclined} />
122+
<TaskList onTaskAccepted={onTaskAccepted} onTaskDeclined={onTaskDeclined} />
123+
<CallControl onHoldResume={onHoldResume} onEnd={onEnd} onWrapup={onWrapup} />
124+
</>
125+
)}
126+
</>
127+
)}
128+
</IconProvider>
129+
</ThemeProvider>
103130
</div>
104131
);
105132
}

‎widgets-samples/cc/samples-cc-wc-app/app.js

+10
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable prettier/prettier */
12
const accessTokenElem = document.getElementById('access_token_elem');
23
const themeElem = document.getElementById('theme');
34
const widgetsContainer = document.getElementById('widgets-container');
@@ -7,6 +8,7 @@ const ccIncomingTask = document.createElement('widget-cc-incoming-task');
78
const ccTaskList = document.createElement('widget-cc-task-list');
89
const ccCallControl = document.createElement('widget-cc-call-control');
910
const themeProviderElem = document.getElementById('theme-provider-elem');
11+
let isMultiLoginEnabled = false;
1012

1113
themeElem.addEventListener('change', () => {
1214
store.setCurrentTheme(themeElem.checked ? 'DARK' : 'LIGHT');
@@ -22,12 +24,20 @@ function switchButtonState(){
2224
buttonElem.disabled = accessTokenElem.value.trim() === '';
2325
}
2426

27+
function enableMultiLogin() {
28+
if (isMultiLoginEnabled) isMultiLoginEnabled = false;
29+
else isMultiLoginEnabled = true;
30+
}
31+
2532
function initWidgets(){
2633
const webexConfig = {
2734
fedramp: false,
2835
logger: {
2936
level: 'log'
3037
},
38+
cc: {
39+
allowMultiLogin: isMultiLoginEnabled,
40+
},
3141
}
3242
store.init({
3343
webexConfig,

‎widgets-samples/cc/samples-cc-wc-app/index.html

+15
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,21 @@ <h1>Contact Center widgets as web-component</h1>
3030
name='theme'
3131
/> Dark Theme
3232
<br />
33+
<div class="warning-note" style="color: red; margin-bottom: 10px;">
34+
<strong>Note:</strong> The "Enable Multi Login" option must be set before initializing the SDK. Changes
35+
to this setting after SDK initialization will not take effect. Please ensure you configure this option
36+
before clicking the "Init Widgets" button.
37+
</div>
38+
<br />
39+
<input
40+
type='checkbox'
41+
id='multiLoginFlag'
42+
name='multiLoginFlag'
43+
onchange="enableMultiLogin()"
44+
aria-label="Enable agent multi-login"
45+
role="checkbox"
46+
/> Enable Multi Login
47+
<br />
3348
<button onclick="initWidgets()" disabled>Init Widgets</button>
3449
<div id="widgets-container">
3550
<widget-cc-station-login class="disabled" id="cc-station-login"></widget-cc-station-login>

0 commit comments

Comments
 (0)