analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
437 lines (433 loc) • 17.1 kB
JavaScript
import {
getCategoryText,
getStatusBadgeAction,
getStatusText
} from "./chunk-VZCL555A.mjs";
import {
TextArea_default
} from "./chunk-LI2FS7M2.mjs";
import {
SkeletonText
} from "./chunk-NKVUUWCA.mjs";
import {
Badge_default
} from "./chunk-OEW3ST4F.mjs";
import {
Divider_default
} from "./chunk-VN4ORBHU.mjs";
import {
Modal_default
} from "./chunk-TNLGS7SB.mjs";
import {
Button_default
} from "./chunk-LAYB7IKW.mjs";
import {
Text_default
} from "./chunk-IMCIR6TJ.mjs";
// src/components/Support/components/TicketModal.tsx
import { useState, useEffect, useCallback } from "react";
import dayjs from "dayjs";
import "dayjs/locale/pt-br";
// src/components/Support/utils/supportUtils.tsx
import { KeyIcon, BugIcon, InfoIcon } from "@phosphor-icons/react";
import { jsx } from "react/jsx-runtime";
var getCategoryIcon = (category, size = 16) => {
if (!category) return null;
switch (category) {
case "acesso" /* ACESSO */:
return /* @__PURE__ */ jsx(KeyIcon, { size });
case "tecnico" /* TECNICO */:
return /* @__PURE__ */ jsx(BugIcon, { size });
case "outros" /* OUTROS */:
return /* @__PURE__ */ jsx(InfoIcon, { size });
default:
return /* @__PURE__ */ jsx(InfoIcon, { size });
}
};
// src/components/Support/components/TicketModal.tsx
import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
dayjs.locale("pt-br");
var AnswerSkeleton = () => /* @__PURE__ */ jsxs("div", { className: "bg-background p-4 space-y-6 rounded-xl", children: [
/* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-6", children: [
/* @__PURE__ */ jsx2(SkeletonText, { width: "80px", height: 16 }),
/* @__PURE__ */ jsx2(SkeletonText, { width: "200px", height: 16 })
] }),
/* @__PURE__ */ jsx2(Divider_default, {}),
/* @__PURE__ */ jsxs("div", { className: "flex items-start space-x-6", children: [
/* @__PURE__ */ jsx2(SkeletonText, { width: "80px", height: 16 }),
/* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
/* @__PURE__ */ jsx2(SkeletonText, { width: "100%", height: 16 }),
/* @__PURE__ */ jsx2(SkeletonText, { width: "80%", height: 16 }),
/* @__PURE__ */ jsx2(SkeletonText, { width: "60%", height: 16 })
] })
] })
] });
var TicketModal = ({
ticket,
isOpen,
onClose,
onTicketClose,
apiClient,
userId
}) => {
const [showCloseConfirmation, setShowCloseConfirmation] = useState(false);
const [responseText, setResponseText] = useState("");
const [answers, setAnswers] = useState([]);
const [isSubmittingAnswer, setIsSubmittingAnswer] = useState(false);
const [isLoadingAnswers, setIsLoadingAnswers] = useState(false);
const handleCloseTicket = () => {
onTicketClose?.(ticket.id);
setShowCloseConfirmation(false);
onClose();
};
const fetchAnswers = useCallback(async () => {
if (!ticket.id || ticket.status !== "respondido" /* RESPONDIDO */) return;
setIsLoadingAnswers(true);
try {
const response = await apiClient.get(
`/support/answer/${ticket.id}`
);
setAnswers(response.data.data || []);
} catch (error) {
console.error("Erro ao buscar respostas:", error);
setAnswers([]);
} finally {
setIsLoadingAnswers(false);
}
}, [ticket.id, ticket.status, apiClient]);
const handleSubmitAnswer = async () => {
if (!responseText.trim() || !userId || !ticket.id) {
return;
}
setIsSubmittingAnswer(true);
try {
const requestData = {
userId,
supportId: ticket.id,
answer: responseText.trim()
};
await apiClient.post(
"/support/answer",
requestData
);
setResponseText("");
await fetchAnswers();
} catch (error) {
console.error("Erro ao enviar resposta:", error);
} finally {
setIsSubmittingAnswer(false);
}
};
const canCloseTicket = ticket.status !== "encerrado" /* ENCERRADO */;
useEffect(() => {
if (isOpen) {
setResponseText("");
(async () => {
await fetchAnswers();
})().catch((error) => {
console.error("Erro ao carregar respostas:", error);
});
} else {
setAnswers([]);
}
}, [isOpen, fetchAnswers]);
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx2(
Modal_default,
{
isOpen,
onClose,
title: `Pedido: ${ticket.title}`,
size: "lg",
hideCloseButton: false,
closeOnEscape: true,
"data-testid": "ticket-modal",
children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full max-h-[80vh]", children: [
/* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-3", children: [
/* @__PURE__ */ jsx2(Text_default, { size: "md", weight: "bold", className: "text-text-950", children: "Detalhes" }),
canCloseTicket && /* @__PURE__ */ jsx2(
Button_default,
{
variant: "outline",
size: "small",
action: "negative",
onClick: () => setShowCloseConfirmation(true),
children: "Encerrar Pedido"
}
)
] }),
/* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto pr-2 space-y-6", children: [
/* @__PURE__ */ jsxs("div", { className: "bg-background p-4 space-y-6 rounded-xl", children: [
/* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-6", children: [
/* @__PURE__ */ jsx2(
Text_default,
{
size: "md",
weight: "semibold",
className: "text-text-700 w-20",
children: "ID"
}
),
/* @__PURE__ */ jsx2(Text_default, { size: "md", weight: "normal", className: "text-text-600", children: ticket.id })
] }),
/* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-6", children: [
/* @__PURE__ */ jsx2(
Text_default,
{
size: "md",
weight: "semibold",
className: "text-text-700 w-20",
children: "Aberto em"
}
),
/* @__PURE__ */ jsx2(Text_default, { size: "md", weight: "normal", className: "text-text-600", children: dayjs(ticket.createdAt).format("DD MMMM YYYY, [\xE0s] HH[h]") })
] }),
/* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-6", children: [
/* @__PURE__ */ jsx2(
Text_default,
{
size: "md",
weight: "semibold",
className: "text-text-700 w-20",
children: "Status"
}
),
/* @__PURE__ */ jsx2(
Badge_default,
{
variant: "solid",
size: "small",
action: getStatusBadgeAction(ticket.status),
className: "w-fit",
children: getStatusText(ticket.status)
}
)
] }),
/* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-6", children: [
/* @__PURE__ */ jsx2(
Text_default,
{
size: "md",
weight: "semibold",
className: "text-text-700 w-20",
children: "Tipo"
}
),
/* @__PURE__ */ jsxs(
Badge_default,
{
variant: "solid",
size: "small",
action: "muted",
className: "w-fit",
children: [
getCategoryIcon(ticket.category),
getCategoryText(ticket.category)
]
}
)
] }),
/* @__PURE__ */ jsx2(Divider_default, {}),
/* @__PURE__ */ jsxs("div", { className: "flex items-start space-x-6", children: [
/* @__PURE__ */ jsx2(
Text_default,
{
size: "md",
weight: "semibold",
className: "text-text-700 w-20",
children: "Descri\xE7\xE3o"
}
),
ticket.description && /* @__PURE__ */ jsx2(Text_default, { size: "md", weight: "normal", className: "text-text-600", children: ticket.description })
] })
] }),
ticket.status === "respondido" /* RESPONDIDO */ && isLoadingAnswers && /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx2(Text_default, { size: "md", weight: "bold", className: "text-text-950 my-6", children: "Resposta de Suporte T\xE9cnico" }),
/* @__PURE__ */ jsx2(AnswerSkeleton, {})
] }),
!isLoadingAnswers && answers.some((answer) => answer.userId !== userId) && /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx2(Text_default, { size: "md", weight: "bold", className: "text-text-950 my-6", children: "Resposta de Suporte T\xE9cnico" }),
answers.filter((answer) => answer.userId !== userId).sort(
(a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
).slice(0, 1).map((answer) => /* @__PURE__ */ jsxs(
"div",
{
className: "bg-background p-4 space-y-6 rounded-xl",
children: [
/* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-6", children: [
/* @__PURE__ */ jsx2(
Text_default,
{
size: "md",
weight: "semibold",
className: "text-text-700 w-20",
children: "Recebido"
}
),
/* @__PURE__ */ jsx2(
Text_default,
{
size: "md",
weight: "normal",
className: "text-text-600",
children: dayjs(answer.createdAt).format(
"DD MMMM YYYY, [\xE0s] HH[h]"
)
}
)
] }),
/* @__PURE__ */ jsx2(Divider_default, {}),
/* @__PURE__ */ jsxs("div", { className: "flex items-start space-x-6", children: [
/* @__PURE__ */ jsx2(
Text_default,
{
size: "md",
weight: "semibold",
className: "text-text-700 w-20",
children: "Resposta"
}
),
/* @__PURE__ */ jsx2(
Text_default,
{
size: "md",
weight: "normal",
className: "text-text-600",
children: answer.answer
}
)
] })
]
},
answer.id
))
] }),
!isLoadingAnswers && answers.some((answer) => answer.userId === userId) && /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx2(Text_default, { size: "md", weight: "bold", className: "text-text-950 my-6", children: "Resposta enviada" }),
answers.filter((answer) => answer.userId === userId).sort(
(a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
).slice(0, 1).map((answer) => /* @__PURE__ */ jsxs(
"div",
{
className: "bg-background p-4 space-y-6 rounded-xl",
children: [
/* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-6", children: [
/* @__PURE__ */ jsx2(
Text_default,
{
size: "md",
weight: "semibold",
className: "text-text-700 w-20",
children: "Enviada"
}
),
/* @__PURE__ */ jsx2(
Text_default,
{
size: "md",
weight: "normal",
className: "text-text-600",
children: dayjs(answer.createdAt).format(
"DD MMMM YYYY, [\xE0s] HH[h]"
)
}
)
] }),
/* @__PURE__ */ jsx2(Divider_default, {}),
/* @__PURE__ */ jsxs("div", { className: "flex items-start space-x-6", children: [
/* @__PURE__ */ jsx2(
Text_default,
{
size: "md",
weight: "semibold",
className: "text-text-700 w-20",
children: "Resposta"
}
),
/* @__PURE__ */ jsx2(
Text_default,
{
size: "md",
weight: "normal",
className: "text-text-600",
children: answer.answer
}
)
] })
]
},
answer.id
))
] }),
!isLoadingAnswers && answers.some((answer) => answer.userId !== userId) && /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx2(Text_default, { size: "lg", weight: "bold", className: "text-text-950 my-6", children: "Responder" }),
/* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
/* @__PURE__ */ jsx2(
TextArea_default,
{
placeholder: "Detalhe o problema aqui.",
rows: 4,
className: "w-full",
value: responseText,
onChange: (e) => setResponseText(e.target.value)
}
),
responseText.trim().length > 0 && /* @__PURE__ */ jsx2("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx2(
Button_default,
{
variant: "solid",
size: "medium",
onClick: handleSubmitAnswer,
disabled: isSubmittingAnswer,
children: isSubmittingAnswer ? "Enviando..." : "Enviar"
}
) })
] })
] })
] })
] })
}
),
/* @__PURE__ */ jsx2(
Modal_default,
{
isOpen: showCloseConfirmation,
onClose: () => setShowCloseConfirmation(false),
title: "Encerrar pedido?",
size: "md",
hideCloseButton: false,
closeOnEscape: true,
"data-testid": "close-ticket-modal",
children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
/* @__PURE__ */ jsx2(Text_default, { size: "sm", weight: "normal", className: "text-text-700", children: "Ao encerrar este pedido, ele ser\xE1 fechado e n\xE3o poder\xE1 mais ser atualizado." }),
/* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-end", children: [
/* @__PURE__ */ jsx2(
Button_default,
{
variant: "outline",
size: "medium",
onClick: () => setShowCloseConfirmation(false),
children: "Cancelar"
}
),
/* @__PURE__ */ jsx2(
Button_default,
{
variant: "solid",
size: "medium",
action: "negative",
onClick: handleCloseTicket,
children: "Encerrar"
}
)
] })
] })
}
)
] });
};
export {
getCategoryIcon,
TicketModal
};
//# sourceMappingURL=chunk-M4EZMNXT.mjs.map