From 32be0de6743f3ccf24b9b916555da71c73431669 Mon Sep 17 00:00:00 2001
From: potts99 <japotts16@gmail.com>
Date: Tue, 26 Mar 2024 00:27:00 +0000
Subject: [PATCH] client portal tomfoolery

---
 apps/api/src/controllers/auth.ts     |   1 +
 apps/client/layouts/newLayout.tsx    |  19 +-
 apps/client/layouts/portalLayout.tsx |   4 +-
 apps/client/pages/portal/index.tsx   |  88 ++++---
 apps/client/pages/portal/new.tsx     | 331 ++++++++++++++++++++++++++-
 5 files changed, 383 insertions(+), 60 deletions(-)

diff --git a/apps/api/src/controllers/auth.ts b/apps/api/src/controllers/auth.ts
index 6f6a7ed54..4c11f7e13 100644
--- a/apps/api/src/controllers/auth.ts
+++ b/apps/api/src/controllers/auth.ts
@@ -527,6 +527,7 @@ export function authRoutes(fastify: FastifyInstance) {
           sso_status: config!.sso_active,
           version: config!.client_version,
           notifcations,
+          external_user: user!.external_user,
         };
 
         reply.send({
diff --git a/apps/client/layouts/newLayout.tsx b/apps/client/layouts/newLayout.tsx
index 74833a56d..744d313c7 100644
--- a/apps/client/layouts/newLayout.tsx
+++ b/apps/client/layouts/newLayout.tsx
@@ -334,6 +334,10 @@ export default function NewLayout({ children }: any) {
     alert("You do not have the correct perms for that action.");
   }
 
+  if (user && user.external_user) {
+    location.push("/portal");
+  }
+
   const navigation = [
     {
       name: t("create_ticket"),
@@ -437,14 +441,6 @@ export default function NewLayout({ children }: any) {
     await fetchUserProfile();
   }
 
-  // useEffect(() => {
-  //   getQueues();
-  // }, [user]);
-
-  // useEffect(() => {
-  //   getQueues();
-  // }, [user])
-
   function handleKeyPress(event: any) {
     const pathname = location.pathname;
     console.log(pathname);
@@ -493,7 +489,8 @@ export default function NewLayout({ children }: any) {
   }, [handleKeyPress, location]);
 
   return (
-    !loading && (
+    !loading &&
+    user && (
       <div className="min-h-screen overflow-hidden bg-white dark:bg-[#0A090C]">
         <Transition.Root show={sidebarOpen} as={Fragment}>
           <Dialog
@@ -1132,7 +1129,9 @@ export default function NewLayout({ children }: any) {
             </div>
           </div>
 
-          <main className="bg-white dark:bg-[#0A090C]">{children}</main>
+          {!loading && !user.external_user && (
+            <main className="bg-white dark:bg-[#0A090C]">{children}</main>
+          )}
         </div>
       </div>
     )
diff --git a/apps/client/layouts/portalLayout.tsx b/apps/client/layouts/portalLayout.tsx
index 9a6c0f75b..865904ed7 100644
--- a/apps/client/layouts/portalLayout.tsx
+++ b/apps/client/layouts/portalLayout.tsx
@@ -494,7 +494,7 @@ export default function PortalLayout({ children }: any) {
                     leaveTo="transform opacity-0 scale-95"
                   >
                     <Menu.Items className="bg-white absolute right-0 z-50 w-40 origin-top-right rounded-md  shadow-lg ring-1 ring-gray-900/5 focus:outline-none">
-                      <Menu.Item>
+                      {/* <Menu.Item>
                         {({ active }) => (
                           <Link
                             href="/settings/profile"
@@ -506,7 +506,7 @@ export default function PortalLayout({ children }: any) {
                             {t("profile")}
                           </Link>
                         )}
-                      </Menu.Item>
+                      </Menu.Item> */}
                       <Menu.Item>
                         {({ active }) => (
                           <button
diff --git a/apps/client/pages/portal/index.tsx b/apps/client/pages/portal/index.tsx
index 0cb259b7f..fb7855732 100644
--- a/apps/client/pages/portal/index.tsx
+++ b/apps/client/pages/portal/index.tsx
@@ -1,4 +1,3 @@
-import Link from "next/link";
 import { useEffect, useState } from "react";
 
 import useTranslation from "next-translate/useTranslation";
@@ -22,47 +21,47 @@ export default function Home() {
   const [loading, setLoading] = useState(true);
   const [tickets, setTickets] = useState<any>();
 
-  async function getOpenTickets() {
-    await fetch(`/api/v1/data/tickets/open`, {
-      method: "GET",
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    })
-      .then((res) => res.json())
-      .then((res) => {
-        setOpenTickets(res.count);
-      });
-  }
+  // async function getOpenTickets() {
+  //   await fetch(`/api/v1/data/tickets/open`, {
+  //     method: "GET",
+  //     headers: {
+  //       Authorization: `Bearer ${token}`,
+  //     },
+  //   })
+  //     .then((res) => res.json())
+  //     .then((res) => {
+  //       setOpenTickets(res.count);
+  //     });
+  // }
 
-  async function getCompletedTickets() {
-    await fetch(`/api/v1/data/tickets/completed`, {
-      method: "GET",
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    })
-      .then((res) => res.json())
-      .then((res) => {
-        setCompletedTickets(res.count);
-      });
-  }
+  // async function getCompletedTickets() {
+  //   await fetch(`/api/v1/data/tickets/completed`, {
+  //     method: "GET",
+  //     headers: {
+  //       Authorization: `Bearer ${token}`,
+  //     },
+  //   })
+  //     .then((res) => res.json())
+  //     .then((res) => {
+  //       setCompletedTickets(res.count);
+  //     });
+  // }
 
-  async function getUnassginedTickets() {
-    await fetch(`/api/v1/data/tickets/open`, {
-      method: "GET",
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    })
-      .then((res) => res.json())
-      .then((res) => {
-        setUnassigned(res.count);
-      });
-  }
+  // async function getUnassginedTickets() {
+  //   await fetch(`/api/v1/data/tickets/open`, {
+  //     method: "GET",
+  //     headers: {
+  //       Authorization: `Bearer ${token}`,
+  //     },
+  //   })
+  //     .then((res) => res.json())
+  //     .then((res) => {
+  //       setUnassigned(res.count);
+  //     });
+  // }
 
   async function fetchTickets() {
-    await fetch(`/api/v1/tickets/open`, {
+    await fetch(`/api/v1/tickets/user/open`, {
       method: "GET",
       headers: {
         Authorization: `Bearer ${token}`,
@@ -70,7 +69,6 @@ export default function Home() {
     })
       .then((res) => res.json())
       .then((res) => {
-        console.log(res);
         setTickets(res.tickets);
       });
   }
@@ -95,9 +93,9 @@ export default function Home() {
 
   async function datafetch() {
     fetchTickets();
-    getOpenTickets();
-    getCompletedTickets();
-    getUnassginedTickets();
+    // getOpenTickets();
+    // getCompletedTickets();
+    // getUnassginedTickets();
     await setLoading(false);
   }
 
@@ -110,7 +108,7 @@ export default function Home() {
       <div className="w-full xl:w-[70%] max-w-5xl">
         {!loading && (
           <>
-            <div>
+            {/* <div>
               <dl className="grid grid-cols-1 gap-5 sm:grid-cols-3">
                 {stats.map((item) => (
                   <Link href={item.href}>
@@ -128,7 +126,7 @@ export default function Home() {
                   </Link>
                 ))}
               </dl>
-            </div>
+            </div> */}
 
             <div className="flex w-full flex-col mt-4 px-1 mb-4">
               {tickets !== undefined && tickets.length === 0 ? (
@@ -136,7 +134,7 @@ export default function Home() {
                   <button
                     type="button"
                     className="relative block w-full rounded-lg border-2 border-dashed border-gray-300 p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                    onClick={() => router.push("/new")}
+                    onClick={() => router.push("/portal/new")}
                   >
                     <svg
                       className="mx-auto h-12 w-12 text-gray-400 dark:text-white"
diff --git a/apps/client/pages/portal/new.tsx b/apps/client/pages/portal/new.tsx
index 196d421b6..32ffc8e82 100644
--- a/apps/client/pages/portal/new.tsx
+++ b/apps/client/pages/portal/new.tsx
@@ -1,7 +1,332 @@
-export default function Portal() {
+// Check if the ID matches the id of the company
+// If true then show ticket creation htmlForm else show access denied htmlForm
+// API post request to creating a ticket with relevant client info
+// Default to unassigned engineer
+// Send Email to customer with ticket creation
+// Send Email to Engineers with ticket creation if email notifications are turned on
+
+import { Listbox, Transition } from "@headlessui/react";
+import {
+  CheckCircleIcon,
+  CheckIcon,
+  ChevronUpDownIcon,
+} from "@heroicons/react/20/solid";
+import { notifications } from "@mantine/notifications";
+import { useRouter } from "next/router";
+import { Fragment, useState } from "react";
+import { useUser } from "../../store/session";
+
+const type = [
+  { id: 5, name: "Incident" },
+  { id: 1, name: "Service" },
+  { id: 2, name: "Feature" },
+  { id: 3, name: "Bug" },
+  { id: 4, name: "Maintenance" },
+  { id: 6, name: "Access" },
+  { id: 8, name: "Feedback" },
+];
+
+const pri = [
+  { id: 7, name: "Low" },
+  { id: 8, name: "Medium" },
+  { id: 9, name: "High" },
+];
+
+export default function ClientTicketNew() {
+  function classNames(...classes) {
+    return classes.filter(Boolean).join(" ");
+  }
+
+  const { user } = useUser();
+
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [view, setView] = useState("new");
+  const [ticketID, setTicketID] = useState("");
+
+  const [selected, setSelected] = useState(type[2]);
+  const [subject, setSubject] = useState("");
+  const [description, setDescription] = useState("");
+  const [priority, setPriority] = useState(pri[0]);
+
+  async function submitTicket() {
+    setIsLoading(true);
+    await fetch(`/api/v1/ticket/create`, {
+      method: "POST",
+      headers: {
+        "content-type": "application/json",
+      },
+      body: JSON.stringify({
+        name: user.name,
+        title: subject,
+        email: user.email,
+        detail: description,
+        priority: priority.name,
+        type: selected.name,
+      }),
+    })
+      .then((res) => res.json())
+      .then((res) => {
+        if (res.success === true) {
+          notifications.show({
+            title: "Ticket Created",
+            message: "Ticket created succesfully",
+            color: "green",
+            autoClose: 5000,
+          });
+          setView("success");
+          setTicketID(res.id);
+        } else {
+          notifications.show({
+            title: "Error",
+            message: `Please fill out all information and try again`,
+            color: "red",
+            autoClose: 5000,
+          });
+        }
+      });
+    setIsLoading(false);
+  }
+
   return (
-    <div>
-      <h1>Portal</h1>
+    <div className="flex justify-center items-center content-center h-screen bg-gray-100">
+      {view === "new" ? (
+        <div className="max-w-4xl min-w-[400px] sm:min-w-[600px] shadow-xl bg-white p-12 rounded-md">
+          <h1 className="font-bold text-2xl">Submit a Ticket</h1>
+
+          <div className="my-4 flex flex-col space-y-4">
+            <div>
+              <label
+                htmlFor="email"
+                className="block text-sm font-medium leading-6 text-gray-900"
+              >
+                Subject
+              </label>
+              <div className="mt-2">
+                <input
+                  type="email"
+                  name="email"
+                  id="email"
+                  className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-green-600 sm:text-sm sm:leading-6"
+                  placeholder="I can't login to my account"
+                  onChange={(e) => setSubject(e.target.value)}
+                  value={subject}
+                />
+              </div>
+            </div>
+
+            <Listbox value={selected} onChange={setSelected}>
+              {({ open }) => (
+                <>
+                  <Listbox.Label className="block text-sm font-medium leading-6 text-gray-900">
+                    Issue Type
+                  </Listbox.Label>
+                  <div className="relative mt-2">
+                    <Listbox.Button className="relative w-full cursor-default rounded-md bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none sm:text-sm sm:leading-6">
+                      <span className="block truncate">{selected.name}</span>
+                      <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                        <ChevronUpDownIcon
+                          className="h-5 w-5 text-gray-400"
+                          aria-hidden="true"
+                        />
+                      </span>
+                    </Listbox.Button>
+
+                    <Transition
+                      show={open}
+                      as={Fragment}
+                      leave="transition ease-in duration-100"
+                      leaveFrom="opacity-100"
+                      leaveTo="opacity-0"
+                    >
+                      <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                        {type.map((person) => (
+                          <Listbox.Option
+                            key={person.id}
+                            className={({ active }) =>
+                              classNames(
+                                active
+                                  ? "bg-gray-400 text-white"
+                                  : "text-gray-900",
+                                "relative cursor-default select-none py-2 pl-3 pr-9"
+                              )
+                            }
+                            value={person}
+                          >
+                            {({ selected, active }) => (
+                              <>
+                                <span
+                                  className={classNames(
+                                    selected ? "font-semibold" : "font-normal",
+                                    "block truncate"
+                                  )}
+                                >
+                                  {person.name}
+                                </span>
+
+                                {selected ? (
+                                  <span
+                                    className={classNames(
+                                      active ? "text-white" : "text-indigo-600",
+                                      "absolute inset-y-0 right-0 flex items-center pr-4"
+                                    )}
+                                  >
+                                    <CheckIcon
+                                      className="h-5 w-5"
+                                      aria-hidden="true"
+                                    />
+                                  </span>
+                                ) : null}
+                              </>
+                            )}
+                          </Listbox.Option>
+                        ))}
+                      </Listbox.Options>
+                    </Transition>
+                  </div>
+                </>
+              )}
+            </Listbox>
+
+            <Listbox value={priority} onChange={setPriority}>
+              {({ open }) => (
+                <>
+                  <Listbox.Label className="block text-sm font-medium leading-6 text-gray-900">
+                    Priority
+                  </Listbox.Label>
+                  <div className="relative mt-2">
+                    <Listbox.Button className="relative w-full cursor-default rounded-md bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none sm:text-sm sm:leading-6">
+                      <span className="block truncate">{priority.name}</span>
+                      <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                        <ChevronUpDownIcon
+                          className="h-5 w-5 text-gray-400"
+                          aria-hidden="true"
+                        />
+                      </span>
+                    </Listbox.Button>
+
+                    <Transition
+                      show={open}
+                      as={Fragment}
+                      leave="transition ease-in duration-100"
+                      leaveFrom="opacity-100"
+                      leaveTo="opacity-0"
+                    >
+                      <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                        {pri.map((person) => (
+                          <Listbox.Option
+                            key={person.id}
+                            className={({ active }) =>
+                              classNames(
+                                active
+                                  ? "bg-gray-400 text-white"
+                                  : "text-gray-900",
+                                "relative cursor-default select-none py-2 pl-3 pr-9"
+                              )
+                            }
+                            value={person}
+                          >
+                            {({ selected, active }) => (
+                              <>
+                                <span
+                                  className={classNames(
+                                    selected ? "font-semibold" : "font-normal",
+                                    "block truncate"
+                                  )}
+                                >
+                                  {person.name}
+                                </span>
+
+                                {selected ? (
+                                  <span
+                                    className={classNames(
+                                      active ? "text-white" : "text-indigo-600",
+                                      "absolute inset-y-0 right-0 flex items-center pr-4"
+                                    )}
+                                  >
+                                    <CheckIcon
+                                      className="h-5 w-5"
+                                      aria-hidden="true"
+                                    />
+                                  </span>
+                                ) : null}
+                              </>
+                            )}
+                          </Listbox.Option>
+                        ))}
+                      </Listbox.Options>
+                    </Transition>
+                  </div>
+                </>
+              )}
+            </Listbox>
+
+            <div>
+              <label
+                htmlFor="comment"
+                className="block text-sm font-medium leading-6 text-gray-900"
+              >
+                Description of Issue
+              </label>
+              <div className="mt-2">
+                <textarea
+                  rows={4}
+                  name="comment"
+                  id="comment"
+                  className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                  defaultValue={""}
+                  placeholder="I think i locked myself out!"
+                  onChange={(e) => setDescription(e.target.value)}
+                  value={description}
+                />
+              </div>
+            </div>
+
+            <button
+              type="button"
+              onClick={submitTicket}
+              disabled={isLoading}
+              className="rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 "
+            >
+              Submit Ticket
+            </button>
+          </div>
+        </div>
+      ) : (
+        <>
+          <div className="rounded-md bg-green-600 shadow-md p-12">
+            <div className="flex">
+              <div className="flex-shrink-0">
+                <CheckCircleIcon
+                  className="h-10 w-10 text-white"
+                  aria-hidden="true"
+                />
+              </div>
+              <div className="ml-3">
+                <h3 className="text-4xl font-medium text-white">
+                  Ticket Submitted
+                </h3>
+                <div className="mt-2 text-sm text-white">
+                  <p>
+                    A member of our team has been notified and will be in touch
+                    shortly.
+                  </p>
+                </div>
+                {/* <div className="mt-4">
+                  <div className="-mx-2 -my-1.5 flex">
+                    <Link
+                      href={`/portal/${router.query.id}/ticket/${ticketID}`}
+                      className="rounded-md bg-green-50 px-2 py-1.5 text-sm font-medium text-green-800 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2 focus:ring-offset-green-50"
+                    >
+                      View status
+                    </Link>
+                  </div>
+                </div> */}
+              </div>
+            </div>
+          </div>
+        </>
+      )}
     </div>
   );
 }