Amazon Connect 3rd Party Application Integration

import json

def lambda_handler(event, context):
# TODO implement
CustomerPhoneInput = event['Details']['Parameters']['CustomerPhoneInput']
CustomePhoneReturn = CustomerPhoneInput.strip()
if(not CustomePhoneReturn.startswith("+")): CustomePhoneReturn = "+" + CustomePhoneReturn
print("CustomePhoneReturn=", CustomePhoneReturn)

# customer email address or phone number can be used for identifying customer record in the external application
ContactPhoneNumberOrEmail = CustomePhoneReturn
print("ContactPhoneNumberOrEmail=", ContactPhoneNumberOrEmail)

# Using 3rd party API query customer data and retrieve customer name for personal greeting
Name = 'Bob Brown'
print("Name=", Name)

# Using external application API query customer data and generated URL for screen pop based on the customer id
contactUrlPath = 'https://XXXXX'
print("contactUrlPath=", contactUrlPath)

# you can control screen pop layout
contactUrlWidth = '1500'
print("contactUrlWidth=", contactUrlWidth)

# you can control screen pop layout
contactUrlHeight = '1000'
print("contactUrlHeight=", contactUrlHeight)

return {
'statusCode': 200,
'CustomePhoneReturn': CustomePhoneReturn,
'Name': Name,
'ContactPhoneNumberOrEmail': ContactPhoneNumberOrEmail,
'contactUrlPath': contactUrlPath,
'contactUrlWidth': contactUrlWidth,
'contactUrlHeight': contactUrlHeight
}

import { useState, useEffect } from 'react';
import './App.css';
import Banner from './assets/3PAppsBanner.png'
import { AmazonConnectApp, AppContactScope } from "@amazon-connect/app";
import { VoiceClient } from "@amazon-connect/voice";
import { ContactClient, AgentClient, AgentStateChangedEventData, ContactStartingAcwEventData } from "@amazon-connect/contact";
import Cards from "@cloudscape-design/components/cards";
import Box from "@cloudscape-design/components/box";
import SpaceBetween from "@cloudscape-design/components/space-between";
import Button from "@cloudscape-design/components/button";
import ExpandableSection from "@cloudscape-design/components/expandable-section";
import Alert from "@cloudscape-design/components/alert";
import StatusIndicator from "@cloudscape-design/components/status-indicator";
import Link from "@cloudscape-design/components/link";

var permissions = [];

const connectApp = AmazonConnectApp.init({
onCreate: (event) => {
const { appInstanceId } = event.context;
const { contactScope } = event.context;
console.log('App initialized: ', appInstanceId);
console.log("EVENT", event)
console.log("length", event.context.appConfig.permissions.length)
permissions = event.context.appConfig.permissions;
},
onDestroy: (event) => {
console.log('App being destroyed');
},
});

