fix(incoming-task): add-uts-for-incoming-task

packages/contact-center/cc-components/src/components/task/IncomingTask/incoming-task.tsx

@@ -1,66 +1,38 @@
 import React from 'react';
 import {IncomingTaskComponentProps, MEDIA_CHANNEL} from '../task.types';
 import Task from '../Task';
+import {extractIncomingTaskData} from './incoming-task.utils';
 
 const IncomingTaskComponent: React.FunctionComponent<IncomingTaskComponentProps> = (props) => {
-  const {incomingTask, isBrowser, accept, reject, logger} = props;
+  const {incomingTask, isBrowser, accept, reject} = props;
   if (!incomingTask) {
     return <></>; // hidden component
   }
 
-  //@ts-expect-error  To be fixed in SDK - https://jira-eng-sjc12.cisco.com/jira/browse/CAI-6762
-  const callAssociationDetails = incomingTask?.data?.interaction?.callAssociatedDetails;
-  const ani = callAssociationDetails?.ani;
-  const customerName = callAssociationDetails?.customerName;
-  const virtualTeamName = callAssociationDetails?.virtualTeamName;
-  const ronaTimeout = callAssociationDetails?.ronaTimeout ? Number(callAssociationDetails?.ronaTimeout) : null;
-  const startTimeStamp = incomingTask?.data?.interaction?.createdTimestamp;
-  const mediaType = incomingTask.data.interaction.mediaType;
-  const mediaChannel = incomingTask.data.interaction.mediaChannel;
-  const isTelephony = mediaType === MEDIA_CHANNEL.TELEPHONY;
-  const isSocial = mediaType === MEDIA_CHANNEL.SOCIAL;
-  const acceptText = !incomingTask.data.wrapUpRequired
-    ? isTelephony && !isBrowser
-      ? 'Ringing...'
-      : 'Accept'
-    : undefined;
-  const declineText = !incomingTask.data.wrapUpRequired && isTelephony && isBrowser ? 'Decline' : undefined;
+  // Extract all task data using the utility function
+  const taskData = extractIncomingTaskData(incomingTask, isBrowser);
 
   return (
     <Task
       interactionId={incomingTask.data.interactionId}
-      title={isSocial ? customerName : ani}
+      title={taskData.title}
       state=""
-      startTimeStamp={startTimeStamp}
+      startTimeStamp={taskData.startTimeStamp}
       isIncomingTask={true}
-      queue={virtualTeamName}
+      queue={taskData.virtualTeamName}
       acceptTask={() => {
-        logger.info(
-          `CC-Widgets: IncomingTask: accept clicked for task with interactionID: ${incomingTask.data.interactionId}`,
-          {
-            module: 'incoming-task.tsx',
-            method: 'acceptTask',
-          }
-        );
         accept(incomingTask);
       }}
       declineTask={() => {
-        logger.info(
-          `CC-Widgets: IncomingTask: decline clicked for task with interactionID: ${incomingTask.data.interactionId}`,
-          {
-            module: 'incoming-task.tsx',
-            method: 'declineTask',
-          }
-        );
         reject(incomingTask);
       }}
-      ronaTimeout={ronaTimeout}
-      acceptText={acceptText}
-      disableAccept={isTelephony && !isBrowser}
-      declineText={declineText}
+      ronaTimeout={taskData.ronaTimeout}
+      acceptText={taskData.acceptText}
+      disableAccept={taskData.disableAccept}
+      declineText={taskData.declineText}
       styles="task-list-hover"
-      mediaType={mediaType}
-      mediaChannel={mediaChannel}
+      mediaType={taskData.mediaType as MEDIA_CHANNEL}
+      mediaChannel={taskData.mediaChannel as MEDIA_CHANNEL}
     />
   );
 };

packages/contact-center/cc-components/src/components/task/IncomingTask/incoming-task.utils.tsx

