Add Connect tasks support

First let's create a TaskContainer file.

TaskContainer.tsx

import React, { useState } from 'react';

import { styled } from '@mui/material';

import { clearContact, endContact, getQuickConnectsWithoutPhones, transfer } from '@neev/ccp-api';
import {
  AfterContactWorkCard,
  ContactFooter,
  ContactHeader,
  EndButton,
  QuickConnectButton,
  QuickConnectsDialog,
  useQuickConnects
} from '@neev/ccp-react';
import { Logger } from '@neev/logger';

const log = new Logger('TaskContainer');

const Content = styled('div')({
  padding: '16px'
});

const TaskContainer = ({ contact }: { contact: connect.Contact }) => {
  const [isQuickConnectsOpen, showQuickConnects] = useState(false);
  const quickConnects = useQuickConnects();
  return (
    <section>
      <ContactHeader contact={contact} />
      {/* Showing the description with which the task was generated */}
      {/* Default CCP renders the same when the task request is accepted */}
      <Content>
        <strong>Description</strong> - {contact.getDescription()}
      </Content>
      {/* If contact has reached the state - ENDED */}
      {contact.getState().type === connect.ContactStateType.ENDED ? (
        <AfterContactWorkCard
          contactType={connect.ContactType.TASK}
          onClear={async () => {
            try {
              await clearContact(contact.getContactId());
            } catch (error) {
              log.error(error);
            }
          }}
        />
      ) : (
        <ContactFooter>
          <QuickConnectButton onClick={() => showQuickConnects(true)} />
          <EndButton label="End Task" onEndClick={() => endContact(contact.getContactId())} />
        </ContactFooter>
      )}
      <QuickConnectsDialog
        open={isQuickConnectsOpen}
        handleClose={() => showQuickConnects(false)}
        quickConnects={getQuickConnectsWithoutPhones(quickConnects)}
        onTransferClick={async (quickConnect) => {
          try {
            await transfer(contact, quickConnect);
          } catch (error) {
            log.error(error);
          }
        }}
      />
    </section>
  );
};

export default TaskContainer;

Add it to the ContactList

ContactList.tsx

import React, { useState } from 'react';

import { Chat as ChatIcon, Phone as PhoneIcon, Task as TaskIcon } from '@mui/icons-material';
import { Tab, Tabs } from '@mui/material';

import { getCustomerName } from '@neev/ccp-api';
import { useContacts } from '@neev/ccp-react';

import CallContainer from './CallContainer';
import ChatContainer from './ChatContainer';
import TaskContainer from './TaskContainer';

const CALL_TAB = 'call';

const ContactList = () => {
  // Index of the tab which is selected
  const [selectedTab, setSelectedTab] = useState<string>(CALL_TAB);

  const contacts = useContacts(
    {
      contactStateTypes: [connect.ContactStateType.CONNECTED, connect.ContactStateType.ENDED],
      monitorEvents: [
        connect.ContactEvents.CONNECTED,
        connect.ContactEvents.ACW,
        connect.ContactEvents.ENDED,
        connect.ContactEvents.DESTROYED
      ]
    },
    (newContact) => {
      newContact.onConnected(() =>
        setSelectedTab(
          newContact.getType() === connect.ContactType.VOICE ? CALL_TAB : newContact.getContactId()
        )
      );
    }
  );

  const handleChange = (event: React.SyntheticEvent, newValue: string) => {
    setSelectedTab(newValue);
  };

  // filtering out all the chat contacts as they will appear side by side
  const chatContacts = contacts.filter((contact) => contact.getType() === connect.ContactType.CHAT);

  // Contact object pertaining to a call (there can only be 1 call contact object at a time)
  const callContact = contacts.find((contact) => contact.getType() === connect.ContactType.VOICE);

  // All the contact objects which are associated to tasks
  const taskContacts = contacts.filter((contact) => contact.getType() === connect.ContactType.TASK);

  return (
    <section>
      <Tabs
        value={selectedTab}
        onChange={handleChange}
        aria-label="contact tabs"
        sx={{ paddingBlock: '0px', minHeight: 'unset', marginBottom: '16px' }}
      >
        <Tab
          sx={{ paddingBlock: '10px', minHeight: 'unset' }}
          label="Call"
          value={CALL_TAB}
          iconPosition="start"
          icon={<PhoneIcon />}
        />
        {/* Displaying all the active chat contact tab buttons */}
        {chatContacts.map((contact) => (
          <Tab
            sx={{ paddingBlock: '10px', minHeight: 'unset' }}
            icon={<ChatIcon />}
            iconPosition="start"
            label={getCustomerName(contact)}
            key={contact.getContactId()}
            value={contact.getContactId()}
          />
        ))}
        {/* Displaying all the active task contact tab buttons */}
        {taskContacts.map((contact) => (
          <Tab
            sx={{ paddingBlock: '10px', minHeight: 'unset' }}
            icon={<TaskIcon />}
            iconPosition="start"
            label={getCustomerName(contact)}
            key={contact.getContactId()}
            value={contact.getContactId()}
          />
        ))}
      </Tabs>

      {/* since there can only be one Call contact, there is only a single call tab button */}
      {/* If it is selected, then show the CallContainer */}
      <div style={{ display: selectedTab === CALL_TAB ? 'block' : 'none' }}>
        <CallContainer callContact={callContact} />
      </div>

      {/* Show ChatContainer view for all the chat objects which are available */}
      {chatContacts.map((contact) => {
        return (
          <div
            key={contact.getContactId()}
            style={{ display: contact.getContactId() === selectedTab ? 'block' : 'none' }}
          >
            <ChatContainer contact={contact} />
          </div>
        );
      })}

      {/* Show TaskContainer view for all the chat objects which are available */}
      {taskContacts.map((contact) => {
        return (
          <div
            key={contact.getContactId()}
            style={{ display: contact.getContactId() === selectedTab ? 'block' : 'none' }}
          >
            <TaskContainer contact={contact} />
          </div>
        );
      })}
    </section>
  );
};

export default ContactList;