feat(cc-widgets): Transfer to dial number feature added (#531)

Author: rsarika

packages/contact-center/cc-components/src/components/task/CallControl/CallControlCustom/consult-transfer-dial-number.scss

@@ -0,0 +1,19 @@
+.consult-transfer-dial-number-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  height: 40px;
+}
+
+.consult-transfer-dial-number-input {
+  flex: 1;
+  align-self: center;
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.consult-transfer-dial-number-btn {
+  align-self: flex-start;
+}

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

@@ -0,0 +1,35 @@
+import React, {useState} from 'react';
+import './consult-transfer-dial-number.scss';
+import {ButtonCircle} from '@momentum-ui/react-collaboration';
+import {Icon, Input} from '@momentum-design/components/dist/react';
+import {ConsultTransferDialNumberComponentProps} from '../../task.types';
+import {handleButtonPress, onInputDialNumber} from '../call-control.utils';
+
+const DialNumberUI: React.FC<ConsultTransferDialNumberComponentProps> = (props) => {
+  const {buttonIcon, onButtonPress, logger} = props;
+
+  const [value, setValue] = useState('');
+  return (
+    <div className="consult-transfer-dial-number-container">
+      <Input
+        id="dial-number-input"
+        data-testid="dial-number-input"
+        value={value}
+        onInput={(e) => onInputDialNumber(e, setValue)}
+        placeholder="Enter Dial Number"
+        className="consult-transfer-dial-number-input"
+      />
+      <ButtonCircle
+        onPress={() => handleButtonPress(logger, onButtonPress, value)}
+        size={28}
+        color="join"
+        className="consult-transfer-dial-number-btn"
+        data-testid="dial-number-btn"
+      >
+        <Icon name={buttonIcon} />
+      </ButtonCircle>
+    </div>
+  );
+};
+
+export default DialNumberUI;

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

@@ -4,14 +4,15 @@ import ConsultTransferListComponent from './consult-transfer-list-item';
 import {ConsultTransferPopoverComponentProps} from '../../task.types';
 import ConsultTransferEmptyState from './consult-transfer-empty-state';
 import {
-  shouldShowTabs,
   isAgentsEmpty,
   isQueuesEmpty,
   handleTabSelection,
   handleAgentSelection,
   handleQueueSelection,
   getEmptyStateMessage,
 } from './call-control-custom.utils';
+import DialNumberUI from './consult-transfer-dial-number';
+import {AGENTS, DIAL_NUMBER, QUEUES} from '../../constants';
 
 const ConsultTransferPopoverComponent: React.FC<ConsultTransferPopoverComponentProps> = ({
   heading,
@@ -20,16 +21,17 @@ const ConsultTransferPopoverComponent: React.FC<ConsultTransferPopoverComponentP
   queues,
   onAgentSelect,
   onQueueSelect,
+  onDialNumberSelect,
   allowConsultToQueue,
   logger,
 }) => {
-  const [selectedTab, setSelectedTab] = useState('Agents');
+  const [selectedTab, setSelectedTab] = useState(AGENTS);
   const filteredAgents = buddyAgents;
   const filteredQueues = queues;
 
   const noAgents = isAgentsEmpty(filteredAgents);
   const noQueues = isQueuesEmpty(filteredQueues);
-  const showTabs = shouldShowTabs(filteredAgents, filteredQueues);
+  const showTabs = true; // Always show tabs to allow dial number option
 
   const renderList = (items, getKey, getTitle, handleSelect) => (
     <ListNext listSize={items.length} className="agent-list">
@@ -72,37 +74,40 @@ const ConsultTransferPopoverComponent: React.FC<ConsultTransferPopoverComponentP
             handleTabSelection(key as string, setSelectedTab, logger);
           }}
         >
-          <TabNext key="Agents" className="agent-tab" active={selectedTab === 'Agents'}>
+          <TabNext key={AGENTS} className="agent-tab" active={selectedTab === AGENTS}>
             Agents
           </TabNext>
           <TabNext
-            key="Queues"
+            key={QUEUES}
             className="queue-tab"
-            active={selectedTab === 'Queues'}
+            active={selectedTab === QUEUES}
             disabled={!allowConsultToQueue}
             style={!allowConsultToQueue ? {display: 'none'} : undefined}
           >
             Queues
           </TabNext>
+          <TabNext key={DIAL_NUMBER} className="dial-number-tab" active={selectedTab === DIAL_NUMBER}>
+            Dial Number
+          </TabNext>
         </TabListNext>
       )}
 
       {/* If both are empty, show the big empty state */}
       {!showTabs && <ConsultTransferEmptyState message={getEmptyStateMessage(selectedTab, showTabs)} />}
 
       {/* If agents tab is selected and empty */}
