fix(store): direct-all-events-through-store (#369)

Co-authored-by: Rajesh Kumar <rarajes2@cisco.com>

packages/contact-center/station-login/package.json

@@ -16,7 +16,7 @@
     "build": "yarn run -T tsc",
     "build:src": "yarn run clean:dist && webpack",
     "build:watch": "webpack --watch",
-    "test:unit": "jest"
+    "test:unit": "jest --coverage"
   },
   "dependencies": {
     "@webex/cc-store": "workspace:*",

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

@@ -2,7 +2,6 @@ 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;
@@ -11,34 +10,19 @@ export const useStationLogin = (props: UseStationLoginProps) => {
   const logger = props.logger;
   const [isAgentLoggedIn, setIsAgentLoggedIn] = useState(props.isAgentLoggedIn);
   const [dialNumber, setDialNumber] = useState('');
-  const [deviceType, setDeviceType] = useState('');
+  const [deviceType, setDeviceType] = useState(props.deviceType || '');
   const [team, setTeam] = useState('');
   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);
+      store.setShowMultipleLoginAlert(false);
       await store.registerCC();
       if (store.isAgentLoggedIn) {
         logger.log(`Agent Relogin Success`, {
@@ -64,7 +48,8 @@ export const useStationLogin = (props: UseStationLoginProps) => {
       .then((res: StationLoginSuccess) => {
         setLoginSuccess(res);
         setIsAgentLoggedIn(true);
-        store.setSelectedLoginOption(deviceType);
+        store.setDeviceType(deviceType);
+        store.setIsAgentLoggedIn(true);
         if (res.data.auxCodeId) {
           store.setCurrentState(res.data.auxCodeId);
         }
@@ -89,6 +74,8 @@ export const useStationLogin = (props: UseStationLoginProps) => {
       .then((res: StationLogoutSuccess) => {
         setLogoutSuccess(res);
         setIsAgentLoggedIn(false);
+        store.setIsAgentLoggedIn(false);
+        store.setDeviceType('');
         if (logoutCb) {
           logoutCb();
         }
@@ -102,7 +89,7 @@ export const useStationLogin = (props: UseStationLoginProps) => {
   };
 
   function relogin() {
-    store.setSelectedLoginOption(deviceType);
+    store.setDeviceType(deviceType);
     if (loginCb) {
       loginCb();
     }
@@ -119,7 +106,6 @@ export const useStationLogin = (props: UseStationLoginProps) => {
     loginSuccess,
     loginFailure,
     logoutSuccess,
-    showMultipleLoginAlert,
     isAgentLoggedIn,
     handleContinue,
   };

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

@@ -2,5 +2,3 @@ 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,13 +7,14 @@ 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 {cc, teams, loginOptions, logger, isAgentLoggedIn, showMultipleLoginAlert, deviceType} = store;
   const result = useStationLogin({
     cc,
     onLogin,
     onLogout,
     logger,
     isAgentLoggedIn,
+    deviceType,
   });
 
   const props = {
@@ -22,7 +23,7 @@ const StationLoginComponent: React.FunctionComponent<StationLoginProps> = ({onLo
     loginOptions,
     deviceType,
   };
-  return <StationLoginPresentational {...props} />;
+  return <StationLoginPresentational {...props} showMultipleLoginAlert={showMultipleLoginAlert} />;
 };
 
 const StationLogin = observer(StationLoginComponent);

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

@@ -1,11 +1,24 @@
-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';
+import {MULTIPLE_SIGN_IN_ALERT_MESSAGE, MULTIPLE_SIGN_IN_ALERT_TITLE} from './constants';
 
 const StationLoginPresentational: React.FunctionComponent<StationLoginPresentationalProps> = (props) => {
-  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 {
+    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(() => {
@@ -33,6 +46,9 @@ const StationLoginPresentational: React.FunctionComponent<StationLoginPresentati
         option.value = options;
         agentLogin.add(option);
       });
+      if (agentLogin && deviceType) {
+        agentLogin.value = deviceType;
+      }
     }
   }, [teams, loginOptions]);
 
@@ -53,8 +69,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);

packages/contact-center/station-login/src/station-login/station-login.style.scss

@@ -53,3 +53,41 @@
   border: 1px solid #ccc;
   border-radius: 4px;
 }
+
+
+.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/station-login.types.ts

@@ -128,7 +128,7 @@ export type StationLoginPresentationalProps = Pick<
 
 export type UseStationLoginProps = Pick<
   IStationLoginProps,
-  'cc' | 'onLogin' | 'onLogout' | 'logger' | 'isAgentLoggedIn'
+  'cc' | 'onLogin' | 'onLogout' | 'logger' | 'isAgentLoggedIn' | 'deviceType'
 >;
 
 export type StationLoginProps = Pick<IStationLoginProps, 'onLogin' | 'onLogout'>;