fix(station-login): fix-station-login-bugs

packages/contact-center/cc-components/src/components/StationLogin/station-login.tsx

@@ -9,7 +9,6 @@ const StationLoginComponent: React.FunctionComponent<StationLoginComponentProps>
     teams,
     loginOptions,
     login,
-    logout,
     loginFailure,
     setDeviceType,
     setDialNumber,
@@ -21,6 +20,8 @@ const StationLoginComponent: React.FunctionComponent<StationLoginComponentProps>
     showMultipleLoginAlert,
     handleContinue,
     onCCSignOut,
+    teamId,
+    setTeamId,
   } = props;
 
   const modalRef = useRef<HTMLDialogElement>(null);
@@ -30,6 +31,7 @@ const StationLoginComponent: React.FunctionComponent<StationLoginComponentProps>
   const [dialNumberValue, setDialNumberValue] = useState<string>(dialNumber || '');
   const [showCCSignOutModal, setShowCCSignOutModal] = useState<boolean>(false);
   const [selectedDeviceType, setSelectedDeviceType] = useState<string>(deviceType || '');
+  const [selectedTeamId, setSelectedTeamId] = useState<string>(teamId || '');
   const [showDNError, setShowDNError] = useState<boolean>(false);
   const [dnErrorText, setDNErrorText] = useState<string>('');
 
@@ -38,16 +40,9 @@ const StationLoginComponent: React.FunctionComponent<StationLoginComponentProps>
     setSelectedDeviceType(deviceType || '');
     setDialNumberValue(dialNumber || '');
     updateDialNumberLabel(deviceType || '');
+    setSelectedTeamId(teamId || '');
   }, [isAgentLoggedIn]);
 
