feat: ConnectWise PSA integration (#106)
PSA abstraction layer with provider pattern, ConnectWise integration (connection management, ticket linking, note posting, status updates, member mapping), Integrations page UI, Fernet credential encryption, in-memory TTL cache, 6 DB migrations, ConnectWise API reference docs.
This commit was merged in pull request #106.
This commit is contained in:
chihlasm
91
frontend/src/components/session/TicketLinkIndicator.tsx
Normal file
91
frontend/src/components/session/TicketLinkIndicator.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
import { Ticket, Unlink, Link2, Send } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import type { Session } from '@/types'
|
||||
import type { PSATicketInfo } from '@/types/integrations'
|
||||
|
||||
interface Props {
|
||||
session: Session
|
||||
hasConnection: boolean
|
||||
onLinkClick: () => void
|
||||
onUnlink: () => void
|
||||
onUpdateClick?: () => void
|
||||
ticketInfo?: PSATicketInfo | null
|
||||
}
|
||||
|
||||
export function TicketLinkIndicator({ session, hasConnection, onLinkClick, onUnlink, onUpdateClick, ticketInfo }: Props) {
|
||||
// No connection — show nothing
|
||||
if (!hasConnection) return null
|
||||
|
||||
// No ticket linked — show subtle "Link Ticket" button
|
||||
if (!session.psa_ticket_id) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onLinkClick}
|
||||
className={cn(
|
||||
'inline-flex items-center gap-1.5 rounded-lg px-2 py-1 text-xs text-muted-foreground transition-colors',
|
||||
'hover:bg-accent hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
<Link2 className="h-3.5 w-3.5" />
|
||||
Link Ticket
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
// Ticket linked
|
||||
return (
|
||||
<div className="glass-card-static inline-flex items-start gap-2.5 rounded-lg border border-border px-3 py-2">
|
||||
<Ticket className="mt-0.5 h-4 w-4 shrink-0 text-cyan-400" />
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium text-foreground">
|
||||
CW #{session.psa_ticket_id}
|
||||
{ticketInfo?.summary && (
|
||||
<span className="text-muted-foreground"> — {ticketInfo.summary}</span>
|
||||
)}
|
||||
</p>
|
||||
{ticketInfo && (
|
||||
<div className="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted-foreground">
|
||||
{ticketInfo.company_name && <span>{ticketInfo.company_name}</span>}
|
||||
{ticketInfo.board_name && (
|
||||
<>
|
||||
<span className="text-[#5a6170]">•</span>
|
||||
<span>{ticketInfo.board_name}</span>
|
||||
</>
|
||||
)}
|
||||
{ticketInfo.status_name && (
|
||||
<>
|
||||
<span className="text-[#5a6170]">•</span>
|
||||
<span>{ticketInfo.status_name}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
{onUpdateClick && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onUpdateClick}
|
||||
className={cn(
|
||||
'inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs text-muted-foreground transition-colors',
|
||||
'hover:bg-primary/10 hover:text-foreground'
|
||||
)}
|
||||
title="Update ticket"
|
||||
>
|
||||
<Send className="h-3 w-3" />
|
||||
<span className="hidden sm:inline">Update</span>
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={onUnlink}
|
||||
className="shrink-0 rounded p-0.5 text-xs text-muted-foreground transition-colors hover:text-foreground"
|
||||
title="Unlink ticket"
|
||||
>
|
||||
<Unlink className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
436
frontend/src/components/session/TicketPickerModal.tsx
Normal file
436
frontend/src/components/session/TicketPickerModal.tsx
Normal file
@@ -0,0 +1,436 @@
|
||||
import { useState, useEffect, useRef, useCallback } from 'react'
|
||||
import { Ticket, Search, AlertCircle, CheckCircle2, Hash, Loader2 } from 'lucide-react'
|
||||
import { Modal } from '@/components/common/Modal'
|
||||
import { Input } from '@/components/ui/Input'
|
||||
import { Button } from '@/components/ui/Button'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { integrationsApi, sessionPsaApi } from '@/api/integrations'
|
||||
import type { PSATicketInfo, PSATicketSearchResult } from '@/types/integrations'
|
||||
|
||||
type Mode = 'search' | 'manual'
|
||||
|
||||
interface Props {
|
||||
open: boolean
|
||||
onClose: () => void
|
||||
sessionId: string
|
||||
onLinked: (ticketId: string, ticket: PSATicketInfo) => void
|
||||
}
|
||||
|
||||
export function TicketPickerModal({ open, onClose, sessionId, onLinked }: Props) {
|
||||
const [mode, setMode] = useState<Mode>('search')
|
||||
|
||||
// Search mode state
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const [includeClosed, setIncludeClosed] = useState(false)
|
||||
const [searchResults, setSearchResults] = useState<PSATicketSearchResult[]>([])
|
||||
const [isSearching, setIsSearching] = useState(false)
|
||||
const [hasSearched, setHasSearched] = useState(false)
|
||||
|
||||
// Manual mode state
|
||||
const [manualId, setManualId] = useState('')
|
||||
|
||||
// Shared state
|
||||
const [selectedTicket, setSelectedTicket] = useState<PSATicketInfo | null>(null)
|
||||
const [selectedTicketId, setSelectedTicketId] = useState<string | null>(null)
|
||||
const [isLooking, setIsLooking] = useState(false)
|
||||
const [isLinking, setIsLinking] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
|
||||
|
||||
// Debounced search
|
||||
const performSearch = useCallback(async (query: string, closed: boolean) => {
|
||||
if (!query.trim()) {
|
||||
setSearchResults([])
|
||||
setHasSearched(false)
|
||||
return
|
||||
}
|
||||
|
||||
setIsSearching(true)
|
||||
setError(null)
|
||||
try {
|
||||
const results = await integrationsApi.searchTickets({
|
||||
query: query.trim(),
|
||||
include_closed: closed,
|
||||
})
|
||||
setSearchResults(results)
|
||||
setHasSearched(true)
|
||||
} catch (err: unknown) {
|
||||
const message =
|
||||
err && typeof err === 'object' && 'response' in err
|
||||
? (err as { response?: { data?: { detail?: string } } }).response?.data?.detail
|
||||
: null
|
||||
setError(message || 'Failed to search tickets.')
|
||||
setSearchResults([])
|
||||
setHasSearched(true)
|
||||
} finally {
|
||||
setIsSearching(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Trigger debounced search when query or includeClosed changes
|
||||
useEffect(() => {
|
||||
if (mode !== 'search') return
|
||||
|
||||
if (debounceRef.current) {
|
||||
clearTimeout(debounceRef.current)
|
||||
}
|
||||
|
||||
if (!searchQuery.trim()) {
|
||||
setSearchResults([])
|
||||
setHasSearched(false)
|
||||
return
|
||||
}
|
||||
|
||||
debounceRef.current = setTimeout(() => {
|
||||
performSearch(searchQuery, includeClosed)
|
||||
}, 300)
|
||||
|
||||
return () => {
|
||||
if (debounceRef.current) {
|
||||
clearTimeout(debounceRef.current)
|
||||
}
|
||||
}
|
||||
}, [searchQuery, includeClosed, mode, performSearch])
|
||||
|
||||
const handleSelectSearchResult = async (result: PSATicketSearchResult) => {
|
||||
setIsLooking(true)
|
||||
setError(null)
|
||||
try {
|
||||
const ticket = await integrationsApi.getTicket(result.id)
|
||||
setSelectedTicket(ticket)
|
||||
setSelectedTicketId(result.id)
|
||||
} catch (err: unknown) {
|
||||
const message =
|
||||
err && typeof err === 'object' && 'response' in err
|
||||
? (err as { response?: { data?: { detail?: string } } }).response?.data?.detail
|
||||
: null
|
||||
setError(message || 'Failed to load ticket details.')
|
||||
} finally {
|
||||
setIsLooking(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleManualLookup = async () => {
|
||||
const trimmed = manualId.trim()
|
||||
if (!trimmed) return
|
||||
|
||||
setIsLooking(true)
|
||||
setError(null)
|
||||
setSelectedTicket(null)
|
||||
setSelectedTicketId(null)
|
||||
|
||||
try {
|
||||
const ticket = await integrationsApi.getTicket(trimmed)
|
||||
setSelectedTicket(ticket)
|
||||
setSelectedTicketId(trimmed)
|
||||
} catch (err: unknown) {
|
||||
const message =
|
||||
err && typeof err === 'object' && 'response' in err
|
||||
? (err as { response?: { data?: { detail?: string } } }).response?.data?.detail
|
||||
: null
|
||||
setError(message || 'Ticket not found. Please check the ticket number and try again.')
|
||||
} finally {
|
||||
setIsLooking(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleLink = async () => {
|
||||
if (!selectedTicket || !selectedTicketId) return
|
||||
|
||||
setIsLinking(true)
|
||||
setError(null)
|
||||
try {
|
||||
await sessionPsaApi.linkTicket(sessionId, selectedTicketId)
|
||||
onLinked(selectedTicketId, selectedTicket)
|
||||
handleReset()
|
||||
} catch (err: unknown) {
|
||||
const message =
|
||||
err && typeof err === 'object' && 'response' in err
|
||||
? (err as { response?: { data?: { detail?: string } } }).response?.data?.detail
|
||||
: null
|
||||
setError(message || 'Failed to link ticket.')
|
||||
} finally {
|
||||
setIsLinking(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
setSearchQuery('')
|
||||
setSearchResults([])
|
||||
setHasSearched(false)
|
||||
setManualId('')
|
||||
setSelectedTicket(null)
|
||||
setSelectedTicketId(null)
|
||||
setError(null)
|
||||
setIsLooking(false)
|
||||
setIsLinking(false)
|
||||
setIsSearching(false)
|
||||
setIncludeClosed(false)
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
handleReset()
|
||||
setMode('search')
|
||||
onClose()
|
||||
}
|
||||
|
||||
const handleClearSelection = () => {
|
||||
setSelectedTicket(null)
|
||||
setSelectedTicketId(null)
|
||||
setError(null)
|
||||
}
|
||||
|
||||
const handleManualKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter' && manualId.trim() && !isLooking && !selectedTicket) {
|
||||
handleManualLookup()
|
||||
}
|
||||
}
|
||||
|
||||
const switchMode = (newMode: Mode) => {
|
||||
setMode(newMode)
|
||||
setSelectedTicket(null)
|
||||
setSelectedTicketId(null)
|
||||
setError(null)
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal isOpen={open} onClose={handleClose} title="Link ConnectWise Ticket" size="sm">
|
||||
<div className="space-y-4">
|
||||
{/* Mode tabs */}
|
||||
<div className="flex gap-1 rounded-lg bg-white/[0.03] p-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => switchMode('search')}
|
||||
className={cn(
|
||||
'flex flex-1 items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-all',
|
||||
mode === 'search'
|
||||
? 'bg-white/[0.08] text-foreground shadow-sm'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
<Search className="h-3.5 w-3.5" />
|
||||
Search
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => switchMode('manual')}
|
||||
className={cn(
|
||||
'flex flex-1 items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-all',
|
||||
mode === 'manual'
|
||||
? 'bg-white/[0.08] text-foreground shadow-sm'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
<Hash className="h-3.5 w-3.5" />
|
||||
Ticket #
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Search mode */}
|
||||
{mode === 'search' && !selectedTicket && (
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search tickets by summary, company, or #..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
disabled={isLooking}
|
||||
className="w-full"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Include closed toggle */}
|
||||
<label className="flex cursor-pointer items-center gap-2 text-xs text-muted-foreground">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={includeClosed}
|
||||
onChange={(e) => setIncludeClosed(e.target.checked)}
|
||||
className="rounded border-border bg-card accent-primary"
|
||||
/>
|
||||
Include closed tickets
|
||||
</label>
|
||||
|
||||
{/* Search results */}
|
||||
{isSearching && (
|
||||
<div className="flex items-center justify-center py-6">
|
||||
<Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isSearching && hasSearched && searchResults.length === 0 && (
|
||||
<div className="py-6 text-center text-sm text-muted-foreground">
|
||||
No tickets found
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isSearching && searchResults.length > 0 && (
|
||||
<div className="max-h-64 space-y-1 overflow-y-auto">
|
||||
{searchResults.map((result) => (
|
||||
<button
|
||||
key={result.id}
|
||||
type="button"
|
||||
onClick={() => handleSelectSearchResult(result)}
|
||||
disabled={isLooking}
|
||||
className={cn(
|
||||
'w-full rounded-lg border border-transparent px-3 py-2.5 text-left transition-all',
|
||||
'hover:border-border hover:bg-white/[0.04]',
|
||||
'disabled:opacity-50',
|
||||
result.closed && 'opacity-60'
|
||||
)}
|
||||
>
|
||||
<p className="truncate text-sm font-medium text-foreground">
|
||||
<span className="text-muted-foreground">#{result.id}</span>
|
||||
{' — '}
|
||||
{result.summary}
|
||||
</p>
|
||||
<div className="mt-0.5 flex flex-wrap items-center gap-x-2 text-xs text-muted-foreground">
|
||||
{result.company_name && <span>{result.company_name}</span>}
|
||||
{result.board_name && (
|
||||
<>
|
||||
<span className="text-[#5a6170]">•</span>
|
||||
<span>{result.board_name}</span>
|
||||
</>
|
||||
)}
|
||||
{result.status_name && (
|
||||
<>
|
||||
<span className="text-[#5a6170]">•</span>
|
||||
<span className={result.closed ? 'text-[#5a6170]' : ''}>
|
||||
{result.status_name}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLooking && (
|
||||
<div className="flex items-center justify-center py-3">
|
||||
<Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
|
||||
<span className="ml-2 text-sm text-muted-foreground">Loading ticket details...</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Manual mode */}
|
||||
{mode === 'manual' && !selectedTicket && (
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-foreground">
|
||||
Ticket Number
|
||||
</label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
placeholder="Enter ticket number..."
|
||||
value={manualId}
|
||||
onChange={(e) => {
|
||||
setManualId(e.target.value)
|
||||
if (error) setError(null)
|
||||
}}
|
||||
onKeyDown={handleManualKeyDown}
|
||||
disabled={isLooking}
|
||||
className="flex-1"
|
||||
autoFocus
|
||||
/>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="md"
|
||||
onClick={handleManualLookup}
|
||||
disabled={!manualId.trim() || isLooking}
|
||||
loading={isLooking}
|
||||
>
|
||||
{!isLooking && <Search className="h-4 w-4" />}
|
||||
Look Up
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="flex items-start gap-2 rounded-lg border border-red-400/20 bg-red-400/10 px-3 py-2.5">
|
||||
<AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-red-400" />
|
||||
<p className="text-sm text-red-400">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Selected ticket confirmation card */}
|
||||
{selectedTicket && selectedTicketId && (
|
||||
<div className="glass-card-static space-y-3 rounded-xl border border-border p-4">
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-emerald-400" />
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-semibold text-foreground">
|
||||
CW #{selectedTicketId} — {selectedTicket.summary}
|
||||
</p>
|
||||
<div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
|
||||
{selectedTicket.company_name && (
|
||||
<span>{selectedTicket.company_name}</span>
|
||||
)}
|
||||
{selectedTicket.board_name && (
|
||||
<>
|
||||
<span className="text-[#5a6170]">•</span>
|
||||
<span>{selectedTicket.board_name}</span>
|
||||
</>
|
||||
)}
|
||||
{selectedTicket.status_name && (
|
||||
<>
|
||||
<span className="text-[#5a6170]">•</span>
|
||||
<span>{selectedTicket.status_name}</span>
|
||||
</>
|
||||
)}
|
||||
{selectedTicket.priority_name && (
|
||||
<>
|
||||
<span className="text-[#5a6170]">•</span>
|
||||
<span>{selectedTicket.priority_name}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="md"
|
||||
onClick={handleClearSelection}
|
||||
disabled={isLinking}
|
||||
className="flex-1"
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
<Button
|
||||
className="flex-1"
|
||||
onClick={handleLink}
|
||||
loading={isLinking}
|
||||
>
|
||||
<Ticket className="h-4 w-4" />
|
||||
Link This Ticket
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Skip link */}
|
||||
<div className="flex justify-center pt-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleClose}
|
||||
className={cn(
|
||||
'text-sm text-muted-foreground transition-colors',
|
||||
'hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
Skip
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
313
frontend/src/components/session/UpdateTicketModal.tsx
Normal file
313
frontend/src/components/session/UpdateTicketModal.tsx
Normal file
@@ -0,0 +1,313 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Loader2, Copy, AlertTriangle, AlertCircle, RefreshCw } from 'lucide-react'
|
||||
import { Modal } from '@/components/common/Modal'
|
||||
import { Textarea } from '@/components/ui/Textarea'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { toast } from '@/lib/toast'
|
||||
import { sessionPsaApi } from '@/api/integrations'
|
||||
import type { PsaPreviewResponse } from '@/types/integrations'
|
||||
|
||||
interface Props {
|
||||
open: boolean
|
||||
onClose: () => void
|
||||
sessionId: string
|
||||
onPosted?: () => void
|
||||
}
|
||||
|
||||
type NoteType = 'internal_analysis' | 'resolution' | 'description'
|
||||
|
||||
const NOTE_TYPE_OPTIONS: { value: NoteType; label: string; description: string; warning?: string }[] = [
|
||||
{ value: 'internal_analysis', label: 'Internal Analysis', description: 'Internal only, no notifications' },
|
||||
{ value: 'resolution', label: 'Resolution', description: 'Internal only, triggers notifications' },
|
||||
{ value: 'description', label: 'Description', description: 'Visible to the customer', warning: 'This note will be visible to the customer' },
|
||||
]
|
||||
|
||||
const CHAR_WARNING_THRESHOLD = 15000
|
||||
|
||||
export function UpdateTicketModal({ open, onClose, sessionId, onPosted }: Props) {
|
||||
const [preview, setPreview] = useState<PsaPreviewResponse | null>(null)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [loadError, setLoadError] = useState<string | null>(null)
|
||||
|
||||
const [content, setContent] = useState('')
|
||||
const [noteType, setNoteType] = useState<NoteType>('internal_analysis')
|
||||
const [selectedStatusId, setSelectedStatusId] = useState<number | null>(null)
|
||||
|
||||
const [isPosting, setIsPosting] = useState(false)
|
||||
const [postError, setPostError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
loadPreview()
|
||||
} else {
|
||||
// Reset state when closed
|
||||
setPreview(null)
|
||||
setContent('')
|
||||
setNoteType('internal_analysis')
|
||||
setSelectedStatusId(null)
|
||||
setPostError(null)
|
||||
setLoadError(null)
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [open, sessionId])
|
||||
|
||||
const loadPreview = async () => {
|
||||
setIsLoading(true)
|
||||
setLoadError(null)
|
||||
try {
|
||||
const data = await sessionPsaApi.getPostPreview(sessionId)
|
||||
setPreview(data)
|
||||
setContent(data.content)
|
||||
// Find current status ID from available_statuses matching ticket status_name
|
||||
const currentStatus = data.available_statuses.find(
|
||||
(s) => s.name === data.ticket.status_name
|
||||
)
|
||||
setSelectedStatusId(currentStatus?.id ?? null)
|
||||
} catch (err) {
|
||||
const axiosErr = err as { response?: { data?: { detail?: string } } }
|
||||
setLoadError(axiosErr.response?.data?.detail || 'Failed to load preview')
|
||||
console.error(err)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleCopyContent = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(content)
|
||||
toast.success('Content copied to clipboard')
|
||||
} catch {
|
||||
toast.error('Failed to copy content')
|
||||
}
|
||||
}
|
||||
|
||||
const handlePost = async () => {
|
||||
setIsPosting(true)
|
||||
setPostError(null)
|
||||
try {
|
||||
// Determine if status should be updated
|
||||
const currentStatus = preview?.available_statuses.find(
|
||||
(s) => s.name === preview?.ticket.status_name
|
||||
)
|
||||
const statusChanged = selectedStatusId !== null && selectedStatusId !== currentStatus?.id
|
||||
|
||||
await sessionPsaApi.postToTicket(sessionId, {
|
||||
note_type: noteType,
|
||||
content,
|
||||
...(statusChanged ? { update_status_id: selectedStatusId } : {}),
|
||||
})
|
||||
|
||||
toast.success('Note posted to ticket successfully')
|
||||
onPosted?.()
|
||||
onClose()
|
||||
} catch (err) {
|
||||
const axiosErr = err as { response?: { data?: { detail?: string } } }
|
||||
setPostError(axiosErr.response?.data?.detail || 'Failed to post to ticket')
|
||||
console.error(err)
|
||||
} finally {
|
||||
setIsPosting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const currentStatusId = preview?.available_statuses.find(
|
||||
(s) => s.name === preview?.ticket.status_name
|
||||
)?.id
|
||||
|
||||
const footer = (
|
||||
<div className="space-y-3">
|
||||
{postError && (
|
||||
<div className="flex items-center justify-between gap-2 rounded-lg border border-red-400/20 bg-red-400/10 px-3 py-2 text-sm text-red-400">
|
||||
<div className="flex items-center gap-2">
|
||||
<AlertCircle className="h-4 w-4 shrink-0" />
|
||||
<span>{postError}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={handlePost}
|
||||
className="inline-flex items-center gap-1.5 shrink-0 text-xs font-medium hover:text-red-300 transition-colors"
|
||||
>
|
||||
<RefreshCw className="h-3 w-3" />
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center justify-end gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handlePost}
|
||||
disabled={isPosting || !content.trim()}
|
||||
className={cn(
|
||||
'inline-flex items-center gap-2 rounded-[10px] px-5 py-2.5 text-sm font-semibold',
|
||||
'bg-gradient-brand text-[#101114] shadow-lg shadow-primary/20',
|
||||
'hover:opacity-90 active:scale-[0.97] transition-all',
|
||||
'disabled:opacity-50 disabled:cursor-not-allowed'
|
||||
)}
|
||||
>
|
||||
{isPosting && <Loader2 className="h-4 w-4 animate-spin" />}
|
||||
Update Ticket
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<Modal isOpen={open} onClose={onClose} title="Update Ticket" size="xl" footer={footer}>
|
||||
{isLoading && (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loadError && (
|
||||
<div className="flex flex-col items-center gap-3 py-8">
|
||||
<div className="flex items-center gap-2 text-red-400">
|
||||
<AlertCircle className="h-5 w-5" />
|
||||
<span className="text-sm">{loadError}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={loadPreview}
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
Try again
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{preview && !isLoading && (
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
{/* Left panel - Content editor */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
|
||||
Note Content
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCopyContent}
|
||||
className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
|
||||
title="Copy content"
|
||||
>
|
||||
<Copy className="h-3 w-3" />
|
||||
Copy
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Textarea
|
||||
value={content}
|
||||
onChange={(e) => setContent(e.target.value)}
|
||||
rows={18}
|
||||
className="min-h-[300px] resize-y font-mono text-xs"
|
||||
/>
|
||||
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
{content.length >= CHAR_WARNING_THRESHOLD ? (
|
||||
<span className="flex items-center gap-1 text-amber-400">
|
||||
<AlertTriangle className="h-3 w-3" />
|
||||
Content may be truncated by ConnectWise
|
||||
</span>
|
||||
) : (
|
||||
<span />
|
||||
)}
|
||||
<span className="text-muted-foreground">
|
||||
{content.length.toLocaleString()} characters
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right panel - Controls */}
|
||||
<div className="space-y-6">
|
||||
{/* Ticket info summary */}
|
||||
<div className="glass-card-static rounded-lg border border-border p-3">
|
||||
<p className="text-sm font-medium text-foreground">
|
||||
CW #{preview.ticket.id}
|
||||
{preview.ticket.summary && (
|
||||
<span className="text-muted-foreground"> — {preview.ticket.summary}</span>
|
||||
)}
|
||||
</p>
|
||||
{(preview.ticket.company_name || preview.ticket.board_name) && (
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
{[preview.ticket.company_name, preview.ticket.board_name].filter(Boolean).join(' / ')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Note Type */}
|
||||
<div>
|
||||
<p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-3">
|
||||
Note Type
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
{NOTE_TYPE_OPTIONS.map((opt) => (
|
||||
<label
|
||||
key={opt.value}
|
||||
className={cn(
|
||||
'flex cursor-pointer items-start gap-3 rounded-lg border px-3 py-2.5 transition-colors',
|
||||
noteType === opt.value
|
||||
? 'border-primary/30 bg-primary/5'
|
||||
: 'border-border hover:border-[rgba(255,255,255,0.12)]'
|
||||
)}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="note_type"
|
||||
value={opt.value}
|
||||
checked={noteType === opt.value}
|
||||
onChange={() => setNoteType(opt.value)}
|
||||
className="mt-0.5 accent-cyan-400"
|
||||
/>
|
||||
<div className="min-w-0">
|
||||
<span className="text-sm font-medium text-foreground">{opt.label}</span>
|
||||
<p className="text-xs text-muted-foreground">{opt.description}</p>
|
||||
{opt.warning && noteType === opt.value && (
|
||||
<p className="mt-1 flex items-center gap-1 text-xs text-amber-400">
|
||||
<AlertTriangle className="h-3 w-3 shrink-0" />
|
||||
{opt.warning}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Ticket Status */}
|
||||
<div>
|
||||
<p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-2">
|
||||
Ticket Status
|
||||
</p>
|
||||
<select
|
||||
value={selectedStatusId ?? ''}
|
||||
onChange={(e) => setSelectedStatusId(e.target.value ? Number(e.target.value) : null)}
|
||||
className={cn(
|
||||
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
|
||||
'focus:border-primary/30 focus:outline-hidden focus:ring-1 focus:ring-primary/20'
|
||||
)}
|
||||
>
|
||||
{preview.available_statuses.map((status) => (
|
||||
<option key={status.id} value={status.id}>
|
||||
{status.name}
|
||||
{status.id === currentStatusId ? ' (current)' : ''}
|
||||
{status.is_closed ? ' [closed]' : ''}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Previous posts */}
|
||||
{preview.previous_posts > 0 && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
This session has been posted {preview.previous_posts} time{preview.previous_posts > 1 ? 's' : ''} before.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user