Skip to content

Commit af70bee

Browse files
akulakumakulakum
authored
fix(incoming-task): fix-incoming-task-overflow-issue (#482)
1 parent 7ebd32f commit af70bee

4 files changed

Lines changed: 324 additions & 16 deletions

File tree

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

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,4 +116,99 @@
116116
.media-icon.chat {
117117
color: var(--mds-color-theme-indicator-secure);
118118
}
119+
}
120+
.call-control-task-tooltip::part(popover-content) {
121+
white-space: normal;
122+
word-break: break-all;
123+
}
124+
125+
.call-control-task-tooltip {
126+
min-width: 30%;
127+
width: auto;
128+
text-align: center;
129+
}
130+
131+
.digital-customer-name::part(text),
132+
.voice-customer-name::part(text),
133+
.digital-phone-number::part(text),
134+
.voice-phone-number::part(text) {
135+
white-space: nowrap;
136+
overflow: hidden;
137+
text-overflow: ellipsis;
138+
margin: 0;
139+
}
140+
141+
.digital-customer-name {
142+
width: auto;
143+
}
144+
145+
.digital-phone-number {
146+
width: auto;
147+
}
148+
149+
@media (min-width: 64.0625rem) and (max-width: 75rem) {
150+
.digital-customer-name {
151+
width: 50rem;
152+
max-width: 50rem;
153+
}
154+
155+
.digital-phone-number {
156+
width: 16rem;
157+
max-width: 16rem;
158+
}
159+
}
160+
161+
@media (min-width: 48.0625rem) and (max-width: 64rem) {
162+
.digital-customer-name {
163+
width: 31.25rem;
164+
max-width: 31.25rem;
165+
}
166+
167+
.digital-phone-number {
168+
width: 15rem;
169+
max-width: 15rem;
170+
}
171+
.call-control-task-tooltip {
172+
width: 50%;
173+
text-align: center;
174+
}
175+
}
176+
177+
@media (min-width: 30.0625rem) and (max-width: 48rem) {
178+
.digital-customer-name {
179+
width: 15.625rem;
180+
max-width: 15.625rem;
181+
}
182+
183+
.digital-phone-number {
184+
width: 13rem;
185+
max-width: 13rem;
186+
}
187+
.call-control-task-tooltip {
188+
width: 50%;
189+
text-align: center;
190+
}
191+
}
192+
193+
@media (min-width: 20rem) and (max-width: 30.0625rem) {
194+
.digital-customer-name {
195+
width: 9.375rem;
196+
max-width: 9.375rem;
197+
}
198+
199+
.digital-phone-number {
200+
width: 12rem;
201+
max-width: 12rem;
202+
}
203+
.call-control-task-tooltip {
204+
width: 50%;
205+
text-align: center;
206+
}
207+
}
208+
209+
@media (min-width: 15.625rem) and (max-width: 20rem){
210+
.call-control-task-tooltip {
211+
width: 50%;
212+
text-align: center;
213+
}
119214
}

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

Lines changed: 84 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import CallControlComponent from '../CallControl/call-control';
33
import {Text} from '@momentum-ui/react-collaboration';
4-
import {Brandvisual, Icon} from '@momentum-design/components/dist/react';
4+
import {Brandvisual, Icon, Tooltip} from '@momentum-design/components/dist/react';
55
import './call-control-cad.styles.scss';
66
import TaskTimer from '../TaskTimer/index';
77
import CallControlConsultComponent from '../CallControl/CallControlCustom/call-control-consult';
@@ -60,6 +60,87 @@ const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) =>
6060
const customerName = currentTask?.data?.interaction?.callAssociatedDetails?.customerName;
6161
const ani = currentTask?.data?.interaction?.callAssociatedDetails?.ani;
6262

63+
// Create unique IDs for tooltips
64+
const customerNameTriggerId = `customer-name-trigger-${currentTask.data.interaction.interactionId}`;
65+
const customerNameTooltipId = `customer-name-tooltip-${currentTask.data.interaction.interactionId}`;
66+
const phoneNumberTriggerId = `phone-number-trigger-${currentTask.data.interaction.interactionId}`;
67+
const phoneNumberTooltipId = `phone-number-tooltip-${currentTask.data.interaction.interactionId}`;
68+
69+
const renderCustomerName = () => {
70+
const customerText = isSocial ? customerName || NO_CUSTOMER_NAME : ani || NO_CALLER_ID;
71+
72+
const textComponent = (
73+
<Text
74+
className={!isTelephony ? 'digital-customer-name' : 'voice-customer-name'}
75+
type="body-large-bold"
76+
tagName={'p'}
77+
id={!isTelephony ? customerNameTriggerId : undefined}
78+
>
79+
{customerText}
80+
</Text>
81+
);
82+
83+
if (!isTelephony) {
84+
return (
85+
<>
86+
{textComponent}
87+
<Tooltip
88+
color="contrast"
89+
delay="0,0"
90+
id={customerNameTooltipId}
91+
placement="top-start"
92+
offset={4}
93+
tooltip-type="description"
94+
triggerID={customerNameTriggerId}
95+
className="call-control-task-tooltip"
96+
>
97+
<Text tagName="small">{customerText}</Text>
98+
</Tooltip>
99+
</>
100+
);
101+
}
102+
103+
return textComponent;
104+
};
105+
106+
const renderPhoneNumber = () => {
107+
const phoneText = isSocial ? customerName || NO_CUSTOMER_NAME : ani || NO_PHONE_NUMBER;
108+
const labelText = isSocial ? CUSTOMER_NAME : PHONE_NUMBER;
109+
110+
const textComponent = (
111+
<Text
112+
className={!isTelephony ? 'digital-phone-number' : 'voice-phone-number'}
113+
type="body-secondary"
114+
tagName={'p'}
115+
id={!isTelephony ? phoneNumberTriggerId : undefined}
116+
>
117+
<strong>{labelText}</strong> <span>{phoneText}</span>
118+
</Text>
119+
);
120+
121+
if (!isTelephony) {
122+
return (
123+
<>
124+
{textComponent}
125+
<Tooltip
126+
color="contrast"
127+
delay="0,0"
128+
id={phoneNumberTooltipId}
129+
placement="top-start"
130+
offset={4}
131+
tooltip-type="description"
132+
triggerID={phoneNumberTriggerId}
133+
className="call-control-task-tooltip"
134+
>
135+
<Text tagName="small">{phoneText}</Text>
136+
</Tooltip>
137+
</>
138+
);
139+
}
140+
141+
return textComponent;
142+
};
143+
63144
if (!currentTask) return null;
64145