-  // TODO: should be set from the store
-  useEffect(() => {
-    if (teams.length > 0) {
-      const firstTeam = teams[0].id;
-      setTeam(firstTeam);
-    }
-  }, [teams]);
-
   // show modals
   useEffect(() => {
     if (showMultipleLoginAlert && modalRef.current) {
@@ -220,14 +215,17 @@ const StationLoginComponent: React.FunctionComponent<StationLoginComponentProps>
               name="teams-dropdown"
               onChange={(event: CustomEvent) => {
                 setTeam(event.detail.value);
+                setSelectedTeamId(event.detail.value);
+                setTeamId(event.detail.value);
               }}
               className="station-login-select"
               placeholder={StationLoginLabels.YOUR_TEAM}
+              selectedValueText={teams.find((team) => team.id === selectedTeamId)?.name}
               data-testid="teams-dropdown-select"
             >
               {teams.map((team: {id: string; name: string}, index: number) => {
                 return (
-                  <Option key={index} value={team.id}>
+                  <Option selected={team.id === selectedTeamId} key={index} value={team.id}>
                     {team.name}
                   </Option>
                 );
@@ -241,11 +239,7 @@ const StationLoginComponent: React.FunctionComponent<StationLoginComponentProps>
             </Text>
           )}
           <div className="btn-container">
-            {isAgentLoggedIn ? (
-              <Button id="logoutAgent" onClick={logout} color="positive" data-testid="logout-button">
-                {StationLoginLabels.SIGN_OUT}
-              </Button>
-            ) : (
+            {!isAgentLoggedIn && (
               <Button onClick={login} disabled={showDNError} data-testid="login-button">
                 {StationLoginLabels.SAVE_AND_CONTINUE}
               </Button>

packages/contact-center/cc-components/src/components/StationLogin/station-login.types.ts

@@ -110,6 +110,16 @@ export interface IStationLoginProps {
    * Handler for Contact Center logout
    */
   onCCSignOut?: () => void;
+
+  /**
+   * The team id for agent login
+   */
+  teamId: string;
+
+  /**
+   * Handler to set team Id
+   */
+  setTeamId: (teamId: string) => void;
 }
 
 export type StationLoginComponentProps = Pick<
@@ -131,4 +141,6 @@ export type StationLoginComponentProps = Pick<
   | 'dialNumberRegex'
   | 'showMultipleLoginAlert'
   | 'onCCSignOut'
+  | 'teamId'
+  | 'setTeamId'
 >;

packages/contact-center/cc-components/tests/components/StationLogin/station-login.tsx

@@ -11,7 +11,10 @@ describe('StationLoginComponent', () => {
     loginSuccess: undefined,
     loginFailure: undefined,
     logoutSuccess: undefined,
-    teams: ['team123'],
+    teams: [
+      {id: 'team123', name: 'Team A'},
+      {id: 'team456', name: 'Team B'},
+    ],
     loginOptions: ['EXTENSION', 'AGENT_DN', 'BROWSER'],
     setDeviceType: jest.fn(),
     setDialNumber: jest.fn(),
@@ -23,6 +26,11 @@ describe('StationLoginComponent', () => {
     showMultipleLoginAlert: false,
     handleContinue: jest.fn(),
     modalRef: React.createRef<HTMLDialogElement>(),
+    onCCSignOut: jest.fn(),
+    teamId: '',
+    setTeamId: jest.fn(),
+    setSelectedTeamId: jest.fn(),
+    selectedTeamId: 'team123',
   };
 
   afterEach(() => {
@@ -46,4 +54,41 @@ describe('StationLoginComponent', () => {
     fireEvent.click(continueButton);
     expect(handleContinueMock).toHaveBeenCalled();
   });
+
+  it('renders team dropdown with correct options', () => {
+    render(<StationLoginComponent {...props} />);
+    const teamSelect = screen.getByTestId('teams-dropdown-select');
+    expect(teamSelect).toBeInTheDocument();
+    expect(teamSelect.textContent).toContain('Team A');
+    expect(teamSelect.textContent).toContain('Team B');
+  });
+
+  it('calls setTeam and setTeamId when a team is selected', async () => {
+    render(<StationLoginComponent {...props} />);
+
+    // Step 1: Open dropdown
+    const dropdownButton = screen.getByTestId('teams-dropdown-select');
+    fireEvent.click(dropdownButton);
+
+    // Step 2: Click the option with text "Team B"
+    const teamOption = await screen.findByText('Team B');
+    fireEvent.click(teamOption);
+
+    expect(props.setTeam).toHaveBeenCalledWith('team456');
+    expect(props.setTeamId).toHaveBeenCalledWith('team456');
+  });
+
+  it('calls login on Save and Continue button click', () => {
+    render(<StationLoginComponent {...props} />);
+    const loginButton = screen.getByTestId('login-button');
+    fireEvent.click(loginButton);
+    expect(props.login).toHaveBeenCalled();
+  });
+
+  it('renders the select with correct selected option based on selectedTeamId', () => {
+    render(<StationLoginComponent {...props} />);
+
+    const selectedText = screen.getByText('Team A');
+    expect(selectedText).toBeInTheDocument();
+  });
 });

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

@@ -18,6 +18,8 @@ const StationLogin: React.FunctionComponent<StationLoginProps> = observer(({onLo
     dialNumber,
     setDeviceType,
     setDialNumber,
+    teamId,
+    setTeamId,
   } = store;
   const result = useStationLogin({
     cc,
@@ -41,6 +43,8 @@ const StationLogin: React.FunctionComponent<StationLoginProps> = observer(({onLo
     isAgentLoggedIn,
     showMultipleLoginAlert,
     onCCSignOut,
+    teamId,
+    setTeamId,
   };
   return <StationLoginComponent {...props} />;
 });

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

@@ -31,6 +31,7 @@ class Store implements IStore {
   currentTask: ITask = null;
   isAgentLoggedIn = false;
   deviceType: string = '';
+  teamId: string = '';
   taskList: Record<string, ITask> = {};
   dialNumber: string = '';
   currentState: string = '';
@@ -92,6 +93,7 @@ class Store implements IStore {
         this.isAgentLoggedIn = response.isAgentLoggedIn;
         this.deviceType = response.deviceType ?? 'AGENT_DN';
         this.dialNumber = response.defaultDn;
+        this.teamId = response.currentTeamId ?? '';
         this.currentState = response.lastStateAuxCodeId;
         this.lastStateChangeTimestamp = response.lastStateChangeTimestamp;
         this.lastIdleCodeChangeTimestamp = response.lastIdleCodeChangeTimestamp;

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

@@ -61,6 +61,7 @@ interface IStore {
   taskMetaData: Record<string, TaskMetaData>;
   isAgentLoggedIn: boolean;
   deviceType: string;
+  teamId: string;
   dialNumber: string;
   currentState: string;
   lastStateChangeTimestamp?: number;
@@ -102,6 +103,7 @@ interface IStoreWrapper extends IStore {
   setConsultAccepted(value: boolean): void;
   setConsultStartTimeStamp(timestamp: number): void;
   setAgentProfile(profile: Profile): void;
+  setTeamId(id: string): void;
 }
 
 interface IWrapupCode {

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

@@ -60,6 +60,11 @@ class StoreWrapper implements IStoreWrapper {
   get deviceType() {
     return this.store.deviceType;
   }
+
+  get teamId() {
+    return this.store.teamId;
+  }
+
   get dialNumber() {
     return this.store.dialNumber;
   }
@@ -163,6 +168,10 @@ class StoreWrapper implements IStoreWrapper {
     this.store.deviceType = option;
   };
 
+  setTeamId = (id: string): void => {
+    this.store.teamId = id;
+  };
+
   setDialNumber = (input: string): void => {
     this.store.dialNumber = input;
   };
@@ -663,6 +672,7 @@ class StoreWrapper implements IStoreWrapper {
       this.setLastIdleCodeChangeTimestamp(undefined);
       this.setShowMultipleLoginAlert(false);
       this.setConsultStartTimeStamp(undefined);
+      this.setTeamId('');
     });
   };
 
@@ -703,6 +713,7 @@ class StoreWrapper implements IStoreWrapper {
         this.setCurrentState(payload.auxCodeId?.trim() !== '' ? payload.auxCodeId : '0');
         this.setLastStateChangeTimestamp(payload.lastStateChangeTimestamp);
         this.setLastIdleCodeChangeTimestamp(payload.lastIdleCodeChangeTimestamp);
+        this.setTeamId(payload.teamId);
       });
     };
 
@@ -713,6 +724,7 @@ class StoreWrapper implements IStoreWrapper {
         runInAction(() => {
           if (event === CC_EVENTS.AGENT_RELOGIN_SUCCESS) {
             this.setAgentProfile(payload);
+            this.setTeamId(payload.teamId);
           }
         });
         if (!listenersAdded) {

packages/contact-center/store/tests/storeEventsWrapper.ts

@@ -60,6 +60,7 @@ jest.mock('../src/store', () => ({
     isAgentLoggedIn: false,
     deviceType: 'BROWSER',
     dialNumber: '12345',
+    itemId: '1234',
     taskList: 'mockTaskList',
     taskMetaData: {},
     incomingTask: 'mockIncomingTask',
@@ -85,6 +86,7 @@ jest.mock('../src/store', () => ({
     setLastIdleCodeChangeTimestamp: jest.fn(),
     setDeviceType: jest.fn(),
     setDialNumber: jest.fn(),
+    setTeamId: jest.fn(),
     init: jest.fn().mockResolvedValue({}),
     setCurrentTask: jest.fn(),
     refreshTaskList: jest.fn(),
@@ -248,6 +250,10 @@ describe('storeEventsWrapper', () => {
       expect(storeWrapper.dialNumber).toBe(storeWrapper['store'].dialNumber);
     });
 
+    it('should proxy teamId', () => {
+      expect(storeWrapper.teamId).toBe(storeWrapper['store'].teamId);
+    });
+
     it('should proxy agentProfile', () => {
       expect(storeWrapper.agentProfile).toBe(storeWrapper['store'].agentProfile);
     });
@@ -716,6 +722,15 @@ describe('storeEventsWrapper', () => {
       expect(setDeviceTypeSpy).toHaveBeenCalledWith(option);
     });
 
+    it('should set selected Id', () => {
+      const setTeamIdSpy = jest.spyOn(storeWrapper, 'setTeamId');
+      const id = '1234';
+
+      storeWrapper.setTeamId(id);
+
+      expect(setTeamIdSpy).toHaveBeenCalledWith(id);
+    });
+
     it('should return buddy agents list', async () => {
       const buddyAgents = [{name: 'agent1'}, {name: 'agent2'}];
       storeWrapper['store'].cc.getBuddyAgents = jest.fn().mockResolvedValue({data: {agentList: buddyAgents}});