fix(cc-widgets): Incoming Transfer showing Call control fix (#510)

Author: rsarika

packages/contact-center/cc-components/src/components/task/TaskList/task-list.utils.ts

@@ -1,6 +1,6 @@
 import {MEDIA_CHANNEL, TaskListItemData} from '../task.types';
 import {ITask} from '@webex/cc-store';
-
+import {isIncomingTask} from '@webex/cc-store';
 /**
  * Extracts and processes data from a task for rendering in the task list
  * @param task - The task object
@@ -20,7 +20,7 @@ export const extractTaskListItemData = (task: ITask, isBrowser: boolean): TaskLi
 
   const taskState = task.data.interaction.state;
   const startTimeStamp = task.data.interaction.createdTimestamp;
-  const isIncomingTask = !task?.data.wrapUpRequired && (taskState === 'new' || taskState === 'consult');
+  const isTaskIncoming = isIncomingTask(task);
   const mediaType = task.data.interaction.mediaType;
   const mediaChannel = task.data.interaction.mediaChannel;
 
@@ -29,21 +29,20 @@ export const extractTaskListItemData = (task: ITask, isBrowser: boolean): TaskLi
   const isSocial = mediaType === MEDIA_CHANNEL.SOCIAL;
 
   // Compute button text based on conditions
-  const acceptText =
-    isIncomingTask && !task.data.wrapUpRequired ? (isTelephony && !isBrowser ? 'Ringing...' : 'Accept') : undefined;
+  const acceptText = isTaskIncoming ? (isTelephony && !isBrowser ? 'Ringing...' : 'Accept') : undefined;
 
-  const declineText = isIncomingTask && !task.data.wrapUpRequired && isTelephony && isBrowser ? 'Decline' : undefined;
+  const declineText = isTaskIncoming && isTelephony && isBrowser ? 'Decline' : undefined;
 
   // Compute title based on media type
   const title = isSocial ? customerName : ani;
 
   // Compute disable state for accept button
-  const disableAccept = isIncomingTask && isTelephony && !isBrowser;
+  const disableAccept = isTaskIncoming && isTelephony && !isBrowser;
 
-  const ronaTimeout = isIncomingTask ? rawRonaTimeout : null;
+  const ronaTimeout = isTaskIncoming ? rawRonaTimeout : null;
 
   // Compute display state
-  const displayState = !isIncomingTask ? taskState : '';
+  const displayState = !isTaskIncoming ? taskState : '';
 
   return {
     ani,
@@ -52,7 +51,7 @@ export const extractTaskListItemData = (task: ITask, isBrowser: boolean): TaskLi
     ronaTimeout,
     taskState,
     startTimeStamp,
-    isIncomingTask,
+    isIncomingTask: isTaskIncoming,
     mediaType,
     mediaChannel,
     isTelephony,

packages/contact-center/cc-components/tests/components/task/TaskList/task-list.utils.tsx

@@ -9,6 +9,22 @@ import {
 import {MEDIA_CHANNEL, TaskListItemData} from '../../../../src/components/task/task.types';
 import {mockTask} from '@webex/test-fixtures';
 
+// Mock the store with a mockable isIncomingTask function
+jest.mock('@webex/cc-store', () => ({
+  isIncomingTask: jest.fn(() => false),
+  cc: {},
+  deviceType: 'BROWSER',
+  logger: {
+    debug: jest.fn(),
+    error: jest.fn(),
+    info: jest.fn(),
+    warn: jest.fn(),
+  },
+}));
+
+// Import the mocked functions
+import {isIncomingTask} from '@webex/cc-store';
+
 describe('task-list.utils', () => {
   beforeEach(() => {
     jest.clearAllMocks();
@@ -93,6 +109,9 @@ describe('task-list.utils', () => {
 
     describe('Incoming tasks', () => {
       it('should extract correct data for incoming telephony task on browser', () => {
+        // Mock isIncomingTask to return true for this test
+        (isIncomingTask as jest.Mock).mockReturnValueOnce(true);
+
         const originalState = mockTask.data.interaction.state;
         const originalCallAssociatedDetails = mockTask.data.interaction.callAssociatedDetails;
         const originalWrapUpRequired = mockTask.data.wrapUpRequired;
@@ -161,6 +180,9 @@ describe('task-list.utils', () => {
       });
 
       it('should extract correct data for incoming telephony task on non-browser', () => {
+        // Mock isIncomingTask to return true for this test
+        (isIncomingTask as jest.Mock).mockReturnValueOnce(true);
+
         const originalState = mockTask.data.interaction.state;
         const originalCallAssociatedDetails = mockTask.data.interaction.callAssociatedDetails;
         const originalWrapUpRequired = mockTask.data.wrapUpRequired;
@@ -190,6 +212,9 @@ describe('task-list.utils', () => {
       });
 
       it('should extract correct data for incoming social media task', () => {
+        // Mock isIncomingTask to return true for this test
+        (isIncomingTask as jest.Mock).mockReturnValueOnce(true);
+
         const originalState = mockTask.data.interaction.state;
         const originalCallAssociatedDetails = mockTask.data.interaction.callAssociatedDetails;
         const originalWrapUpRequired = mockTask.data.wrapUpRequired;
@@ -428,6 +453,9 @@ describe('task-list.utils', () => {
     });
 
     it('should not call onTaskSelect for non-selectable task', () => {
+      // Mock isIncomingTask to return true so this task is non-selectable
+      (isIncomingTask as jest.Mock).mockReturnValueOnce(true);
+
       const task = {
         ...mockTask,
         data: {

packages/contact-center/store/package.json

@@ -22,7 +22,7 @@
     "test:styles": "eslint"
   },
   "dependencies": {
-    "@webex/plugin-cc": "3.8.1-next.12",
+    "@webex/plugin-cc": "3.8.1-next.28",
     "mobx": "6.13.5",
     "typescript": "5.6.3"
   },

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

@@ -1,3 +1,4 @@
 import store from './storeEventsWrapper';
 export * from './store.types';
+export * from './task-utils';
 export default store;

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

@@ -20,6 +20,7 @@ import {
 } from './store.types';
 import Store from './store';
 import {runInAction} from 'mobx';
+import {isIncomingTask} from './task-utils';
 
 class StoreWrapper implements IStoreWrapper {
   store: IStore;
@@ -203,12 +204,8 @@ class StoreWrapper implements IStoreWrapper {
   };
 
   setCurrentTask = (task: ITask | null, isClicked: boolean = false): void => {
-    // Don't assign the task as current task if the interaction state is 'new' or 'consult'
-    if (
-      !task?.data.wrapUpRequired &&
-      (task?.data.interaction.state === 'new' || task?.data.interaction.state === 'consult')
-    )
-      return;
+    // Don't assign the task as current task is incoming
+    if (isIncomingTask(task)) return;
 
     runInAction(() => {
       // Determine if the new task is the same as the current task

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

@@ -0,0 +1,20 @@
+import {ITask} from './store.types';
+
+/**
+ * Determines if a task is an incoming task
+ * @param task - The task object
+ * @returns Whether the task is incoming
+ */
+export const isIncomingTask = (task: ITask): boolean => {
+  const taskData = task?.data;
+  const taskState = taskData?.interaction?.state;
+  const agentId = taskData?.agentId;
+  const participants = taskData?.interaction?.participants;
+  const hasJoined = agentId && participants?.[agentId]?.hasJoined;
+
+  return (
+    !taskData?.wrapUpRequired &&
+    !hasJoined &&
+    (taskState === 'new' || taskState === 'consult' || taskState === 'connected')
+  );
+};

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

@@ -171,7 +171,13 @@ describe('storeEventsWrapper', () => {
           interactionId: 'mockInteractionId',
           interaction: {
             state: 'connected',
+            participants: {
+              agent1: {
+                hasJoined: true,
+              },
+            },
           },
+          agentId: 'agent1',
         },
       } as ITask;
       storeWrapper.setCurrentTask(mockCurrentTask);
@@ -470,7 +476,13 @@ describe('storeEventsWrapper', () => {
         interactionId: 'interaction1',
         interaction: {
           state: 'connected',
+          participants: {
+            agent1: {
+              hasJoined: true,
+            },
+          },
         },
+        agentId: 'agent1',
       },
       on: jest.fn(),
       off: jest.fn(),
@@ -510,13 +522,32 @@ describe('storeEventsWrapper', () => {
           interaction: {
             state: 'new',
           },
+          agentId: 'agent1',
+          // Note: mockTask2 doesn't have hasJoined: true to simulate an incoming task
         },
         on: jest.fn(),
         off: jest.fn(),
       } as unknown as ITask;
 
-      storeWrapper['store'].taskList = {interaction2: mockTask};
-      storeWrapper.setCurrentTask(mockTask);
+      // Set up mockTask with hasJoined: true so it can be set as current task
+      const mockTaskWithJoined = {
+        ...mockTask,
+        data: {
+          ...mockTask.data,
+          interaction: {
+            ...mockTask.data.interaction,
+            participants: {
+              agent1: {
+                hasJoined: true,
+              },
+            },
+          },
+          agentId: 'agent1',
+        },
+      };
+
+      storeWrapper['store'].taskList = {interaction2: mockTaskWithJoined};
+      storeWrapper.setCurrentTask(mockTaskWithJoined);
 
       // Call the method under test
       storeWrapper.handleIncomingTask(mockTask2);
@@ -1647,10 +1678,32 @@ describe('storeEventsWrapper', () => {
 
     beforeEach(() => {
       mockTaskA = {
-        data: {interactionId: 'taskA', interaction: {state: 'connected'}},
+        data: {
+          interactionId: 'taskA',
+          interaction: {
+            state: 'connected',
+            participants: {
+              agent1: {
+                hasJoined: true,
+              },
+            },
+          },
+          agentId: 'agent1',
+        },
       } as ITask;
       mockTaskB = {
-        data: {interactionId: 'taskB', interaction: {state: 'connected'}},
+        data: {
+          interactionId: 'taskB',
+          interaction: {
+            state: 'connected',
+            participants: {
+              agent1: {
+                hasJoined: true,
+              },
+            },
+          },
+          agentId: 'agent1',
+        },
       } as ITask;
       storeWrapper['store'].consultCompleted = true;
       storeWrapper['store'].consultInitiated = true;
@@ -1695,5 +1748,59 @@ describe('storeEventsWrapper', () => {
       storeWrapper.setCurrentTask(null);
       expect(storeWrapper.currentTask).toBeNull();
     });
+
+    it('should not change currentTask when task is incoming (hasJoined is false)', () => {
+      // Set an initial task that can be set as current task
+      storeWrapper.setCurrentTask(mockTaskA);
+      expect(storeWrapper.currentTask).toEqual(mockTaskA);
+
+      // Create an incoming task (without hasJoined: true)
+      const incomingTask: ITask = {
+        data: {
+          interactionId: 'incomingTask',
+          interaction: {
+            state: 'new',
+            // Note: no participants or hasJoined property to simulate incoming task
+          },
+          agentId: 'agent1',
+        },
+      } as ITask;
+
+      // Try to set the incoming task as current task
+      storeWrapper.setCurrentTask(incomingTask);
+
+      // Current task should remain unchanged (still mockTaskA)
+      expect(storeWrapper.currentTask).toEqual(mockTaskA);
+      expect(storeWrapper.currentTask).not.toEqual(incomingTask);
+    });
+
+    it('should not change currentTask when task has hasJoined false', () => {
+      // This is the case where we transfer the call but agent has not accepted it yet.
+      storeWrapper.setCurrentTask(mockTaskA);
+      expect(storeWrapper.currentTask).toEqual(mockTaskA);
+
+      // Create a task with explicitly hasJoined: false
+      const taskWithoutJoined: ITask = {
+        data: {
+          interactionId: 'taskWithoutJoined',
+          interaction: {
+            state: 'connected',
+            participants: {
+              agent1: {
+                hasJoined: false,
+              },
+            },
+          },
+          agentId: 'agent1',
+        },
+      } as ITask;
+
+      // Try to set the task without joined as current task
+      storeWrapper.setCurrentTask(taskWithoutJoined);
+
+      // Current task should remain unchanged (still mockTaskA)
+      expect(storeWrapper.currentTask).toEqual(mockTaskA);
+      expect(storeWrapper.currentTask).not.toEqual(taskWithoutJoined);
+    });
   });
 });