Permite selecionar solicitante e empresa nos tickets
This commit is contained in:
codex-bot
parent
25321224a6
commit
4aee7d7719
6 changed files with 817 additions and 11 deletions
|
|
@ -24,6 +24,22 @@ import {
|
|||
priorityStyles,
|
||||
} from "@/components/tickets/priority-select"
|
||||
import { CategorySelectFields } from "@/components/tickets/category-select"
|
||||
|
||||
type CustomerOption = {
|
||||
id: string
|
||||
name: string
|
||||
email: string
|
||||
role: string
|
||||
companyId: string | null
|
||||
companyName: string | null
|
||||
companyIsAvulso: boolean
|
||||
avatarUrl: string | null
|
||||
}
|
||||
|
||||
const ALL_COMPANIES_VALUE = "__all__"
|
||||
const NO_COMPANY_VALUE = "__no_company__"
|
||||
const NO_REQUESTER_VALUE = "__no_requester__"
|
||||
|
||||
import { useDefaultQueues } from "@/hooks/use-default-queues"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
|
|
@ -35,6 +51,8 @@ const schema = z.object({
|
|||
channel: z.enum(["EMAIL", "WHATSAPP", "CHAT", "PHONE", "API", "MANUAL"]).default("MANUAL"),
|
||||
queueName: z.string().nullable().optional(),
|
||||
assigneeId: z.string().nullable().optional(),
|
||||
companyId: z.string().optional(),
|
||||
requesterId: z.string().min(1, "Selecione um solicitante"),
|
||||
categoryId: z.string().min(1, "Selecione uma categoria"),
|
||||
subcategoryId: z.string().min(1, "Selecione uma categoria secundária"),
|
||||
})
|
||||
|
|
@ -52,6 +70,8 @@ export function NewTicketDialog({ triggerClassName }: { triggerClassName?: strin
|
|||
channel: "MANUAL",
|
||||
queueName: null,
|
||||
assigneeId: null,
|
||||
companyId: ALL_COMPANIES_VALUE,
|
||||
requesterId: "",
|
||||
categoryId: "",
|
||||
subcategoryId: "",
|
||||
},
|
||||
|
|
@ -76,7 +96,33 @@ export function NewTicketDialog({ triggerClassName }: { triggerClassName?: strin
|
|||
() => (staffRaw ?? []).sort((a, b) => a.name.localeCompare(b.name, "pt-BR")),
|
||||
[staffRaw]
|
||||
)
|
||||
|
||||
const directoryQueryEnabled = queuesEnabled && Boolean(convexUserId)
|
||||
const companiesRaw = useQuery(
|
||||
directoryQueryEnabled ? api.companies.list : "skip",
|
||||
directoryQueryEnabled
|
||||
? { tenantId: DEFAULT_TENANT_ID, viewerId: convexUserId as Id<"users"> }
|
||||
: "skip"
|
||||
) as Array<{ id: string; name: string; slug?: string | null }> | undefined
|
||||
const companies = useMemo(
|
||||
() =>
|
||||
(companiesRaw ?? []).map((company) => ({
|
||||
id: String(company.id),
|
||||
name: company.name,
|
||||
slug: company.slug ?? null,
|
||||
})),
|
||||
[companiesRaw]
|
||||
)
|
||||
|
||||
const customersRaw = useQuery(
|
||||
directoryQueryEnabled ? api.users.listCustomers : "skip",
|
||||
directoryQueryEnabled
|
||||
? { tenantId: DEFAULT_TENANT_ID, viewerId: convexUserId as Id<"users"> }
|
||||
: "skip"
|
||||
) as CustomerOption[] | undefined
|
||||
const customers = useMemo(() => customersRaw ?? [], [customersRaw])
|
||||
const [attachments, setAttachments] = useState<Array<{ storageId: string; name: string; size?: number; type?: string }>>([])
|
||||
const [customersInitialized, setCustomersInitialized] = useState(false)
|
||||
const attachmentsTotalBytes = useMemo(
|
||||
() => attachments.reduce((acc, item) => acc + (item.size ?? 0), 0),
|
||||
[attachments]
|
||||
|
|
@ -86,9 +132,44 @@ export function NewTicketDialog({ triggerClassName }: { triggerClassName?: strin
|
|||
const queueValue = form.watch("queueName") ?? "NONE"
|
||||
const assigneeValue = form.watch("assigneeId") ?? null
|
||||
const assigneeSelectValue = assigneeValue ?? "NONE"
|
||||
const companyValue = form.watch("companyId") ?? ALL_COMPANIES_VALUE
|
||||
const requesterValue = form.watch("requesterId") ?? ""
|
||||
const categoryIdValue = form.watch("categoryId")
|
||||
const subcategoryIdValue = form.watch("subcategoryId")
|
||||
const isSubmitted = form.formState.isSubmitted
|
||||
const companyOptions = useMemo(() => {
|
||||
const map = new Map<string, { id: string; name: string; isAvulso?: boolean }>()
|
||||
companies.forEach((company) => {
|
||||
map.set(company.id, { id: company.id, name: company.name, isAvulso: false })
|
||||
})
|
||||
customers.forEach((customer) => {
|
||||
if (customer.companyId && !map.has(customer.companyId)) {
|
||||
map.set(customer.companyId, {
|
||||
id: customer.companyId,
|
||||
name: customer.companyName ?? "Empresa sem nome",
|
||||
isAvulso: customer.companyIsAvulso,
|
||||
})
|
||||
}
|
||||
})
|
||||
const includeNoCompany = customers.some((customer) => !customer.companyId)
|
||||
const result: Array<{ id: string; name: string; isAvulso?: boolean }> = [
|
||||
{ id: ALL_COMPANIES_VALUE, name: "Todas as empresas" },
|
||||
]
|
||||
if (includeNoCompany) {
|
||||
result.push({ id: NO_COMPANY_VALUE, name: "Sem empresa" })
|
||||
}
|
||||
const sorted = Array.from(map.values()).sort((a, b) => a.name.localeCompare(b.name, "pt-BR"))
|
||||
return [...result, ...sorted]
|
||||
}, [companies, customers])
|
||||
|
||||
const filteredCustomers = useMemo(() => {
|
||||
if (companyValue === ALL_COMPANIES_VALUE) return customers
|
||||
if (companyValue === NO_COMPANY_VALUE) {
|
||||
return customers.filter((customer) => !customer.companyId)
|
||||
}
|
||||
return customers.filter((customer) => customer.companyId === companyValue)
|
||||
}, [companyValue, customers])
|
||||
|
||||
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"
|
||||
const [assigneeInitialized, setAssigneeInitialized] = useState(false)
|
||||
|
|
@ -97,6 +178,64 @@ export function NewTicketDialog({ triggerClassName }: { triggerClassName?: strin
|
|||
return normalized === "admin" || normalized === "agent" || normalized === "collaborator"
|
||||
}, [role])
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
setCustomersInitialized(false)
|
||||
form.setValue("companyId", ALL_COMPANIES_VALUE, { shouldDirty: false, shouldTouch: false })
|
||||
form.setValue("requesterId", "", { shouldDirty: false, shouldTouch: false })
|
||||
return
|
||||
}
|
||||
if (customersInitialized) return
|
||||
if (!customers.length) return
|
||||
let initialRequester = form.getValues("requesterId")
|
||||
if (!initialRequester || !customers.some((customer) => customer.id === initialRequester)) {
|
||||
if (convexUserId && customers.some((customer) => customer.id === convexUserId)) {
|
||||
initialRequester = convexUserId
|
||||
} else {
|
||||
initialRequester = customers[0].id
|
||||
}
|
||||
}
|
||||
const selected = customers.find((customer) => customer.id === initialRequester) ?? null
|
||||
form.setValue("requesterId", initialRequester ?? "", { shouldDirty: false, shouldTouch: false })
|
||||
if (selected?.companyId) {
|
||||
form.setValue("companyId", selected.companyId, { shouldDirty: false, shouldTouch: false })
|
||||
} else if (selected) {
|
||||
form.setValue("companyId", NO_COMPANY_VALUE, { shouldDirty: false, shouldTouch: false })
|
||||
} else {
|
||||
form.setValue("companyId", ALL_COMPANIES_VALUE, { shouldDirty: false, shouldTouch: false })
|
||||
}
|
||||
setCustomersInitialized(true)
|
||||
}, [open, customersInitialized, customers, convexUserId, form])
|
||||
|
||||
useEffect(() => {
|
||||
if (!open || !customersInitialized) return
|
||||
const options = filteredCustomers
|
||||
if (options.length === 0) {
|
||||
if (requesterValue !== "") {
|
||||
form.setValue("requesterId", "", {
|
||||
shouldDirty: true,
|
||||
shouldTouch: true,
|
||||
shouldValidate: form.formState.isSubmitted,
|
||||
})
|
||||
}
|
||||
return
|
||||
}
|
||||
if (!options.some((customer) => customer.id === requesterValue)) {
|
||||
form.setValue("requesterId", options[0].id, {
|
||||
shouldDirty: true,
|
||||
shouldTouch: true,
|
||||
shouldValidate: form.formState.isSubmitted,
|
||||
})
|
||||
}
|
||||
}, [open, customersInitialized, filteredCustomers, requesterValue, form])
|
||||
|
||||
useEffect(() => {
|
||||
if (requesterValue && form.formState.errors.requesterId) {
|
||||
form.clearErrors("requesterId")
|
||||
}
|
||||
}, [requesterValue, form])
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
setAssigneeInitialized(false)
|
||||
|
|
@ -166,6 +305,7 @@ export function NewTicketDialog({ triggerClassName }: { triggerClassName?: strin
|
|||
try {
|
||||
const sel = queues.find((q) => q.name === values.queueName)
|
||||
const selectedAssignee = form.getValues("assigneeId") ?? null
|
||||
const requesterToSend = values.requesterId as Id<"users">
|
||||
const id = await create({
|
||||
actorId: convexUserId as Id<"users">,
|
||||
tenantId: DEFAULT_TENANT_ID,
|
||||
|
|
@ -174,7 +314,7 @@ export function NewTicketDialog({ triggerClassName }: { triggerClassName?: strin
|
|||
priority: values.priority,
|
||||
channel: values.channel,
|
||||
queueId: sel?.id as Id<"queues"> | undefined,
|
||||
requesterId: convexUserId as Id<"users">,
|
||||
requesterId: requesterToSend,
|
||||
assigneeId: selectedAssignee ? (selectedAssignee as Id<"users">) : undefined,
|
||||
categoryId: values.categoryId as Id<"ticketCategories">,
|
||||
subcategoryId: values.subcategoryId as Id<"ticketSubcategories">,
|
||||
|
|
@ -323,6 +463,86 @@ export function NewTicketDialog({ triggerClassName }: { triggerClassName?: strin
|
|||
</Field>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<Field>
|
||||
<FieldLabel>Empresa</FieldLabel>
|
||||
<Select
|
||||
value={companyValue}
|
||||
onValueChange={(value) => {
|
||||
form.setValue("companyId", value, {
|
||||
shouldDirty: value !== companyValue,
|
||||
shouldTouch: true,
|
||||
})
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className={selectTriggerClass}>
|
||||
<SelectValue placeholder="Selecionar empresa" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
|
||||
{companyOptions.map((option) => (
|
||||
<SelectItem key={option.id} value={option.id} className={selectItemClass}>
|
||||
{option.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel className="flex items-center gap-1">
|
||||
Solicitante <span className="text-destructive">*</span>
|
||||
</FieldLabel>
|
||||
<Select
|
||||
value={requesterValue || NO_REQUESTER_VALUE}
|
||||
onValueChange={(value) => {
|
||||
if (value === NO_REQUESTER_VALUE) {
|
||||
form.setValue("requesterId", "", {
|
||||
shouldDirty: true,
|
||||
shouldTouch: true,
|
||||
shouldValidate: form.formState.isSubmitted,
|
||||
})
|
||||
} else {
|
||||
form.setValue("requesterId", value, {
|
||||
shouldDirty: true,
|
||||
shouldTouch: true,
|
||||
shouldValidate: form.formState.isSubmitted,
|
||||
})
|
||||
}
|
||||
}}
|
||||
disabled={filteredCustomers.length === 0}
|
||||
>
|
||||
<SelectTrigger className={selectTriggerClass}>
|
||||
<SelectValue
|
||||
placeholder={filteredCustomers.length === 0 ? "Nenhum usuário disponível" : "Selecionar solicitante"}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent className="max-h-64 rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
|
||||
{filteredCustomers.length === 0 ? (
|
||||
<SelectItem value={NO_REQUESTER_VALUE} disabled className={selectItemClass}>
|
||||
Nenhum usuário disponível
|
||||
</SelectItem>
|
||||
) : (
|
||||
filteredCustomers.map((customer) => (
|
||||
<SelectItem key={customer.id} value={customer.id} className={selectItemClass}>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{customer.name}</span>
|
||||
<span className="text-xs text-neutral-500">{customer.email}</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
))
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{filteredCustomers.length === 0 ? (
|
||||
<FieldError className="mt-1">Nenhum colaborador disponível para a empresa selecionada.</FieldError>
|
||||
) : null}
|
||||
<FieldError
|
||||
errors={
|
||||
form.formState.errors.requesterId
|
||||
? [{ message: form.formState.errors.requesterId.message }]
|
||||
: []
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field>
|
||||
<CategorySelectFields
|
||||
tenantId={DEFAULT_TENANT_ID}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue