fix(cc-components): fix user-state broken UI

packages/contact-center/cc-components/src/components/UserState/user-state.tsx

@@ -57,10 +57,7 @@ const UserStateComponent: React.FunctionComponent<IUserState> = (props) => {
 
           return (
             <Item key={item.id} textValue={item.name} data-testid={`state-item-${item.name}`}>
-              <div
-                className="item-container"
-                data-testid={`item-container ${shouldHighlight ? `selected ${getIconStyle(item).class}` : ''}`}
-              >
+              <div className={`item-container ${shouldHighlight ? `selected ${getIconStyle(item).class}` : ''}`}>
                 <Icon
                   name={getIconStyle(item).iconName}
                   title=""

packages/contact-center/cc-components/src/components/UserState/user-state.utils.ts

@@ -23,12 +23,15 @@ export const getDropdownClass = (customState: ICustomState, currentState: string
 /**
  * Gets the icon style configuration for a given item
  */
-export const getIconStyle = (item: {id: string; name: string}): {class: string; iconName: string} => {
-  switch (item.name) {
-    case AgentUserState.Available:
-      return {class: 'available', iconName: 'recents-presence-filled'};
-    case AgentUserState.RONA:
-      return {class: 'rona', iconName: 'warning-filled'};
+export const getIconStyle = (item): {class: string; iconName: string} => {
+  if (item.developerName) {
+    return {class: 'custom', iconName: 'busy-presence-light'};
+  }
+  switch (item.id) {
+    case '0':
+      return {class: 'available', iconName: 'active-presence-small-filled'};
+    case item.name === AgentUserState.RONA && item.id:
+      return {class: 'rona', iconName: 'dnd-presence-filled'};
     default:
       return {class: 'idle', iconName: 'recents-presence-filled'};
   }
@@ -38,13 +41,16 @@ export const getIconStyle = (item: {id: string; name: string}): {class: string;
  * Gets the tooltip text based on current state
  */
 export const getTooltipText = (customState: ICustomState, currentState: string, idleCodes: IdleCode[]): string => {
-  if (customState) {
-    const currentIdleCode = idleCodes.find((code) => code.id === currentState);
-    if (currentIdleCode?.name === AgentUserState.Available) {
+  if (customState && customState.developerName === 'ENGAGED') {
+    const currentStateObj = idleCodes.find((item) => item.id === currentState);
+
+    if (currentStateObj.name === AgentUserState.Available) {
       return userStateLabels.customWithAvailableTooltip;
+    } else {
+      return userStateLabels.customWithIdleStateTooltip.replace(/{{.*?}}/g, currentStateObj.name);
     }
-    return userStateLabels.customWithIdleStateTooltip.replace('{{currentState}}', currentIdleCode?.name || '');
   }
+
   return userStateLabels.availableTooltip;
 };
 
@@ -57,54 +63,56 @@ export const handleSelectionChange = (
   setAgentStatus: (auxCodeId: string) => void,
   logger
 ): void => {
-  if (key !== currentState) {
-    logger?.info(`CC-Widgets: UserState: state changed to: ${key}`, {
-      module: 'cc-components#user-state.tsx',
+  const cleanKey = key.startsWith('hide-') ? key.substring(5) : key;
+  if (logger) {
+    logger.info(`CC-Widgets: UserState: selection changed from ${currentState} to ${cleanKey}`, {
+      module: 'user-state.tsx',
       method: 'handleSelectionChange',
     });
-    setAgentStatus(key);
+  }
+  if (cleanKey !== currentState) {
+    setAgentStatus(cleanKey);
   }
 };
 
 /**
  * Sorts dropdown items with Available first, then others
  */
 export const sortDropdownItems = (items: Array<{id: string; name: string}>): Array<{id: string; name: string}> => {
-  return [...items].sort((a, b) => {
-    if (a.name === AgentUserState.Available) return -1;
-    if (b.name === AgentUserState.Available) return 1;
-    return a.name.localeCompare(b.name);
-  });
+  return [
+    ...items.filter((item) => item.name === AgentUserState.Available),
+    ...items.filter((item) => item.name !== AgentUserState.Available).sort((a, b) => a.name.localeCompare(b.name)),
+  ];
 };
 
 /**
  * Gets the previous selectable state (first non-RONA/Engaged state)
  */
 export const getPreviousSelectableState = (idleCodes: IdleCode[]): string => {
-  const selectableState = idleCodes.find(
-    (code) => ![AgentUserState.RONA, AgentUserState.Engaged].includes(code.name as AgentUserState)
-  );
-  return selectableState?.id || '0';
+  return idleCodes.find((code) => code.id !== AgentUserState.RONA && code.id !== AgentUserState.Engaged)?.id ?? '0';
 };
 
 /**
  * Gets the selected key for the dropdown
  */
 export const getSelectedKey = (customState: ICustomState, currentState: string, idleCodes: IdleCode[]): string => {
+  let selectedKey;
   if (customState) {
-    return `custom-${customState.developerName}`;
+    selectedKey = `hide-${customState.developerName}`;
+  } else {
+    selectedKey = currentState;
   }
 
-  const currentIdleCode = idleCodes.find((code) => code.id === currentState);
-  const isRonaOrEngaged = [AgentUserState.RONA, AgentUserState.Engaged].includes(
-    currentIdleCode?.name as AgentUserState
-  );
-
-  if (isRonaOrEngaged) {
-    return getPreviousSelectableState(idleCodes);
+  for (const item of idleCodes) {
+    if (item.name === AgentUserState.RONA && item.id === currentState) {
+      selectedKey = `hide-${item.id}`;
+    }
+    if (item.name === AgentUserState.RONA && item.id !== currentState) {
+      continue; // Skip RONA unless it matches the current state
+    }
   }
 
-  return currentState;
+  return selectedKey;
 };
 
 /**
@@ -114,17 +122,17 @@ export const buildDropdownItems = (
   customState: ICustomState,
   idleCodes: IdleCode[]
 ): Array<{id: string; name: string}> => {
-  const items = idleCodes
-    .filter((code) => ![AgentUserState.RONA, AgentUserState.Engaged].includes(code.name as AgentUserState))
-    .map((code) => ({
-      id: code.id,
-      name: code.name,
-    }));
+  const items = customState
+    ? [{name: customState.name, id: `hide-${customState.developerName}`, developerName: customState.developerName}]
+    : [];
 
-  if (customState) {
+  for (const item of idleCodes) {
+    if (item.name === AgentUserState.RONA || item.name === AgentUserState.Engaged) {
+      continue; // Skip RONA and ENGAGED states
+    }
     items.push({
-      id: `custom-${customState.developerName}`,
-      name: customState.name,
+      ...item,
+      id: item.name === AgentUserState.RONA ? `hide-${item.id}` : item.id,
     });
   }
 

packages/contact-center/cc-components/tests/components/UserState/__snapshots__/user-state.snapshot.tsx.snap

@@ -62,8 +62,7 @@ exports[`UserState Component Snapshots Interactions should call handleSelectionC
         title="Break"
       >
         <div
-          class="item-container"
-          data-testid="item-container selected idle"
+          class="item-container selected idle"
         >
           <mdc-icon
             class="state-icon idle"
@@ -205,8 +204,7 @@ exports[`UserState Component Snapshots Interactions should handle custom state r
         title="Break"
       >
         <div
-          class="item-container"
-          data-testid="item-container selected idle"
+          class="item-container selected idle"
         >
           <mdc-icon
             class="state-icon idle"
@@ -341,8 +339,7 @@ exports[`UserState Component Snapshots Rendering - Tests for UI elements and vis
         title="Break"
       >
         <div
-          class="item-container"
-          data-testid="item-container selected idle"
+          class="item-container selected idle"
         >
           <mdc-icon
             class="state-icon idle"
@@ -477,8 +474,7 @@ exports[`UserState Component Snapshots Rendering - Tests for UI elements and vis
         title="Break"
       >
         <div
-          class="item-container"
-          data-testid="item-container selected idle"
+          class="item-container selected idle"
         >
           <mdc-icon
             class="state-icon idle"
@@ -620,8 +616,7 @@ exports[`UserState Component Snapshots Rendering - Tests for UI elements and vis
         title="Break"
       >
         <div
-          class="item-container"
-          data-testid="item-container selected idle"
+          class="item-container selected idle"
         >
           <mdc-icon
             class="state-icon idle"
@@ -762,8 +757,7 @@ exports[`UserState Component Snapshots Rendering - Tests for UI elements and vis
         title="Break"
       >
         <div
-          class="item-container"
-          data-testid="item-container selected idle"
+          class="item-container selected idle"
         >
           <mdc-icon
             class="state-icon idle"
@@ -905,8 +899,7 @@ exports[`UserState Component Snapshots State Management should handle RONA and E
         title="Break"
       >
         <div
-          class="item-container"
-          data-testid="item-container selected idle"
+          class="item-container selected idle"
         >
           <mdc-icon
             class="state-icon idle"
@@ -1048,8 +1041,7 @@ exports[`UserState Component Snapshots State Management should handle RONA and E
         title="Break"
       >
         <div
-          class="item-container"
-          data-testid="item-container "
+          class="item-container "
         >
           <mdc-icon
             class="state-icon idle"
@@ -1191,8 +1183,7 @@ exports[`UserState Component Snapshots State Management should handle currentSta
         title="Break"
       >
         <div
-          class="item-container"
-          data-testid="item-container "
+          class="item-container "
         >
           <mdc-icon
             class="state-icon idle"
@@ -1334,8 +1325,7 @@ exports[`UserState Component Snapshots State Management should handle elapsed ti
         title="Break"
       >
         <div
-          class="item-container"
-          data-testid="item-container selected idle"
+          class="item-container selected idle"
         >
           <mdc-icon
             class="state-icon idle"
@@ -1477,8 +1467,7 @@ exports[`UserState Component Snapshots State Management should handle elapsed ti
         title="Break"
       >
         <div
-          class="item-container"
-          data-testid="item-container selected idle"
+          class="item-container selected idle"
         >
           <mdc-icon
             class="state-icon idle"
@@ -1620,8 +1609,7 @@ exports[`UserState Component Snapshots State Management should update when custo
         title="Break"
       >
         <div
-          class="item-container"
-          data-testid="item-container selected idle"
+          class="item-container selected idle"
         >
           <mdc-icon
             class="state-icon idle"

packages/contact-center/cc-components/tests/components/UserState/user-state.tsx

@@ -209,7 +209,7 @@ describe('UserStateComponent', () => {
       });
 
       // getIconStyle should be called for the items being rendered
-      expect(getIconStyleSpy).toHaveBeenCalledWith({id: '0', name: 'Available'});
+      expect(getIconStyleSpy).toHaveBeenCalledWith({id: '0', name: 'Available', isSystem: true});
     });
   });
 
@@ -309,7 +309,7 @@ describe('UserStateComponent', () => {
 
       // The getIconStyle should have been called with the item that has an empty name
       // due to the || '' fallback when currentState is not found in idleCodes
-      expect(getIconStyleSpy).toHaveBeenCalledWith({id: '0', name: 'Available'});
+      expect(getIconStyleSpy).toHaveBeenCalledWith({id: '0', name: 'Available', isSystem: true});
     });
   });
 });