-      {showTabs && selectedTab === 'Agents' && noAgents && (
+      {showTabs && selectedTab === AGENTS && noAgents && (
         <ConsultTransferEmptyState message={getEmptyStateMessage(selectedTab, showTabs)} />
       )}
 
       {/* If queues tab is selected and empty */}
-      {showTabs && selectedTab === 'Queues' && noQueues && (
+      {showTabs && selectedTab === QUEUES && noQueues && (
         <ConsultTransferEmptyState message={getEmptyStateMessage(selectedTab, showTabs)} />
       )}
 
       {/* Render lists if not empty */}
       {showTabs &&
-        selectedTab === 'Agents' &&
+        selectedTab === AGENTS &&
         !noAgents &&
         renderList(
           filteredAgents,
@@ -114,7 +119,7 @@ const ConsultTransferPopoverComponent: React.FC<ConsultTransferPopoverComponentP
         )}
 
       {showTabs &&
-        selectedTab === 'Queues' &&
+        selectedTab === QUEUES &&
         !noQueues &&
         renderList(
           filteredQueues,
@@ -124,6 +129,16 @@ const ConsultTransferPopoverComponent: React.FC<ConsultTransferPopoverComponentP
             handleQueueSelection(id, name, onQueueSelect, logger);
           }
         )}
+      {showTabs && selectedTab === DIAL_NUMBER && (
+        <DialNumberUI
+          title="Dial Number"
+          buttonIcon={buttonIcon}
+          onButtonPress={(dialNumber) => {
+            onDialNumberSelect(dialNumber);
+          }}
+          logger={logger}
+        />
+      )}
     </div>
   );
 };

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

@@ -212,6 +212,7 @@ function CallControlComponent(props: CallControlComponentProps) {
                         queues={queues}
                         onAgentSelect={(agentId, agentName) => handleTargetSelect(agentId, agentName, 'agent')}
                         onQueueSelect={(queueId, queueName) => handleTargetSelect(queueId, queueName, 'queue')}
+                        onDialNumberSelect={(dialNumber) => handleTargetSelect(dialNumber, dialNumber, 'dialNumber')}
                         allowConsultToQueue={allowConsultToQueue}
                         logger={logger}
                       />

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

@@ -401,3 +401,16 @@ export const handleAudioRef = (
     });
   }
 };
+
+// Utility for consult-transfer-dial-number
+export const onInputDialNumber = (e, setValue) => {
+  setValue(e.currentTarget.value);
+};
+
+export const handleButtonPress = (logger, onButtonPress, value) => {
+  logger.info('Dial Number button pressed', {
+    module: 'consult-transfer-dial-number.tsx',
+    method: 'handleButtonPress',
+  });
+  onButtonPress(value);
+};

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

@@ -32,14 +32,12 @@ const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) =>
     consultAgentName,
     consultStartTimeStamp,
     endConsultCall,
-    consultAgentId,
     consultCompleted,
     consultTransfer,
     callControlClassName,
     callControlConsultClassName,
     startTimestamp,
     isEndConsultEnabled,
-    lastTargetType,
     controlVisibility,
     logger,
     isMuted,
@@ -221,7 +219,7 @@ const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) =>
             agentName={consultAgentName}
             startTimeStamp={consultStartTimeStamp}
             endConsultCall={endConsultCall}
-            onTransfer={() => consultTransfer(consultAgentId || currentTask.data.destAgentId, lastTargetType)}
+            onTransfer={consultTransfer}
             consultCompleted={consultCompleted}
             isAgentBeingConsulted={!consultAccepted}
             isEndConsultEnabled={isEndConsultEnabled}

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

@@ -15,7 +15,9 @@ export const SELECT = 'Select';
 export const SUBMIT_WRAP_UP = 'Submit & Wrap up';
 export const MUTE_CALL = 'Mute';
 export const UNMUTE_CALL = 'Unmute';
-
+export const DIAL_NUMBER = 'DialNumber';
+export const AGENTS = 'Agents';
+export const QUEUES = 'Queues';
 // CallControlCAD constants
 export const NO_CUSTOMER_NAME = 'No Customer Name';
 export const NO_CALLER_ID = 'No Caller ID';

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

@@ -281,11 +281,9 @@ export interface ControlProps {
   endConsultCall: () => void;
 
   /**
-   * Function to transfer the consult call to a destination.
-   * @param destination - The destination to transfer the consult call to.
-   * @param destinationType - The type of destination.
+   * Function to transfer the consult call to a already established consult.
    */
-  consultTransfer: (destination: string, destinationType: DestinationType) => void;
+  consultTransfer: () => void;
 
   /**
    * Flag to determine if the consult call is connecting.
@@ -492,6 +490,18 @@ export interface ConsultTransferListComponentProps {
   logger: ILogger;
 }
 
+/**
+ * Interface representing the properties for CallControlDialNumber component.
+ */
+export interface ConsultTransferDialNumberComponentProps {
+  title: string;
+  subtitle?: string;
+  buttonIcon: string;
+  onButtonPress: (dialNumber: string) => void;
+  className?: string;
+  logger: ILogger;
+}
+
 /**
  * Interface representing the properties for ConsultTransferPopover component.
  */
@@ -502,6 +512,7 @@ export interface ConsultTransferPopoverComponentProps {
   queues?: ContactServiceQueue[];
   onAgentSelect?: (agentId: string, agentName: string) => void;
   onQueueSelect?: (queueId: string, queueName: string) => void;
+  onDialNumberSelect?: (dialNumber: string) => void;
   allowConsultToQueue: boolean;
   logger: ILogger;
 }

packages/contact-center/cc-components/tests/components/task/CallControl/CallControlCustom/__snapshots__/consult-transfer-dial-number.snapshot.test.tsx.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DialNumberUI snapshot matches snapshot 1`] = `
+<div>
+  <div
+    class="consult-transfer-dial-number-container"
+  >
+    <mdc-input
+      class="consult-transfer-dial-number-input"
+      data-testid="dial-number-input"
+    />
+    <button
+      class="md-button-circle-wrapper consult-transfer-dial-number-btn md-button-simple-wrapper"
+      data-color="join"
+      data-disabled="false"
+      data-ghost="false"
+      data-inverted="false"
+      data-multiple-children="false"
+      data-outline="false"
+      data-shallow-disabled="false"
+      data-size="28"
+      data-testid="dial-number-btn"
+      type="button"
+    >
+      <mdc-icon />
+    </button>
+  </div>
+</div>
+`;