feat(cc-widgets): Agent Multi-Login configurable, login button toggle (…

…#385) Co-authored-by: Shreyas Sharma <[email protected]> Co-authored-by: parv_gour <parv_gour@PAGOUR-M-D8B2>
webex · Feb 13, 2025 · 9d04209 · 9d04209
1 parent 4944e35
commit 9d04209
Show file tree

Hide file tree

Showing 8 changed files with 130 additions and 69 deletions.
diff --git 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
@@ -7,15 +7,13 @@ import {useStationLogin} from '../helper';
 import {StationLoginProps} from './station-login.types';
 
 const StationLoginComponent: React.FunctionComponent<StationLoginProps> = ({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
@@ -53,7 +53,8 @@ const StationLoginPresentational: React.FunctionComponent<StationLoginPresentati
     }
   }, [isAgentLoggedIn]);
 
-  const selectLoginOption = (event: { target: { value: string } }) => {
+  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<StationLoginPresentati
   }
 
   return (
-    <div>
+    <>
       {showMultipleLoginAlert && (
         <dialog ref={modalRef} className="modal">
           <h2>{MULTIPLE_SIGN_IN_ALERT_TITLE}</h2>
           <p>{MULTIPLE_SIGN_IN_ALERT_MESSAGE}</p>
-          <div className='modal-content'>
-            <button id="ContinueButton" data-testid="ContinueButton" onClick={continueClicked}>Continue</button>
+          <div className="modal-content">
+            <button id="ContinueButton" data-testid="ContinueButton" onClick={continueClicked}>
+              Continue
+            </button>
           </div>
         </dialog>
       )}
@@ -93,8 +96,8 @@ const StationLoginPresentational: React.FunctionComponent<StationLoginPresentati
         <section className="section-box">
           <fieldset className="fieldset">
             <legend className="legend-box">Agent</legend>
-            <div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
-              <div style={{ display: 'flex', gap: '1rem' }}>
+            <div style={{display: 'flex', flexDirection: 'column', flexGrow: 1}}>
+              <div style={{display: 'flex', gap: '1rem'}}>
                 <fieldset
                   style={{
                     border: '1px solid #ccc',
@@ -124,20 +127,22 @@ const StationLoginPresentational: React.FunctionComponent<StationLoginPresentati
                     type="text"
                     onInput={updateDN}
                   />
-                  <button id="AgentLogin" className="btn" onClick={login}>
-                    Login
-                  </button>
-                  <button id="logoutAgent" className="btn" onClick={logout}>
-                    Logout
-                  </button>
+                  {isAgentLoggedIn ? (
+                    <button id="logoutAgent" className="btn" onClick={logout}>
+                      Logout
+                    </button>
+                  ) : (
+                    <button id="AgentLogin" className="btn" onClick={login}>
+                      Login
+                    </button>
+                  )}
                 </fieldset>
               </div>
             </div>
           </fieldset>
         </section>
       </div>
-    </div>
+    </>
   );
 };
-
-export default StationLoginPresentational;
+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
@@ -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<IStationLoginProps, 'onLogin' | 'onLogout'>;
diff --git 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<void> {
-    this.cc = webex.cc;
+  registerCC(webex?: WithWebex['webex']): Promise<void> {
+    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
@@ -1,19 +1,23 @@
 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);
   const [accessToken, setAccessToken] = useState('');
   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 (
     <div className="mds-typography">
-      <ThemeProvider themeclass={currentTheme === 'LIGHT' ? 'mds-theme-stable-lightWebex': 'mds-theme-stable-darkWebex'}><IconProvider>
-        <h1>Contact Center widgets in a react app</h1>
-        <input
-          type="text"
-          placeholder="Enter your access token"
-          value={accessToken}
-          onChange={(e) => setAccessToken(e.target.value)}
-        />
-        <br />
-        <input
-          type='checkbox'
-          id='theme'
-          name='theme'
-          ref={themeCheckboxRef}
-          onChange={() => {
-            setCurrentTheme(themeCheckboxRef.current.checked ? 'DARK' : 'LIGHT');
-            store.setCurrentTheme(themeCheckboxRef.current.checked ? 'DARK' : 'LIGHT');
-          }}
-        /> Dark Theme
-        <br />
-        <button
-          disabled={accessToken.trim() === ''}
-          onClick={() => {
-            store.init({webexConfig, access_token: accessToken}).then(() => {
-              setIsSdkReady(true);
-            });
-          }}
-        >
-          Init Widgets
-        </button>
-        {isSdkReady && (
-          <>
-            <StationLogin onLogin={onLogin} onLogout={onLogout} />
-            {isLoggedIn && (
-              <>
-                <UserState />
-                <IncomingTask onAccepted={onAccepted} onDeclined={onDeclined} />
-                <TaskList onTaskAccepted={onTaskAccepted} onTaskDeclined={onTaskDeclined} />
-                <CallControl onHoldResume={onHoldResume} onEnd={onEnd} onWrapup={onWrapup} />
-              </>
-            )}
-          </>
-        )}
-      </IconProvider></ThemeProvider>
+      <ThemeProvider
+        themeclass={currentTheme === 'LIGHT' ? 'mds-theme-stable-lightWebex' : 'mds-theme-stable-darkWebex'}
+      >
+        <IconProvider>
+          <h1>Contact Center widgets in a react app</h1>
+          <input
+            type="text"
+            placeholder="Enter your access token"
+            value={accessToken}
+            onChange={(e) => setAccessToken(e.target.value)}
+          />
+          <br />
+          <input
+            type="checkbox"
+            id="theme"
+            name="theme"
+            ref={themeCheckboxRef}
+            onChange={() => {
+              setCurrentTheme(themeCheckboxRef.current.checked ? 'DARK' : 'LIGHT');
+              store.setCurrentTheme(themeCheckboxRef.current.checked ? 'DARK' : 'LIGHT');
+            }}
+          />{' '}
+          Dark Theme
+          <br />
+          <div className="warning-note" style={{color: 'red', marginBottom: '10px'}}>
+            <strong>Note:</strong> 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.
+          </div>
+          <label>
+            <input type="checkbox" id="multiLoginFlag" name="multiLoginFlag" onChange={enableDisableMultiLogin} />{' '}
+            Enable Multi Login
+          </label>
+          <br />
+          <button
+            disabled={accessToken.trim() === ''}
+            onClick={() => {
+              store.init({webexConfig, access_token: accessToken}).then(() => {
+                setIsSdkReady(true);
+              });
+            }}
+          >
+            Init Widgets
+          </button>
+          {isSdkReady && (
+            <>
+              <StationLogin onLogin={onLogin} onLogout={onLogout} />
+              {isLoggedIn && (
+                <>
+                  <UserState />
+                  <IncomingTask onAccepted={onAccepted} onDeclined={onDeclined} />
+                  <TaskList onTaskAccepted={onTaskAccepted} onTaskDeclined={onTaskDeclined} />
+                  <CallControl onHoldResume={onHoldResume} onEnd={onEnd} onWrapup={onWrapup} />
+                </>
+              )}
+            </>
+          )}
+        </IconProvider>
+      </ThemeProvider>
     </div>
   );
 }

diff --git 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
@@ -30,6 +30,21 @@ <h1>Contact Center widgets as web-component</h1>
           name='theme'
         /> Dark Theme
         <br />
+        <div class="warning-note" style="color: red; margin-bottom: 10px;">
+          <strong>Note:</strong> 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.
+        </div>
+        <br />
+        <input
+          type='checkbox'
+          id='multiLoginFlag'
+          name='multiLoginFlag'
+          onchange="enableMultiLogin()"
+          aria-label="Enable agent multi-login"
+          role="checkbox"
+        /> Enable Multi Login
+        <br />
         <button onclick="initWidgets()" disabled>Init Widgets</button>
         <div id="widgets-container">
           <widget-cc-station-login class="disabled" id="cc-station-login"></widget-cc-station-login>