diff --git a/src/pages/tickets.tsx b/src/pages/tickets.tsx index 47bfd768..e89ff857 100644 --- a/src/pages/tickets.tsx +++ b/src/pages/tickets.tsx @@ -76,10 +76,26 @@ const TypesClassNames: { [key in TicketType]: string } = { help: "bg-mti-blue-light", }; +const escapedURL = process.env.NEXT_PUBLIC_WEBSITE_URL || ''.replace( + /[.*+?^${}()|[\]\\]/g, + "\\$&" +); +const fromHomepage = [new RegExp(`^${escapedURL}`), /\/contact$/]; + +type Source = "webpage" | "platform" | ""; + +const SOURCE_OPTIONS = [ + { value: "", label: "All" }, + { value: "webpage", label: "Webpage" }, + { value: "platform", label: "Platform" }, +] + export default function Tickets() { const [filteredTickets, setFilteredTickets] = useState([]); const [selectedTicket, setSelectedTicket] = useState(); const [assigneeFilter, setAssigneeFilter] = useState(); + const [sourceFilter, setSourceFilter] = useState(""); + const [dateSorting, setDateSorting] = useState<"asc" | "desc">("desc"); const [typeFilter, setTypeFilter] = useState(); @@ -91,7 +107,7 @@ export default function Tickets() { const sortByDate = (a: Ticket, b: Ticket) => { return moment((dateSorting === "desc" ? b : a).date).diff( - moment((dateSorting === "desc" ? a : b).date), + moment((dateSorting === "desc" ? a : b).date) ); }; @@ -103,11 +119,16 @@ export default function Tickets() { if (statusFilter) filters.push((x: Ticket) => x.status === statusFilter); if (assigneeFilter) filters.push((x: Ticket) => x.assignedTo === assigneeFilter); - + if (sourceFilter) { + if (sourceFilter === "webpage") + filters.push((x: Ticket) => fromHomepage.some((r) => r.test(x.reportedFrom))); + if (sourceFilter === "platform") + filters.push((x: Ticket) => !fromHomepage.some((r) => r.test(x.reportedFrom))); + } setFilteredTickets( - [...filters.reduce((d, f) => d.filter(f), tickets)].sort(sortByDate), + [...filters.reduce((d, f) => d.filter(f), tickets)].sort(sortByDate) ); - }, [tickets, typeFilter, statusFilter, assigneeFilter, dateSorting, user]); + }, [tickets, typeFilter, statusFilter, assigneeFilter, dateSorting, user, sourceFilter]); const columns = [ columnHelper.accessor("id", { @@ -120,7 +141,7 @@ export default function Tickets() { {TicketTypeLabel[info.getValue()]} @@ -163,7 +184,7 @@ export default function Tickets() { {TicketStatusLabel[info.getValue()]} @@ -293,7 +314,7 @@ export default function Tickets() { { value: "me", label: "Assigned to me" }, ...users .filter((x) => - ["admin", "developer", "agent"].includes(x.type), + ["admin", "developer", "agent"].includes(x.type) ) .map((u) => ({ value: u.id, @@ -305,7 +326,7 @@ export default function Tickets() { onChange={(value) => value ? setAssigneeFilter( - value.value === "me" ? user.id : value.value, + value.value === "me" ? user.id : value.value ) : setAssigneeFilter(undefined) } @@ -313,6 +334,18 @@ export default function Tickets() { isClearable /> +
+ +