fix(task-refactor): fix outdial flow

Author: akulakum

packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx

@@ -67,6 +67,11 @@ const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) =>
   const customerName = currentTask?.data?.interaction?.callAssociatedDetails?.customerName;
 
   const ani = currentTask?.data?.interaction?.callAssociatedDetails?.ani;
+  const isOutdial = currentTask?.data?.interaction?.outboundType === 'OUTDIAL';
+  const dnis =
+    currentTask?.data?.interaction?.callAssociatedDetails?.dnis ||
+    currentTask?.data?.interaction?.callProcessingDetails?.dnis;
+  const displayNumber = isOutdial ? dnis || ani : ani;
   const dn = currentTask?.data?.interaction?.callAssociatedDetails?.dn;
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -80,7 +85,7 @@ const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) =>
   const phoneNumberTooltipId = `phone-number-tooltip-${currentTask.data.interaction.interactionId}`;
 
   const renderCustomerName = () => {
-    const customerText = isSocial ? customerName || NO_CUSTOMER_NAME : ani || NO_CALLER_ID;
+    const customerText = isSocial ? customerName || NO_CUSTOMER_NAME : displayNumber || NO_CALLER_ID;
 
     const textComponent = (
       <Text

packages/contact-center/cc-components/src/components/task/IncomingTask/incoming-task.tsx

@@ -5,13 +5,13 @@ import {withMetrics} from '@webex/cc-ui-logging';
 import {extractIncomingTaskData} from './incoming-task.utils';
 
 const IncomingTaskComponent: React.FunctionComponent<IncomingTaskComponentProps> = (props) => {
-  const {incomingTask, accept, reject, logger, acceptControl, declineControl, isDeclineButtonEnabled} = props;
+  const {incomingTask, accept, reject, logger, acceptControl, declineControl, isDeclineButtonEnabled, isBrowser} = props;
   if (!incomingTask) {
     return <></>; // hidden component
   }
 
   // Extract all task data using the utility function
-  const taskData = extractIncomingTaskData(incomingTask, logger, acceptControl, declineControl, isDeclineButtonEnabled);
+  const taskData = extractIncomingTaskData(incomingTask, logger, acceptControl, declineControl, isDeclineButtonEnabled, isBrowser);
 
   return (
     <Task

packages/contact-center/cc-components/src/components/task/IncomingTask/incoming-task.utils.tsx

@@ -29,7 +29,8 @@ export const extractIncomingTaskData = (
   logger?,
   acceptControl?: {isVisible: boolean; isEnabled: boolean},
   declineControl?: {isVisible: boolean; isEnabled: boolean},
-  isDeclineButtonEnabled?: boolean
+  isDeclineButtonEnabled?: boolean,
+  isBrowser?: boolean
 ): IncomingTaskData => {
   try {
     const accept = acceptControl ?? incomingTask?.uiControls?.main?.accept ?? {isVisible: false, isEnabled: false};
@@ -41,7 +42,9 @@ export const extractIncomingTaskData = (
 
     // Extract basic data from task
     const callAssociationDetails = incomingTask?.data?.interaction?.callAssociatedDetails;
-    const ani = callAssociationDetails?.ani;
+    const isOutdial = incomingTask?.data?.interaction?.outboundType === 'OUTDIAL';
+    const dnis = callAssociationDetails?.dnis || incomingTask?.data?.interaction?.callProcessingDetails?.dnis;
+    const ani = isOutdial ? dnis || callAssociationDetails?.ani : callAssociationDetails?.ani;
     const customerName = callAssociationDetails?.customerName;
     const virtualTeamName = callAssociationDetails?.virtualTeamName;
     const ronaTimeout = callAssociationDetails?.ronaTimeout ? Number(callAssociationDetails?.ronaTimeout) : null;
@@ -54,13 +57,11 @@ export const extractIncomingTaskData = (
     const isSocial = mediaType === MEDIA_CHANNEL.SOCIAL;
 
     // Compute button text based on conditions
-    // Extension mode (EPDN): accept button is visible but disabled → show "Ringing..."
-    // WebRTC mode (Desktop): accept button is visible and enabled → show "Accept"
-    const acceptText = accept.isVisible
-      ? isTelephony && !accept.isEnabled
-        ? 'Ringing...'
-        : 'Accept'
-      : undefined;
+    // Extension mode (any call): accept visible but disabled → show "Ringing..."
+    // Desktop/WebRTC outdial: accept visible but disabled → show "Accept" (auto-answer handles it)
+    // Desktop/WebRTC inbound: accept visible and enabled → show "Accept"
+    const showRinging = isTelephony && !accept.isEnabled && !(isBrowser && isOutdial);
+    const acceptText = accept.isVisible ? (showRinging ? 'Ringing...' : 'Accept') : undefined;
 
     const declineText = decline.isVisible ? 'Decline' : undefined;
 

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

@@ -12,7 +12,8 @@ import './styles.scss';
 import {withMetrics} from '@webex/cc-ui-logging';
 
 const TaskListComponent: React.FunctionComponent<TaskListComponentProps> = (props) => {
-  const {currentTask, taskList, acceptTask, declineTask, onTaskSelect, logger, agentId, isDeclineButtonEnabled} = props;
+  const {currentTask, taskList, acceptTask, declineTask, onTaskSelect, logger, agentId, isDeclineButtonEnabled, isBrowser} =
+    props;
 
   // Early return for empty task list
   if (isTaskListEmpty(taskList)) {
@@ -25,7 +26,7 @@ const TaskListComponent: React.FunctionComponent<TaskListComponentProps> = (prop
     <ul className="task-list" data-testid="task-list">
       {tasks.map((task, index) => {
         // Extract all task data using the utility function
-        const taskData = extractTaskListItemData(task, agentId, logger, isDeclineButtonEnabled);
+        const taskData = extractTaskListItemData(task, agentId, logger, isDeclineButtonEnabled, isBrowser);
 
         // Log task rendering
         logger.info('CC-Widgets: TaskList: rendering task list', {

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

@@ -10,7 +10,8 @@ export const extractTaskListItemData = (
   task: ITask,
   agentId: string,
   logger?: ILogger,
-  isDeclineButtonEnabled?: boolean
+  isDeclineButtonEnabled?: boolean,
+  isBrowser?: boolean
 ): TaskListItemData => {
   try {
     const accept = task.uiControls?.main?.accept ?? {isVisible: false, isEnabled: false};
@@ -22,7 +23,9 @@ export const extractTaskListItemData = (
 
     // Extract basic data from task
     const callAssociationDetails = task?.data?.interaction?.callAssociatedDetails;
-    const ani = callAssociationDetails?.ani;
+    const isOutdial = task?.data?.interaction?.outboundType === 'OUTDIAL';
+    const dnis = callAssociationDetails?.dnis || task?.data?.interaction?.callProcessingDetails?.dnis;
+    const ani = isOutdial ? dnis || callAssociationDetails?.ani : callAssociationDetails?.ani;
     const customerName = callAssociationDetails?.customerName;
     const virtualTeamName = callAssociationDetails?.virtualTeamName;
 
@@ -40,10 +43,11 @@ export const extractTaskListItemData = (
     const isSocial = mediaType === MEDIA_CHANNEL.SOCIAL;
 
     // Compute button text based on conditions
-    // Extension mode (EPDN): accept button is visible but disabled → show "Ringing..."
-    // WebRTC mode (Desktop): accept button is visible and enabled → show "Accept"
-    const acceptText =
-      accept.isVisible && isTaskIncoming ? (isTelephony && !accept.isEnabled ? 'Ringing...' : 'Accept') : undefined;
+    // Extension mode (any call): accept visible but disabled → show "Ringing..."
+    // Desktop/WebRTC outdial: accept visible but disabled → show "Accept" (auto-answer handles it)
+    // Desktop/WebRTC inbound: accept visible and enabled → show "Accept"
+    const showRinging = isTelephony && !accept.isEnabled && !(isBrowser && isOutdial);
+    const acceptText = accept.isVisible && isTaskIncoming ? (showRinging ? 'Ringing...' : 'Accept') : undefined;
 
     const declineText = decline.isVisible && isTaskIncoming ? 'Decline' : undefined;
 

packages/contact-center/cc-components/src/components/task/task.types.ts

@@ -159,6 +159,7 @@ export type IncomingTaskComponentProps = Pick<TaskProps, 'accept' | 'reject' | '
     acceptControl?: {isVisible: boolean; isEnabled: boolean};
     declineControl?: {isVisible: boolean; isEnabled: boolean};
     isDeclineButtonEnabled?: boolean;
+    isBrowser?: boolean;
   };
 
 export type TaskListComponentProps = Pick<
@@ -167,6 +168,7 @@ export type TaskListComponentProps = Pick<
 > &
   Partial<Pick<TaskProps, 'currentTask' | 'taskList'>> & {
     isDeclineButtonEnabled?: boolean;
+    isBrowser?: boolean;
   };
 
 /**

packages/contact-center/task/src/IncomingTask/index.tsx

@@ -9,13 +9,14 @@ import {IncomingTaskProps} from '../task.types';
 
 const IncomingTaskInternal: React.FunctionComponent<IncomingTaskProps> = observer(
   ({incomingTask, onAccepted, onRejected}) => {
-    const {logger, isDeclineButtonEnabled} = store;
+    const {logger, isDeclineButtonEnabled, deviceType} = store;
     const result = useIncomingTask({incomingTask, onAccepted, onRejected, logger});
 
     const props = {
       ...result,
       logger,
       isDeclineButtonEnabled,
+      isBrowser: deviceType === 'BROWSER',
     };
 
     return <IncomingTaskComponent {...props} />;

packages/contact-center/task/src/TaskList/index.tsx

@@ -9,7 +9,7 @@ import {TaskListProps} from '../task.types';
 
 const TaskListInternal: React.FunctionComponent<TaskListProps> = observer(
   ({onTaskAccepted, onTaskDeclined, onTaskSelected}) => {
-    const {cc, taskList, currentTask, logger, agentId, isDeclineButtonEnabled} = store;
+    const {cc, taskList, currentTask, logger, agentId, isDeclineButtonEnabled, deviceType} = store;
 
     const result = useTaskList({cc, logger, taskList, onTaskAccepted, onTaskDeclined, onTaskSelected});
     const props = {
@@ -18,6 +18,7 @@ const TaskListInternal: React.FunctionComponent<TaskListProps> = observer(
       logger,
       agentId,
       isDeclineButtonEnabled,
+      isBrowser: deviceType === 'BROWSER',
     };
 
     return <TaskListComponent {...props} />;

packages/contact-center/task/src/helper.ts

@@ -196,6 +196,7 @@ export const useIncomingTask = (props: UseTaskProps) => {
       store.setTaskCallback(TASK_EVENTS.TASK_END, taskRejectCallback, incomingTask?.data.interactionId);
       store.setTaskCallback(TASK_EVENTS.TASK_REJECT, taskRejectCallback, incomingTask?.data.interactionId);
       store.setTaskCallback(TASK_EVENTS.TASK_CONSULT_END, taskRejectCallback, incomingTask?.data.interactionId);
+      store.setTaskCallback(TASK_EVENTS.TASK_OUTDIAL_FAILED, taskRejectCallback, incomingTask?.data.interactionId);
 
       return () => {
         try {
@@ -208,6 +209,11 @@ export const useIncomingTask = (props: UseTaskProps) => {
           store.removeTaskCallback(TASK_EVENTS.TASK_END, taskRejectCallback, incomingTask?.data.interactionId);
           store.removeTaskCallback(TASK_EVENTS.TASK_REJECT, taskRejectCallback, incomingTask?.data.interactionId);
           store.removeTaskCallback(TASK_EVENTS.TASK_CONSULT_END, taskRejectCallback, incomingTask?.data.interactionId);
+          store.removeTaskCallback(
+            TASK_EVENTS.TASK_OUTDIAL_FAILED,
+            taskRejectCallback,
+            incomingTask?.data.interactionId
+          );
         } catch (error) {
           logger?.error(`CC-Widgets: Task: Error in useIncomingTask cleanup - ${error.message}`, {
             module: 'useIncomingTask',