mirror of
https://dev.azure.com/globalhealthx/EMR/_git/helix-engage
synced 2026-05-18 20:08:19 +00:00
saridsa2
7e5d910197
Shows prominent banner on active-call-card when network drops: - Offline: red banner "Network connection lost — call may have dropped" - Unstable: yellow banner "Network unstable — call quality may be affected" Uses existing useNetworkStatus hook. Banner disappears when network recovers. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
576 lines
32 KiB
TypeScript
576 lines
32 KiB
TypeScript
import { useState, useRef, useEffect, useMemo } from 'react';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import {
|
|
faPhone, faPhoneHangup, faMicrophone, faMicrophoneSlash,
|
|
faPause, faPlay, faCalendarPlus, faPlus, faPenToSquare,
|
|
faPhoneArrowRight, faRecordVinyl, faClipboardQuestion,
|
|
} from '@fortawesome/pro-duotone-svg-icons';
|
|
import { useData } from '@/providers/data-provider';
|
|
import { Button } from '@/components/base/buttons/button';
|
|
import { Badge } from '@/components/base/badges/badges';
|
|
import { useSetAtom } from 'jotai';
|
|
import { sipCallStateAtom, sipCallerNumberAtom, sipCallUcidAtom } from '@/state/sip-state';
|
|
import { setOutboundPending } from '@/state/sip-manager';
|
|
import { useSip } from '@/providers/sip-provider';
|
|
import { DispositionModal } from './disposition-modal';
|
|
import type { CallAction } from './disposition-modal';
|
|
import { Dialog, Modal, ModalOverlay } from '@/components/application/modals/modal';
|
|
import { AppointmentForm } from './appointment-form';
|
|
import { TransferDialog } from './transfer-dialog';
|
|
import { EnquiryForm } from './enquiry-form';
|
|
import { formatPhone, formatShortDate } from '@/lib/format';
|
|
import { apiClient } from '@/lib/api-client';
|
|
import { useAuth } from '@/providers/auth-provider';
|
|
import { useAgentState } from '@/hooks/use-agent-state';
|
|
import { useNetworkStatus } from '@/hooks/use-network-status';
|
|
import { cx } from '@/utils/cx';
|
|
import { notify } from '@/lib/toast';
|
|
import type { Lead, CallDisposition } from '@/types/entities';
|
|
|
|
interface ActiveCallCardProps {
|
|
lead: Lead | null;
|
|
callerPhone: string;
|
|
missedCallId?: string | null;
|
|
onCallComplete?: () => void;
|
|
}
|
|
|
|
const formatDuration = (seconds: number): string => {
|
|
const m = Math.floor(seconds / 60);
|
|
const s = seconds % 60;
|
|
return `${m}:${s.toString().padStart(2, '0')}`;
|
|
};
|
|
|
|
export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete }: ActiveCallCardProps) => {
|
|
const { user } = useAuth();
|
|
const { callState, callDuration, callUcid, isMuted, isOnHold, answer, hangup, toggleMute, toggleHold } = useSip();
|
|
const networkQuality = useNetworkStatus();
|
|
const setCallState = useSetAtom(sipCallStateAtom);
|
|
const setCallerNumber = useSetAtom(sipCallerNumberAtom);
|
|
const setCallUcid = useSetAtom(sipCallUcidAtom);
|
|
const [appointmentOpen, setAppointmentOpen] = useState(false);
|
|
// Which existing appointment is being edited (null = creating a new one).
|
|
// The Book Appt drawer shows pills: [+ New] + one per upcoming appointment.
|
|
// Clicking Edit on a pill sets this; clicking + New clears it.
|
|
const [editingApptId, setEditingApptId] = useState<string | null>(null);
|
|
const [transferOpen, setTransferOpen] = useState(false);
|
|
const [recordingPaused, setRecordingPaused] = useState(false);
|
|
const [enquiryOpen, setEnquiryOpen] = useState(false);
|
|
const [dispositionOpen, setDispositionOpen] = useState(false);
|
|
const [callerDisconnected, setCallerDisconnected] = useState(false);
|
|
// Actions actually recorded during this call. Drives the disposition
|
|
// modal's priority-lock: if the agent booked an appointment and logged
|
|
// an enquiry, both badges render and the primary disposition is
|
|
// locked to APPOINTMENT_BOOKED.
|
|
const [actionsTaken, setActionsTaken] = useState<CallAction[]>([]);
|
|
const addActions = (...newActions: CallAction[]) => {
|
|
setActionsTaken((prev) => {
|
|
const next = new Set(prev);
|
|
for (const a of newActions) next.add(a);
|
|
return Array.from(next);
|
|
});
|
|
};
|
|
|
|
// Upcoming appointments for this caller (if returning patient) — drives
|
|
// the pill row above AppointmentForm so the agent can edit existing
|
|
// bookings in addition to creating new ones.
|
|
const { appointments, refresh } = useData();
|
|
const leadAppointments = useMemo(() => {
|
|
const patientId = (lead as any)?.patientId;
|
|
if (!patientId) return [];
|
|
const now = Date.now();
|
|
return appointments
|
|
.filter((a) =>
|
|
a.patientId === patientId
|
|
&& a.appointmentStatus !== 'CANCELLED'
|
|
&& a.appointmentStatus !== 'NO_SHOW'
|
|
&& a.appointmentStatus !== 'COMPLETED'
|
|
// Only future appointments make sense as reschedule targets.
|
|
// Past ones can't be edited — they already happened.
|
|
&& a.scheduledAt
|
|
&& new Date(a.scheduledAt).getTime() >= now,
|
|
)
|
|
.sort((a, b) => new Date(a.scheduledAt ?? '').getTime() - new Date(b.scheduledAt ?? '').getTime());
|
|
}, [appointments, lead]);
|
|
|
|
const editingAppt = useMemo(
|
|
() => (editingApptId ? leadAppointments.find((a) => a.id === editingApptId) ?? null : null),
|
|
[leadAppointments, editingApptId],
|
|
);
|
|
|
|
// Pending pill click awaiting the reschedule-confirm modal. When the
|
|
// agent clicks a pill, we store the appointment id here + open the modal.
|
|
// Yes → promote to editingApptId in edit mode. No → promote in view mode.
|
|
const [pendingApptId, setPendingApptId] = useState<string | null>(null);
|
|
const [apptMode, setApptMode] = useState<'edit' | 'view'>('edit');
|
|
|
|
const agentConfig = localStorage.getItem('helix_agent_config');
|
|
const agentIdForState = agentConfig ? (() => { try { return JSON.parse(agentConfig).ozonetelAgentId; } catch { return null; } })() : null;
|
|
const { supervisorPresence } = useAgentState(agentIdForState);
|
|
|
|
const callDirectionRef = useRef(callState === 'ringing-out' ? 'OUTBOUND' : 'INBOUND');
|
|
const wasAnsweredRef = useRef(callState === 'active');
|
|
|
|
useEffect(() => {
|
|
console.log(`[ACTIVE-CALL-CARD] Mounted: state=${callState} direction=${callDirectionRef.current} ucid=${callUcid ?? 'none'} lead=${lead?.id ?? 'none'} phone=${callerPhone}`);
|
|
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
// Sync UCID to localStorage so sendBeacon can fire auto-dispose on page refresh.
|
|
// Cleared on disposition submit (handleDisposition below) or when call resets to idle.
|
|
useEffect(() => {
|
|
if (callUcid) {
|
|
localStorage.setItem('helix_active_ucid', callUcid);
|
|
}
|
|
return () => {
|
|
// Don't clear on unmount if disposition hasn't fired — the
|
|
// beforeunload handler in SipProvider needs it
|
|
};
|
|
}, [callUcid]);
|
|
|
|
// Detect caller disconnect: call was active and ended without agent pressing End
|
|
useEffect(() => {
|
|
if (wasAnsweredRef.current && !dispositionOpen && (callState === 'ended' || callState === 'failed')) {
|
|
setCallerDisconnected(true);
|
|
setDispositionOpen(true);
|
|
}
|
|
}, [callState, dispositionOpen]);
|
|
|
|
const firstName = lead?.contactName?.firstName ?? '';
|
|
const lastName = lead?.contactName?.lastName ?? '';
|
|
const fullName = `${firstName} ${lastName}`.trim();
|
|
const phone = lead?.contactPhone?.[0];
|
|
const phoneDisplay = phone ? formatPhone(phone) : callerPhone || 'Unknown';
|
|
|
|
const handleDisposition = async (disposition: CallDisposition, notes: string) => {
|
|
// Hangup if still connected
|
|
if (callState === 'active' || callState === 'ringing-out' || callState === 'ringing-in') {
|
|
hangup();
|
|
}
|
|
|
|
// Submit disposition to sidecar
|
|
if (callUcid) {
|
|
const agentCfg = JSON.parse(localStorage.getItem('helix_agent_config') ?? '{}');
|
|
const disposePayload = {
|
|
ucid: callUcid,
|
|
disposition,
|
|
agentId: agentCfg.ozonetelAgentId,
|
|
callerPhone,
|
|
direction: callDirectionRef.current,
|
|
durationSec: callDuration,
|
|
leadId: lead?.id ?? null,
|
|
leadName: fullName || null,
|
|
notes,
|
|
missedCallId: missedCallId ?? undefined,
|
|
};
|
|
console.log('[DISPOSE] Sending disposition:', JSON.stringify(disposePayload));
|
|
apiClient.post('/api/ozonetel/dispose', disposePayload)
|
|
.then((res) => console.log('[DISPOSE] Response:', JSON.stringify(res)))
|
|
.catch((err) => console.error('[DISPOSE] Failed:', err));
|
|
} else {
|
|
console.warn('[DISPOSE] No callUcid — skipping disposition');
|
|
}
|
|
|
|
// Follow-ups are created by the enquiry form (where the agent picks
|
|
// the date + context). No second creation here — that was causing
|
|
// duplicate entries on every FOLLOW_UP_SCHEDULED call.
|
|
|
|
// Clear persisted UCID — disposition was submitted, no need for sendBeacon fallback
|
|
localStorage.removeItem('helix_active_ucid');
|
|
|
|
notify.success('Call Logged', `Disposition: ${disposition.replace(/_/g, ' ').toLowerCase()}`);
|
|
handleReset();
|
|
};
|
|
|
|
const handleAppointmentSaved = (outcome: 'BOOKED' | 'RESCHEDULED' | 'CANCELLED') => {
|
|
setAppointmentOpen(false);
|
|
refresh();
|
|
// Invalidate sidecar's caller context cache so AI gets fresh appointment data
|
|
if (lead?.id) {
|
|
apiClient.post('/api/caller/invalidate-context', { leadId: lead.id }, { silent: true }).catch(() => {});
|
|
}
|
|
if (outcome === 'RESCHEDULED') {
|
|
addActions('RESCHEDULE');
|
|
notify.success('Appointment Rescheduled');
|
|
} else if (outcome === 'CANCELLED') {
|
|
addActions('CANCEL');
|
|
notify.success('Appointment Cancelled');
|
|
} else {
|
|
addActions('APPOINTMENT');
|
|
notify.success('Appointment Booked', 'Payment link will be sent to the patient');
|
|
}
|
|
};
|
|
|
|
const handleReset = () => {
|
|
setDispositionOpen(false);
|
|
setCallerDisconnected(false);
|
|
setActionsTaken([]);
|
|
setCallState('idle');
|
|
setCallerNumber(null);
|
|
setCallUcid(null);
|
|
setOutboundPending(false);
|
|
onCallComplete?.();
|
|
};
|
|
|
|
// Outbound ringing
|
|
if (callState === 'ringing-out') {
|
|
return (
|
|
<div className="rounded-xl bg-brand-primary p-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="relative">
|
|
<div className="absolute inset-0 animate-pulse rounded-full bg-brand-solid opacity-20" />
|
|
<div className="relative flex size-10 items-center justify-center rounded-full bg-brand-solid">
|
|
<FontAwesomeIcon icon={faPhone} className="size-4 text-white" />
|
|
</div>
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-xs font-bold uppercase tracking-wider text-brand-secondary">Calling...</p>
|
|
<p className="text-lg font-bold text-primary">{fullName || phoneDisplay}</p>
|
|
{fullName && <p className="text-sm text-secondary">{phoneDisplay}</p>}
|
|
</div>
|
|
</div>
|
|
{/* Cancel button removed per product — risk: agent can't abort
|
|
a misdialled outbound call before the customer answers.
|
|
<Button size="sm" color="primary-destructive" onClick={() => { hangup(); handleReset(); }}>Cancel</Button> */}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Inbound ringing
|
|
if (callState === 'ringing-in') {
|
|
return (
|
|
<div className="rounded-xl bg-brand-primary p-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="relative">
|
|
<div className="absolute inset-0 animate-ping rounded-full bg-brand-solid opacity-20" />
|
|
<div className="relative flex size-10 items-center justify-center rounded-full bg-brand-solid">
|
|
<FontAwesomeIcon icon={faPhone} className="size-4 text-white animate-bounce" />
|
|
</div>
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-xs font-bold uppercase tracking-wider text-brand-secondary">Incoming Call</p>
|
|
<p className="text-lg font-bold text-primary">{fullName || phoneDisplay}</p>
|
|
{fullName && <p className="text-sm text-secondary">{phoneDisplay}</p>}
|
|
</div>
|
|
</div>
|
|
<div className="mt-3 flex gap-2">
|
|
<Button size="sm" color="primary" onClick={answer}>Answer</Button>
|
|
{/* Decline hidden per product — reject returns call to Ozonetel queue */}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Unanswered call (ringing → ended without ever reaching active)
|
|
if (!wasAnsweredRef.current && (callState === 'ended' || callState === 'failed')) {
|
|
return (
|
|
<div className="rounded-xl border border-secondary bg-primary p-4 text-center">
|
|
<FontAwesomeIcon icon={faPhoneHangup} className="size-6 text-fg-quaternary mb-2" />
|
|
<p className="text-sm font-semibold text-primary">{fullName || 'Missed Call'}</p>
|
|
<p className="text-xs text-tertiary mt-1">{phoneDisplay} — not answered</p>
|
|
<Button size="sm" color="secondary" className="mt-3" onClick={handleReset}>
|
|
Back to Worklist
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Active call
|
|
if (callState === 'active' || dispositionOpen) {
|
|
wasAnsweredRef.current = true;
|
|
return (
|
|
<>
|
|
<div className={cx('flex flex-col rounded-xl border border-brand bg-primary overflow-hidden', (appointmentOpen || enquiryOpen || transferOpen) && 'flex-1 min-h-0')}>
|
|
{/* Network loss alert — prominent banner during active call */}
|
|
{networkQuality !== 'good' && (
|
|
<div className={cx(
|
|
'shrink-0 px-4 py-2 text-xs font-medium text-center',
|
|
networkQuality === 'offline'
|
|
? 'bg-error-solid text-white'
|
|
: 'bg-warning-secondary text-warning-primary',
|
|
)}>
|
|
{networkQuality === 'offline'
|
|
? 'Network connection lost — call may have dropped'
|
|
: 'Network unstable — call quality may be affected'}
|
|
</div>
|
|
)}
|
|
|
|
{/* Pinned: caller info + controls */}
|
|
<div className="shrink-0 p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex size-10 items-center justify-center rounded-full bg-success-solid">
|
|
<FontAwesomeIcon icon={faPhone} className="size-4 text-white" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-bold text-primary">{fullName || phoneDisplay}</p>
|
|
{fullName && <p className="text-xs text-tertiary">{phoneDisplay}</p>}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{supervisorPresence === 'whisper' && (
|
|
<Badge size="sm" color="blue" type="pill-color">Supervisor coaching</Badge>
|
|
)}
|
|
{supervisorPresence === 'barge' && (
|
|
<Badge size="sm" color="brand" type="pill-color">Supervisor on call</Badge>
|
|
)}
|
|
<Badge size="md" color="success" type="pill-color">{formatDuration(callDuration)}</Badge>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Call controls */}
|
|
<div className="mt-3 flex items-center gap-1.5 flex-wrap">
|
|
<button
|
|
onClick={toggleMute}
|
|
title={isMuted ? 'Unmute' : 'Mute'}
|
|
className={cx(
|
|
'flex size-8 items-center justify-center rounded-lg transition duration-100 ease-linear',
|
|
isMuted ? 'bg-error-solid text-white' : 'bg-secondary text-fg-quaternary hover:bg-secondary_hover hover:text-fg-secondary',
|
|
)}
|
|
>
|
|
<FontAwesomeIcon icon={isMuted ? faMicrophoneSlash : faMicrophone} className="size-3.5" />
|
|
</button>
|
|
<button
|
|
onClick={toggleHold}
|
|
title={isOnHold ? 'Resume' : 'Hold'}
|
|
className={cx(
|
|
'flex size-8 items-center justify-center rounded-lg transition duration-100 ease-linear',
|
|
isOnHold ? 'bg-warning-solid text-white' : 'bg-secondary text-fg-quaternary hover:bg-secondary_hover hover:text-fg-secondary',
|
|
)}
|
|
>
|
|
<FontAwesomeIcon icon={isOnHold ? faPlay : faPause} className="size-3.5" />
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
const action = recordingPaused ? 'unPause' : 'pause';
|
|
if (callUcid) apiClient.post('/api/ozonetel/recording', { ucid: callUcid, action }).catch(() => {});
|
|
setRecordingPaused(!recordingPaused);
|
|
}}
|
|
title={recordingPaused ? 'Resume Recording' : 'Pause Recording'}
|
|
className={cx(
|
|
'flex size-8 items-center justify-center rounded-lg transition duration-100 ease-linear',
|
|
recordingPaused ? 'bg-error-solid text-white' : 'bg-secondary text-fg-quaternary hover:bg-secondary_hover hover:text-fg-secondary',
|
|
)}
|
|
>
|
|
<FontAwesomeIcon icon={faRecordVinyl} className="size-3.5" />
|
|
</button>
|
|
|
|
<div className="w-px h-6 bg-secondary mx-0.5" />
|
|
|
|
<Button size="sm" color={appointmentOpen ? 'primary' : 'secondary'}
|
|
iconLeading={({ className, ...rest }: any) => <FontAwesomeIcon icon={faCalendarPlus} className={className} {...rest} />}
|
|
isDisabled={!wasAnsweredRef.current}
|
|
onClick={() => { setAppointmentOpen(!appointmentOpen); setEnquiryOpen(false); setTransferOpen(false); }}>
|
|
{leadAppointments.length > 0 ? 'New / Reschedule Appt' : 'New Appt'}
|
|
</Button>
|
|
<Button size="sm" color={enquiryOpen ? 'primary' : 'secondary'}
|
|
iconLeading={({ className, ...rest }: any) => <FontAwesomeIcon icon={faClipboardQuestion} className={className} {...rest} />}
|
|
isDisabled={!wasAnsweredRef.current}
|
|
onClick={() => { setEnquiryOpen(!enquiryOpen); setAppointmentOpen(false); setTransferOpen(false); }}>Enquiry</Button>
|
|
<Button size="sm" color={transferOpen ? 'primary' : 'secondary'}
|
|
iconLeading={({ className, ...rest }: any) => <FontAwesomeIcon icon={faPhoneArrowRight} className={className} {...rest} />}
|
|
isDisabled={!wasAnsweredRef.current}
|
|
onClick={() => { setTransferOpen(!transferOpen); setAppointmentOpen(false); setEnquiryOpen(false); }}>Transfer</Button>
|
|
|
|
<Button size="sm" color="primary-destructive" className="ml-auto"
|
|
iconLeading={({ className, ...rest }: any) => <FontAwesomeIcon icon={faPhoneHangup} className={className} {...rest} />}
|
|
onClick={() => setDispositionOpen(true)}>End Call</Button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* Scrollable: expanded forms + transfer */}
|
|
{(appointmentOpen || enquiryOpen || transferOpen) && (
|
|
<div className="flex flex-col min-h-0 flex-1 border-t border-secondary px-4 pb-4 pt-4">
|
|
{transferOpen && callUcid && (
|
|
<TransferDialog
|
|
ucid={callUcid}
|
|
currentAgentId={JSON.parse(localStorage.getItem('helix_agent_config') ?? '{}').ozonetelAgentId}
|
|
onClose={() => setTransferOpen(false)}
|
|
onTransferred={() => {
|
|
setTransferOpen(false);
|
|
// A transfer implies the original agent handed the call
|
|
// off — treat that as a follow-up action so the
|
|
// disposition pre-locks to FOLLOW_UP_SCHEDULED.
|
|
addActions('FOLLOWUP');
|
|
setDispositionOpen(true);
|
|
}}
|
|
/>
|
|
)}
|
|
{appointmentOpen && leadAppointments.length > 0 && (
|
|
<div className="flex flex-wrap gap-2 mb-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => setEditingApptId(null)}
|
|
className={cx(
|
|
'flex items-center gap-1.5 rounded-lg border-2 px-3 py-2 text-xs font-semibold transition duration-100 ease-linear',
|
|
!editingApptId
|
|
? 'border-brand bg-brand-primary text-brand-secondary'
|
|
: 'border-secondary bg-primary text-secondary hover:bg-primary_hover',
|
|
)}
|
|
>
|
|
<FontAwesomeIcon icon={faPlus} className="size-3" />
|
|
New
|
|
</button>
|
|
{leadAppointments.map((appt) => (
|
|
<div
|
|
key={appt.id}
|
|
className={cx(
|
|
'flex items-center gap-2 rounded-lg border-2 px-3 py-2 text-xs',
|
|
editingApptId === appt.id
|
|
? 'border-brand bg-brand-primary'
|
|
: 'border-secondary bg-primary',
|
|
)}
|
|
>
|
|
<div className="flex flex-col">
|
|
<span className="font-semibold text-primary">
|
|
{appt.scheduledAt ? formatShortDate(appt.scheduledAt) : 'No date'}
|
|
</span>
|
|
<span className="text-[11px] text-tertiary">
|
|
{appt.doctorName ?? 'Doctor'}
|
|
</span>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => setPendingApptId(appt.id)}
|
|
className="flex items-center gap-1 rounded-md px-2 py-1 text-[11px] font-semibold text-brand-secondary hover:bg-brand-primary_hover transition duration-100 ease-linear"
|
|
>
|
|
<FontAwesomeIcon icon={faPenToSquare} className="size-3" />
|
|
Edit
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Key forces a full remount when switching between
|
|
pills (or between edit/view modes) so the form's
|
|
internal state re-initializes from the new
|
|
existingAppointment prop instead of staying
|
|
stuck on the first-mounted values. */}
|
|
<AppointmentForm
|
|
key={`${editingApptId ?? 'new'}-${apptMode}`}
|
|
isOpen={appointmentOpen}
|
|
onOpenChange={(open) => {
|
|
setAppointmentOpen(open);
|
|
if (!open) { setEditingApptId(null); setApptMode('edit'); }
|
|
}}
|
|
callerNumber={callerPhone}
|
|
leadName={fullName || null}
|
|
leadId={lead?.id ?? null}
|
|
patientId={(lead as any)?.patientId ?? null}
|
|
readOnly={apptMode === 'view'}
|
|
existingAppointment={editingAppt ? {
|
|
id: editingAppt.id,
|
|
scheduledAt: editingAppt.scheduledAt ?? '',
|
|
doctorName: editingAppt.doctorName ?? '',
|
|
doctorId: editingAppt.doctorId ?? undefined,
|
|
department: editingAppt.department ?? '',
|
|
clinicId: editingAppt.clinicId ?? undefined,
|
|
reasonForVisit: editingAppt.reasonForVisit ?? undefined,
|
|
status: editingAppt.appointmentStatus ?? 'SCHEDULED',
|
|
} : null}
|
|
onSaved={(outcome) => {
|
|
setEditingApptId(null);
|
|
setApptMode('edit');
|
|
handleAppointmentSaved(outcome);
|
|
}}
|
|
/>
|
|
|
|
<EnquiryForm
|
|
isOpen={enquiryOpen}
|
|
onOpenChange={setEnquiryOpen}
|
|
callerPhone={callerPhone}
|
|
leadName={fullName || null}
|
|
leadId={lead?.id ?? null}
|
|
patientId={(lead as any)?.patientId ?? null}
|
|
agentName={user.name}
|
|
onSaved={(actions) => {
|
|
setEnquiryOpen(false);
|
|
addActions(...actions);
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Reschedule confirm modal — fires when the agent clicks Edit
|
|
on an upcoming-appointment pill. Yes → open the form in
|
|
edit mode (fields editable, Save button). No → open in
|
|
view-only mode (fields disabled, Close button). */}
|
|
<ModalOverlay
|
|
isOpen={pendingApptId !== null}
|
|
onOpenChange={(open) => { if (!open) setPendingApptId(null); }}
|
|
isDismissable
|
|
>
|
|
<Modal className="sm:max-w-md">
|
|
<Dialog>
|
|
{() => (
|
|
<div className="flex flex-col gap-4 rounded-xl bg-primary p-6 shadow-xl ring-1 ring-secondary">
|
|
<h2 className="text-lg font-semibold text-primary">Reschedule this appointment?</h2>
|
|
<p className="text-sm text-tertiary">
|
|
Choose "Yes, reschedule" to change the date, time, or doctor.
|
|
Choose "No, just view" to see the details without changing anything.
|
|
</p>
|
|
<div className="flex items-center gap-2 justify-end">
|
|
<Button
|
|
size="sm"
|
|
color="secondary"
|
|
onClick={() => {
|
|
if (pendingApptId) {
|
|
setEditingApptId(pendingApptId);
|
|
setApptMode('view');
|
|
setPendingApptId(null);
|
|
}
|
|
}}
|
|
>
|
|
No, just view
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
color="primary"
|
|
onClick={() => {
|
|
if (pendingApptId) {
|
|
setEditingApptId(pendingApptId);
|
|
setApptMode('edit');
|
|
setPendingApptId(null);
|
|
}
|
|
}}
|
|
>
|
|
Yes, reschedule
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Dialog>
|
|
</Modal>
|
|
</ModalOverlay>
|
|
|
|
{/* Disposition Modal — the ONLY path to end a call */}
|
|
<DispositionModal
|
|
isOpen={dispositionOpen}
|
|
callerName={fullName || phoneDisplay}
|
|
callerDisconnected={callerDisconnected}
|
|
// wasAnsweredRef only flips true once callState reaches
|
|
// 'active'. Outbound callbacks that never connect keep
|
|
// this false, which narrows the disposition options to
|
|
// no-answer outcomes and prevents SLA-gaming dispositions
|
|
// like Info Provided on a call the customer never took.
|
|
callAnswered={wasAnsweredRef.current}
|
|
actionsTaken={actionsTaken}
|
|
onSubmit={handleDisposition}
|
|
onDismiss={() => {
|
|
// Agent wants to continue the call — close modal, call stays active
|
|
if (!callerDisconnected) {
|
|
setDispositionOpen(false);
|
|
} else {
|
|
// Caller already disconnected — dismiss goes to worklist
|
|
handleReset();
|
|
}
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
};
|