feat(cc-widgets): added Agent-Multi-Login-Alert Feature

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

@@ -2,6 +2,7 @@ import {useState, useEffect} from 'react';
 import {StationLoginSuccess, StationLogoutSuccess} from '@webex/plugin-cc';
 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
+import {AGENT_MULTI_LOGIN} from './station-login/constants';
 
 export const useStationLogin = (props: UseStationLoginProps) => {
   const cc = props.cc;
@@ -15,21 +16,60 @@ export const useStationLogin = (props: UseStationLoginProps) => {
   const [loginSuccess, setLoginSuccess] = useState<StationLoginSuccess>();
   const [loginFailure, setLoginFailure] = useState<Error>();
   const [logoutSuccess, setLogoutSuccess] = useState<StationLogoutSuccess>();
+  const [showMultipleLoginAlert, setShowMultipleLoginAlert] = useState(false);
+
+  useEffect(() => {
+    const handleMultiLoginCloseSession = (data) => {
+      if (data && typeof data === 'object' && data.type === 'AgentMultiLoginCloseSession') {
+        setShowMultipleLoginAlert(true);
+      }
+    };
+
+    cc.on(AGENT_MULTI_LOGIN, handleMultiLoginCloseSession);
+
+    return () => {
+      cc.off(AGENT_MULTI_LOGIN, handleMultiLoginCloseSession);
+    };
+  }, [cc]);
 
   useEffect(() => {
     setIsAgentLoggedIn(props.isAgentLoggedIn);
   }, [props.isAgentLoggedIn]);
 
+  const handleContinue = async () => {
+    try {
+      setShowMultipleLoginAlert(false);
+      const profile = await cc.register();
+      if (profile.isAgentLoggedIn) {
+        logger.log(`Agent Relogin Success`, {
+          module: 'widget-station-login#station-login/helper.ts',
+          method: 'handleContinue',
+        });
+      } else {
+        logger.error(`Agent Relogin Failed`, {
+          module: 'widget-station-login#station-login/helper.ts',
+          method: 'handleContinue',
+        });
+      }
+    } catch (error) {
+      logger.error(`Error handling agent multi login continue: ${error}`, {
+        module: 'widget-station-login#station-login/index.tsx',
+        method: 'handleContinue',
+      });
+    }
+  };
+
   const login = () => {
     cc.stationLogin({teamId: team, loginOption: deviceType, dialNumber: dialNumber})
       .then((res: StationLoginSuccess) => {
         setLoginSuccess(res);
-        setIsAgentLoggedIn(true)
+        setIsAgentLoggedIn(true);
         store.setSelectedLoginOption(deviceType);
         if (loginCb) {
           loginCb();
         }
-      }).catch((error: Error) => {
+      })
+      .catch((error: Error) => {
         logger.error(`Error logging in: ${error}`, {
           module: 'widget-station-login#helper.ts',
           method: 'login',
@@ -46,7 +86,8 @@ export const useStationLogin = (props: UseStationLoginProps) => {
         if (logoutCb) {
           logoutCb();
         }
-      }).catch((error: Error) => {
+      })
+      .catch((error: Error) => {
         logger.error(`Error logging out: ${error}`, {
           module: 'widget-station-login#helper.ts',
           method: 'logout',
@@ -72,6 +113,8 @@ export const useStationLogin = (props: UseStationLoginProps) => {
     loginSuccess,
     loginFailure,
     logoutSuccess,
+    showMultipleLoginAlert,
     isAgentLoggedIn,
+    handleContinue,
   };
 };

packages/contact-center/station-login/src/station-login/alert-modal.scss

@@ -0,0 +1,37 @@
+.modal {
+    width: 400px;
+    border: none;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    padding: 20px;
+    text-align: center;
+  }
+
+  .modal-content {
+    display: flex;
+    justify-content: flex-end; // Aligns the button to the right
+  }
+
+  .modal::backdrop {
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  h2 {
+    margin-top: 0;
+  }
+
+  #ContinueButton {
+    background-color: #0078d4;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+    cursor: pointer;
+  }
+
+  #ContinueButton:hover {
+    background-color: #005a9e;
+  }
+

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

@@ -0,0 +1,6 @@
+export const MULTIPLE_SIGN_IN_ALERT_MESSAGE =
+  'You are signed in to the Desktop in multiple application instances. Click Continue to proceed with the Desktop in this application instance. Else, close this window.';
+
+export const MULTIPLE_SIGN_IN_ALERT_TITLE = 'Multiple Sign In Alert';
+
+export const AGENT_MULTI_LOGIN = 'agent:multiLogin';

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

@@ -7,8 +7,16 @@ import {useStationLogin} from '../helper';
 import {StationLoginProps} from './station-login.types';
 
 const StationLoginComponent: React.FunctionComponent<StationLoginProps> = ({onLogin, onLogout}) => {
-  const {cc, teams, loginOptions, logger, deviceType, isAgentLoggedIn} = store;
-  const result = useStationLogin({cc, onLogin, onLogout, logger, isAgentLoggedIn});
+  const {cc, teams, loginOptions, logger, deviceType, isAgentLoggedIn, handleContinue, showMultipleLoginAlert} = store;
+  const result = useStationLogin({
+    cc,
+    onLogin,
+    onLogout,
+    logger,
+    isAgentLoggedIn,
+    handleContinue,
+    showMultipleLoginAlert,
+  });
 
   const props = {
     ...result,

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

@@ -1,22 +1,12 @@
-import React, {useEffect, useRef} from 'react';
-import {StationLoginPresentationalProps} from './station-login.types';
-
+import React, { useEffect, useRef} from 'react';
+import { StationLoginPresentationalProps } from './station-login.types';
 import './station-login.style.scss';
+import { MULTIPLE_SIGN_IN_ALERT_MESSAGE, MULTIPLE_SIGN_IN_ALERT_TITLE } from './constants';
+import './alert-modal.scss';
 
 const StationLoginPresentational: React.FunctionComponent<StationLoginPresentationalProps> = (props) => {
-  const {
-    name, 
-    teams, 
-    loginOptions, 
-    login, 
-    logout, 
-    relogin, 
-    setDeviceType, 
-    setDialNumber, 
-    setTeam, 
-    isAgentLoggedIn, 
-    deviceType
-  } = props; // TODO: Use the  loginSuccess, loginFailure, logoutSuccess props returned fromthe API response via helper file to reflect UI changes
+  const { name, teams, loginOptions, login, logout, relogin, setDeviceType, setDialNumber, setTeam, isAgentLoggedIn, deviceType, showMultipleLoginAlert, handleContinue} = props; // TODO: Use the loginSuccess, loginFailure, logoutSuccess props returned fromthe API response via helper file to reflect UI changes
+  const modalRef = useRef<HTMLDialogElement>(null);
 
   useEffect(() => {
     const teamsDropdown = document.getElementById('teamsDropdown') as HTMLSelectElement;
@@ -37,7 +27,7 @@ const StationLoginPresentational: React.FunctionComponent<StationLoginPresentati
       }
     }
     if (loginOptions.length > 0) {
-      loginOptions.forEach((options)=> {
+      loginOptions.forEach((options) => {
         const option = document.createElement('option');
         option.text = options;
         option.value = options;
@@ -46,6 +36,13 @@ const StationLoginPresentational: React.FunctionComponent<StationLoginPresentati
     }
   }, [teams, loginOptions]);
 
+  useEffect(() => {
+    const modal = modalRef.current;
+    if (showMultipleLoginAlert && modal) {
+      modal.showModal();
+    }
+  }, [showMultipleLoginAlert, modalRef]);
+
   useEffect(() => {
     if (!isAgentLoggedIn) return;
     const agentLogin = document.querySelector('#LoginOption') as HTMLSelectElement;
@@ -56,7 +53,7 @@ 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);
@@ -67,41 +64,80 @@ const StationLoginPresentational: React.FunctionComponent<StationLoginPresentati
     }
   };
 
+  const continueClicked = () => {
+    const modal = modalRef.current;
+    if (modal) {
+      modal.close();
+      handleContinue();
+    }
+  };
+
   function updateDN() {
     const dialNumber = document.querySelector('#dialNumber') as HTMLInputElement;
     setDialNumber(dialNumber.value);
   }
 
   return (
-    <><h1 data-testid="station-login-heading">{name}</h1>
-      <div className='box'>
-      <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' }}>
-              <fieldset style={{border: '1px solid #ccc', borderRadius: '5px', padding: '10px', marginBottom: '20px', flex: 0.69 }}>
-                <legend className='legend-box'>Select Team</legend>
-                <select id="teamsDropdown" className='select'>Teams</select>
-              </fieldset>
-              <fieldset className='fieldset'>
-                <legend className='legend-box'>Agent Login</legend>
-                <select name="LoginOption" id="LoginOption" className='select' onChange={selectLoginOption}>
-                  <option value="" hidden>Choose Agent Login Option...</option>
-                </select>
-                <input className='input' id="dialNumber" name="dialNumber" placeholder="Extension/Dial Number" type="text" onInput={updateDN} />
-                  {isAgentLoggedIn ? (
-                    <button id="logoutAgent" className='btn' onClick={logout}>Logout</button>
-                  ) : (
-                    <button id="AgentLogin" className='btn' onClick={login}>Login</button>
-                  )}
-              </fieldset>
-            </div>
+    <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>
-        </fieldset> 
-      </section>
-    </div></>
+        </dialog>
+      )}
+      <h1 data-testid="station-login-heading">{name}</h1>
+      <div className="box">
+        <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' }}>
+                <fieldset
+                  style={{
+                    border: '1px solid #ccc',
+                    borderRadius: '5px',
+                    padding: '10px',
+                    marginBottom: '20px',
+                    flex: 0.69,
+                  }}
+                >
+                  <legend className="legend-box">Select Team</legend>
+                  <select id="teamsDropdown" className="select">
+                    Teams
+                  </select>
+                </fieldset>
+                <fieldset className="fieldset">
+                  <legend className="legend-box">Agent Login</legend>
+                  <select name="LoginOption" id="LoginOption" className="select" onChange={selectLoginOption}>
+                    <option value="" hidden>
+                      Choose Agent Login Option...
+                    </option>
+                  </select>
+                  <input
+                    className="input"
+                    id="dialNumber"
+                    name="dialNumber"
+                    placeholder="Extension/Dial Number"
+                    type="text"
+                    onInput={updateDN}
+                  />
+                  <button id="AgentLogin" className="btn" onClick={login}>
+                    Login
+                  </button>
+                  <button id="logoutAgent" className="btn" onClick={logout}>
+                    Logout
+                  </button>
+                </fieldset>
+              </div>
+            </div>
+          </fieldset>
+        </section>
+      </div>
+    </div>
   );
 };
 
-export default StationLoginPresentational;
+export default StationLoginPresentational;

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

@@ -1,4 +1,4 @@
-import {AgentLogin, IContactCenter, StationLoginSuccess, StationLogoutSuccess, Team} from '@webex/plugin-cc';
+import {IContactCenter, StationLoginSuccess, StationLogoutSuccess, Team} from '@webex/plugin-cc';
 import {ILogger} from '@webex/cc-store';
 /**
  * Interface representing the properties for the Station Login component.
@@ -93,6 +93,16 @@ export interface IStationLoginProps {
    * Handler to relogin the agent
    */
   relogin: () => void;
+
+  /**
+   * Handler to relogin the agent when the agent is already logged in
+   */
+  handleContinue: () => void;
+
+  /**
+   * Flag to indicate if the alert should be shown
+   */
+  showMultipleLoginAlert: boolean;
 }
 
 export type StationLoginPresentationalProps = Pick<
@@ -110,9 +120,15 @@ export type StationLoginPresentationalProps = Pick<
   | 'setDialNumber'
   | 'setTeam'
   | 'isAgentLoggedIn'
+  | 'handleContinue'
   | 'deviceType'
->;
+> & {
+  showMultipleLoginAlert: boolean;
+};
 
-export type UseStationLoginProps = Pick<IStationLoginProps, 'cc' | 'onLogin' | 'onLogout' | 'logger' | 'isAgentLoggedIn'>;
+export type UseStationLoginProps = Pick<
+  IStationLoginProps,
+  'cc' | 'onLogin' | 'onLogout' | 'logger' | 'isAgentLoggedIn' | 'handleContinue' | 'showMultipleLoginAlert'
+>;
 
 export type StationLoginProps = Pick<IStationLoginProps, 'onLogin' | 'onLogout'>;