The IncomingTask component displays incoming contact center tasks (such as calls, chats, emails) and allows agents to take action on them. The component provides a clear interface for agents to:

• View incoming task details
• Accept incoming tasks (For Desktop calls only)
• Decline incoming tasks (For Desktop calls only)

Look and feel:

anchorImport

import { IncomingTask } from '@webex/cc-widgets';

anchorProps

anchorUsage Example

App level State Management

import React, { useState, useEffect } from 'react';
import { store } from '@webex/cc-widgets';

function App() {
  const [incomingTasks, setIncomingTasks] = useState([]);

  useEffect(() => {
    // Set up incoming task callback
    store.setIncomingTaskCb(({ task }) => {
      console.log('Incoming task:', task);
      setIncomingTasks((prevTasks) => [...prevTasks, task]);
      playNotificationSound(); // Check the Quickstart guide for sample code
    });

    return () => {
      store.setIncomingTaskCb(undefined);
    };
  }, []);
}

Widget

<div>
  {
    incomingTasks.map((task) => (
      <div key={task.data.interactionId} className="incoming-task-container">
        <IncomingTask
          incomingTask={task}
          onAccepted={() => onAccepted(task)}
          onRejected={() => onRejected(task)}
        />
      </div>
    ));
  }
</div>

Callbacks

const handleAccept = (task) => {
  console.log('Task accepted:', task);
};

const handleReject = (task) => {
  setIncomingTasks((prevTasks) => prevTasks.filter((t) => t.data.interactionId !== task.data.interactionId));
  console.log('Task rejected:', task);
};

Note:

1. task object in the IncomingTask can be passed by listening to store.setIncomingTaskCb(callback);. Please refer to the Quickstart Guide's Webex Contact Center Integration section.
2. State management needs to be done at the application level as shown above.

anchorFeatures

• Visual notifications for incoming tasks
• Accept/Reject action buttons for Desktop and Digital tasks

anchorConfiguration Notes

• The component requires the store to be initialized with a valid access token
• Agent must be in Available state to receive tasks
• Make sure to wrap the component with ThemeProvider and IconProvider from Momentum Design