115 lines
5.4 KiB
JavaScript
115 lines
5.4 KiB
JavaScript
"use client";
|
|
|
|
import { useState } from 'react';
|
|
import { useAuth } from '@/contexts/AuthContext';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
|
|
import { Phone } from 'lucide-react';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Input } from '@/components/ui/input';
|
|
import { DndToggle } from './dnd-toggle';
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
|
|
export function QuickActionsCard({ details, loading }) {
|
|
const { token } = useAuth();
|
|
const [isCalling, setIsCalling] = useState(false);
|
|
const [callMode, setCallMode] = useState('hold');
|
|
const [callerId, setCallerId] = useState('');
|
|
const [isCallMeDialogOpen, setIsCallMeDialogOpen] = useState(false);
|
|
|
|
const handleCallMe = async () => {
|
|
if (!token) return;
|
|
setIsCalling(true);
|
|
try {
|
|
let url = `${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001'}/extensions/me/callme?mode=${callMode}`;
|
|
if (callerId) {
|
|
url += `&callerId=${encodeURIComponent(callerId)}`;
|
|
}
|
|
await fetch(url, {
|
|
method: 'POST',
|
|
headers: { 'Authorization': `Bearer ${token}` }
|
|
});
|
|
setIsCallMeDialogOpen(false);
|
|
} catch (error) {
|
|
console.error("Failed to initiate call", error);
|
|
alert('Failed to initiate call.');
|
|
} finally {
|
|
setIsCalling(false);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<Card className="bg-gray-950/50 border-gray-800">
|
|
<CardHeader>
|
|
<Skeleton className="h-6 w-32" />
|
|
<Skeleton className="h-4 w-48 mt-2" />
|
|
</CardHeader>
|
|
<CardContent className="space-y-4 pt-4">
|
|
<Skeleton className="h-10 w-full" />
|
|
<Skeleton className="h-10 w-full" />
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Card className="bg-gray-950/50 border-gray-800">
|
|
<CardHeader>
|
|
<CardTitle>Quick Actions</CardTitle>
|
|
<CardDescription>Common actions for your extension.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<DndToggle />
|
|
<Dialog open={isCallMeDialogOpen} onOpenChange={setIsCallMeDialogOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button variant="outline" className="w-full"><Phone className="h-4 w-4 mr-2" /> Call Me Test</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="bg-gray-950 border-gray-800 text-white">
|
|
<DialogHeader>
|
|
<DialogTitle>Call Me Test</DialogTitle>
|
|
<DialogDescription className="text-gray-400">
|
|
Select a mode for the test call. This will call your extension.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="grid gap-4 py-4">
|
|
<div className="grid grid-cols-1 gap-2 sm:grid-cols-4 sm:items-center sm:gap-4">
|
|
<Label htmlFor="mode" className="text-sm font-medium sm:text-right">
|
|
Mode
|
|
</Label>
|
|
<Select value={callMode} onValueChange={setCallMode}>
|
|
<SelectTrigger className="sm:col-span-3">
|
|
<SelectValue placeholder="Select a mode" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="hold">Music on Hold</SelectItem>
|
|
<SelectItem value="echo">Echo Test</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="grid grid-cols-1 gap-2 sm:grid-cols-4 sm:items-center sm:gap-4">
|
|
<Label htmlFor="callerId" className="text-sm font-medium sm:text-right">
|
|
Caller ID
|
|
</Label>
|
|
<Input
|
|
id="callerId"
|
|
value={callerId}
|
|
onChange={(e) => setCallerId(e.target.value)}
|
|
className="sm:col-span-3"
|
|
placeholder={`Optional (e.g., ${details?.extensionId})`}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<Button onClick={handleCallMe} disabled={isCalling} className="w-full bg-blue-600 hover:bg-blue-700">
|
|
<Phone className="h-4 w-4 mr-2" />
|
|
{isCalling ? 'Calling...' : 'Initiate Call'}
|
|
</Button>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|