fix(station-login): doStationLogout prop to logout on signout confirm (#473)

mkesavan13 · web-flow · commit a38cc5b80fdc · 2025-06-24T17:28:44.000+05:30
diff --git a/packages/contact-center/cc-components/src/components/StationLogin/station-login.tsx b/packages/contact-center/cc-components/src/components/StationLogin/station-login.tsx
@@ -14,6 +14,7 @@ import {
   handleTeamSelectChanged,
   saveConfirmCancelClicked,
   updateDialNumberLabel,
+  handleCCSignoutKeyDown,
 } from './station-login.utils';
 
 const StationLoginComponent: React.FunctionComponent<StationLoginComponentProps> = (props) => {
@@ -89,7 +90,7 @@ const StationLoginComponent: React.FunctionComponent<StationLoginComponentProps>
           <Button
             id="ContinueButton"
             data-testid="ContinueButton"
-            onClick={() => continueClicked(multiSignInModalRef, handleContinue)}
+            onClick={() => continueClicked(multiSignInModalRef, handleContinue, setShowCCSignOutModal)}
             variant="secondary"
             className="white-button"
           >
@@ -98,7 +99,12 @@ const StationLoginComponent: React.FunctionComponent<StationLoginComponentProps>
         </div>
       </dialog>
       {/* TODO: Replace dialog with momentum-design modal component once available */}
-      <dialog ref={ccSignOutModalRef} className="dialog-modal" data-testid="cc-logout-modal">
+      <dialog
+        ref={ccSignOutModalRef}
+        className="dialog-modal"
+        data-testid="cc-logout-modal"
+        onKeyDown={(e) => handleCCSignoutKeyDown(e, setShowCCSignOutModal)}
+      >
         <Text tagname="h2" type="body-large-bold" className="modal-text">
           {StationLoginLabels.CC_SIGN_OUT}
         </Text>
@@ -114,7 +120,10 @@ const StationLoginComponent: React.FunctionComponent<StationLoginComponentProps>
           >
             {StationLoginLabels.CANCEL}
           </Button>
-          <Button data-testId="cc-logout-button" onClick={() => continueClicked(ccSignOutModalRef, onCCSignOut)}>
+          <Button
+            data-testId="cc-logout-button"
+            onClick={() => continueClicked(ccSignOutModalRef, onCCSignOut, setShowCCSignOutModal)}
+          >
             {StationLoginLabels.SIGN_OUT}
           </Button>
         </div>
diff --git a/packages/contact-center/cc-components/src/components/StationLogin/station-login.types.ts b/packages/contact-center/cc-components/src/components/StationLogin/station-login.types.ts
@@ -111,6 +111,12 @@ export interface IStationLoginProps {
    */
   onCCSignOut?: () => void;
 
+  /**
+   * If this boolean is false, the agent will not be logged out from the station but the onCCSignOut will be called.
+   * By default, it is true which means the agent will be logged out from the station and onCCSignOut will be called.
+   */
+  doStationLogout?: boolean;
+
   /**
    * The team id for agent login
    */
diff --git a/packages/contact-center/cc-components/src/components/StationLogin/station-login.utils.tsx b/packages/contact-center/cc-components/src/components/StationLogin/station-login.utils.tsx
@@ -34,7 +34,8 @@ const handleModals = (
  * Closes the dialog if it is currently open and calls the provided callback function
  */
 
-const continueClicked = (modalRef, callback) => {
+const continueClicked = (modalRef, callback, setShowCCSignOutModal) => {
+  setShowCCSignOutModal(false);
   if (modalRef.current) {
     modalRef.current.close();
     callback();
@@ -219,6 +220,15 @@ const handleOnCCSignOut = (ccSignOutModalRef: React.RefObject<HTMLDialogElement>
   onCCSignOut();
 };
 
+const handleCCSignoutKeyDown = (
+  event: React.KeyboardEvent<HTMLDialogElement>,
+  setShowCCSignOutModal: (show: boolean) => void
+) => {
+  if (event.key === 'Escape') {
+    setShowCCSignOutModal(false);
+  }
+};
+
 export {
   handleModals,
   continueClicked,
@@ -232,4 +242,5 @@ export {
   handleDNInputChanged,
   handleTeamSelectChanged,
   handleOnCCSignOut,
+  handleCCSignoutKeyDown,
 };
diff --git a/packages/contact-center/cc-components/tests/components/StationLogin/station-login.tsx b/packages/contact-center/cc-components/tests/components/StationLogin/station-login.tsx
@@ -123,6 +123,7 @@ describe('Station Login Component', () => {
       expect(ccSignOutModal).toHaveTextContent(StationLoginLabels.CC_SIGN_OUT);
       expect(ccSignOutModal).toHaveTextContent(StationLoginLabels.CC_SIGN_OUT_CONFIRM);
       expect(ccSignOutModal).toBeInTheDocument();
+      expect(ccSignOutModal).toHaveAttribute('class', 'dialog-modal');
 
       // Check Text components in cc-logout-modal
       const ccSignOutModalTitle = ccSignOutModal.querySelector('mdc-text[tagname="h2"]');
@@ -493,7 +494,7 @@ describe('Station Login Component', () => {
       );
     });
 
-    describe('SignOut Modal Popup', () => {
+    describe('SignOut Modal Popup and handleCCSignoutKeyDown', () => {
       it('show signOut modal when onCCSignOut is present and cancel is clicked', async () => {
         const mockSignOutModalRef = {current: null};
         mockCreateStationLoginRefs.mockImplementation(() => ({
@@ -530,7 +531,7 @@ describe('Station Login Component', () => {
         expect(confirmSignOutButton).toHaveTextContent(StationLoginLabels.SIGN_OUT);
 
         fireEvent.click(confirmSignOutButton);
-        expect(mockContinueClicked).toHaveBeenCalledWith(mockSignOutModalRef, mockSignOut);
+        expect(mockContinueClicked).toHaveBeenCalledWith(mockSignOutModalRef, mockSignOut, expect.any(Function));
       });
 
       it('show signOut modal when onCCSignOut is present and sign out is clicked', async () => {
@@ -585,10 +586,14 @@ describe('Station Login Component', () => {
 
         const continueBtn = screen.getByTestId('ContinueButton');
         fireEvent.click(continueBtn);
-        expect(stationLoginUtils.continueClicked).toHaveBeenCalledWith(mockModal, handleContinue);
+        expect(stationLoginUtils.continueClicked).toHaveBeenCalledWith(mockModal, handleContinue, expect.any(Function));
       });
 
       it('should close sign-out modal and update state on cancel button click', async () => {
+        const mockSetShowCCSignOutModal = jest.fn();
+        const mockEvent = {key: 'Escape'} as React.KeyboardEvent<HTMLDialogElement>;
+        stationLoginUtils.handleCCSignoutKeyDown(mockEvent, mockSetShowCCSignOutModal);
+        expect(mockSetShowCCSignOutModal).toHaveBeenCalledWith(false);
         const screen = await render(<StationLoginComponent {...props} />);
         const cancelButton = screen.getByTestId('cc-cancel-button');
         fireEvent.click(cancelButton);
diff --git a/packages/contact-center/cc-components/tests/components/StationLogin/station-login.utils.tsx b/packages/contact-center/cc-components/tests/components/StationLogin/station-login.utils.tsx
@@ -13,6 +13,7 @@ import {
   handleDNInputChanged,
   handleTeamSelectChanged,
   handleOnCCSignOut,
+  handleCCSignoutKeyDown,
 } from '../../../src/components/StationLogin/station-login.utils';
 import {
   DESKTOP,
@@ -34,6 +35,22 @@ describe('Station Login Utils', () => {
     jest.clearAllMocks();
   });
 
+  describe('handleCCSignoutKeyDown', () => {
+    it('should set showCCSignOutModal to false when Escape key is pressed', () => {
+      const mockSetShowCCSignOutModal = jest.fn();
+      const mockEvent = {key: 'Escape'} as React.KeyboardEvent<HTMLDialogElement>;
+      handleCCSignoutKeyDown(mockEvent, mockSetShowCCSignOutModal);
+      expect(mockSetShowCCSignOutModal).toHaveBeenCalledWith(false);
+    });
+
+    it('should not set showCCSignOutModal for other keys', () => {
+      const mockSetShowCCSignOutModal = jest.fn();
+      const mockEvent = {key: 'Enter'} as React.KeyboardEvent<HTMLDialogElement>;
+      handleCCSignoutKeyDown(mockEvent, mockSetShowCCSignOutModal);
+      expect(mockSetShowCCSignOutModal).not.toHaveBeenCalled();
+    });
+  });
+
   describe('handleModals', () => {
     let mockModalRef: React.RefObject<HTMLDialogElement>;
     let mockCCSignOutModalRef: React.RefObject<HTMLDialogElement>;
@@ -102,19 +119,22 @@ describe('Station Login Utils', () => {
         } as unknown as HTMLDialogElement,
       };
       const mockHandleContinue = jest.fn();
+      const mockSetShowCCSignOutModal = jest.fn();
 
-      continueClicked(mockModalRef, mockHandleContinue);
+      continueClicked(mockModalRef, mockHandleContinue, mockSetShowCCSignOutModal);
 
       expect(mockModalRef.current?.close).toHaveBeenCalled();
       expect(mockHandleContinue).toHaveBeenCalled();
+      expect(mockSetShowCCSignOutModal).toHaveBeenCalledWith(false);
     });
 
     it('should handle null ref gracefully', () => {
       const nullRef = {current: null};
       const mockHandleContinue = jest.fn();
+      const mockSetShowCCSignOutModal = jest.fn();
 
       expect(() => {
-        continueClicked(nullRef, mockHandleContinue);
+        continueClicked(nullRef, mockHandleContinue, mockSetShowCCSignOutModal);
       }).not.toThrow();
     });
   });
diff --git a/packages/contact-center/station-login/src/helper.ts b/packages/contact-center/station-login/src/helper.ts
@@ -13,6 +13,9 @@ export const useStationLogin = (props: UseStationLoginProps) => {
   const dialNumber = props.dialNumber || '';
   const deviceType = props.deviceType || '';
   const teamId = props.teamId || '';
+  const onCCSignOut = props.onCCSignOut;
+  const doStationLogout =
+    props.doStationLogout === undefined || props.doStationLogout === null ? true : props.doStationLogout;
   const [team, setTeam] = useState('');
   const [loginSuccess, setLoginSuccess] = useState<StationLoginSuccess>();
   const [loginFailure, setLoginFailure] = useState<Error>();
@@ -72,14 +75,14 @@ export const useStationLogin = (props: UseStationLoginProps) => {
     if (!isLoginOptionsChanged) {
       setSaveError('No changes detected in login options.');
       logger.log('No changes detected in login options.', {
-        module: 'widget-station-login#station-login/helper.ts',
+        module: 'widget-station-login#helper.ts',
         method: 'saveLoginOptions',
       });
       if (props.onSaveEnd) props.onSaveEnd(false);
       return;
     }
     logger.log('Saving login options:', {
-      module: 'widget-station-login#station-login/helper.ts',
+      module: 'widget-station-login#helper.ts',
       method: 'saveLoginOptions',
       original: originalLoginOptions,
       updated: currentLoginOptions,
@@ -101,14 +104,14 @@ export const useStationLogin = (props: UseStationLoginProps) => {
         setOriginalLoginOptions({...currentLoginOptions});
         setSaveError('');
         logger.log('Agent profile updated successfully.', {
-          module: 'widget-station-login#station-login/helper.ts',
+          module: 'widget-station-login#helper.ts',
           method: 'saveLoginOptions',
         });
         if (props.onSaveEnd) props.onSaveEnd(true);
       })
       .catch((error: Error) => {
         logger.error('Failed to update agent device type', error, {
-          module: 'widget-station-login#station-login/helper.ts',
+          module: 'widget-station-login#helper.ts',
           method: 'saveLoginOptions',
         });
         setSaveError(error.message || 'Failed to update device type');
@@ -134,6 +137,21 @@ export const useStationLogin = (props: UseStationLoginProps) => {
     }
   };
 
+  const handleCCSignOut = async () => {
+    if (doStationLogout && store.isAgentLoggedIn) {
+      try {
+        await cc.stationLogout({logoutReason: 'User requested logout'});
+        await cc.deregister();
+      } catch (error) {
+        logger.error(`CC-Widgets: Error during station logout: ${error}`, {
+          module: 'widget-station-login#helper.ts',
+          method: 'handleCCSignOut',
+        });
+      }
+    }
+    onCCSignOut();
+  };
+
   // Make sure to set the callback are same and change the logout  logic
   useEffect(() => {
     store.setCCCallback(CC_EVENTS.AGENT_STATION_LOGIN_SUCCESS, handleLogin);
@@ -152,18 +170,18 @@ export const useStationLogin = (props: UseStationLoginProps) => {
       await store.registerCC();
       if (store.isAgentLoggedIn) {
         logger.log(`CC-Widgets: Agent Relogin Success`, {
-          module: 'widget-station-login#station-login/helper.ts',
+          module: 'widget-station-login#helper.ts',
           method: 'handleContinue',
         });
       } else {
         logger.error(`Agent Relogin Failed`, {
-          module: 'widget-station-login#station-login/helper.ts',
+          module: 'widget-station-login#helper.ts',
           method: 'handleContinue',
         });
       }
     } catch (error) {
       logger.error(`CC-Widgets: Error handling agent multi login continue: ${error}`, {
-        module: 'widget-station-login#station-login/index.tsx',
+        module: 'widget-station-login#helper.ts',
         method: 'handleContinue',
       });
     }
@@ -173,7 +191,7 @@ export const useStationLogin = (props: UseStationLoginProps) => {
     cc.stationLogin({teamId: team, loginOption: deviceType, dialNumber})
       .then((res: StationLoginSuccess) => {
         logger.log('CC-Widgets: useStationLogin login(): stationLogin success', {
-          module: 'station-login/helper.ts',
+          module: 'widget-station-login#helper.ts',
           method: 'login',
         });
         setLoginSuccess(res);
@@ -191,13 +209,13 @@ export const useStationLogin = (props: UseStationLoginProps) => {
 
   const logout = () => {
     logger.info('CC-Widgets: useStationLogin logout(): invoking stationLogout', {
-      module: 'station-login/helper.ts',
+      module: 'widget-station-login#helper.ts',
       method: 'logout',
     });
     cc.stationLogout({logoutReason: 'User requested logout'})
       .then((res: StationLogoutSuccess) => {
         logger.log('CC-Widgets: useStationLogin logout(): stationLogout success', {
-          module: 'station-login/helper.ts',
+          module: 'widget-station-login#helper.ts',
           method: 'logout',
         });
         setLogoutSuccess(res);
@@ -231,5 +249,6 @@ export const useStationLogin = (props: UseStationLoginProps) => {
     setDialNumberValue,
     setSelectedTeamId,
     selectedTeamId,
+    onCCSignOut: onCCSignOut ? handleCCSignOut : undefined,
   };
 };
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,7 +7,7 @@ import {useStationLogin} from '../helper';
 import {StationLoginProps} from './station-login.types';
 
 const StationLogin: React.FunctionComponent<StationLoginProps> = observer(
-  ({onLogin, onLogout, onCCSignOut, profileMode, onSaveStart, onSaveEnd}) => {
+  ({onLogin, onLogout, onCCSignOut, profileMode, onSaveStart, onSaveEnd, doStationLogout}) => {
     const {
       cc,
       teams,
@@ -33,6 +33,8 @@ const StationLogin: React.FunctionComponent<StationLoginProps> = observer(
       onSaveEnd,
       teamId,
       isAgentLoggedIn,
+      onCCSignOut,
+      doStationLogout,
     });
 
     const dialNumberRegex = cc?.agentConfig?.regexUS;
@@ -47,7 +49,6 @@ const StationLogin: React.FunctionComponent<StationLoginProps> = observer(
       dialNumberRegex,
       isAgentLoggedIn,
       showMultipleLoginAlert,
-      onCCSignOut,
       teamId,
       setTeamId,
       logger,
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
@@ -12,9 +12,11 @@ export type UseStationLoginProps = Pick<
   | 'onSaveEnd'
   | 'teamId'
   | 'isAgentLoggedIn'
+  | 'onCCSignOut'
+  | 'doStationLogout'
 >;
 
 export type StationLoginProps = Pick<
   IStationLoginProps,
-  'onLogin' | 'onLogout' | 'onCCSignOut' | 'profileMode' | 'onSaveStart' | 'onSaveEnd' | 'teamId'
+  'onLogin' | 'onLogout' | 'onCCSignOut' | 'profileMode' | 'onSaveStart' | 'onSaveEnd' | 'teamId' | 'doStationLogout'
 >;
diff --git a/packages/contact-center/station-login/tests/helper.ts b/packages/contact-center/station-login/tests/helper.ts
diff --git a/packages/contact-center/station-login/tests/station-login/index.tsx b/packages/contact-center/station-login/tests/station-login/index.tsx
diff --git a/widgets-samples/cc/samples-cc-react-app/src/App.tsx b/widgets-samples/cc/samples-cc-react-app/src/App.tsx
