From e1e5a649384171ff8945e91aaa315267eeafcb1d Mon Sep 17 00:00:00 2001 From: minfei Date: Sat, 20 Jan 2024 14:30:41 +0900 Subject: [PATCH] Availability basic logic --- package.json | 2 + pnpm-lock.yaml | 28 +++++++++++++ src/app/api/agent/route.ts | 58 +++++++++++++++++++++++++++ src/components/appbar/AgentStatus.tsx | 29 +++++++++++--- 4 files changed, 112 insertions(+), 5 deletions(-) create mode 100644 src/app/api/agent/route.ts diff --git a/package.json b/package.json index 080378a..21f3c7d 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "@tanstack/react-table": "^8.12.0", "@twilio/voice-sdk": "^2.10.1", "chart.js": "^4.4.1", + "axios": "^1.6.5", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "dayjs": "^1.11.10", @@ -37,6 +38,7 @@ "react": "^18", "react-chartjs-2": "^5.2.0", "react-dom": "^18", + "react-hot-toast": "^2.4.1", "tailwind-merge": "^2.2.0", "tailwindcss-animate": "^1.0.7", "twilio": "^4.20.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1b4a515..0fcffb7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -53,6 +53,9 @@ dependencies: '@twilio/voice-sdk': specifier: ^2.10.1 version: 2.10.1 + axios: + specifier: ^1.6.5 + version: 1.6.5 chart.js: specifier: ^4.4.1 version: 4.4.1 @@ -86,6 +89,9 @@ dependencies: react-dom: specifier: ^18 version: 18.2.0(react@18.2.0) + react-hot-toast: + specifier: ^2.4.1 + version: 2.4.1(csstype@3.1.3)(react-dom@18.2.0)(react@18.2.0) tailwind-merge: specifier: ^2.2.0 version: 2.2.0 @@ -3579,6 +3585,14 @@ packages: slash: 3.0.0 dev: true + /goober@2.1.14(csstype@3.1.3): + resolution: {integrity: sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==} + peerDependencies: + csstype: ^3.0.10 + dependencies: + csstype: 3.1.3 + dev: false + /gopd@1.0.1: resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==} dependencies: @@ -4533,6 +4547,20 @@ packages: scheduler: 0.23.0 dev: false + /react-hot-toast@2.4.1(csstype@3.1.3)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==} + engines: {node: '>=10'} + peerDependencies: + react: '>=16' + react-dom: '>=16' + dependencies: + goober: 2.1.14(csstype@3.1.3) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + transitivePeerDependencies: + - csstype + dev: false + /react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} diff --git a/src/app/api/agent/route.ts b/src/app/api/agent/route.ts new file mode 100644 index 0000000..6f3174b --- /dev/null +++ b/src/app/api/agent/route.ts @@ -0,0 +1,58 @@ + +import {NextResponse, NextRequest} from 'next/server'; + +interface Activity { + sid: string +} + +// export async function POST( +// request: Request, +// respones: Response +// ) { + +// const accountSid = process.env.TWILIO_ACCOUNT_SID; +// const authToken = process.env.TWILIO_AUTH_TOKEN; +// const client = require('twilio')(accountSid, authToken); + + +// client.taskrouter.v1.workspaces('WSd8100ebc4d3482bc08bd668af5f45c8a') +// .workers('WK1cfbadb8437bf21e5719d5b2358db96d') +// .update({ +// activitySid: 'WAd9d119cdf4ac2d6a37c372ea05029717' +// }) +// .then((worker: any) => console.log(worker.activityName)); + + + +// } + +// import { NextApiRequest, NextApiResponse } from 'next'; +// import twilio from 'twilio'; + +interface Activity { + sid: string; +} + +export async function POST( + request: NextRequest, + response: NextResponse +) { + const accountSid = process.env.TWILIO_ACCOUNT_SID; + const authToken = process.env.TWILIO_AUTH_TOKEN; + const client = require('twilio')(accountSid, authToken); + + try { + const worker = await client.taskrouter.v1.workspaces('WSd8100ebc4d3482bc08bd668af5f45c8a') + .workers('WK1cfbadb8437bf21e5719d5b2358db96d') + .update({ + activitySid: 'WA387cdc981874d6497a7658e6832d20a7' + }); + + console.log(worker.activityName); + return NextResponse.json(worker.activityName) + } catch (error) { + console.error('Failed to update worker:', error); + + } +} + diff --git a/src/components/appbar/AgentStatus.tsx b/src/components/appbar/AgentStatus.tsx index 5ce0249..6a25635 100644 --- a/src/components/appbar/AgentStatus.tsx +++ b/src/components/appbar/AgentStatus.tsx @@ -4,13 +4,32 @@ import React, {useState} from 'react'; import {Chip} from "@material-tailwind/react"; import {Button} from "../ui/button"; +import axios from 'axios'; +import toast from 'react-hot-toast'; + + const AgentStatus:React.FC = () => { - const [isAvailable, setIsAvailable] = useState(false); + const [activity, setActivity] = useState('Unavailable') + const toggleAvailability = async () => { - const newAvailability = !isAvailable; - setIsAvailable(newAvailability); + const newActivity = activity === 'Unavailable' ? 'Available' : 'Unavailable'; + setActivity(newActivity); + + //Request to API route + try { + // Send a request to your API route using axios + const response = await axios.post('/api/agent', { + newActivity, + }); + + console.log('Status updated to:', response.data.status); + } catch (error) { + console.error('Error updating status:', error); + // Optionally revert the status change in the UI if the API call fails + setActivity(activity); + } } return( @@ -18,7 +37,7 @@ const AgentStatus:React.FC = () => {
@@ -27,7 +46,7 @@ const AgentStatus:React.FC = () => {
Status
- {isAvailable? + {activity === 'Available'? <>