Update dependencies and version number, remove link tickets endpoint
This commit is contained in:
Darren Clarke
parent
6f0f97ab7b
commit
11563a794e
36 changed files with 2953 additions and 4655 deletions
|
|
@ -1,10 +0,0 @@
|
|||
import { Metadata } from "next";
|
||||
import { ZammadWrapper } from "../../(main)/_components/ZammadWrapper";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Knowledge Base",
|
||||
};
|
||||
|
||||
export default function Page() {
|
||||
return <ZammadWrapper path="/#knowledge_base/1/locale/en-us" />;
|
||||
}
|
||||
|
|
@ -1,100 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { FC, useState } from "react";
|
||||
import {
|
||||
Grid,
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
TextField,
|
||||
} from "@mui/material";
|
||||
import { createTicketArticleAction } from "app/_actions/tickets";
|
||||
|
||||
interface ArticleCreateDialogProps {
|
||||
ticketID: string;
|
||||
open: boolean;
|
||||
closeDialog: () => void;
|
||||
kind: string;
|
||||
recipient?: string;
|
||||
}
|
||||
|
||||
export const ArticleCreateDialog: FC<ArticleCreateDialogProps> = ({
|
||||
ticketID,
|
||||
open,
|
||||
closeDialog,
|
||||
kind,
|
||||
recipient,
|
||||
}) => {
|
||||
const [body, setBody] = useState("");
|
||||
const backgroundColor = kind === "note" ? "#FFB620" : "#1982FC";
|
||||
const color = kind === "note" ? "black" : "white";
|
||||
const article = {
|
||||
body,
|
||||
type: kind,
|
||||
internal: kind === "note",
|
||||
};
|
||||
|
||||
if (kind === "email") {
|
||||
article["to"] = recipient;
|
||||
}
|
||||
|
||||
const createArticle = async () => {
|
||||
await createTicketArticleAction(ticketID, article);
|
||||
closeDialog();
|
||||
setBody("");
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} maxWidth="sm" fullWidth>
|
||||
<DialogContent>
|
||||
<TextField
|
||||
label={kind === "note" ? "Write internal note" : "Write reply"}
|
||||
multiline
|
||||
rows={10}
|
||||
fullWidth
|
||||
value={body}
|
||||
onChange={(e: any) => setBody(e.target.value)}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions sx={{ px: 3, pt: 0, pb: 3 }}>
|
||||
<Grid container justifyContent="space-between">
|
||||
<Grid item>
|
||||
<Button
|
||||
sx={{
|
||||
backgroundColor: "white",
|
||||
color: "#666",
|
||||
fontFamily: "Poppins, sans-serif",
|
||||
fontWeight: 700,
|
||||
borderRadius: 2,
|
||||
textTransform: "none",
|
||||
}}
|
||||
onClick={() => {
|
||||
setBody("");
|
||||
closeDialog();
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Button
|
||||
sx={{
|
||||
backgroundColor,
|
||||
color,
|
||||
fontFamily: "Poppins, sans-serif",
|
||||
fontWeight: 700,
|
||||
borderRadius: 2,
|
||||
textTransform: "none",
|
||||
px: 3,
|
||||
}}
|
||||
onClick={createArticle}
|
||||
>
|
||||
{kind === "note" ? "Save Note" : "Send Reply"}
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,177 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { FC, useState, useEffect } from "react";
|
||||
import { getTicketAction, getTicketArticlesAction } from "app/_actions/tickets";
|
||||
import { Grid, Box, Typography } from "@mui/material";
|
||||
import { Button, fonts, colors } from "@link-stack/ui";
|
||||
import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
|
||||
import {
|
||||
MainContainer,
|
||||
ChatContainer,
|
||||
MessageList,
|
||||
Message,
|
||||
ConversationHeader,
|
||||
} from "@chatscope/chat-ui-kit-react";
|
||||
import { ArticleCreateDialog } from "./ArticleCreateDialog";
|
||||
|
||||
interface TicketDetailProps {
|
||||
id: string;
|
||||
}
|
||||
|
||||
export const TicketDetail: FC<TicketDetailProps> = ({ id }) => {
|
||||
const [ticket, setTicket] = useState<any>(null);
|
||||
const [ticketArticles, setTicketArticles] = useState<any>(null);
|
||||
const { poppins, roboto } = fonts;
|
||||
const { veryLightGray, lightGray } = colors;
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [articleKind, setArticleKind] = useState("note");
|
||||
|
||||
useEffect(() => {
|
||||
const fetchTicket = async () => {
|
||||
const result = await getTicketAction(id);
|
||||
setTicket(result);
|
||||
};
|
||||
|
||||
fetchTicket();
|
||||
|
||||
const interval = setInterval(fetchTicket, 20000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchTicketArticles = async () => {
|
||||
const result = await getTicketArticlesAction(id);
|
||||
setTicketArticles(result);
|
||||
};
|
||||
|
||||
fetchTicketArticles();
|
||||
|
||||
const interval = setInterval(fetchTicketArticles, 5000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [id]);
|
||||
|
||||
const closeDialog = () => setDialogOpen(false);
|
||||
|
||||
const firstArticle = ticketArticles?.edges[0]?.node;
|
||||
const firstArticleKind = firstArticle?.type?.name ?? "phone";
|
||||
const firstEmailSender = firstArticle?.from?.parsed?.[0]?.emailAddress ?? "";
|
||||
const recipient = firstEmailSender;
|
||||
const shouldRender = !!ticket && !!ticketArticles;
|
||||
|
||||
return (
|
||||
<Box sx={{ height: "100%", width: "100%", background: veryLightGray }}>
|
||||
{shouldRender && (
|
||||
<>
|
||||
<MainContainer>
|
||||
<ChatContainer>
|
||||
<ConversationHeader>
|
||||
<ConversationHeader.Content>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
textAlign: "center",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h5"
|
||||
sx={{
|
||||
fontFamily: poppins.style.fontFamily,
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
{ticket.title}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{
|
||||
fontFamily: roboto.style.fontFamily,
|
||||
fontWeight: 400,
|
||||
}}
|
||||
>{`Ticket #${ticket.number} (created ${new Date(
|
||||
ticket.createdAt,
|
||||
).toLocaleDateString()})`}</Typography>
|
||||
</Box>
|
||||
</ConversationHeader.Content>
|
||||
</ConversationHeader>
|
||||
<MessageList style={{ marginBottom: 80 }}>
|
||||
{ticketArticles.edges.map(({ node: article }: any) => (
|
||||
<Message
|
||||
key={article.id}
|
||||
className={
|
||||
article.internal
|
||||
? "internal-note"
|
||||
: article?.sender?.name === "Agent"
|
||||
? "outgoing-message"
|
||||
: "incoming-message"
|
||||
}
|
||||
model={{
|
||||
message: article.bodyWithUrls,
|
||||
type:
|
||||
article.contentType === "text/html" ? "html" : "text",
|
||||
sentTime: article.updated_at,
|
||||
sender: article.from,
|
||||
direction:
|
||||
article.sender === "Agent" ? "outgoing" : "incoming",
|
||||
position: "single",
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</MessageList>
|
||||
</ChatContainer>
|
||||
<Box
|
||||
sx={{
|
||||
height: 80,
|
||||
background: veryLightGray,
|
||||
borderTop: `1px solid ${lightGray}`,
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
width: "100%",
|
||||
zIndex: 1000,
|
||||
}}
|
||||
>
|
||||
<Grid
|
||||
container
|
||||
spacing={6}
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
alignContent="center"
|
||||
sx={{ height: "100%", pt: 6 }}
|
||||
>
|
||||
<Grid item>
|
||||
<Button
|
||||
text="Write note to agent"
|
||||
color="#FFB620"
|
||||
onClick={() => {
|
||||
setArticleKind("note");
|
||||
setDialogOpen(true);
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Button
|
||||
text="Reply to ticket"
|
||||
kind="primary"
|
||||
onClick={() => {
|
||||
setArticleKind(firstArticleKind);
|
||||
setDialogOpen(true);
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</MainContainer>
|
||||
<ArticleCreateDialog
|
||||
ticketID={ticket.internalId}
|
||||
open={dialogOpen}
|
||||
closeDialog={closeDialog}
|
||||
kind={articleKind}
|
||||
recipient={recipient}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import { TicketDetail } from "./_components/TicketDetail";
|
||||
|
||||
type PageProps = {
|
||||
params: Promise<{
|
||||
id: string;
|
||||
}>;
|
||||
};
|
||||
|
||||
export default async function Page({ params }: PageProps) {
|
||||
const { id } = await params;
|
||||
|
||||
return <TicketDetail id={id} />;
|
||||
}
|
||||
|
|
@ -1,201 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { FC, useEffect, useState } from "react";
|
||||
import { Grid, Box } from "@mui/material";
|
||||
import { Select, Button } from "@link-stack/ui";
|
||||
import { MuiChipsInput } from "mui-chips-input";
|
||||
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
|
||||
import {
|
||||
updateTicketAction,
|
||||
getTicketAction,
|
||||
getTicketStatesAction,
|
||||
getTicketPrioritiesAction,
|
||||
} from "app/_actions/tickets";
|
||||
import { getAgentsAction } from "app/_actions/users";
|
||||
import { getGroupsAction } from "app/_actions/groups";
|
||||
|
||||
interface TicketEditProps {
|
||||
id: string;
|
||||
}
|
||||
|
||||
export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
|
||||
const [ticket, setTicket] = useState<any>();
|
||||
const [hasChanges, setHasChanges] = useState(false);
|
||||
const [formState, setFormState] = useState({
|
||||
values: {
|
||||
group: null,
|
||||
owner: null,
|
||||
priority: null,
|
||||
pendingTime: null,
|
||||
state: null,
|
||||
tags: [],
|
||||
},
|
||||
});
|
||||
const [ticketStates, setTicketStates] = useState<any>();
|
||||
const [ticketPriorities, setTicketPriorities] = useState<any>();
|
||||
const [groups, setGroups] = useState<any>();
|
||||
const [agents, setAgents] = useState<any>();
|
||||
const [pendingVisible, setPendingVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchAgents = async () => {
|
||||
const groupID = formState?.values?.group?.split("/")?.pop();
|
||||
const result = await getAgentsAction(groupID);
|
||||
setAgents(result);
|
||||
};
|
||||
|
||||
const fetchGroups = async () => {
|
||||
const result = await getGroupsAction();
|
||||
setGroups(result);
|
||||
};
|
||||
|
||||
const fetchTicketStates = async () => {
|
||||
const result = await getTicketStatesAction();
|
||||
setTicketStates(result);
|
||||
};
|
||||
|
||||
const fetchTicketPriorities = async () => {
|
||||
const result = await getTicketPrioritiesAction();
|
||||
setTicketPriorities(result);
|
||||
};
|
||||
|
||||
fetchTicketStates();
|
||||
fetchTicketPriorities();
|
||||
fetchAgents();
|
||||
fetchGroups();
|
||||
}, [formState.values.group]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchTicket = async () => {
|
||||
const result = await getTicketAction(id);
|
||||
setTicket(result);
|
||||
setFormState({
|
||||
values: {
|
||||
...formState.values,
|
||||
group: result?.group?.id,
|
||||
owner: result?.owner?.id,
|
||||
priority: result?.priority?.id,
|
||||
state: result?.state?.id,
|
||||
tags: result?.tags,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
fetchTicket();
|
||||
}, []);
|
||||
|
||||
const updateFormState = (name: string, value: any) => {
|
||||
setFormState({
|
||||
values: {
|
||||
...formState.values,
|
||||
[name]: value,
|
||||
},
|
||||
});
|
||||
const stateName = ticketStates?.find(
|
||||
(state: any) => state.id === formState.values.state,
|
||||
)?.name;
|
||||
setPendingVisible(stateName?.includes("pending") ?? false);
|
||||
setHasChanges(true);
|
||||
};
|
||||
|
||||
const updateTicket = async () => {
|
||||
await updateTicketAction(id, formState.values);
|
||||
setHasChanges(false);
|
||||
};
|
||||
|
||||
const shouldRender = !!ticket;
|
||||
|
||||
return (
|
||||
<Box sx={{ height: "100vh", background: "#ddd", p: 2 }}>
|
||||
{shouldRender && (
|
||||
<Grid container direction="column" spacing={3}>
|
||||
<Grid item>
|
||||
<Box sx={{ m: 1 }}>Group</Box>
|
||||
<Select
|
||||
name="group"
|
||||
label="Group"
|
||||
formState={formState}
|
||||
updateFormState={updateFormState}
|
||||
getOptions={() => groups}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Box sx={{ m: 1, mt: 0 }}>Owner</Box>
|
||||
<Select
|
||||
name="owner"
|
||||
label="Owner"
|
||||
formState={formState}
|
||||
updateFormState={updateFormState}
|
||||
getOptions={() => agents}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Box sx={{ m: 1, mt: 0 }}>State</Box>
|
||||
<Select
|
||||
name="state"
|
||||
label="State"
|
||||
formState={formState}
|
||||
updateFormState={updateFormState}
|
||||
getOptions={() => ticketStates}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
sx={{ display: pendingVisible ? "inherit" : "none" }}
|
||||
>
|
||||
<DatePicker
|
||||
label="Pending Date"
|
||||
value={new Date(formState.values.pendingTime)}
|
||||
onChange={(newValue: any) => {
|
||||
updateFormState("pendingDate", newValue.toISOString());
|
||||
}}
|
||||
slotProps={{ textField: { size: "small" } }}
|
||||
sx={{
|
||||
width: "100%",
|
||||
backgroundColor: "white",
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Box sx={{ m: 1, mt: 0 }}>Priority</Box>
|
||||
<Select
|
||||
name="priority"
|
||||
label="Priority"
|
||||
formState={formState}
|
||||
updateFormState={updateFormState}
|
||||
getOptions={() => ticketPriorities}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Box sx={{ mb: 1 }}>Tags</Box>
|
||||
<MuiChipsInput
|
||||
sx={{ backgroundColor: "white", width: "100%" }}
|
||||
value={formState.values.tags}
|
||||
hideClearAll
|
||||
onChange={(tags: any) => {
|
||||
updateFormState("tags", tags);
|
||||
}}
|
||||
onDeleteChip={(tag: any) => {
|
||||
const tags = formState.values.tags.filter(
|
||||
(t: any) => t !== tag,
|
||||
);
|
||||
updateFormState("tags", tags);
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item container direction="row-reverse">
|
||||
<Grid item>
|
||||
<Button
|
||||
text="Save"
|
||||
kind="primary"
|
||||
onClick={updateTicket}
|
||||
disabled={!hasChanges}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import { TicketEdit } from "./_components/TicketEdit";
|
||||
|
||||
type PageProps = {
|
||||
params: Promise<{
|
||||
id: string;
|
||||
}>;
|
||||
};
|
||||
|
||||
export default async function Page({ params }: PageProps) {
|
||||
const { id } = await params;
|
||||
|
||||
return <TicketEdit id={id} />;
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { DisplayError } from "app/_components/DisplayError";
|
||||
|
||||
type PageProps = {
|
||||
error: Error;
|
||||
};
|
||||
|
||||
export default function Page({ error }: PageProps) {
|
||||
return <DisplayError error={error} />;
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import { Grid } from "@mui/material";
|
||||
|
||||
type LayoutProps = {
|
||||
detail: any;
|
||||
edit: any;
|
||||
};
|
||||
|
||||
export default async function Layout({ detail, edit }: LayoutProps) {
|
||||
return (
|
||||
<Grid container spacing={0} sx={{ height: "100vh" }} direction="row">
|
||||
<Grid item sx={{ height: "100vh" }} xs={9}>
|
||||
{detail}
|
||||
</Grid>
|
||||
<Grid item xs={3} sx={{ height: "100vh" }}>
|
||||
{edit}
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<div>
|
||||
<h2>Not Found</h2>
|
||||
<p>Could not find requested resource</p>
|
||||
<p>
|
||||
View <Link href="/blog">all posts</Link>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue