181 lines
8.3 KiB
TypeScript
181 lines
8.3 KiB
TypeScript
"use client"
|
|
|
|
import { z } from "zod"
|
|
import { useState } from "react"
|
|
import type { Id } from "@/convex/_generated/dataModel"
|
|
import type { TicketQueueSummary } from "@/lib/schemas/ticket"
|
|
import { useMutation, useQuery } from "convex/react"
|
|
// @ts-ignore
|
|
import { api } from "@/convex/_generated/api"
|
|
import { DEFAULT_TENANT_ID } from "@/lib/constants"
|
|
import { useAuth } from "@/lib/auth-client"
|
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import { FieldSet, FieldGroup, Field, FieldLabel, FieldError } from "@/components/ui/field"
|
|
import { useForm } from "react-hook-form"
|
|
import { zodResolver } from "@hookform/resolvers/zod"
|
|
import { toast } from "sonner"
|
|
import { Spinner } from "@/components/ui/spinner"
|
|
import { Dropzone } from "@/components/ui/dropzone"
|
|
import { RichTextEditor } from "@/components/ui/rich-text-editor"
|
|
|
|
const schema = z.object({
|
|
subject: z.string().min(3, "Informe um assunto"),
|
|
summary: z.string().optional(),
|
|
description: z.string().optional(),
|
|
priority: z.enum(["LOW", "MEDIUM", "HIGH", "URGENT"]).default("MEDIUM"),
|
|
channel: z.enum(["EMAIL", "WHATSAPP", "CHAT", "PHONE", "API", "MANUAL"]).default("MANUAL"),
|
|
queueName: z.string().nullable().optional(),
|
|
})
|
|
|
|
export function NewTicketDialog() {
|
|
const [open, setOpen] = useState(false)
|
|
const [loading, setLoading] = useState(false)
|
|
const form = useForm<z.infer<typeof schema>>({
|
|
resolver: zodResolver(schema),
|
|
defaultValues: { subject: "", summary: "", description: "", priority: "MEDIUM", channel: "MANUAL", queueName: null },
|
|
mode: "onTouched",
|
|
})
|
|
const { userId } = useAuth()
|
|
const queues = (useQuery(api.queues.summary, { tenantId: DEFAULT_TENANT_ID }) as TicketQueueSummary[] | undefined) ?? []
|
|
const create = useMutation(api.tickets.create)
|
|
const addComment = useMutation(api.tickets.addComment)
|
|
const [attachments, setAttachments] = useState<Array<{ storageId: string; name: string; size?: number; type?: string }>>([])
|
|
|
|
async function submit(values: z.infer<typeof schema>) {
|
|
if (!userId) return
|
|
const subjectTrimmed = (values.subject ?? "").trim()
|
|
if (subjectTrimmed.length < 3) {
|
|
form.setError("subject", { type: "min", message: "Informe um assunto" })
|
|
return
|
|
}
|
|
setLoading(true)
|
|
toast.loading("Criando ticket…", { id: "new-ticket" })
|
|
try {
|
|
const sel = queues.find((q) => q.name === values.queueName)
|
|
const id = await create({
|
|
tenantId: DEFAULT_TENANT_ID,
|
|
subject: subjectTrimmed,
|
|
summary: values.summary,
|
|
priority: values.priority,
|
|
channel: values.channel,
|
|
queueId: sel?.id as Id<"queues"> | undefined,
|
|
requesterId: userId as Id<"users">,
|
|
})
|
|
const hasDescription = (values.description ?? "").replace(/<[^>]*>/g, "").trim().length > 0
|
|
const bodyHtml = hasDescription ? (values.description as string) : (values.summary || "")
|
|
if (attachments.length > 0 || bodyHtml.trim().length > 0) {
|
|
const typedAttachments = attachments.map((a) => ({
|
|
storageId: a.storageId as unknown as Id<"_storage">,
|
|
name: a.name,
|
|
size: a.size,
|
|
type: a.type,
|
|
}))
|
|
await addComment({ ticketId: id as Id<"tickets">, authorId: userId as Id<"users">, visibility: "PUBLIC", body: bodyHtml, attachments: typedAttachments })
|
|
}
|
|
toast.success("Ticket criado!", { id: "new-ticket" })
|
|
setOpen(false)
|
|
form.reset()
|
|
setAttachments([])
|
|
// Navegar para o ticket recém-criado
|
|
window.location.href = `/tickets/${id}`
|
|
} catch (err) {
|
|
toast.error("Não foi possível criar o ticket.", { id: "new-ticket" })
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button size="sm">Novo ticket</Button>
|
|
</DialogTrigger>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Novo ticket</DialogTitle>
|
|
<DialogDescription>Preencha as informações básicas para abrir um chamado.</DialogDescription>
|
|
</DialogHeader>
|
|
<form className="space-y-4" onSubmit={form.handleSubmit(submit)}>
|
|
<FieldSet>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="subject">Assunto</FieldLabel>
|
|
<Input id="subject" {...form.register("subject")} placeholder="Ex.: Erro 500 no portal" />
|
|
<FieldError errors={form.formState.errors.subject ? [{ message: form.formState.errors.subject.message }] : []} />
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="summary">Resumo</FieldLabel>
|
|
<textarea id="summary" className="w-full rounded-md border bg-background p-2 text-sm" rows={3} {...form.register("summary")} />
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel>Descrição</FieldLabel>
|
|
<RichTextEditor
|
|
value={form.watch("description") || ""}
|
|
onChange={(html) => form.setValue("description", html)}
|
|
placeholder="Detalhe o problema, passos para reproduzir, links, etc."
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel>Anexos</FieldLabel>
|
|
<Dropzone onUploaded={(files) => setAttachments((prev) => [...prev, ...files])} />
|
|
<FieldError className="mt-1">Formatos comuns de imagem e documentos são aceitos.</FieldError>
|
|
</Field>
|
|
<div className="grid gap-3 sm:grid-cols-3">
|
|
<Field>
|
|
<FieldLabel>Prioridade</FieldLabel>
|
|
<Select value={form.watch("priority")} onValueChange={(v) => form.setValue("priority", v as z.infer<typeof schema>["priority"])}>
|
|
<SelectTrigger><SelectValue placeholder="Prioridade" /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="LOW">Baixa</SelectItem>
|
|
<SelectItem value="MEDIUM">Média</SelectItem>
|
|
<SelectItem value="HIGH">Alta</SelectItem>
|
|
<SelectItem value="URGENT">Urgente</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel>Canal</FieldLabel>
|
|
<Select value={form.watch("channel")} onValueChange={(v) => form.setValue("channel", v as z.infer<typeof schema>["channel"])}>
|
|
<SelectTrigger><SelectValue placeholder="Canal" /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="EMAIL">E-mail</SelectItem>
|
|
<SelectItem value="WHATSAPP">WhatsApp</SelectItem>
|
|
<SelectItem value="CHAT">Chat</SelectItem>
|
|
<SelectItem value="PHONE">Telefone</SelectItem>
|
|
<SelectItem value="API">API</SelectItem>
|
|
<SelectItem value="MANUAL">Manual</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel>Fila</FieldLabel>
|
|
{(() => {
|
|
const NONE = "NONE";
|
|
const current = form.watch("queueName") ?? NONE;
|
|
return (
|
|
<Select value={current} onValueChange={(v) => form.setValue("queueName", v === NONE ? null : v)}>
|
|
<SelectTrigger><SelectValue placeholder="Sem fila" /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value={NONE}>Sem fila</SelectItem>
|
|
{queues.map((q) => (
|
|
<SelectItem key={q.id} value={q.name}>{q.name}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
)
|
|
})()}
|
|
</Field>
|
|
</div>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
<div className="flex justify-end">
|
|
<Button type="submit" disabled={loading}>{loading ? (<><Spinner className="me-2" /> Criando…</>) : "Criar"}</Button>
|
|
</div>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|