Skip to main content

Create a agent state selector

A agent state selector is a select menu which lets an agent choose from a list of states thats the agent can be in such as "Available", "Busy", "Offline" etc. This is customizable from the AWS Connect Console.

Create a StateSelectorContainer.tsx file​

StateSelectorContainer.tsx
import React from "react";

import { getAgentStates, setAgentState } from "@neev/ccp-api";
import { StateSelector, useAgentState } from "@neev/ccp-react";

const StateSelectorContainer = () => {
  const agentState = useAgentState();
  return (
    <StateSelector
      agentState={agentState}
      setAgentState={setAgentState}
      agentStates={getAgentStates()}
      formControlClasses={{
        root: styles.select,
      }}
    />
  );
};

export default StateSelectorContainer;

Let's add it to the CCP.tsx file​

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

import ContactNotifier from "./ContactNotifier";
import StateSelectorContainer from "./StateSelectorContainer";

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>

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

That's it!​

You should have a working agent state selector.