Skip to content

Commit a477740

Browse files
bhabalanbhabalan
authored
fix(cc-components): show dialed number instead of entrypoint for outdial calls (#657)
1 parent 571199d commit a477740

8 files changed

Lines changed: 477 additions & 20 deletions

File tree

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

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {Brandvisual, Icon, Tooltip, Button} from '@momentum-design/components/di
55
import './call-control-cad.styles.scss';
66
import TaskTimer from '../TaskTimer/index';
77
import CallControlConsultComponent from '../CallControl/CallControlCustom/call-control-consult';
8-
import {MEDIA_CHANNEL as MediaChannelType, CallControlComponentProps} from '../task.types';
8+
import {MEDIA_CHANNEL as MediaChannelType, CallControlComponentProps, getCallerIdentifier} from '../task.types';
99

1010
import {getMediaTypeInfo} from '../../../utils';
1111
import {
@@ -75,8 +75,14 @@ const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) =>
7575
const phoneNumberTriggerId = `phone-number-trigger-${currentTask.data.interaction.interactionId}`;
7676
const phoneNumberTooltipId = `phone-number-tooltip-${currentTask.data.interaction.interactionId}`;
7777

78+
// For telephony calls, ani is the originating number and dn is the destination.
79+
// Inbound: ani = caller's number, dn = entry point dialed by caller
80+
// Outdial: ani = agent's originating number (entry point), dn = customer's dialed number
81+
const outboundType = currentTask?.data?.interaction?.outboundType;
82+
const callerNumber = getCallerIdentifier(ani, dn, outboundType);
83+
7884
const renderCustomerName = () => {
79-
const customerText = isSocial ? customerName || NO_CUSTOMER_NAME : ani || NO_CALLER_ID;
85+
const customerText = isSocial ? customerName || NO_CUSTOMER_NAME : callerNumber || NO_CALLER_ID;
8086

8187
const textComponent = (
8288
<Text
@@ -113,7 +119,11 @@ const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) =>
113119
};
114120

115121
const renderPhoneNumber = () => {
116-
const phoneText = isSocial ? customerName || NO_CUSTOMER_NAME : dn || NO_PHONE_NUMBER;
122+
const phoneText = isSocial
123+
? customerName || NO_CUSTOMER_NAME
124+
: isTelephony
125+
? ani || NO_PHONE_NUMBER
126+
: ani || NO_PHONE_NUMBER;
117127
const labelText = isSocial ? CUSTOMER_NAME : PHONE_NUMBER;
118128

119129
const textComponent = (

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {MEDIA_CHANNEL} from '../task.types';
1+
import {MEDIA_CHANNEL, getCallerIdentifier} from '../task.types';
22
import {ITask} from '@webex/cc-store';
33

44
export interface IncomingTaskData {
@@ -35,6 +35,7 @@ export const extractIncomingTaskData = (
3535
//@ts-expect-error To be fixed in SDK - https://jira-eng-sjc12.cisco.com/jira/browse/CAI-6762
3636
const callAssociationDetails = incomingTask?.data?.interaction?.callAssociatedDetails;
3737
const ani = callAssociationDetails?.ani;
38+
const dn = callAssociationDetails?.dn;
3839
const customerName = callAssociationDetails?.customerName;
3940
const virtualTeamName = callAssociationDetails?.virtualTeamName;
4041
const ronaTimeout = callAssociationDetails?.ronaTimeout ? Number(callAssociationDetails?.ronaTimeout) : null;
@@ -56,7 +57,8 @@ export const extractIncomingTaskData = (
5657
const declineText = !incomingTask.data.wrapUpRequired && isTelephony && isBrowser ? 'Decline' : undefined;
5758

5859
// Compute title based on media type
59-
const title = isSocial ? customerName : ani;
60+
const outboundType = incomingTask?.data?.interaction?.outboundType;
61+
const title = isSocial ? customerName : getCallerIdentifier(ani, dn, outboundType);
6062

6163
// Compute disable state for accept button when auto-answering
6264
const isAutoAnswering = incomingTask.data.isAutoAnswering || false;

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {MEDIA_CHANNEL, TaskListItemData} from '../task.types';
1+
import {MEDIA_CHANNEL, TaskListItemData, getCallerIdentifier} from '../task.types';
22
import store, {isIncomingTask, ILogger, ITask} from '@webex/cc-store';
33
/**
44
* Extracts and processes data from a task for rendering in the task list
@@ -17,6 +17,7 @@ export const extractTaskListItemData = (
1717
//@ts-expect-error To be fixed in SDK - https://jira-eng-sjc12.cisco.com/jira/browse/CAI-6762
1818
const callAssociationDetails = task?.data?.interaction?.callAssociatedDetails;
1919
const ani = callAssociationDetails?.ani;
20+
const dn = callAssociationDetails?.dn;
2021
const customerName = callAssociationDetails?.customerName;
2122
const virtualTeamName = callAssociationDetails?.virtualTeamName;
2223

@@ -39,7 +40,8 @@ export const extractTaskListItemData = (
3940
const declineText = isTaskIncoming && isTelephony && isBrowser ? 'Decline' : undefined;
4041

4142
// Compute title based on media type
42-
const title = isSocial ? customerName : ani;
43+
const outboundType = task?.data?.interaction?.outboundType;
44+
const title = isSocial ? customerName : getCallerIdentifier(ani, dn, outboundType);
4345

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

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -771,6 +771,19 @@ export interface TaskListItemData {
771771
displayState: string;
772772
}
773773

774+
export enum OUTBOUND_TYPE {
775+
OUTDIAL = 'OUTDIAL',
776+
CALLBACK = 'CALLBACK',
777+
}
778+
779+
/**
780+
* Returns the appropriate caller identifier based on outbound type.
781+
* For outdial calls, the customer's number is in `dn`; for all others it's in `ani`.
782+
*/
783+
export const getCallerIdentifier = (ani: string, dn: string, outboundType?: string): string => {
784+
return outboundType === OUTBOUND_TYPE.OUTDIAL ? dn || ani : ani;
785+
};
786+
774787
export enum TaskState {
775788
NEW = 'new',
776789
ACTIVE = 'active',

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,7 @@ exports[`CallControlCADComponent Snapshots should handle edge cases and control
198198
</strong>
199199
200200
<span>
201-
No Phone Number
201+
555-123-4567
202202
</span>
203203
</mdc-text>
204204
</div>
@@ -376,7 +376,7 @@ exports[`CallControlCADComponent Snapshots should handle edge cases and control
376376
</strong>
377377
378378
<span>
379-
No Phone Number
379+
555-123-4567
380380
</span>
381381
</mdc-text>
382382
</div>
@@ -908,7 +908,7 @@ exports[`CallControlCADComponent Snapshots should render basic call states and m
908908
</strong>
909909
910910
<span>
911-
No Phone Number
911+
chat-customer@example.com
912912
</span>
913913
</mdc-text>
914914
<mdc-tooltip
@@ -918,7 +918,7 @@ exports[`CallControlCADComponent Snapshots should render basic call states and m
918918
<mdc-text
919919
class="md-text-wrapper"
920920
>
921-
No Phone Number
921+
chat-customer@example.com
922922
</mdc-text>
923923
</mdc-tooltip>
924924
</div>
@@ -1178,7 +1178,7 @@ exports[`CallControlCADComponent Snapshots should render basic call states and m
11781178
</strong>
11791179
11801180
<span>
1181-
No Phone Number
1181+
555-123-4567
11821182
</span>
11831183
</mdc-text>
11841184
</div>
@@ -1438,7 +1438,7 @@ exports[`CallControlCADComponent Snapshots should render basic call states and m
14381438
</strong>
14391439
14401440
<span>
1441-
No Phone Number
1441+
555-123-4567
14421442
</span>
14431443
</mdc-text>
14441444
</div>
@@ -1925,7 +1925,7 @@ exports[`CallControlCADComponent Snapshots should render consultation and wrapup
19251925
</strong>
19261926
19271927
<span>
1928-
No Phone Number
1928+
555-123-4567
19291929
</span>
19301930
</mdc-text>
19311931
</div>
@@ -2219,7 +2219,7 @@ exports[`CallControlCADComponent Snapshots should render consultation and wrapup
22192219
</strong>
22202220
22212221
<span>
2222-
No Phone Number
2222+
555-123-4567
22232223
</span>
22242224
</mdc-text>
22252225
</div>
@@ -2480,7 +2480,7 @@ exports[`CallControlCADComponent Snapshots should render consultation and wrapup
24802480
</strong>
24812481
24822482
<span>
2483-
No Phone Number
2483+
555-123-4567
24842484
</span>
24852485
</mdc-text>
24862486
</div>
@@ -2741,7 +2741,7 @@ exports[`CallControlCADComponent Snapshots should render consultation and wrapup
27412741
</strong>
27422742
27432743
<span>
2744-
No Phone Number
2744+
555-123-4567
27452745
</span>
27462746
</mdc-text>
27472747
</div>

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

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import {render} from '@testing-library/react';
33
import CallControlCADComponent from '../../../../src/components/task/CallControlCAD/call-control-cad';
4-
import {CallControlComponentProps, TARGET_TYPE} from '../../../../src/components/task/task.types';
4+
import {CallControlComponentProps, TARGET_TYPE, OUTBOUND_TYPE} from '../../../../src/components/task/task.types';
55
import {mockTask} from '@webex/test-fixtures';
66
import {BuddyDetails} from '@webex/cc-store';
77
import '@testing-library/jest-dom';
@@ -55,6 +55,7 @@ describe('CallControlCADComponent', () => {
5555
callAssociatedDetails: {
5656
customerName: 'John Doe',
5757
ani: '555-123-4567',
58+
dn: '555-999-0000',
5859
virtualTeamName: 'Support Team',
5960
ronaTimeout: '30',
6061
},
@@ -265,6 +266,40 @@ describe('CallControlCADComponent', () => {
265266
chatConsultScreen.unmount();
266267
});
267268

269+
it('should display correct phone number for inbound vs outdial calls', () => {
270+
// Inbound call: caller ID = ani, phone number = ani
271+
const inboundScreen = render(<CallControlCADComponent {...defaultProps} />);
272+
// ani (555-123-4567) should appear as both caller ID and phone number
273+
const aniElements = inboundScreen.getAllByText('555-123-4567');
274+
expect(aniElements.length).toBe(2); // caller ID + phone number
275+
// dn (555-999-0000) should NOT appear anywhere
276+
expect(inboundScreen.queryByText('555-999-0000')).not.toBeInTheDocument();
277+
inboundScreen.unmount();
278+
279+
// Outdial call: caller ID = dn, phone number = ani
280+
const outdialProps = {
281+
...defaultProps,
282+
currentTask: {
283+
...defaultProps.currentTask,
284+
data: {
285+
...defaultProps.currentTask.data,
286+
interaction: {
287+
...defaultProps.currentTask.data.interaction,
288+
outboundType: OUTBOUND_TYPE.OUTDIAL,
289+
},
290+
},
291+
},
292+
};
293+
const outdialScreen = render(<CallControlCADComponent {...outdialProps} />);
294+
// Caller ID should show dn (555-999-0000)
295+
expect(outdialScreen.getByText('555-999-0000')).toBeInTheDocument();
296+
// Phone number should show ani (555-123-4567)
297+
const phoneLabel = outdialScreen.getByText('Phone Number:');
298+
const phoneValue = phoneLabel.nextElementSibling;
299+
expect(phoneValue?.textContent).toBe('555-123-4567');
300+
outdialScreen.unmount();
301+
});
302+
268303
it('should handle wrapup mode and edge cases', () => {
269304
// Test wrapup mode hides elements
270305
const wrapupProps = {

0 commit comments

Comments
 (0)