import AppLayout from '@/layouts/app-layout'; import Heading from '@/components/heading'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; import { Label } from '@/components/ui/label'; import { Checkbox } from '@/components/ui/checkbox'; import { PhoneInput } from '@/components/calls/phone-input'; import { DialPad } from '@/components/calls/dial-pad'; import { CallControls } from '@/components/calls/call-controls'; import { CallTimer } from '@/components/calls/call-timer'; import { CallStatus } from '@/components/calls/call-status'; import { NumberSwitcher } from '@/components/NumberSwitcher'; import { useSoftphone } from '@/contexts/SoftphoneContext'; import { useState, useEffect } from 'react'; import { Phone, AlertCircle, PhoneIncoming, PhoneOff } from 'lucide-react'; import { Alert, AlertDescription } from '@/components/ui/alert'; import { Head } from '@inertiajs/react'; import { dashboard } from '@/routes'; import { type BreadcrumbItem } from '@/types'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: dashboard().url, }, { title: 'Softphone', href: '/softphone', }, ]; interface ManualCallPageProps { isConfigured: boolean; hasAssignedNumbers: boolean; } function ManualCallPage({ isConfigured, hasAssignedNumbers }: ManualCallPageProps) { const [isAccepting, setIsAccepting] = useState(false); const [isRejecting, setIsRejecting] = useState(false); // Use SoftphoneContext - synced with global widget const { phoneNumber, setPhoneNumber, enableRecording, setEnableRecording, callState, callMetadata, formattedDuration, deviceState, deviceError, callError, setCallError, incomingCall, selectedNumber, handleCall, handleEndCall, handleAcceptCall: contextAcceptCall, handleRejectCall: contextRejectCall, handleDigitClick, toggleMute, toggleHold, } = useSoftphone(); // Wrap context handlers with local loading states const handleAcceptCallWrapper = async () => { setIsAccepting(true); try { await contextAcceptCall(); } finally { setTimeout(() => setIsAccepting(false), 500); } }; const handleRejectCallWrapper = async () => { setIsRejecting(true); try { await contextRejectCall(); } finally { setTimeout(() => setIsRejecting(false), 500); } }; const isCallActive = ['dialing', 'ringing', 'connected'].includes(callState); // Dialer is enabled only when configured AND has assigned numbers AND device is ready const isDialerEnabled = isConfigured && hasAssignedNumbers && deviceState === 'registered'; const canMakeCall = isDialerEnabled && callState === 'idle' && phoneNumber && phoneNumber.toString().replace(/\D/g, '').length >= 10; // Determine what message to show let disabledMessage = ''; if (!isConfigured) { disabledMessage = 'Voice calling service is not configured. Please contact support.'; } else if (!hasAssignedNumbers) { disabledMessage = 'No phone numbers assigned to your account. Please request a phone number first.'; } return ( <>

{/* Dialer Card */}

Dialer Enter a phone number and click call

{/* Number Switcher */}

Calling From

{/* Configuration/Assignment Required Alert */} {!isDialerEnabled && disabledMessage && ( {disabledMessage} )} {/* Incoming Call Alert */} {incomingCall && !isAccepting && !isRejecting && callState === 'idle' && (

Incoming Call

Caller: {incomingCall.parameters.From || 'Unknown Number'}

)} {/* Call Accepting State */} {isAccepting && (

Connecting call...

)} {/* Call Rejected State */} {isRejecting && (

Call rejected

)} {/* Device Status - Only show if configured and has numbers */} {isConfigured && hasAssignedNumbers && deviceState !== 'registered' && (

{deviceState === 'registering' && 'Connecting to phone service...'} {deviceState === 'offline' && 'Device offline. Refresh page to reconnect.'} {deviceState === 'error' && `Device error: ${deviceError}`}

)} {/* Success Status - Only show if everything is ready */} {isDialerEnabled && (

Dialer connected and ready )} {/* Call Error Display */} {callError && (

{callError}

)} {/* Call Status */} {/* Call Timer (only when connected) */} {callState === 'connected' && ( )} {/* Phone Input */} setPhoneNumber(value || '')} disabled={isCallActive || !isDialerEnabled} label="Phone Number" /> {/* Dial Pad */} {/* Recording Toggle */}

setEnableRecording(checked as boolean)} disabled={isCallActive || !isDialerEnabled} /> Enable Recording

{/* Call/End Button */} {!isCallActive ? ( ) : ( )} {/* Call Information Card */} Call Information Current call details

{/* Status */}

Status

{callState}

Duration

{formattedDuration}

From

{callMetadata.fromNumber || selectedNumber?.formatted_number || '-'}

To

{callMetadata.toNumber || '-'}

Muted

{callMetadata.isMuted ? 'Yes' : 'No'}

On Hold

{callMetadata.isOnHold ? 'Yes' : 'No'}

Recording

{enableRecording && callState === 'connected' ? ( Recording ) : enableRecording ? ( Enabled ) : ( Disabled )}

Device

{deviceState}

); } // Set persistent layout to ensure SoftphoneProvider is available before component renders ManualCallPage.layout = (page: React.ReactNode) => ( {page} ); export default ManualCallPage;