From 66fa8344caaa8cd11461e9396847110439d7e4a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CAkula?= Date: Mon, 30 Jun 2025 17:33:24 +0530 Subject: [PATCH 1/3] fix(incoming-task): fix-incoming-task-overflow-issue --- .../task/CallControlCAD/call-control-cad.styles.scss | 6 ++++++ .../task/CallControlCAD/call-control-cad.tsx | 2 +- .../cc-components/src/components/task/Task/index.tsx | 2 +- .../cc-components/src/components/task/Task/styles.scss | 10 +++++++++- 4 files changed, 17 insertions(+), 3 deletions(-) diff --git a/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.styles.scss b/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.styles.scss index 966cad3f5..04a228330 100644 --- a/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.styles.scss +++ b/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.styles.scss @@ -116,4 +116,10 @@ .media-icon.chat { color: var(--mds-color-theme-indicator-secure); } +} + +.customer-name::part(text), +.phone-number::part(text) { + white-space: normal !important; + word-break: break-all; } \ No newline at end of file diff --git a/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx b/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx index c420445e6..2dfdaf6aa 100644 --- a/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx +++ b/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx @@ -64,7 +64,7 @@ const CallControlCADComponent: React.FC = (props) =>
- + {isSocial ? customerName || 'No Customer Name' : ani || 'No Caller ID'}
diff --git a/packages/contact-center/cc-components/src/components/task/Task/index.tsx b/packages/contact-center/cc-components/src/components/task/Task/index.tsx index f958e0c2f..f06cd4a76 100644 --- a/packages/contact-center/cc-components/src/components/task/Task/index.tsx +++ b/packages/contact-center/cc-components/src/components/task/Task/index.tsx @@ -69,7 +69,7 @@ const Task: React.FC = ({
{title && ( - + {title} )} diff --git a/packages/contact-center/cc-components/src/components/task/Task/styles.scss b/packages/contact-center/cc-components/src/components/task/Task/styles.scss index 30fa6dde4..e56862e48 100644 --- a/packages/contact-center/cc-components/src/components/task/Task/styles.scss +++ b/packages/contact-center/cc-components/src/components/task/Task/styles.scss @@ -14,7 +14,8 @@ align-items: center; align-self: stretch; // have to override momentum default height for listitem to match the design - height: 5rem !important; + min-height: 5rem !important; + height: auto !important; mdc-avatar { --mdc-avatar-default-background-color: var(--mds-color-theme-avatar-glass-normal); @@ -75,4 +76,11 @@ .task-list-hover:hover{ // To remove the hover effect of ListItemBase when we render an incoming task background: none !important; +} + +.task-details { + .task-title::part(text) { + white-space: normal !important; + word-break: break-all; + } } \ No newline at end of file From 2aec8c73a93ad305086fa5e105ade19b46825ccb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CAkula?= Date: Wed, 2 Jul 2025 21:21:42 +0530 Subject: [PATCH 2/3] fix(incoming-task): fix-incoming-task-overflow-issue-using-ellipsis --- .../call-control-cad.styles.scss | 68 ++++++++++++- .../task/CallControlCAD/call-control-cad.tsx | 96 +++++++++++++++++-- .../src/components/task/Task/index.tsx | 62 ++++++++++-- .../src/components/task/Task/styles.scss | 85 +++++++++++++++- 4 files changed, 291 insertions(+), 20 deletions(-) diff --git a/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.styles.scss b/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.styles.scss index 04a228330..00ec3de9c 100644 --- a/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.styles.scss +++ b/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.styles.scss @@ -118,8 +118,68 @@ } } -.customer-name::part(text), -.phone-number::part(text) { - white-space: normal !important; - word-break: break-all; +.digital-customer-name::part(text), +.voice-customer-name::part(text), +.digital-phone-number::part(text), +.voice-phone-number::part(text) { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin: 0; +} + +.digital-customer-name { + width: auto; +} + +.digital-phone-number { + width: auto; +} + +@media (min-width: 64.0625rem) and (max-width: 75rem) { + .digital-customer-name { + width: 50rem; + max-width: 50rem; + } + + .digital-phone-number { + width: 16rem; + max-width: 16rem; + } +} + +@media (min-width: 48.0625rem) and (max-width: 64rem) { + .digital-customer-name { + width: 31.25rem; + max-width: 31.25rem; + } + + .digital-phone-number { + width: 15rem; + max-width: 15rem; + } +} + +@media (min-width: 30.0625rem) and (max-width: 48rem) { + .digital-customer-name { + width: 15.625rem; + max-width: 15.625rem; + } + + .digital-phone-number { + width: 13rem; + max-width: 13rem; + } +} + +@media (min-width: 20rem) and (max-width: 30.0625rem) { + .digital-customer-name { + width: 9.375rem; + max-width: 9.375rem; + } + + .digital-phone-number { + width: 12rem; + max-width: 12rem; + } } \ No newline at end of file diff --git a/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx b/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx index a9f9003a2..338d844f3 100644 --- a/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx +++ b/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx @@ -1,7 +1,7 @@ import React from 'react'; import CallControlComponent from '../CallControl/call-control'; import {Text} from '@momentum-ui/react-collaboration'; -import {Brandvisual, Icon} from '@momentum-design/components/dist/react'; +import {Brandvisual, Icon, Tooltip} from '@momentum-design/components/dist/react'; import './call-control-cad.styles.scss'; import TaskTimer from '../TaskTimer/index'; import CallControlConsultComponent from '../CallControl/CallControlCustom/call-control-consult'; @@ -60,6 +60,91 @@ const CallControlCADComponent: React.FC = (props) => const customerName = currentTask?.data?.interaction?.callAssociatedDetails?.customerName; const ani = currentTask?.data?.interaction?.callAssociatedDetails?.ani; + // 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 textComponent = ( + + {customerText} + + ); + + if (!isTelephony) { + return ( + <> + {textComponent} + + + {customerText} + + + + ); + } + + return textComponent; + }; + + const renderPhoneNumber = () => { + const phoneText = isSocial ? customerName || NO_CUSTOMER_NAME : ani || NO_PHONE_NUMBER; + const labelText = isSocial ? CUSTOMER_NAME : PHONE_NUMBER; + + const textComponent = ( + + {labelText} {phoneText} + + ); + + if (!isTelephony) { + return ( + <> + {textComponent} + + + {phoneText} + + + + ); + } + + return textComponent; + }; + if (!currentTask) return null; return ( @@ -76,9 +161,7 @@ const CallControlCADComponent: React.FC = (props) =>
- - {isSocial ? customerName || NO_CUSTOMER_NAME : ani || NO_CALLER_ID} - + {renderCustomerName()}
{currentMediaType.labelName} - @@ -110,10 +193,7 @@ const CallControlCADComponent: React.FC = (props) => {QUEUE}{' '} {currentTask?.data?.interaction?.callAssociatedDetails?.virtualTeamName || NO_TEAM_NAME} - - {isSocial ? CUSTOMER_NAME : PHONE_NUMBER}{' '} - {isSocial ? customerName || NO_CUSTOMER_NAME : ani || NO_PHONE_NUMBER} - + {renderPhoneNumber()} {RONA}{' '} {currentTask?.data?.interaction?.callAssociatedDetails?.ronaTimeout || NO_RONA} diff --git a/packages/contact-center/cc-components/src/components/task/Task/index.tsx b/packages/contact-center/cc-components/src/components/task/Task/index.tsx index f06cd4a76..b388a6e5b 100644 --- a/packages/contact-center/cc-components/src/components/task/Task/index.tsx +++ b/packages/contact-center/cc-components/src/components/task/Task/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {ButtonPill, ListItemBase, ListItemBaseSection, Text} from '@momentum-ui/react-collaboration'; -import {Avatar, Brandvisual} from '@momentum-design/components/dist/react'; +import {Avatar, Brandvisual, Tooltip} from '@momentum-design/components/dist/react'; import {PressEvent} from '@react-types/shared'; import TaskTimer from '../TaskTimer'; import {getMediaTypeInfo} from '../../../utils'; @@ -50,6 +50,59 @@ const Task: React.FC = ({ return str.replace(/^\s*(\w)/, (match, firstLetter) => firstLetter.toUpperCase()); }; const currentMediaType = getMediaTypeInfo(mediaType, mediaChannel); + const isNonVoiceMedia = currentMediaType.labelName !== 'Call'; + // Create unique IDs for tooltip trigger and tooltip + const tooltipTriggerId = `tooltip-trigger-${interactionId}`; + const tooltipId = `tooltip-${interactionId}`; + // Helper function to get the correct CSS class + const getTitleClassName = () => { + if (isNonVoiceMedia && isIncomingTask) { + return 'incoming-digital-task-title'; + } + if (isNonVoiceMedia && !isIncomingTask) { + return 'task-digital-title'; + } + return 'task-title'; + }; + const renderTitle = () => { + if (!title) return null; + + const textComponent = ( + + {title} + + ); + + if (isNonVoiceMedia) { + return ( + <> + {textComponent} + + + {title} + + + + ); + } + + return textComponent; + }; + return ( = ({
- {title && ( - - {title} - - )} - + {renderTitle()} {state && !isIncomingTask && ( {capitalizeFirstWord(state)} diff --git a/packages/contact-center/cc-components/src/components/task/Task/styles.scss b/packages/contact-center/cc-components/src/components/task/Task/styles.scss index e56862e48..dfa2d6f7b 100644 --- a/packages/contact-center/cc-components/src/components/task/Task/styles.scss +++ b/packages/contact-center/cc-components/src/components/task/Task/styles.scss @@ -79,8 +79,91 @@ } .task-details { - .task-title::part(text) { + .task-digital-title { + width: auto; + } + + .incoming-digital-task-title { + width: 12.5rem; + } +} + +.task-tooltip-text::part(text) { white-space: normal !important; word-break: break-all; +} + +.task-tooltip-text { + width: 20rem; +} + +@media (min-width: 64.0625rem) and (max-width: 75rem) { + .task-details { + .task-digital-title { + width: 50rem; + max-width: 50rem; + } + } + .task-tooltip-text { + width: 17rem; + } +} + +@media (min-width: 48.0625rem) and (max-width: 64rem) { + .task-details { + .task-digital-title { + width: 31.25rem; + max-width: 31.25rem; + } + .incoming-digital-task-title { + width: 10rem; + } + } + .task-tooltip-text { + width: 16rem; + } +} + +@media (min-width: 30.0625rem) and (max-width: 48rem) { + .task-details { + .task-digital-title { + width: 15.625rem; + max-width: 15.625rem; + } + .incoming-digital-task-title { + width: 8rem; + } + } + + .task-tooltip-text { + width: 15rem; + } +} + +@media (min-width: 20rem) and (max-width: 30rem) { + .task-details { + .task-digital-title { + width: 9.375rem; + max-width: 9.375rem; + } + .incoming-digital-task-title { + width: 5rem; + } + } + + .task-tooltip-text { + width: 9rem; + } + +} + +@media (min-width: 15.625rem) and (max-width: 20rem){ + .task-details { + .incoming-digital-task-title { + width: 4rem; + } } + .task-tooltip-text { + width: 7rem; + } } \ No newline at end of file From 17e76b49befb7acbbc51c2eef32fb6687d5be817 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CAkula?= Date: Thu, 3 Jul 2025 13:06:00 +0530 Subject: [PATCH 3/3] fix(incoming-task): removed-important-keyword-from-styles --- .../call-control-cad.styles.scss | 29 +++++++++++ .../task/CallControlCAD/call-control-cad.tsx | 12 ++--- .../src/components/task/Task/index.tsx | 4 +- .../src/components/task/Task/styles.scss | 50 +++++++++---------- 4 files changed, 59 insertions(+), 36 deletions(-) diff --git a/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.styles.scss b/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.styles.scss index 00ec3de9c..abd032830 100644 --- a/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.styles.scss +++ b/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.styles.scss @@ -117,6 +117,16 @@ color: var(--mds-color-theme-indicator-secure); } } +.call-control-task-tooltip::part(popover-content) { + white-space: normal; + word-break: break-all; +} + +.call-control-task-tooltip { + min-width: 30%; + width: auto; + text-align: center; +} .digital-customer-name::part(text), .voice-customer-name::part(text), @@ -158,6 +168,10 @@ width: 15rem; max-width: 15rem; } + .call-control-task-tooltip { + width: 50%; + text-align: center; + } } @media (min-width: 30.0625rem) and (max-width: 48rem) { @@ -170,6 +184,10 @@ width: 13rem; max-width: 13rem; } + .call-control-task-tooltip { + width: 50%; + text-align: center; + } } @media (min-width: 20rem) and (max-width: 30.0625rem) { @@ -182,4 +200,15 @@ width: 12rem; max-width: 12rem; } + .call-control-task-tooltip { + width: 50%; + text-align: center; + } +} + +@media (min-width: 15.625rem) and (max-width: 20rem){ + .call-control-task-tooltip { + width: 50%; + text-align: center; + } } \ No newline at end of file diff --git a/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx b/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx index 338d844f3..fdacfd384 100644 --- a/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx +++ b/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx @@ -92,11 +92,9 @@ const CallControlCADComponent: React.FC = (props) => offset={4} tooltip-type="description" triggerID={customerNameTriggerId} - className="task-tooltip" + className="call-control-task-tooltip" > - - {customerText} - + {customerText} ); @@ -132,11 +130,9 @@ const CallControlCADComponent: React.FC = (props) => offset={4} tooltip-type="description" triggerID={phoneNumberTriggerId} - className="task-tooltip" + className="call-control-task-tooltip" > - - {phoneText} - + {phoneText} ); diff --git a/packages/contact-center/cc-components/src/components/task/Task/index.tsx b/packages/contact-center/cc-components/src/components/task/Task/index.tsx index b388a6e5b..f4c4c198b 100644 --- a/packages/contact-center/cc-components/src/components/task/Task/index.tsx +++ b/packages/contact-center/cc-components/src/components/task/Task/index.tsx @@ -92,9 +92,7 @@ const Task: React.FC = ({ triggerID={tooltipTriggerId} className="task-tooltip" > - - {title} - + {title} ); diff --git a/packages/contact-center/cc-components/src/components/task/Task/styles.scss b/packages/contact-center/cc-components/src/components/task/Task/styles.scss index dfa2d6f7b..98704922a 100644 --- a/packages/contact-center/cc-components/src/components/task/Task/styles.scss +++ b/packages/contact-center/cc-components/src/components/task/Task/styles.scss @@ -14,8 +14,8 @@ align-items: center; align-self: stretch; // have to override momentum default height for listitem to match the design - min-height: 5rem !important; - height: auto !important; + min-height: 5rem; + height: auto; mdc-avatar { --mdc-avatar-default-background-color: var(--mds-color-theme-avatar-glass-normal); @@ -88,13 +88,15 @@ } } -.task-tooltip-text::part(text) { - white-space: normal !important; +.task-tooltip::part(popover-content) { + white-space: normal; word-break: break-all; } -.task-tooltip-text { - width: 20rem; +.task-tooltip { + min-width: 25%; + width: auto; + text-align: center; } @media (min-width: 64.0625rem) and (max-width: 75rem) { @@ -104,9 +106,6 @@ max-width: 50rem; } } - .task-tooltip-text { - width: 17rem; - } } @media (min-width: 48.0625rem) and (max-width: 64rem) { @@ -119,9 +118,10 @@ width: 10rem; } } - .task-tooltip-text { - width: 16rem; - } + .task-tooltip { + width: 50%; + text-align: center; +} } @media (min-width: 30.0625rem) and (max-width: 48rem) { @@ -134,10 +134,10 @@ width: 8rem; } } - - .task-tooltip-text { - width: 15rem; - } + .task-tooltip { + width: 50%; + text-align: center; +} } @media (min-width: 20rem) and (max-width: 30rem) { @@ -150,11 +150,10 @@ width: 5rem; } } - - .task-tooltip-text { - width: 9rem; - } - + .task-tooltip { + width: 50%; + text-align: center; +} } @media (min-width: 15.625rem) and (max-width: 20rem){ @@ -162,8 +161,9 @@ .incoming-digital-task-title { width: 4rem; } - } - .task-tooltip-text { - width: 7rem; - } +} +.task-tooltip { + width: 50%; + text-align: center; +} } \ No newline at end of file