Create a contact notifier

A contact notifier is a popup which shows up when a contact trying to connect.
This contact can be a voice(call), chats or tasks.

Create a ContactNotifier.tsx file

ContactNotifier.tsx

import React from 'react';

import { acceptContact, clearContact, endContact, getCustomerName, rejectContact } from '@neev/ccp-api';
import { IncomingCard, MissedCard, OutboundCard, useContacts } from '@neev/ccp-react';
import { Logger } from '@neev/logger';

const log = new Logger('ContactNotifier');

const ContactNotifier = () => {
  const contacts = useContacts({
    contactStateTypes: [connect.ContactStateType.CONNECTING, connect.ContactStateType.ERROR],
    monitorEvents: [
      connect.ContactEvents.CONNECTING,
      connect.ContactEvents.CONNECTED,
      connect.ContactEvents.ENDED,
      connect.ContactEvents.DESTROYED,
      connect.ContactEvents.ERROR
    ]
  });

  if (contacts === undefined || contacts.length === 0) return null;

  // There can be only one incoming contact at a time
  const contact = contacts[0];
  if (contact.getState().type === connect.ContactStateType.CONNECTING) {
    if (contact.isInbound()) {
      return (
        <IncomingCard
          caller={getCustomerName(contact)}
          onAccept={async () => {
            await acceptContact(contact.getContactId());
          }}
          onReject={async () => await rejectContact(contact.getContactId())}
          contactType={contact.getType()}
        />
      );
    }
    return (
      <OutboundCard
        caller={getCustomerName(contact)}
        onCancel={async () => {
          await endContact(contact.getContactId());
        }}
        contactType={contact.getType()}
      />
    );
  }
  return (
    <MissedCard
      caller={getCustomerName(contact)}
      contactType={contact.getType()}
      onClear={async () => {
        try {
          await clearContact(contact.getContactId());
        } catch (error) {
          log.error('Could not clear contact', contact);
        }
      }}
    />
  );
};

export default ContactNotifier;

Let's add it to the CCP.tsx file

CCP.tsx

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

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}>

          <div className={styles.notifier}>
            <ContactNotifier />
          </div>

        </section>
      </CCPContainer>
    </section>
  );
};

That's it!

You should have a working incoming contact notifier.