function App() {

// INSTANTIATING STATE
const [agentName, setAgentName] = useState("");
const [agentState, setAgentState] = useState("");
const [agentARN, setAgentARN] = useState("");
const [agentRoutingProfile, setAgentRoutingProfile] = useState("");
const [agentChannelConcurrency, setAgentChannelConcurrency] = useState({CHAT:"", VOICE:"", TASK:""});
const [stateContactId, setStateContactId] = useState("");
const [attributes, setAttributes] = useState(null);
const [contactType, setContactType] = useState("");
const [contactStateDuration, setContactStateDuration] = useState("");
const [contactQueue, setContactQueue] = useState("");
const [contactInitialContactId, setContactInitialContactId] = useState("")
const [contactPhoneNumberOrEmail, setContactPhoneNumberOrEmail] = useState("")
const [contactPopupLink, setContactPopupLink] = useState("")
const [contactQueueTimestamp, setContactQueueTimestamp] = useState("");
const [acw, setACW] = useState(null)
const [firstAlertVisible, setFirstAlertVisible] = useState(true);
const [secondAlertVisible, setSecondAlertVisible] = useState(true);

// INSTANTIATING AGENT/CONTACT CLIENTS
const agentClient = new AgentClient();
const contactClient = new ContactClient();
const voiceClient = new VoiceClient();

var showPopupLink = "javascript:window.open('https://XXXXXXX')";

// AGENT EVENT LISTENERS
agentClient.onStateChanged(fetchAgentData);

// CONTACT EVENT LISTENERS
contactClient.onStartingAcw(fetchContactData);
contactClient.onMissed(fetchContactData);
contactClient.onDestroyed(fetchContactData);

// AGENT DATA HANDLER
async function fetchAgentData(AgentStateChangedEventData) {

const contactUrlHeightValue = '1000';

const contactUrlPath = await contactClient.getAttribute(AppContactScope.CurrentContactId, 'contactUrlPath');
const contactUrlPathValue = contactUrlPath.value;
console.log(">>>>>>>>>>contactUrlPath", contactUrlPathValue);

const contactUrlWidth = await contactClient.getAttribute(AppContactScope.CurrentContactId, 'contactUrlWidth');
const contactUrlWidthValue = contactUrlWidth.value;
console.log(">>>>>>>>>>contactUrlWidth", contactUrlWidthValue);

//const contactUrlHeight = await contactClient.getAttribute(AppContactScope.CurrentContactId, 'contactUrlHeight');
//const contactUrlHeightValue = contactUrlHeightvalue.value;
console.log(">>>>>>>>>>contactUrlHeight", contactUrlHeightValue);


const attributeContactPopupLink = "javascript:window.open('" + contactUrlPathValue + "','newwindow','width=" + contactUrlWidthValue + ",height=" + contactUrlHeightValue + "')";
console.log(">>>>>>>>>>attributeContactPopupLink", attributeContactPopupLink);
setContactPopupLink(attributeContactPopupLink);

// GET AGENT ARN
const arn = await agentClient.getARN();
setAgentARN(arn); // SET STATE

// GET AGENT NAME
const name = await agentClient.getName();
setAgentName(name) // SET STATE

// GET AGENT STATE
const currentState = await agentClient.getState();
setAgentState(currentState.state.name) // SET STATE

// SAMPLE RESPONSE ON getState
// {
// "state": {
// "agentStateARN":"arn:aws:connect:us-XXXXXXXXXXXXXXXXXXXXX",
// "type":"offline",
// "name":"Offline",
// "startTimestamp":"2024-01-11T22:31:33.270Z",
// "availabilityState":"Offline"
// }
// }

// GET AGENT ROUTING PROFILE
const routingProfile = await agentClient.getRoutingProfile();
setAgentRoutingProfile(routingProfile.routingProfile.name);

// GET AGENT CHANNEL CONCURRENCY
const channelConcurrency = await agentClient.getChannelConcurrency();
setAgentChannelConcurrency((prevState) => {
return({
...prevState,
VOICE: `${channelConcurrency.channelConcurrency.VOICE}`
});
});
setAgentChannelConcurrency((prevState) => {
return({
...prevState,
CHAT: channelConcurrency.channelConcurrency.CHAT
});
});
setAgentChannelConcurrency((prevState) => {
return({
...prevState,
TASK: channelConcurrency.channelConcurrency.TASK
});
});

// OTHER AGENT DATA
const extension = await agentClient.getExtension();
const dialableCountries = await agentClient.getDialableCountries();
}

// CONTACT DATA HANDLER
async function fetchContactData(ContactStartingAcwEventData) {
console.log("TEST", ContactStartingAcwEventData)
// try {
// const attributesList = await contactClient.getAttributes(AppContactScope.CurrentContactId, '*');
// setAttributes(attributesList)
// console.log("ATTRIBUTES", attributesList)

// }
// catch(err) {
// console.log("ERROR", err)
// }
// GET CONTACT ATTRIBUTES, * MEANS ALL
const attributesList = await contactClient.getAttributes(AppContactScope.CurrentContactId, '*');
setAttributes(attributesList)
console.log("ATTRIBUTES", attributesList)

const attributeContactPhoneNumberOrEmail = await contactClient.getAttribute(AppContactScope.CurrentContactId, 'ContactPhoneNumberOrEmail');
const attributeContactPhoneNumberOrEmailvalue = attributeContactPhoneNumberOrEmail.value;
console.log(">>>>>>>>>>attributeContactPhoneNumberOrEmail", attributeContactPhoneNumberOrEmailvalue);
setContactPhoneNumberOrEmail(attributeContactPhoneNumberOrEmailvalue);

//const contactUrlPathValue = 'https://XXXXXXXXXXXXXXXX';
//const contactUrlWidthValue = '1500';
const contactUrlHeightValue = '1000';

const contactUrlPath = await contactClient.getAttribute(AppContactScope.CurrentContactId, 'contactUrlPath');
const contactUrlPathValue = contactUrlPath.value;
console.log(">>>>>>>>>>contactUrlPath", contactUrlPathValue);

const contactUrlWidth = await contactClient.getAttribute(AppContactScope.CurrentContactId, 'contactUrlWidth');
const contactUrlWidthValue = contactUrlWidth.value;
console.log(">>>>>>>>>>contactUrlWidth", contactUrlWidthValue);

//const contactUrlHeight = await contactClient.getAttribute(AppContactScope.CurrentContactId, 'contactUrlHeight');
//const contactUrlHeightValue = contactUrlHeightvalue.value;
console.log(">>>>>>>>>>contactUrlHeight", contactUrlHeightValue);


const attributeContactPopupLink = "javascript:window.open('" + contactUrlPathValue + "','newwindow','width=" + contactUrlWidthValue + ",height=" + contactUrlHeightValue + "')";
console.log(">>>>>>>>>>attributeContactPopupLink", attributeContactPopupLink);
setContactPopupLink(attributeContactPopupLink);

// GET INTIAL CONTACT ID, ONLY WORKS ON TRANSFERS
const initialContactId = await contactClient.getInitialContactId(AppContactScope.CurrentContactId)
setContactInitialContactId(initialContactId);
console.log("ICI", initialContactId)

// GET TYPE
const type = await contactClient.getType(AppContactScope.CurrentContactId);
setContactType(type);
console.log("T", type)

// GET STATE DURATION
const stateDuration = await contactClient.getStateDuration(AppContactScope.CurrentContactId);
setContactStateDuration(stateDuration)
console.log("SD", stateDuration)

// GET QUEUE
const queue = await contactClient.getQueue(AppContactScope.CurrentContactId);
if (queue.queue.name == null) {
setContactQueue(`Agent Queue ${queue.queue.queueARN}`)
console.log("HERE QUEUE ARN", queue.queue.queueARN)
} else {
setContactQueue(queue.queue.name)
console.log("HERE2", queue.queue.name)
}

// GET QUEUE TIMESTAMP
const queueTimestamp = await contactClient.getQueueTimestamp(AppContactScope.CurrentContactId);
setContactQueueTimestamp(JSON.stringify(queueTimestamp))
console.log("QUEUE TIMESTAMP", queueTimestamp)
}

// OBTAIN CURRENT AGENT AND CURRENT CONTACT VALUES
useEffect(() => {
fetchAgentData()
fetchContactData()
}, []);


return (
<div className="App">

<img src={Banner} width="100%" align="center" alt="Third-party applications for Amazon Connect" />

{ permissions.length === 0 ?
<div className="Alert">
<Alert
dismissible
onDismiss={() => {
setFirstAlertVisible(false)
}}
visible={firstAlertVisible}
statusIconAriaLabel="Error"
type="error"
header="Permissions have not been set for this App Config. "
>
You must explicitly give third-party applications permissions to Amazon Connect data. <Link external href="https://docs.aws.amazon.com/connect/latest/adminguide/3p-apps-events-requests.html">Learn more here</Link>.
</Alert>
</div>
:
""
}

{ (permissions.length > 0 && permissions.length < 6) ?
<div className="Alert">
<Alert
dismissible
onDismiss={() => {
setSecondAlertVisible(false)
}}
visible={secondAlertVisible}
statusIconAriaLabel="Warning"
type="warning"
header="There are missing permissions for this App Config."
>
If your application attempts to subscribe to an event or make a request for data that it does not have permission for, your application may not function as intended. <Link external href="https://docs.aws.amazon.com/connect/latest/adminguide/3p-apps-events-requests.html">Learn more here</Link>.
</Alert>
</div>
:
""
}

<div className="Boxes">
<Cards
ariaLabels={{
itemSelectionLabel: (e, t) => `select ${t.name}`,
selectionGroupLabel: "Item selection"
}}
cardDefinition={{
header: item => (
(item.type === "N/A" || item.type === "No active contact" || item.type === "NONE")
?
<StatusIndicator type="error">Error</StatusIndicator>
:
<StatusIndicator>Success</StatusIndicator>
),
sections: [
{
id: "description",
header: "",
content: item => (<span style={{fontWeight:700}}> {item.description} </span>)
},
{
id: "type",
header: "",
content: item => item.type
}
]
}}
cardsPerRow={[
{ cards: 1 },
{ minWidth: 200, cards: 5 }
]}
items={[
{
name: "agentARN",
alt: "Agent ARN",
description: "Current agent ARN",
type: agentARN === "" ? "N/A" : agentARN
},
{
name: "agentName",
alt: "Agent Name",
description: "Current agent name",
type: agentName === "" ? "N/A" : agentName
},
{
name: "agentState",
alt: "Agent State",
description: "Current agent state",
type: agentState === "" ? "N/A" : agentState
},
{
name: "routingProfile",
alt: "Agent Routing Profile",
description: "Current agent routing profile",
type: agentRoutingProfile === "" ? "N/A" : agentRoutingProfile
},
{
name: "channelConcurrency",
alt: "Agent Channel Concurrency",
description: "Current agent channel concurrency limits",
type: agentChannelConcurrency.CHAT === "" ? "N/A" : `VOICE: ${agentChannelConcurrency.VOICE}, CHAT: ${agentChannelConcurrency.CHAT}, TASK: ${agentChannelConcurrency.TASK}`
},
{
name: "contactType",
alt: "Contact Type",
description: "Type of contact / channel",
type: contactType === "" ? "No active contact" : contactType
},
{
name: "contactQueue",
alt: "Contact Queue",
description: "Queue current contact was routed through",
type: contactQueue == "" ? "No active contact" : contactQueue
},
{
name: "Item 8",
alt: "Queue Timestamp",
description: "Timestamp associated with when the contact was placed in the queue",
type: contactQueueTimestamp === "" ? "No active contact" : (contactQueueTimestamp === "null" ? "Response received, but no timestamp available" : contactQueueTimestamp)
},
{
name: "Item 8",
alt: "State Duration",
description: "The duration of the contact state in milliseconds relative to local time",
type: contactStateDuration == "" ? "No active contact" : `${contactStateDuration} milliseconds`
},
{
name: "initialContactId",
alt: "Initial Contact ID",
description: "Initial contact ID, if transferred or none if this is not an internal Connect transfer",
type: contactInitialContactId === "" ? "No active contact" : (contactInitialContactId === null ? "NOT AN INTERNAL TRANSFER" : contactInitialContactId)
},
{
name: "contactPhoneNumberOrEmail",
alt: "contactPhoneNumberOrEmail",
description: "contactPhoneNumberOrEmail",
type: contactPhoneNumberOrEmail === "" ? "No active contact" : (contactPhoneNumberOrEmail === null ? "NOT AN INTERNAL TRANSFER" : contactPhoneNumberOrEmail)
}
]}
loadingText="Loading resources"
empty={
<Box
margin={{ vertical: "xs" }}
textAlign="center"
color="inherit"
>
<SpaceBetween size="m">
<b>No resources</b>
<Button>Create resource</Button>
</SpaceBetween>
</Box>
}
/>
</div>

{ attributes === null ?
<div>
</div>
:
<div className='contactAttributes'>
<ExpandableSection headerText="Contact Attributes">
{JSON.stringify(attributes)}
</ExpandableSection>
</div>
}

<br/><br/>
<a href={showPopupLink}>Customer CRM - main page</a>
<br/><br/>

<a href={contactPopupLink}>Customer CRM - when there is a call</a>

</div>
);
}

export default App;