Merged develop into feature-tickets-with-admin

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<Ticket[]>([]);
   const [selectedTicket, setSelectedTicket] = useState<Ticket>();
   const [assigneeFilter, setAssigneeFilter] = useState<string>();
+  const [sourceFilter, setSourceFilter] = useState<Source>("");
+
   const [dateSorting, setDateSorting] = useState<"asc" | "desc">("desc");
 
   const [typeFilter, setTypeFilter] = useState<TicketType>();
@@ -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() {
         <span
           className={clsx(
             "rounded-lg p-1 px-2 text-white",
-            TypesClassNames[info.getValue()],
+            TypesClassNames[info.getValue()]
           )}
         >
           {TicketTypeLabel[info.getValue()]}
@@ -163,7 +184,7 @@ export default function Tickets() {
         <span
           className={clsx(
             "rounded-lg p-1 px-2 text-white",
-            StatusClassNames[info.getValue()],
+            StatusClassNames[info.getValue()]
           )}
         >
           {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
               />
             </div>
+            <div className="flex w-full flex-col gap-3">
+              <label className="text-mti-gray-dim text-base font-normal">
+                Source
+              </label>
+              <Select
+                options={SOURCE_OPTIONS}
+                disabled={user.type === "agent"}
+                value={SOURCE_OPTIONS.find((x) => x.value === sourceFilter)}
+                onChange={(value) => setSourceFilter(value?.value as Source)
+                }
+              />
+            </div>
           </div>
 
           <table className="bg-mti-purple-ultralight/40 w-full rounded-xl">
@@ -325,7 +358,7 @@ export default function Tickets() {
                         ? null
                         : flexRender(
                             header.column.columnDef.header,
-                            header.getContext(),
+                            header.getContext()
                           )}
                     </th>
                   ))}
@@ -337,7 +370,7 @@ export default function Tickets() {
                 <tr
                   className={clsx(
                     "even:bg-mti-purple-ultralight/40 hover:bg-mti-purple-ultralight cursor-pointer rounded-lg py-2 odd:bg-white",
-                    "transition duration-300 ease-in-out",
+                    "transition duration-300 ease-in-out"
                   )}
                   onClick={() => setSelectedTicket(row.original)}
                   key={row.id}
@@ -346,7 +379,7 @@ export default function Tickets() {
                     <td className="w-fit items-center px-4 py-2" key={cell.id}>
                       {flexRender(
                         cell.column.columnDef.cell,
-                        cell.getContext(),
+                        cell.getContext()
                       )}
                     </td>
                   ))}