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 4 commits into
base: next
Choose a base branch
from
+439 −14
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
4 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
5baf501
fix(cc-components): update CallControlCAD to correctly display caller…
bhabalan Mar 27, 2026
de91094
Merge branch 'next' into CAI-7359
bhabalan Mar 27, 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
12 changes: 10 additions & 2 deletions ...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,22 @@ 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}`;

// For telephony calls, ani is the phone number and dn is the entry point/DNIS.
// Inbound: ani = caller's number, dn = entry point dialed by caller
// Outdial: ani = customer's number dialed by agent, dn = agent's entry point
const callerNumber = isOutdial ? dn || ani : ani;

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
Expand Down Expand Up @@ -113,7 +121,7 @@ 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 : ani || NO_PHONE_NUMBER;
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector bot Mar 27, 2026

Choose a reason for hiding this comment

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

P2 Badge Limit phone-number override to telephony interactions

The new phoneText expression now uses ani for every non-social interaction, not just telephony. In CallControlCAD, chat/email/SMS tasks are non-social, so their ANI (often an email/handle or channel identifier) is now shown under the literal Phone Number label; this is visible in the updated chat-media-type snapshot where chat-customer@example.com replaced No Phone Number. That broadens a telephony-specific fix into digital channels and can present incorrect/misleading data to agents.

Useful? React with 👍 / 👎.

const labelText = isSocial ? CUSTOMER_NAME : PHONE_NUMBER;

const textComponent = (
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
20 changes: 10 additions & 10 deletions ...nts/tests/components/task/CallControlCAD/__snapshots__/call-control-cad.snapshot.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -1925,7 +1925,7 @@ exports[`CallControlCADComponent Snapshots should render consultation and wrapup
</strong>

<span>
No Phone Number
555-123-4567
</span>
</mdc-text>
</div>
Expand Down Expand Up @@ -2219,7 +2219,7 @@ exports[`CallControlCADComponent Snapshots should render consultation and wrapup
</strong>

<span>
No Phone Number
555-123-4567
</span>
</mdc-text>
</div>
Expand Down Expand Up @@ -2480,7 +2480,7 @@ exports[`CallControlCADComponent Snapshots should render consultation and wrapup
</strong>

<span>
No Phone Number
555-123-4567
</span>
</mdc-text>
</div>
Expand Down Expand Up @@ -2741,7 +2741,7 @@ exports[`CallControlCADComponent Snapshots should render consultation and wrapup
</strong>

<span>
No Phone Number
555-123-4567
</span>
</mdc-text>
</div>
Expand Down
35 changes: 35 additions & 0 deletions ...es/contact-center/cc-components/tests/components/task/CallControlCAD/call-control-cad.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ describe('CallControlCADComponent', () => {
callAssociatedDetails: {
customerName: 'John Doe',
ani: '555-123-4567',
dn: '555-999-0000',
virtualTeamName: 'Support Team',
ronaTimeout: '30',
},
Expand Down Expand Up @@ -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: '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 = {
Expand Down
Loading
Loading