@@ -0,0 +1,72 @@
+import {MEDIA_CHANNEL} from '../task.types';
+import {ITask} from '@webex/cc-store';
+
+export interface IncomingTaskData {
+  ani: string;
+  customerName: string;
+  virtualTeamName: string;
+  ronaTimeout: number | null;
+  startTimeStamp: number;
+  mediaType: string;
+  mediaChannel: string;
+  isTelephony: boolean;
+  isSocial: boolean;
+  acceptText: string | undefined;
+  declineText: string | undefined;
+  title: string;
+  disableAccept: boolean;
+}
+
+/**
+ * Extracts and processes all data needed for rendering an incoming task
+ * @param incomingTask - The incoming task object
+ * @param isBrowser - Whether the device type is browser
+ * @returns Processed task data with computed values
+ */
+export const extractIncomingTaskData = (incomingTask: ITask, isBrowser: boolean): IncomingTaskData => {
+  // Extract basic data from task
+  //@ts-expect-error  To be fixed in SDK - https://jira-eng-sjc12.cisco.com/jira/browse/CAI-6762
+  const callAssociationDetails = incomingTask?.data?.interaction?.callAssociatedDetails;
+  const ani = callAssociationDetails?.ani;
+  const customerName = callAssociationDetails?.customerName;
+  const virtualTeamName = callAssociationDetails?.virtualTeamName;
+  const ronaTimeout = callAssociationDetails?.ronaTimeout ? Number(callAssociationDetails?.ronaTimeout) : null;
+  const startTimeStamp = incomingTask?.data?.interaction?.createdTimestamp;
+  const mediaType = incomingTask.data.interaction.mediaType;
+  const mediaChannel = incomingTask.data.interaction.mediaChannel;
+
+  // Compute media type flags
+  const isTelephony = mediaType === MEDIA_CHANNEL.TELEPHONY;
+  const isSocial = mediaType === MEDIA_CHANNEL.SOCIAL;
+
+  // Compute button text based on conditions
+  const acceptText = !incomingTask.data.wrapUpRequired
+    ? isTelephony && !isBrowser
+      ? 'Ringing...'
+      : 'Accept'
+    : undefined;
+
+  const declineText = !incomingTask.data.wrapUpRequired && isTelephony && isBrowser ? 'Decline' : undefined;
+
+  // Compute title based on media type
+  const title = isSocial ? customerName : ani;
+
+  // Compute disable state for accept button
+  const disableAccept = isTelephony && !isBrowser;
+
+  return {
+    ani,
+    customerName,
+    virtualTeamName,
+    ronaTimeout,
+    startTimeStamp,
+    mediaType,
+    mediaChannel,
+    isTelephony,
+    isSocial,
+    acceptText,
+    declineText,
+    title,
+    disableAccept,
+  };
+};

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

@@ -3,11 +3,11 @@ import {ButtonPill, ListItemBase, ListItemBaseSection, Text} from '@momentum-ui/
 import {Avatar, Brandvisual, Tooltip} from '@momentum-design/components/dist/react';
 import {PressEvent} from '@react-types/shared';
 import TaskTimer from '../TaskTimer';
-import {getMediaTypeInfo} from '../../../utils';
 import type {MEDIA_CHANNEL as MediaChannelType} from '../task.types';
+import {extractTaskComponentData, getTaskListItemClasses} from './task.utils';
 import './styles.scss';
 
