feat(consult-transfer): consult transfer popover improvements

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

@@ -315,6 +315,14 @@ export function useConsultTransferPopover({
     }
   }, [selectedCategory]);
 
+  const handleReload = useCallback(() => {
+    logger?.info(`CC-Components: Reloading ${selectedCategory} data`, {
+      module: 'cc-components#consult-transfer-popover-hooks.ts',
+      method: 'useConsultTransferPopover#handleReload',
+    });
+    loadCategory(selectedCategory, 0, searchQuery, true);
+  }, [selectedCategory, searchQuery, loadDialNumbers, loadEntryPoints, loadQueues, logger]);
+
   return {
     selectedCategory,
     searchQuery,
@@ -333,5 +341,6 @@ export function useConsultTransferPopover({
     handleQueuesClick,
     handleDialNumberClick,
     handleEntryPointClick,
+    handleReload,
   };
 }

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

@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
 import {Text, ListNext, TextInput, Button, ButtonCircle, TooltipNext} from '@momentum-ui/react-collaboration';
-import {Icon, Checkbox} from '@momentum-design/components/dist/react';
+import {Icon, Checkbox, Spinner} from '@momentum-design/components/dist/react';
 import ConsultTransferListComponent from './consult-transfer-list-item';
 import {ConsultTransferPopoverComponentProps} from '../../task.types';
 import ConsultTransferEmptyState from './consult-transfer-empty-state';
@@ -16,9 +16,6 @@ import {
   SEARCH_PLACEHOLDER,
   CLEAR_SEARCH,
   SCROLL_TO_LOAD_MORE,
-  LOADING_MORE_QUEUES,
-  LOADING_MORE_DIAL_NUMBERS,
-  LOADING_MORE_ENTRY_POINTS,
   NO_DATA_AVAILABLE_CONSULT_TRANSFER,
 } from '../../constants';
 import {CATEGORY_AGENTS, CATEGORY_DIAL_NUMBER, CATEGORY_ENTRY_POINT, CATEGORY_QUEUES} from '../../task.types';
@@ -27,6 +24,8 @@ const ConsultTransferPopoverComponent: React.FC<ConsultTransferPopoverComponentP
   heading,
   buttonIcon,
   buddyAgents,
+  loadingBuddyAgents,
+  loadBuddyAgents,
   getAddressBookEntries,
   getEntryPoints,
   getQueues,
@@ -59,6 +58,7 @@ const ConsultTransferPopoverComponent: React.FC<ConsultTransferPopoverComponentP
     handleQueuesClick,
     handleDialNumberClick,
     handleEntryPointClick,
+    handleReload,
   } = useConsultTransferPopover({
     showDialNumberTab,
     showEntryPointTab: isEntryPointTabVisible,
@@ -122,6 +122,37 @@ const ConsultTransferPopoverComponent: React.FC<ConsultTransferPopoverComponentP
           aria-labelledby="consult-search-label"
           className="consult-search-input"
         />
+        <div className="consult-action-buttons">
+          <TooltipNext
+            key={`reload-button-${selectedCategory}`}
+            triggerComponent={
+              <ButtonCircle
+                className="consult-reload-button call-control-button"
+                aria-label={`Reload ${selectedCategory}`}
+                size={32}
+                data-testid="consult-reload-button"
+                onPress={() => {
+                  if (selectedCategory === CATEGORY_AGENTS && loadBuddyAgents) {
+                    loadBuddyAgents();
+                  } else {
+                    handleReload();
+                  }
+                }}
+                disabled={loadingBuddyAgents || loadingDialNumbers || loadingEntryPoints || loadingQueues}
+              >
+                <Icon name="refresh-bold" />
+              </ButtonCircle>
+            }
+            color="secondary"
+            delay={[0, 0]}
+            placement="bottom-start"
+            type="description"
+            variant="small"
+            className="tooltip"
+          >
+            <p>{`Reload ${selectedCategory}`}</p>
+          </TooltipNext>
+        </div>
         {consultTransferManualAction.visible && (
           <TooltipNext
             triggerComponent={
@@ -199,7 +230,11 @@ const ConsultTransferPopoverComponent: React.FC<ConsultTransferPopoverComponentP
 
       <div className="consult-list-container">
         {selectedCategory === 'Agents' &&
-          (getAgentsForDisplay(selectedCategory, buddyAgents, searchQuery).length === 0 ? (
+          (loadingBuddyAgents ? (
+            <div className="consult-loading-spinner">
+              <Spinner />
+            </div>
+          ) : getAgentsForDisplay(selectedCategory, buddyAgents, searchQuery).length === 0 ? (
             <ConsultTransferEmptyState message={NO_DATA_AVAILABLE_CONSULT_TRANSFER} />
           ) : (
             renderList(
@@ -212,7 +247,11 @@ const ConsultTransferPopoverComponent: React.FC<ConsultTransferPopoverComponentP
           ))}
 
         {selectedCategory === 'Queues' &&
-          (noQueues ? (
+          (loadingQueues && queuesData.length === 0 ? (
+            <div className="consult-loading-spinner">
+              <Spinner />
+            </div>
+          ) : noQueues ? (
             <ConsultTransferEmptyState message={NO_DATA_AVAILABLE_CONSULT_TRANSFER} />
           ) : (
             <div>
@@ -223,9 +262,9 @@ const ConsultTransferPopoverComponent: React.FC<ConsultTransferPopoverComponentP
               {hasMoreQueues && (
                 <div ref={loadMoreRef} className="consult-load-more">
                   {loadingQueues ? (
-                    <Text tagName="small" type="body-secondary">
-                      {LOADING_MORE_QUEUES}
-                    </Text>
+                    <div className="consult-loading-spinner">
+                      <Spinner />
+                    </div>
                   ) : (
                     <Text tagName="small" type="body-secondary">
                       {SCROLL_TO_LOAD_MORE}
@@ -238,7 +277,11 @@ const ConsultTransferPopoverComponent: React.FC<ConsultTransferPopoverComponentP
 
         {showDialNumberTab &&
           selectedCategory === CATEGORY_DIAL_NUMBER &&
-          (noDialNumbers ? (
+          (loadingDialNumbers && dialNumbers.length === 0 ? (
+            <div className="consult-loading-spinner">
+              <Spinner />
+            </div>
+          ) : noDialNumbers ? (
             <ConsultTransferEmptyState message={NO_DATA_AVAILABLE_CONSULT_TRANSFER} />
           ) : (
             <div>
@@ -253,9 +296,9 @@ const ConsultTransferPopoverComponent: React.FC<ConsultTransferPopoverComponentP
               {hasMoreDialNumbers && (
                 <div ref={loadMoreRef} className="consult-load-more">
                   {loadingDialNumbers ? (
-                    <Text tagName="small" type="body-secondary">
-                      {LOADING_MORE_DIAL_NUMBERS}
-                    </Text>
+                    <div className="consult-loading-spinner">
+                      <Spinner />
+                    </div>
                   ) : (
                     <Text tagName="small" type="body-secondary">
                       {SCROLL_TO_LOAD_MORE}
@@ -268,7 +311,11 @@ const ConsultTransferPopoverComponent: React.FC<ConsultTransferPopoverComponentP
 
         {isEntryPointTabVisible &&
           selectedCategory === CATEGORY_ENTRY_POINT &&
-          (noEntryPoints ? (
+          (loadingEntryPoints && entryPoints.length === 0 ? (
+            <div className="consult-loading-spinner">
+              <Spinner />
+            </div>
+          ) : noEntryPoints ? (
             <ConsultTransferEmptyState message={NO_DATA_AVAILABLE_CONSULT_TRANSFER} />
           ) : (
             <div>
@@ -281,9 +328,9 @@ const ConsultTransferPopoverComponent: React.FC<ConsultTransferPopoverComponentP
               {hasMoreEntryPoints && (
                 <div ref={loadMoreRef} className="consult-load-more">
                   {loadingEntryPoints ? (
-                    <Text tagName="small" type="body-secondary">
-                      {LOADING_MORE_ENTRY_POINTS}
-                    </Text>
+                    <div className="consult-loading-spinner">
+                      <Spinner />
+                    </div>
                   ) : (
                     <Text tagName="small" type="body-secondary">
                       {SCROLL_TO_LOAD_MORE}

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

@@ -230,10 +230,24 @@
       min-width: 0;
     }
 
+    .consult-action-buttons {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      flex-shrink: 0;
+    }
+
+    .consult-reload-button,
     .consult-quick-action-button {
       flex: 0 0 2rem; /* 32px */
     }
 
+    .consult-reload-button {
+      mdc-icon {
+        --mdc-icon-fill-color: var(--mds-color-theme-text-primary-normal);
+      }
+    }
+
     .consult-category-buttons {
       margin: 0.5rem 0;
       display: flex;
@@ -271,6 +285,15 @@
       align-items: center;
     }
 
+    .consult-loading-spinner {
+      // Centering the spinner in the loading area
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 10rem;
+      width: 100%;
+    }
+
     .consult-list-container {
       flex: 1;
       overflow-y: auto;

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

@@ -45,6 +45,7 @@ function CallControlComponent(props: CallControlComponentProps) {
     isRecording,
     setIsRecording,
     buddyAgents,
+    loadingBuddyAgents,
     loadBuddyAgents,
     transferCall,
     consultCall,
@@ -221,6 +222,8 @@ function CallControlComponent(props: CallControlComponentProps) {
                         heading={button.menuType}
                         buttonIcon={button.icon}
                         buddyAgents={buddyAgents}
+                        loadingBuddyAgents={loadingBuddyAgents}
+                        loadBuddyAgents={loadBuddyAgents}
                         getAddressBookEntries={getAddressBookEntries}
                         getEntryPoints={getEntryPoints}
                         getQueues={getQueuesFetcher}

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

@@ -22,9 +22,6 @@ export const QUEUES = 'Queues';
 export const SEARCH_PLACEHOLDER = 'Search...';
 export const CLEAR_SEARCH = 'Clear search';
 export const SCROLL_TO_LOAD_MORE = 'Scroll to load more';
-export const LOADING_MORE_QUEUES = 'Loading more queues...';
-export const LOADING_MORE_DIAL_NUMBERS = 'Loading more dial numbers...';
-export const LOADING_MORE_ENTRY_POINTS = 'Loading more entry points...';
 export const NO_DATA_AVAILABLE_CONSULT_TRANSFER = 'No data available for consult transfer.';
 export const VIA_SEARCH_SUFFIX = ' via search';
 // Pagination

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

@@ -282,6 +282,11 @@ export interface ControlProps {
    */
   buddyAgents: BuddyDetails[];
 
+  /**
+   * Flag to indicate if buddy agents are being loaded
+   */
+  loadingBuddyAgents: boolean;
+
   /**
    * Function to load buddy agents
    */
@@ -480,6 +485,7 @@ export type CallControlComponentProps = Pick<
   | 'isRecording'
   | 'setIsRecording'
   | 'buddyAgents'
+  | 'loadingBuddyAgents'
   | 'loadBuddyAgents'
   | 'transferCall'
   | 'consultCall'
@@ -612,6 +618,8 @@ export interface ConsultTransferPopoverComponentProps {
   heading: string;
   buttonIcon: string;
   buddyAgents: BuddyDetails[];
+  loadingBuddyAgents: boolean;
+  loadBuddyAgents?: () => Promise<void>;
   getAddressBookEntries?: FetchPaginatedList<AddressBookEntry>;
   getEntryPoints?: FetchPaginatedList<EntryPointRecord>;
   getQueues?: FetchPaginatedList<ContactServiceQueue>;

packages/contact-center/cc-components/tests/components/task/CallControl/CallControlCustom/consult-transfer-popover.snapshot.tsx

@@ -76,6 +76,7 @@ describe('ConsultTransferPopoverComponent Snapshots', () => {
         siteId: 'site1',
       },
     ],
+    loadingBuddyAgents: false,
     getQueues: async () => ({data: [buildQueue('queue1', 'Queue One')], meta: {page: 0, totalPages: 1}}),
     onAgentSelect: mockOnAgentSelect,
     onQueueSelect: mockOnQueueSelect,