Skip to content

Commit b1faaed

Browse files
bhabalanbhabalan
authored
feat(consult-transfer): consult transfer popover improvements (#570)
1 parent ab03c0c commit b1faaed

File tree

20 files changed

+1490
-182
lines changed

20 files changed

+1490
-182
lines changed

‎packages/contact-center/cc-components/src/components/task/CallControl/CallControlCustom/consult-transfer-popover-hooks.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -315,6 +315,14 @@ export function useConsultTransferPopover({
315315
}
316316
}, [selectedCategory]);
317317

318+
const handleReload = useCallback(() => {
319+
logger?.info(`CC-Components: Reloading ${selectedCategory} data`, {
320+
module: 'cc-components#consult-transfer-popover-hooks.ts',
321+
method: 'useConsultTransferPopover#handleReload',
322+
});
323+
loadCategory(selectedCategory, 0, searchQuery, true);
324+
}, [selectedCategory, searchQuery, loadDialNumbers, loadEntryPoints, loadQueues, logger]);
325+
318326
return {
319327
selectedCategory,
320328
searchQuery,
@@ -333,5 +341,6 @@ export function useConsultTransferPopover({
333341
handleQueuesClick,
334342
handleDialNumberClick,
335343
handleEntryPointClick,
344+
handleReload,
336345
};
337346
}

‎packages/contact-center/cc-components/src/components/task/CallControl/CallControlCustom/consult-transfer-popover.tsx‎

Lines changed: 64 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, {useState} from 'react';
22
import {Text, ListNext, TextInput, Button, ButtonCircle, TooltipNext} from '@momentum-ui/react-collaboration';
3-
import {Icon, Checkbox} from '@momentum-design/components/dist/react';
3+
import {Icon, Checkbox, Spinner} from '@momentum-design/components/dist/react';
44
import ConsultTransferListComponent from './consult-transfer-list-item';
55
import {ConsultTransferPopoverComponentProps} from '../../task.types';
66
import ConsultTransferEmptyState from './consult-transfer-empty-state';
@@ -16,9 +16,6 @@ import {
1616
SEARCH_PLACEHOLDER,
1717
CLEAR_SEARCH,
1818
SCROLL_TO_LOAD_MORE,
19-
LOADING_MORE_QUEUES,
20-
LOADING_MORE_DIAL_NUMBERS,
21-
LOADING_MORE_ENTRY_POINTS,
2219
NO_DATA_AVAILABLE_CONSULT_TRANSFER,
2320
} from '../../constants';
2421
import {CATEGORY_AGENTS, CATEGORY_DIAL_NUMBER, CATEGORY_ENTRY_POINT, CATEGORY_QUEUES} from '../../task.types';
@@ -27,6 +24,8 @@ const ConsultTransferPopoverComponent: React.FC<ConsultTransferPopoverComponentP
2724
heading,
2825
buttonIcon,
2926
buddyAgents,
27+
loadingBuddyAgents,
28+
loadBuddyAgents,
3029
getAddressBookEntries,
3130
getEntryPoints,
3231
getQueues,
@@ -59,6 +58,7 @@ const ConsultTransferPopoverComponent: React.FC<ConsultTransferPopoverComponentP
5958
handleQueuesClick,
6059
handleDialNumberClick,
6160
handleEntryPointClick,
61+
handleReload,
6262
} = useConsultTransferPopover({
6363
showDialNumberTab,
6464
showEntryPointTab: isEntryPointTabVisible,
@@ -122,6 +122,37 @@ const ConsultTransferPopoverComponent: React.FC<ConsultTransferPopoverComponentP
122122
aria-labelledby="consult-search-label"
123123
className="consult-search-input"
124124
/>
125+
<div className="consult-action-buttons">
126+
<TooltipNext
127+
key={`reload-button-${selectedCategory}`}
128+
triggerComponent={
129+
<ButtonCircle
130+
className="consult-reload-button call-control-button"
131+
aria-label={`Reload ${selectedCategory}`}
132+
size={32}
133+
data-testid="consult-reload-button"
134+
onPress={() => {
135+
if (selectedCategory === CATEGORY_AGENTS && loadBuddyAgents) {
136+
loadBuddyAgents();
137+
} else {
138+
handleReload();
139+
}
140+
}}
141+
disabled={loadingBuddyAgents || loadingDialNumbers || loadingEntryPoints || loadingQueues}
142+
>
143+
<Icon name="refresh-bold" />
144+
</ButtonCircle>
145+
}
146+
color="secondary"
147+
delay={[0, 0]}
148+
placement="bottom-start"
149+
type="description"
150+
variant="small"
151+
className="tooltip"
152+
>
153+
<Text tagName="p">{`Reload ${selectedCategory}`}</Text>
154+
</TooltipNext>
155+
</div>
125156
{consultTransferManualAction.visible && (
126157
<TooltipNext
127158
triggerComponent={
@@ -199,7 +230,11 @@ const ConsultTransferPopoverComponent: React.FC<ConsultTransferPopoverComponentP
199230

200231
<div className="consult-list-container">
201232
{selectedCategory === 'Agents' &&
202-
(getAgentsForDisplay(selectedCategory, buddyAgents, searchQuery).length === 0 ? (
233+
(loadingBuddyAgents ? (
234+
<div className="consult-loading-spinner">
235+
<Spinner />
236+
</div>
237+
) : getAgentsForDisplay(selectedCategory, buddyAgents, searchQuery).length === 0 ? (
203238
<ConsultTransferEmptyState message={NO_DATA_AVAILABLE_CONSULT_TRANSFER} />
204239
) : (
205240
renderList(
@@ -212,7 +247,11 @@ const ConsultTransferPopoverComponent: React.FC<ConsultTransferPopoverComponentP
212247
))}
213248

214249
{selectedCategory === 'Queues' &&
215-
(noQueues ? (
250+
(loadingQueues && queuesData.length === 0 ? (
251+
<div className="consult-loading-spinner">
252+
<Spinner />
253+
</div>
254+
) : noQueues ? (
216255
<ConsultTransferEmptyState message={NO_DATA_AVAILABLE_CONSULT_TRANSFER} />
217256
) : (
218257
<div>
@@ -223,9 +262,9 @@ const ConsultTransferPopoverComponent: React.FC<ConsultTransferPopoverComponentP
223262
{hasMoreQueues && (
224263
<div ref={loadMoreRef} className="consult-load-more">
225264
{loadingQueues ? (
226-
<Text tagName="small" type="body-secondary">
227-
{LOADING_MORE_QUEUES}
228-
</Text>
265+
<div className="consult-loading-spinner">
266+
<Spinner />
267+
</div>
229268
) : (
230269
<Text tagName="small" type="body-secondary">
231270
{SCROLL_TO_LOAD_MORE}
@@ -238,7 +277,11 @@ const ConsultTransferPopoverComponent: React.FC<ConsultTransferPopoverComponentP
238277

239278
{showDialNumberTab &&
240279
selectedCategory === CATEGORY_DIAL_NUMBER &&
241-
(noDialNumbers ? (
280+
(loadingDialNumbers && dialNumbers.length === 0 ? (
281+
<div className="consult-loading-spinner">
282+
<Spinner />
283+
</div>
284+
) : noDialNumbers ? (
242285
<ConsultTransferEmptyState message={NO_DATA_AVAILABLE_CONSULT_TRANSFER} />
243286
) : (
244287
<div>
@@ -253,9 +296,9 @@ const ConsultTransferPopoverComponent: React.FC<ConsultTransferPopoverComponentP
253296
{hasMoreDialNumbers && (
254297
<div ref={loadMoreRef} className="consult-load-more">
255298
{loadingDialNumbers ? (
256-
<Text tagName="small" type="body-secondary">
257-
{LOADING_MORE_DIAL_NUMBERS}
258-
</Text>
299+
<div className="consult-loading-spinner">
300+
<Spinner />
301+
</div>
259302
) : (
260303
<Text tagName="small" type="body-secondary">
261304
{SCROLL_TO_LOAD_MORE}
@@ -268,7 +311,11 @@ const ConsultTransferPopoverComponent: React.FC<ConsultTransferPopoverComponentP
268311

269312
{isEntryPointTabVisible &&
270313
selectedCategory === CATEGORY_ENTRY_POINT &&
271-
(noEntryPoints ? (
314+
(loadingEntryPoints && entryPoints.length === 0 ? (
315+
<div className="consult-loading-spinner">
316+
<Spinner />
317+
</div>
318+
) : noEntryPoints ? (
272319
<ConsultTransferEmptyState message={NO_DATA_AVAILABLE_CONSULT_TRANSFER} />
273320
) : (
274321
<div>
@@ -281,9 +328,9 @@ const ConsultTransferPopoverComponent: React.FC<ConsultTransferPopoverComponentP
281328
{hasMoreEntryPoints && (
282329
<div ref={loadMoreRef} className="consult-load-more">
283330
{loadingEntryPoints ? (
284-
<Text tagName="small" type="body-secondary">
285-
{LOADING_MORE_ENTRY_POINTS}
286-
</Text>
331+
<div className="consult-loading-spinner">
332+
<Spinner />
333+
</div>
287334
) : (
288335
<Text tagName="small" type="body-secondary">
289336
{SCROLL_TO_LOAD_MORE}

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -230,10 +230,24 @@
230230
min-width: 0;
231231
}
232232

233+
.consult-action-buttons {
234+
display: flex;
235+
align-items: center;
236+
gap: 0.5rem;
237+
flex-shrink: 0;
238+
}
239+
240+
.consult-reload-button,
233241
.consult-quick-action-button {
234242
flex: 0 0 2rem; /* 32px */
235243
}
236244

245+
.consult-reload-button {
246+
mdc-icon {
247+
--mdc-icon-fill-color: var(--mds-color-theme-text-primary-normal);
248+
}
249+
}
250+
237251
.consult-category-buttons {
238252
margin: 0.5rem 0;
239253
display: flex;
@@ -271,6 +285,15 @@
271285
align-items: center;
272286
}
273287

288+
.consult-loading-spinner {
289+
// Centering the spinner in the loading area
290+
display: flex;
291+
justify-content: center;
292+
align-items: center;
293+
min-height: 10rem;
294+
width: 100%;
295+
}
296+
274297
.consult-list-container {
275298
flex: 1;
276299
overflow-y: auto;

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ function CallControlComponent(props: CallControlComponentProps) {
4545
isRecording,
4646
setIsRecording,
4747
buddyAgents,
48+
loadingBuddyAgents,
4849
loadBuddyAgents,
4950
transferCall,
5051
consultCall,
@@ -221,6 +222,8 @@ function CallControlComponent(props: CallControlComponentProps) {
221222
heading={button.menuType}
222223
buttonIcon={button.icon}
223224
buddyAgents={buddyAgents}
225+
loadingBuddyAgents={loadingBuddyAgents}
226+
loadBuddyAgents={loadBuddyAgents}
224227
getAddressBookEntries={getAddressBookEntries}
225228
getEntryPoints={getEntryPoints}
226229
getQueues={getQueuesFetcher}

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,6 @@ export const QUEUES = 'Queues';
2222
export const SEARCH_PLACEHOLDER = 'Search...';
2323
export const CLEAR_SEARCH = 'Clear search';
2424
export const SCROLL_TO_LOAD_MORE = 'Scroll to load more';
25-
export const LOADING_MORE_QUEUES = 'Loading more queues...';
26-
export const LOADING_MORE_DIAL_NUMBERS = 'Loading more dial numbers...';
27-
export const LOADING_MORE_ENTRY_POINTS = 'Loading more entry points...';
2825
export const NO_DATA_AVAILABLE_CONSULT_TRANSFER = 'No data available for consult transfer.';
2926
export const VIA_SEARCH_SUFFIX = ' via search';
3027
// Pagination

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -282,6 +282,11 @@ export interface ControlProps {
282282
*/
283283
buddyAgents: BuddyDetails[];
284284

285+
/**
286+
* Flag to indicate if buddy agents are being loaded
287+
*/
288+
loadingBuddyAgents: boolean;
289+
285290
/**
286291
* Function to load buddy agents
287292
*/
@@ -480,6 +485,7 @@ export type CallControlComponentProps = Pick<
480485
| 'isRecording'
481486
| 'setIsRecording'
482487
| 'buddyAgents'
488+
| 'loadingBuddyAgents'
483489
| 'loadBuddyAgents'
484490
| 'transferCall'
485491
| 'consultCall'
@@ -612,6 +618,8 @@ export interface ConsultTransferPopoverComponentProps {
612618
heading: string;
613619
buttonIcon: string;
614620
buddyAgents: BuddyDetails[];
621+
loadingBuddyAgents: boolean;
622+
loadBuddyAgents?: () => Promise<void>;
615623
getAddressBookEntries?: FetchPaginatedList<AddressBookEntry>;
616624
getEntryPoints?: FetchPaginatedList<EntryPointRecord>;
617625
getQueues?: FetchPaginatedList<ContactServiceQueue>;

0 commit comments

Comments
 (0)