-interface TaskProps {
+export interface TaskProps {
   interactionId?: string;
   title?: string;
   state?: string;
@@ -46,50 +46,44 @@ const Task: React.FC<TaskProps> = ({
   mediaType,
   mediaChannel,
 }) => {
-  const capitalizeFirstWord = (str: string) => {
-    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';
-  };
+  // Extract all computed data using the utility function
+  const taskData = extractTaskComponentData({
+    mediaType,
+    mediaChannel,
+    isIncomingTask,
+    interactionId,
+    state,
+    queue,
+    ronaTimeout,
+    startTimeStamp,
+  });
+
   const renderTitle = () => {
     if (!title) return null;
 
     const textComponent = (
       <Text
         tagName="span"
         type={selected ? 'body-large-bold' : 'body-large-medium'}
-        className={getTitleClassName()}
-        id={isNonVoiceMedia ? tooltipTriggerId : undefined}
+        className={taskData.titleClassName}
+        id={taskData.isNonVoiceMedia ? taskData.tooltipTriggerId : undefined}
       >
         {title}
       </Text>
     );
 
-    if (isNonVoiceMedia) {
+    if (taskData.isNonVoiceMedia) {
       return (
         <>
           {textComponent}
           <Tooltip
             color="contrast"
             delay="0,0"
-            id={tooltipId}
+            id={taskData.tooltipId}
             placement="top-start"
             offset={4}
             tooltip-type="description"
-            triggerID={tooltipTriggerId}
+            triggerID={taskData.tooltipTriggerId}
             className="task-tooltip"
           >
             {title}
@@ -103,48 +97,66 @@ const Task: React.FC<TaskProps> = ({
 
   return (
     <ListItemBase
-      className={`task-list-item ${selected ? 'task-list-item--selected' : ''} ${styles}`}
+      className={getTaskListItemClasses(selected, styles)}
       onPress={onTaskSelect ? onTaskSelect : undefined}
       id={interactionId}
     >
       <ListItemBaseSection position="start">
-        {currentMediaType.isBrandVisual ? (
+        {taskData.currentMediaType.isBrandVisual ? (
           <div className="brand-visual-background">
-            <Brandvisual name={currentMediaType.iconName} className={currentMediaType.className} />
+            <Brandvisual name={taskData.currentMediaType.iconName} className={taskData.currentMediaType.className} />
           </div>
         ) : (
-          <Avatar icon-name={currentMediaType.iconName} className={currentMediaType.className} />
+          <Avatar icon-name={taskData.currentMediaType.iconName} className={taskData.currentMediaType.className} />
         )}
       </ListItemBaseSection>
 
       <ListItemBaseSection position="fill">
         <section className="task-details">
           {renderTitle()}
-          {state && !isIncomingTask && (
-            <Text tagName="span" type="body-midsize-regular" className="task-text">
-              {capitalizeFirstWord(state)}
+          {taskData.shouldShowState && (
+            <Text
+              tagName="span"
+              type="body-midsize-regular"
+              className="task-text"
+              data-testid={`${interactionId}-state`}
+            >
+              {taskData.capitalizedState}
             </Text>
           )}
 
-          {queue && isIncomingTask && (
-            <Text tagName="span" type="body-midsize-regular" className="task-text">
-              {capitalizeFirstWord(queue)}
+          {taskData.shouldShowQueue && (
+            <Text
+              tagName="span"
+              type="body-midsize-regular"
+              className="task-text"
+              data-testid={`${interactionId}-queue`}
+            >
+              {taskData.capitalizedQueue}
             </Text>
           )}
 
           {/* Handle Time should render if it's an incoming call without ronaTimeout OR if it's not an incoming call */}
-          {(isIncomingTask && !ronaTimeout) || !isIncomingTask
-            ? startTimeStamp && (
-                <Text tagName="span" type="body-midsize-regular" className="task-text">
-                  Handle Time: {'  '}
-                  <TaskTimer startTimeStamp={startTimeStamp} />
-                </Text>
-              )
-            : null}
+          {taskData.shouldShowHandleTime && (
+            <Text
+              tagName="span"
+              type="body-midsize-regular"
+              className="task-text"
+              data-testid={`${interactionId}-handle-time`}
+            >
+              Handle Time: {'  '}
+              <TaskTimer startTimeStamp={startTimeStamp} />
+            </Text>
+          )}
 
           {/* Time Left should render if it's an incoming call with ronaTimeout */}
-          {isIncomingTask && ronaTimeout && (
-            <Text tagName="span" type="body-midsize-regular" className="task-text">
+          {taskData.shouldShowTimeLeft && (
+            <Text
+              tagName="span"
+              type="body-midsize-regular"
+              className="task-text"
+              data-testid={`${interactionId}-time-left`}
+            >
               Time Left: {'  '}
               <TaskTimer countdown={true} ronaTimeout={ronaTimeout} />
             </Text>