272 lines
12 KiB
TypeScript
272 lines
12 KiB
TypeScript
"use client"
|
|
|
|
import { useMemo, useState } from "react"
|
|
import { useRouter } from "next/navigation"
|
|
import { useMutation, useQuery } from "convex/react"
|
|
import { toast } from "sonner"
|
|
import type { Id } from "@/convex/_generated/dataModel"
|
|
import type { TicketPriority, TicketQueueSummary } from "@/lib/schemas/ticket"
|
|
import { DEFAULT_TENANT_ID } from "@/lib/constants"
|
|
import { useAuth } from "@/lib/auth-client"
|
|
// @ts-expect-error Convex runtime API lacks TypeScript declarations
|
|
import { api } from "@/convex/_generated/api"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import { RichTextEditor } from "@/components/ui/rich-text-editor"
|
|
import { Spinner } from "@/components/ui/spinner"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { cn } from "@/lib/utils"
|
|
import {
|
|
PriorityIcon,
|
|
priorityBadgeClass,
|
|
priorityItemClass,
|
|
priorityStyles,
|
|
priorityTriggerClass,
|
|
} from "@/components/tickets/priority-select"
|
|
import { CategorySelectFields } from "@/components/tickets/category-select"
|
|
|
|
export default function NewTicketPage() {
|
|
const router = useRouter()
|
|
const { convexUserId } = useAuth()
|
|
const queueArgs = convexUserId
|
|
? { tenantId: DEFAULT_TENANT_ID, viewerId: convexUserId as Id<"users"> }
|
|
: "skip"
|
|
const queuesRaw = useQuery(
|
|
convexUserId ? api.queues.summary : "skip",
|
|
queueArgs
|
|
) as TicketQueueSummary[] | undefined
|
|
const queues = useMemo(() => queuesRaw ?? [], [queuesRaw])
|
|
const create = useMutation(api.tickets.create)
|
|
const addComment = useMutation(api.tickets.addComment)
|
|
|
|
const [subject, setSubject] = useState("")
|
|
const [summary, setSummary] = useState("")
|
|
const [priority, setPriority] = useState<TicketPriority>("MEDIUM")
|
|
const [channel, setChannel] = useState("MANUAL")
|
|
const [queueName, setQueueName] = useState<string | null>(null)
|
|
const [description, setDescription] = useState("")
|
|
const [loading, setLoading] = useState(false)
|
|
const [subjectError, setSubjectError] = useState<string | null>(null)
|
|
const [categoryId, setCategoryId] = useState<string | null>(null)
|
|
const [subcategoryId, setSubcategoryId] = useState<string | null>(null)
|
|
const [categoryError, setCategoryError] = useState<string | null>(null)
|
|
const [subcategoryError, setSubcategoryError] = useState<string | null>(null)
|
|
|
|
const queueOptions = useMemo(() => queues.map((q) => q.name), [queues])
|
|
|
|
async function submit(event: React.FormEvent) {
|
|
event.preventDefault()
|
|
if (!convexUserId || loading) return
|
|
|
|
const trimmedSubject = subject.trim()
|
|
if (trimmedSubject.length < 3) {
|
|
setSubjectError("Informe um assunto com pelo menos 3 caracteres.")
|
|
return
|
|
}
|
|
setSubjectError(null)
|
|
|
|
if (!categoryId) {
|
|
setCategoryError("Selecione uma categoria.")
|
|
return
|
|
}
|
|
if (!subcategoryId) {
|
|
setSubcategoryError("Selecione uma categoria secundária.")
|
|
return
|
|
}
|
|
|
|
setLoading(true)
|
|
toast.loading("Criando ticket...", { id: "create-ticket" })
|
|
try {
|
|
const selQueue = queues.find((q) => q.name === queueName)
|
|
const queueId = selQueue ? (selQueue.id as Id<"queues">) : undefined
|
|
const id = await create({
|
|
actorId: convexUserId as Id<"users">,
|
|
tenantId: DEFAULT_TENANT_ID,
|
|
subject: trimmedSubject,
|
|
summary: summary.trim() || undefined,
|
|
priority,
|
|
channel,
|
|
queueId,
|
|
requesterId: convexUserId as Id<"users">,
|
|
categoryId: categoryId as Id<"ticketCategories">,
|
|
subcategoryId: subcategoryId as Id<"ticketSubcategories">,
|
|
})
|
|
const plainDescription = description.replace(/<[^>]*>/g, "").trim()
|
|
if (plainDescription.length > 0) {
|
|
await addComment({
|
|
ticketId: id as Id<"tickets">,
|
|
authorId: convexUserId as Id<"users">,
|
|
visibility: "PUBLIC",
|
|
body: description,
|
|
attachments: [],
|
|
})
|
|
}
|
|
toast.success("Ticket criado!", { id: "create-ticket" })
|
|
router.replace(`/tickets/${id}`)
|
|
} catch (error) {
|
|
console.error(error)
|
|
toast.error("Não foi possível criar o ticket.", { id: "create-ticket" })
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const selectTriggerClass = "flex h-8 w-full items-center justify-between rounded-full border border-slate-300 bg-white px-3 text-sm font-medium text-neutral-800 shadow-sm focus:ring-0 data-[state=open]:border-[#00d6eb]"
|
|
const selectItemClass = "flex items-center gap-2 rounded-md px-2 py-2 text-sm text-neutral-800 transition data-[state=checked]:bg-[#00e8ff]/15 data-[state=checked]:text-neutral-900 focus:bg-[#00e8ff]/10"
|
|
|
|
return (
|
|
<div className="mx-auto max-w-3xl px-6 py-8">
|
|
<Card className="rounded-2xl border border-slate-200 shadow-sm">
|
|
<CardHeader className="space-y-2">
|
|
<CardTitle className="text-2xl font-semibold text-neutral-900">Novo ticket</CardTitle>
|
|
<CardDescription className="text-sm text-neutral-600">Preencha as informações básicas para abrir um chamado.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={submit} className="space-y-6">
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-neutral-700" htmlFor="subject">
|
|
Assunto
|
|
</label>
|
|
<Input
|
|
id="subject"
|
|
value={subject}
|
|
onChange={(event) => {
|
|
setSubject(event.target.value)
|
|
if (subjectError) setSubjectError(null)
|
|
}}
|
|
placeholder="Ex.: Erro 500 no portal"
|
|
aria-invalid={subjectError ? "true" : undefined}
|
|
/>
|
|
{subjectError ? <p className="text-xs font-medium text-red-500">{subjectError}</p> : null}
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-neutral-700" htmlFor="summary">
|
|
Resumo
|
|
</label>
|
|
<textarea
|
|
id="summary"
|
|
className="min-h-[96px] w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-neutral-800 shadow-sm outline-none transition-colors focus-visible:border-[#00d6eb] focus-visible:ring-[3px] focus-visible:ring-[#00e8ff]/20"
|
|
value={summary}
|
|
onChange={(event) => setSummary(event.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-neutral-700">Descrição</label>
|
|
<RichTextEditor value={description} onChange={setDescription} placeholder="Detalhe o problema, passos para reproduzir, links, etc." />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<CategorySelectFields
|
|
tenantId={DEFAULT_TENANT_ID}
|
|
categoryId={categoryId}
|
|
subcategoryId={subcategoryId}
|
|
onCategoryChange={(value) => {
|
|
setCategoryId(value)
|
|
setCategoryError(null)
|
|
}}
|
|
onSubcategoryChange={(value) => {
|
|
setSubcategoryId(value)
|
|
setSubcategoryError(null)
|
|
}}
|
|
/>
|
|
{categoryError || subcategoryError ? (
|
|
<div className="text-xs font-medium text-red-500">
|
|
{categoryError ? <div>{categoryError}</div> : null}
|
|
{subcategoryError ? <div>{subcategoryError}</div> : null}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<div className="grid gap-4 sm:grid-cols-3">
|
|
<div className="space-y-2">
|
|
<span className="text-sm font-medium text-neutral-700">Prioridade</span>
|
|
<Select value={priority} onValueChange={(value) => setPriority(value as TicketPriority)}>
|
|
<SelectTrigger className={cn(priorityTriggerClass, "w-full justify-between") }>
|
|
<SelectValue>
|
|
<Badge className={cn(priorityBadgeClass, priorityStyles[priority]?.badgeClass)}>
|
|
<PriorityIcon value={priority} />
|
|
{priorityStyles[priority]?.label ?? priority}
|
|
</Badge>
|
|
</SelectValue>
|
|
</SelectTrigger>
|
|
<SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
|
|
{(["LOW", "MEDIUM", "HIGH", "URGENT"] as const).map((option) => (
|
|
<SelectItem key={option} value={option} className={priorityItemClass}>
|
|
<span className="inline-flex items-center gap-2">
|
|
<PriorityIcon value={option} />
|
|
{priorityStyles[option].label}
|
|
</span>
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<span className="text-sm font-medium text-neutral-700">Canal</span>
|
|
<Select value={channel} onValueChange={setChannel}>
|
|
<SelectTrigger className={selectTriggerClass}>
|
|
<SelectValue placeholder="Canal" />
|
|
</SelectTrigger>
|
|
<SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
|
|
<SelectItem value="EMAIL" className={selectItemClass}>
|
|
E-mail
|
|
</SelectItem>
|
|
<SelectItem value="WHATSAPP" className={selectItemClass}>
|
|
WhatsApp
|
|
</SelectItem>
|
|
<SelectItem value="CHAT" className={selectItemClass}>
|
|
Chat
|
|
</SelectItem>
|
|
<SelectItem value="PHONE" className={selectItemClass}>
|
|
Telefone
|
|
</SelectItem>
|
|
<SelectItem value="API" className={selectItemClass}>
|
|
API
|
|
</SelectItem>
|
|
<SelectItem value="MANUAL" className={selectItemClass}>
|
|
Manual
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<span className="text-sm font-medium text-neutral-700">Fila</span>
|
|
<Select value={queueName ?? "NONE"} onValueChange={(value) => setQueueName(value === "NONE" ? null : value)}>
|
|
<SelectTrigger className={selectTriggerClass}>
|
|
<SelectValue placeholder="Sem fila" />
|
|
</SelectTrigger>
|
|
<SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
|
|
<SelectItem value="NONE" className={selectItemClass}>
|
|
Sem fila
|
|
</SelectItem>
|
|
{queueOptions.map((name) => (
|
|
<SelectItem key={name} value={name} className={selectItemClass}>
|
|
{name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end">
|
|
<Button
|
|
type="submit"
|
|
className="min-w-[120px] rounded-lg border border-black bg-black px-4 py-2 text-sm font-semibold text-white transition hover:bg-[#18181b]/85 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#18181b]/30"
|
|
disabled={loading}
|
|
>
|
|
{loading ? (
|
|
<>
|
|
<Spinner className="me-2" />
|
|
Criando...
|
|
</>
|
|
) : (
|
|
"Criar"
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|