65146
return (
@@ -76,9 +157,7 @@ const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) =>
76157
</div>
77158

78159
<div className="customer-info">
79-
<Text className="customer-id" type="body-large-bold" tagName={'small'}>
80-
{isSocial ? customerName || NO_CUSTOMER_NAME : ani || NO_CALLER_ID}
81-
</Text>
160+
{renderCustomerName()}
82161
<div className="call-details">
83162
<Text className="call-timer" type="body-secondary" tagName={'small'}>
84163
{currentMediaType.labelName} - <TaskTimer startTimeStamp={startTimestamp} />
@@ -110,10 +189,7 @@ const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) =>
110189
<strong>{QUEUE}</strong>{' '}
111190
<span>{currentTask?.data?.interaction?.callAssociatedDetails?.virtualTeamName || NO_TEAM_NAME}</span>
112191
</Text>
113-
<Text className="phone-number" type="body-secondary" tagName={'small'}>
114-
<strong>{isSocial ? CUSTOMER_NAME : PHONE_NUMBER}</strong>{' '}
115-
<span> {isSocial ? customerName || NO_CUSTOMER_NAME : ani || NO_PHONE_NUMBER}</span>
116-
</Text>
192+
{renderPhoneNumber()}
117193
<Text className="rona" type="body-secondary" tagName={'small'}>
118194
<strong>{RONA}</strong>{' '}
119195
<span>{currentTask?.data?.interaction?.callAssociatedDetails?.ronaTimeout || NO_RONA}</span>

‎packages/contact-center/cc-components/src/components/task/Task/index.tsx‎

Lines changed: 53 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import {ButtonPill, ListItemBase, ListItemBaseSection, Text} from '@momentum-ui/react-collaboration';
3-
import {Avatar, Brandvisual} from '@momentum-design/components/dist/react';
3+
import {Avatar, Brandvisual, Tooltip} from '@momentum-design/components/dist/react';
44
import {PressEvent} from '@react-types/shared';
55
import TaskTimer from '../TaskTimer';
66
import {getMediaTypeInfo} from '../../../utils';
@@ -50,6 +50,57 @@ const Task: React.FC<TaskProps> = ({
5050
return str.replace(/^\s*(\w)/, (match, firstLetter) => firstLetter.toUpperCase());
5151
};
5252
const currentMediaType = getMediaTypeInfo(mediaType, mediaChannel);
53+
const isNonVoiceMedia = currentMediaType.labelName !== 'Call';
54+
// Create unique IDs for tooltip trigger and tooltip
55+
const tooltipTriggerId = `tooltip-trigger-${interactionId}`;
56+
const tooltipId = `tooltip-${interactionId}`;
57+
// Helper function to get the correct CSS class
58+
const getTitleClassName = () => {
59+
if (isNonVoiceMedia && isIncomingTask) {
60+
return 'incoming-digital-task-title';
61+
}
62+
if (isNonVoiceMedia && !isIncomingTask) {
63+
return 'task-digital-title';
64+
}
65+
return 'task-title';
66+
};
67+
const renderTitle = () => {
68+
if (!title) return null;
69+
70+
const textComponent = (
71+
<Text
72+
tagName="span"
73+
type={selected ? 'body-large-bold' : 'body-large-medium'}
74+
className={getTitleClassName()}
75+
id={isNonVoiceMedia ? tooltipTriggerId : undefined}
76+
>
77+
{title}
78+
</Text>
79+
);
80+
81+
if (isNonVoiceMedia) {
82+
return (
83+
<>
84+
{textComponent}
85+
<Tooltip
86+
color="contrast"
87+
delay="0,0"
88+
id={tooltipId}
89+
placement="top-start"
90+
offset={4}
91+
tooltip-type="description"
92+
triggerID={tooltipTriggerId}
93+
className="task-tooltip"
94+
>
95+
{title}
96+
</Tooltip>
97+
</>
98+
);
99+
}
100+
101+
return textComponent;
102+
};
103+
53104
return (
54105
<ListItemBase
55106
className={`task-list-item ${selected ? 'task-list-item--selected' : ''} ${styles}`}
@@ -68,12 +119,7 @@ const Task: React.FC<TaskProps> = ({
68119

69120
<ListItemBaseSection position="fill">
70121
<section className="task-details">
71-
{title && (
72-
<Text tagName="span" type={selected ? 'body-large-bold' : 'body-large-medium'}>
73-
{title}
74-
</Text>
75-
)}
76-
122+
{renderTitle()}
77123
{state && !isIncomingTask && (
78124
<Text tagName="span" type="body-midsize-regular" className="task-text">
79125
{capitalizeFirstWord(state)}

0 commit comments

Comments
 (0)