Skip to main content

Showing list of contacts

Create a ContactNotifier.tsx file​

ContactNotifier.tsx
/**
 * The goal here is to create tabs that will show the call, chat, and task
 * contacts. There can only be one call contact at a time and we can always
 * make an outgoing call, therefore the first call the "Call" tab will always
 * be shown.
 * For the chats and tasks, we show a single contact per tab. (not implemented here)
 *
 * Also for the tab content, we do not wish to umount the tab content when the
 * user switches tabs, so we just use display: none to hide the tab content.
 */
import React, { useState } from 'react';

// Icons used in the tab bar
import { Phone as PhoneIcon } from '@mui/icons-material';
import { Tab, Tabs } from '@mui/material';

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

// We'll create this in the next step
import CallContainer from './CallContainer';

// The default selected tab, there is always a call tab which is used for
// either incoming call or to make outgoing call.
const CALL_TAB = 'call';

const ContactList = () => {
  // Currently selected tab
  const [selectedTab, setSelectedTab] = useState<string>(CALL_TAB);

  // useContacts returns a list of contacts. Which will update when the
  // monitorEvents are triggered. So when the contact are Connected, Move to After
  // Contact Work, Ended, or Destroyed, we will update the list of contacts.
  const contacts = useContacts(
    {
      contactStateTypes: [connect.ContactStateType.CONNECTED, connect.ContactStateType.ENDED],
      monitorEvents: [
        connect.ContactEvents.CONNECTED,
        connect.ContactEvents.ACW,
        connect.ContactEvents.ENDED,
        connect.ContactEvents.DESTROYED
      ]
    },
    // Optionally we can get the contact objects can do anything with them.
    // There we set the selected tab to the new contact or default to the call tab
    // which is always available.
    (newContact) => {
      newContact.onConnected(() =>
        setSelectedTab(
          newContact.getType() === connect.ContactType.VOICE ? CALL_TAB : newContact.getContactId()
        )
      );
    }
  );

  // Set the selected tab
  const handleChange = (event: React.SyntheticEvent, newValue: string) => {
    setSelectedTab(newValue);
  };

  // Get the call Contact, there can only be one call contact at a time.
  const callContact = contacts.find((contact) => contact.getType() === connect.ContactType.VOICE);

  return (
    <section>
      {/* The tabs, we show a single call tab */}
      <Tabs
        value={selectedTab}
        onChange={handleChange}
        aria-label="contact tabs"
        sx={{ paddingBlock: '0px', minHeight: 'unset', marginBottom: '16px' }}
      >
        <Tab
          sx={{ paddingBlock: '10px', minHeight: 'unset' }}
          value={CALL_TAB}
          iconPosition="start"
          icon={<PhoneIcon />}
          // Show the customer phone when we have a call or just show "Call"
          label={callContact ? getCustomerName(callContact) : 'Call'}
        />
      </Tabs>

      {/* The call tab content, we just modify the display and not unmount the component
        * when the user switches tabs to keep the state of the contact intact.
        */
      }
      <div style={{ display: selectedTab === CALL_TAB ? 'block' : 'none' }}>
        {* We will add the call contents in the next page*}
        Call tab content
      </div>

    </section>
  );
};

export default ContactList;

Let's add the contact notifier to the CCP file​

CCP.tsx
import { CCPContainer } from "@neev/ccp-react";

import ContactList from './ContactList';
import ContactNotifier from "./ContactNotifier";

export const CCP = () => {
  return (
    <section>
      <CCPContainer
        loggedOutComponent={<div>You are Logged out</div>}
        config={{
          ccpUrl: "https://modular-architecture.my.connect.aws/ccp-v2/",
          loginUrl: "https://modular-architecture.my.connect.aws/ccp-v2/",
          region: "us-east-1",
          loginPopup: true,
        }}
      >
        <section className={styles.ccpShell}>
          <StateSelectorContainer />
          <div className={styles.notifier}>
            <ContactNotifier />
          </div>
          <ContactList />
        </section>
      </CCPContainer>
    </section>
  );
};

Next Step​

Next we will create the call tab content.