Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bhabalan wants to merge 2 commits into
base: next
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6600981
fix(cc-components): show dialed number instead of entrypoint for outd…
bhabalan Mar 18, 2026
336ea0b
test(cc-components): add comprehensive outdial test coverage and fix …
bhabalan Mar 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion ...ages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,14 +69,21 @@ const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) =>
//@ts-expect-error To be fixed in SDK - https://jira-eng-sjc12.cisco.com/jira/browse/CAI-6762
const dn = currentTask?.data?.interaction?.callAssociatedDetails?.dn;

// Check if this is an outdial call - for outdial, show dialed number instead of entrypoint
const isOutdial = currentTask?.data?.interaction?.outboundType === 'OUTDIAL';

// Create unique IDs for tooltips
const customerNameTriggerId = `customer-name-trigger-${currentTask.data.interaction.interactionId}`;
const customerNameTooltipId = `customer-name-tooltip-${currentTask.data.interaction.interactionId}`;
const phoneNumberTriggerId = `phone-number-trigger-${currentTask.data.interaction.interactionId}`;
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
: isOutdial
? dn || ani || NO_CALLER_ID
: ani || NO_CALLER_ID;

const textComponent = (
<Text
Expand Down
7 changes: 6 additions & 1 deletion ...ges/contact-center/cc-components/src/components/task/IncomingTask/incoming-task.utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -46,6 +47,9 @@ export const extractIncomingTaskData = (
const isTelephony = mediaType === MEDIA_CHANNEL.TELEPHONY;
const isSocial = mediaType === MEDIA_CHANNEL.SOCIAL;

// Check if this is an outdial call
const isOutdial = incomingTask?.data?.interaction?.outboundType === 'OUTDIAL';

// Compute button text based on conditions
const acceptText = !incomingTask.data.wrapUpRequired
? isTelephony && !isBrowser
Expand All @@ -56,7 +60,8 @@ export const extractIncomingTaskData = (
const declineText = !incomingTask.data.wrapUpRequired && isTelephony && isBrowser ? 'Decline' : undefined;

// Compute title based on media type
const title = isSocial ? customerName : ani;
// For outdial calls, show the dialed number (dn) instead of the entrypoint (ani)
const title = isSocial ? customerName : isOutdial ? dn || ani : ani;

// Compute disable state for accept button when auto-answering
const isAutoAnswering = incomingTask.data.isAutoAnswering || false;
Expand Down
7 changes: 6 additions & 1 deletion packages/contact-center/cc-components/src/components/task/TaskList/task-list.utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -33,13 +34,17 @@ export const extractTaskListItemData = (
const isTelephony = mediaType === MEDIA_CHANNEL.TELEPHONY;
const isSocial = mediaType === MEDIA_CHANNEL.SOCIAL;

// Check if this is an outdial call
const isOutdial = task?.data?.interaction?.outboundType === 'OUTDIAL';

// Compute button text based on conditions
const acceptText = isTaskIncoming ? (isTelephony && !isBrowser ? 'Ringing...' : 'Accept') : undefined;

const declineText = isTaskIncoming && isTelephony && isBrowser ? 'Decline' : undefined;

// Compute title based on media type
const title = isSocial ? customerName : ani;
// For outdial calls, show the dialed number (dn) instead of the entrypoint (ani)
const title = isSocial ? customerName : isOutdial ? dn || ani : ani;

const isAutoAnswering = task.data.isAutoAnswering || false;

Expand Down
173 changes: 173 additions & 0 deletions ...s/contact-center/cc-components/tests/components/task/IncomingTask/incoming-task.utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,179 @@ describe('incoming-task.utils', () => {
});
});

describe('Outdial tasks', () => {
Copy link
Contributor Author

@bhabalan bhabalan Mar 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add more comprehensive tests

Copy link
Contributor Author

@bhabalan bhabalan Mar 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added 8 comprehensive test cases (4 for IncomingTask, 4 for TaskList) covering:

  • Empty dn string fallback to ani
  • CALLBACK outboundType correctly uses ani (not dn)
  • Social media outdial tasks use customerName
  • Non-browser outdial button states (Ringing..., disabled accept)

Also fixed 3 prettier lint errors in source files. All 646 tests passing.

it('should use dn (dialed number) as title for outdial telephony tasks', () => {
const originalMediaType = mockTask.data.interaction.mediaType;
const originalCallAssociatedDetails = mockTask.data.interaction.callAssociatedDetails;
const originalOutboundType = mockTask.data.interaction.outboundType;

mockTask.data.interaction.mediaType = MEDIA_CHANNEL.TELEPHONY;
mockTask.data.interaction.outboundType = 'OUTDIAL';
mockTask.data.interaction.callAssociatedDetails = {
ani: '+18005551234',
dn: '+14155559876',
customerName: 'Outdial Customer',
virtualTeamName: 'Outbound Team',
ronaTimeout: '30',
};

const result = extractIncomingTaskData(mockTask, true);

expect(result.title).toBe('+14155559876'); // Should show dn, not ani
expect(result.ani).toBe('+18005551234');
expect(result.isTelephony).toBe(true);

// Restore
mockTask.data.interaction.mediaType = originalMediaType;
mockTask.data.interaction.callAssociatedDetails = originalCallAssociatedDetails;
mockTask.data.interaction.outboundType = originalOutboundType;
});

it('should fall back to ani when dn is not available for outdial tasks', () => {
const originalMediaType = mockTask.data.interaction.mediaType;
const originalCallAssociatedDetails = mockTask.data.interaction.callAssociatedDetails;
const originalOutboundType = mockTask.data.interaction.outboundType;

mockTask.data.interaction.mediaType = MEDIA_CHANNEL.TELEPHONY;
mockTask.data.interaction.outboundType = 'OUTDIAL';
mockTask.data.interaction.callAssociatedDetails = {
ani: '+18005551234',
customerName: 'Outdial Customer',
virtualTeamName: 'Outbound Team',
};

const result = extractIncomingTaskData(mockTask, true);

expect(result.title).toBe('+18005551234'); // Falls back to ani

// Restore
mockTask.data.interaction.mediaType = originalMediaType;
mockTask.data.interaction.callAssociatedDetails = originalCallAssociatedDetails;
mockTask.data.interaction.outboundType = originalOutboundType;
});

it('should use ani as title for non-outdial telephony tasks', () => {
const originalCallAssociatedDetails = mockTask.data.interaction.callAssociatedDetails;

mockTask.data.interaction.callAssociatedDetails = {
ani: '+18005551234',
dn: '+14155559876',
customerName: 'Inbound Customer',
virtualTeamName: 'Support Team',
};

const result = extractIncomingTaskData(mockTask, true);

expect(result.title).toBe('+18005551234'); // Should show ani for inbound

// Restore
mockTask.data.interaction.callAssociatedDetails = originalCallAssociatedDetails;
});

it('should fall back to ani when dn is empty string for outdial tasks', () => {
const originalMediaType = mockTask.data.interaction.mediaType;
const originalCallAssociatedDetails = mockTask.data.interaction.callAssociatedDetails;
const originalOutboundType = mockTask.data.interaction.outboundType;

mockTask.data.interaction.mediaType = MEDIA_CHANNEL.TELEPHONY;
mockTask.data.interaction.outboundType = 'OUTDIAL';
mockTask.data.interaction.callAssociatedDetails = {
ani: '+18005551234',
dn: '',
customerName: 'Outdial Customer',
virtualTeamName: 'Outbound Team',
};

const result = extractIncomingTaskData(mockTask, true);

expect(result.title).toBe('+18005551234'); // Empty dn falls back to ani

// Restore
mockTask.data.interaction.mediaType = originalMediaType;
mockTask.data.interaction.callAssociatedDetails = originalCallAssociatedDetails;
mockTask.data.interaction.outboundType = originalOutboundType;
});

it('should use ani for CALLBACK outboundType (not OUTDIAL)', () => {
const originalMediaType = mockTask.data.interaction.mediaType;
const originalCallAssociatedDetails = mockTask.data.interaction.callAssociatedDetails;
const originalOutboundType = mockTask.data.interaction.outboundType;

mockTask.data.interaction.mediaType = MEDIA_CHANNEL.TELEPHONY;
mockTask.data.interaction.outboundType = 'CALLBACK';
mockTask.data.interaction.callAssociatedDetails = {
ani: '+18005551234',
dn: '+14155559876',
customerName: 'Callback Customer',
virtualTeamName: 'Callback Team',
};

const result = extractIncomingTaskData(mockTask, true);

expect(result.title).toBe('+18005551234'); // CALLBACK uses ani, not dn

// Restore
mockTask.data.interaction.mediaType = originalMediaType;
mockTask.data.interaction.callAssociatedDetails = originalCallAssociatedDetails;
mockTask.data.interaction.outboundType = originalOutboundType;
});

it('should still use customerName for social media outdial tasks', () => {
const originalMediaType = mockTask.data.interaction.mediaType;
const originalCallAssociatedDetails = mockTask.data.interaction.callAssociatedDetails;
const originalOutboundType = mockTask.data.interaction.outboundType;

mockTask.data.interaction.mediaType = MEDIA_CHANNEL.SOCIAL;
mockTask.data.interaction.outboundType = 'OUTDIAL';
mockTask.data.interaction.callAssociatedDetails = {
ani: 'social-ani',
dn: 'social-dn',
customerName: 'Social Outdial Customer',
virtualTeamName: 'Social Team',
};

const result = extractIncomingTaskData(mockTask, true);

expect(result.title).toBe('Social Outdial Customer'); // Social always uses customerName

// Restore
mockTask.data.interaction.mediaType = originalMediaType;
mockTask.data.interaction.callAssociatedDetails = originalCallAssociatedDetails;
mockTask.data.interaction.outboundType = originalOutboundType;
});

it('should extract correct button states for outdial telephony on non-browser', () => {
const originalMediaType = mockTask.data.interaction.mediaType;
const originalCallAssociatedDetails = mockTask.data.interaction.callAssociatedDetails;
const originalOutboundType = mockTask.data.interaction.outboundType;
const originalWrapUpRequired = mockTask.data.wrapUpRequired;

mockTask.data.interaction.mediaType = MEDIA_CHANNEL.TELEPHONY;
mockTask.data.interaction.outboundType = 'OUTDIAL';
mockTask.data.wrapUpRequired = false;
mockTask.data.interaction.callAssociatedDetails = {
ani: '+18005551234',
dn: '+14155559876',
customerName: 'Outdial Customer',
virtualTeamName: 'Outbound Team',
ronaTimeout: '30',
};

const result = extractIncomingTaskData(mockTask, false);

expect(result.title).toBe('+14155559876');
expect(result.acceptText).toBe('Ringing...');
expect(result.declineText).toBeUndefined();
expect(result.disableAccept).toBe(true);

// Restore
mockTask.data.interaction.mediaType = originalMediaType;
mockTask.data.interaction.callAssociatedDetails = originalCallAssociatedDetails;
mockTask.data.interaction.outboundType = originalOutboundType;
mockTask.data.wrapUpRequired = originalWrapUpRequired;
});
});

describe('Edge cases', () => {
it('should handle missing call association details', () => {
const originalCallAssociatedDetails = mockTask.data.interaction.callAssociatedDetails;
Expand Down
Loading
Loading