fix(cc-components): show dialed number instead of entrypoint for outdial calls

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

@@ -5,7 +5,7 @@ import {Brandvisual, Icon, Tooltip, Button} from '@momentum-design/components/di
 import './call-control-cad.styles.scss';
 import TaskTimer from '../TaskTimer/index';
 import CallControlConsultComponent from '../CallControl/CallControlCustom/call-control-consult';
-import {MEDIA_CHANNEL as MediaChannelType, CallControlComponentProps} from '../task.types';
+import {MEDIA_CHANNEL as MediaChannelType, CallControlComponentProps, getCallerIdentifier} from '../task.types';
 
 import {getMediaTypeInfo} from '../../../utils';
 import {
@@ -75,8 +75,14 @@ const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) =>
   const phoneNumberTriggerId = `phone-number-trigger-${currentTask.data.interaction.interactionId}`;
   const phoneNumberTooltipId = `phone-number-tooltip-${currentTask.data.interaction.interactionId}`;
 
+  // For telephony calls, ani is the originating number and dn is the destination.
+  // Inbound: ani = caller's number, dn = entry point dialed by caller
+  // Outdial: ani = agent's originating number (entry point), dn = customer's dialed number
+  const outboundType = currentTask?.data?.interaction?.outboundType;
+  const callerNumber = getCallerIdentifier(ani, dn, outboundType);
+
   const renderCustomerName = () => {
-    const customerText = isSocial ? customerName || NO_CUSTOMER_NAME : ani || NO_CALLER_ID;
+    const customerText = isSocial ? customerName || NO_CUSTOMER_NAME : callerNumber || NO_CALLER_ID;
 
     const textComponent = (
       <Text
@@ -113,7 +119,11 @@ const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) =>
   };
 
   const renderPhoneNumber = () => {
-    const phoneText = isSocial ? customerName || NO_CUSTOMER_NAME : dn || NO_PHONE_NUMBER;
+    const phoneText = isSocial
+      ? customerName || NO_CUSTOMER_NAME
+      : isTelephony
+        ? ani || NO_PHONE_NUMBER
+        : NO_PHONE_NUMBER;
     const labelText = isSocial ? CUSTOMER_NAME : PHONE_NUMBER;
 
     const textComponent = (

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

@@ -1,4 +1,4 @@
-import {MEDIA_CHANNEL} from '../task.types';
+import {MEDIA_CHANNEL, getCallerIdentifier} from '../task.types';
 import {ITask} from '@webex/cc-store';
 
 export interface IncomingTaskData {
@@ -35,6 +35,7 @@ export const extractIncomingTaskData = (
     //@ts-expect-error  To be fixed in SDK - https://jira-eng-sjc12.cisco.com/jira/browse/CAI-6762
     const callAssociationDetails = incomingTask?.data?.interaction?.callAssociatedDetails;
     const ani = callAssociationDetails?.ani;
+    const dn = callAssociationDetails?.dn;
     const customerName = callAssociationDetails?.customerName;
     const virtualTeamName = callAssociationDetails?.virtualTeamName;
     const ronaTimeout = callAssociationDetails?.ronaTimeout ? Number(callAssociationDetails?.ronaTimeout) : null;
@@ -56,7 +57,8 @@ export const extractIncomingTaskData = (
     const declineText = !incomingTask.data.wrapUpRequired && isTelephony && isBrowser ? 'Decline' : undefined;
 
     // Compute title based on media type
-    const title = isSocial ? customerName : ani;
+    const outboundType = incomingTask?.data?.interaction?.outboundType;
+    const title = isSocial ? customerName : getCallerIdentifier(ani, dn, outboundType);
 
     // Compute disable state for accept button when auto-answering
     const isAutoAnswering = incomingTask.data.isAutoAnswering || false;

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

@@ -1,4 +1,4 @@
-import {MEDIA_CHANNEL, TaskListItemData} from '../task.types';
+import {MEDIA_CHANNEL, TaskListItemData, getCallerIdentifier} from '../task.types';
 import store, {isIncomingTask, ILogger, ITask} from '@webex/cc-store';
 /**
  * Extracts and processes data from a task for rendering in the task list
@@ -17,6 +17,7 @@ export const extractTaskListItemData = (
     //@ts-expect-error  To be fixed in SDK - https://jira-eng-sjc12.cisco.com/jira/browse/CAI-6762
     const callAssociationDetails = task?.data?.interaction?.callAssociatedDetails;
     const ani = callAssociationDetails?.ani;
+    const dn = callAssociationDetails?.dn;
     const customerName = callAssociationDetails?.customerName;
     const virtualTeamName = callAssociationDetails?.virtualTeamName;
 
@@ -39,7 +40,8 @@ export const extractTaskListItemData = (
     const declineText = isTaskIncoming && isTelephony && isBrowser ? 'Decline' : undefined;
 
     // Compute title based on media type
-    const title = isSocial ? customerName : ani;
+    const outboundType = task?.data?.interaction?.outboundType;
+    const title = isSocial ? customerName : getCallerIdentifier(ani, dn, outboundType);
 
     const isAutoAnswering = task.data.isAutoAnswering || false;
 

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

@@ -771,6 +771,19 @@ export interface TaskListItemData {
   displayState: string;
 }
 
+export enum OUTBOUND_TYPE {
+  OUTDIAL = 'OUTDIAL',
+  CALLBACK = 'CALLBACK',
+}
+
+/**
+ * Returns the appropriate caller identifier based on outbound type.
+ * For outdial calls, the customer's number is in `dn`; for all others it's in `ani`.
+ */
+export const getCallerIdentifier = (ani: string, dn: string, outboundType?: string): string => {
+  return outboundType === OUTBOUND_TYPE.OUTDIAL ? dn || ani : ani;
+};
+
 export enum TaskState {
   NEW = 'new',
   ACTIVE = 'active',

packages/contact-center/cc-components/tests/components/task/CallControlCAD/__snapshots__/call-control-cad.snapshot.tsx.snap

@@ -198,7 +198,7 @@ exports[`CallControlCADComponent Snapshots should handle edge cases and control
         </strong>
 
         <span>
-          No Phone Number
+          555-123-4567
         </span>
       </mdc-text>
     </div>
@@ -376,7 +376,7 @@ exports[`CallControlCADComponent Snapshots should handle edge cases and control
       </strong>
 
       <span>
-        No Phone Number
+        555-123-4567
       </span>
     </mdc-text>
   </div>
@@ -908,7 +908,7 @@ exports[`CallControlCADComponent Snapshots should render basic call states and m
       </strong>
 
       <span>
-        No Phone Number
+        chat-customer@example.com
       </span>
     </mdc-text>
     <mdc-tooltip
@@ -918,7 +918,7 @@ exports[`CallControlCADComponent Snapshots should render basic call states and m
       <mdc-text
         class="md-text-wrapper"
       >
-        No Phone Number
+        chat-customer@example.com
       </mdc-text>
     </mdc-tooltip>
   </div>
@@ -1178,7 +1178,7 @@ exports[`CallControlCADComponent Snapshots should render basic call states and m
       </strong>
 
       <span>
-        No Phone Number
+        555-123-4567
       </span>
     </mdc-text>
   </div>
@@ -1438,7 +1438,7 @@ exports[`CallControlCADComponent Snapshots should render basic call states and m
       </strong>
 
       <span>
-        No Phone Number
+        555-123-4567
       </span>
     </mdc-text>
   </div>
@@ -1925,7 +1925,7 @@ exports[`CallControlCADComponent Snapshots should render consultation and wrapup
         </strong>
 
         <span>
-          No Phone Number
+          555-123-4567
         </span>
       </mdc-text>
     </div>
@@ -2219,7 +2219,7 @@ exports[`CallControlCADComponent Snapshots should render consultation and wrapup
       </strong>
 
       <span>
-        No Phone Number
+        555-123-4567
       </span>
     </mdc-text>
   </div>
@@ -2480,7 +2480,7 @@ exports[`CallControlCADComponent Snapshots should render consultation and wrapup
         </strong>
 
         <span>
-          No Phone Number
+          555-123-4567
         </span>
       </mdc-text>
     </div>
@@ -2741,7 +2741,7 @@ exports[`CallControlCADComponent Snapshots should render consultation and wrapup
       </strong>
 
       <span>
-        No Phone Number
+        555-123-4567
       </span>
     </mdc-text>
   </div>

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import {render} from '@testing-library/react';
 import CallControlCADComponent from '../../../../src/components/task/CallControlCAD/call-control-cad';
-import {CallControlComponentProps, TARGET_TYPE} from '../../../../src/components/task/task.types';
+import {CallControlComponentProps, TARGET_TYPE, OUTBOUND_TYPE} from '../../../../src/components/task/task.types';
 import {mockTask} from '@webex/test-fixtures';
 import {BuddyDetails} from '@webex/cc-store';
 import '@testing-library/jest-dom';
@@ -55,6 +55,7 @@ describe('CallControlCADComponent', () => {
         callAssociatedDetails: {
           customerName: 'John Doe',
           ani: '555-123-4567',
+          dn: '555-999-0000',
           virtualTeamName: 'Support Team',
           ronaTimeout: '30',
         },
@@ -265,6 +266,40 @@ describe('CallControlCADComponent', () => {
     chatConsultScreen.unmount();
   });
 
+  it('should display correct phone number for inbound vs outdial calls', () => {
+    // Inbound call: caller ID = ani, phone number = ani
+    const inboundScreen = render(<CallControlCADComponent {...defaultProps} />);
+    // ani (555-123-4567) should appear as both caller ID and phone number
+    const aniElements = inboundScreen.getAllByText('555-123-4567');
+    expect(aniElements.length).toBe(2); // caller ID + phone number
+    // dn (555-999-0000) should NOT appear anywhere
+    expect(inboundScreen.queryByText('555-999-0000')).not.toBeInTheDocument();
+    inboundScreen.unmount();
+
+    // Outdial call: caller ID = dn, phone number = ani
+    const outdialProps = {
+      ...defaultProps,
+      currentTask: {
+        ...defaultProps.currentTask,
+        data: {
+          ...defaultProps.currentTask.data,
+          interaction: {
+            ...defaultProps.currentTask.data.interaction,
+            outboundType: OUTBOUND_TYPE.OUTDIAL,
+          },
+        },
+      },
+    };
+    const outdialScreen = render(<CallControlCADComponent {...outdialProps} />);
+    // Caller ID should show dn (555-999-0000)
+    expect(outdialScreen.getByText('555-999-0000')).toBeInTheDocument();
+    // Phone number should show ani (555-123-4567)
+    const phoneLabel = outdialScreen.getByText('Phone Number:');
+    const phoneValue = phoneLabel.nextElementSibling;
+    expect(phoneValue?.textContent).toBe('555-123-4567');
+    outdialScreen.unmount();
+  });
+
   it('should handle wrapup mode and edge cases', () => {
     // Test wrapup mode hides elements
     const wrapupProps = {