wip: submit feedback popup

src/components/Feedback/SubmitFeedbackPopup.tsx

@@ -0,0 +1,140 @@
+import { useEffect, useRef, useState } from "preact/hooks";
+import { useToast } from "../../hooks/use-toast";
+import { useTeamId } from "../../hooks/use-team-id";
+import { useOutsideClick } from "../../hooks/use-outside-click";
+import { useKeydown } from "../../hooks/use-keydown";
+import { httpPost } from "../../lib/http";
+import { CheckIcon } from "../ReactIcons/CheckIcon";
+
+type SubmitFeedbackPopupProps = {
+  onClose: () => void;
+};
+
+export function SubmitFeedbackPopup(props: SubmitFeedbackPopupProps) {
+  const { onClose } = props;
+
+  const toast = useToast();
+  const popupBodyEl = useRef<HTMLDivElement>(null);
+  const inputEl = useRef<HTMLTextAreaElement>(null);
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [feedbackText, setFeedbackText] = useState('');
+  const [isSuccess, setIsSuccess] = useState(false);
+  const { teamId } = useTeamId();
+
+  useOutsideClick(popupBodyEl, () => {
+    onClose();
+  });
+
+  useKeydown('Escape', () => {
+    onClose();
+  });
+
+  useEffect(() => {
+    inputEl.current?.focus();
+  }, []);
+
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    const { response, error } = await httpPost<{ status: 'ok' }>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-submit-team-feedback/${teamId}`, {
+      feedback: feedbackText,
+    }
+    );
+
+    if (error || !response) {
+      setIsLoading(false);
+      setError(error?.message || 'Something went wrong');
+      return;
+    }
+
+    toast.success('Team feedback submitted successfully');
+    setIsSuccess(true);
+  };
+
+  const handleClosePopup = () => {
+    setIsLoading(false);
+    setError('');
+    setFeedbackText('');
+
+    onClose();
+  };
+
+  return (
+    <div class="fixed left-0 right-0 top-0 z-50 flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50">
+      <div class="relative h-full w-full max-w-md p-4 md:h-auto">
+        <div
+          ref={popupBodyEl}
+          class="popup-body relative rounded-lg bg-white p-4 shadow"
+        >
+          {!isSuccess && (
+            <>
+              <h2 class="text-2xl font-semibold text-black">Enter your feedback</h2>
+              <form onSubmit={handleSubmit}>
+                <div className="my-4">
+                  <textarea
+                    ref={inputEl}
+                    name="submit-feedback"
+                    id="submit-feedback"
+                    className="mt-2 block w-full rounded-md border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:border-gray-400 min-h-[150px]"
+                    placeholder="Enter your feedback"
+                    required
+                    autoFocus
+                    value={feedbackText}
+                    onInput={(e) =>
+                      setFeedbackText((e.target as HTMLInputElement).value)
+                    }
+                  />
+                  {error && (
+                    <p className="mt-2 rounded-lg bg-red-100 p-2 text-red-700">
+                      {error}
+                    </p>
+                  )}
+                </div>
+
+                <div className="flex items-center gap-2">
+                  <button
+                    type="button"
+                    disabled={isLoading}
+                    onClick={handleClosePopup}
+                    className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    disabled={isLoading}
+                    type="submit"
+                    className="flex-grow cursor-pointer rounded-lg bg-black py-2 text-white disabled:opacity-40"
+                  >
+                    {isLoading ? 'Please wait ..' : 'Send'}
+                  </button>
+                </div>
+              </form>
+            </>
+          )}
+
+          {isSuccess && (
+            <div className="flex flex-col items-center w-full">
+              <CheckIcon additionalClasses="w-16 h-16 text-green-500" />
+              <h1
+                className="text-xl sm:text-2xl font-semibold text-black mt-4"
+              >Feedback Submitted</h1>
+              <p className="text-sm sm:text-base text-gray-500 text-center">Thank you for submitting your feedback.</p>
+              <button
+                type="button"
+                onClick={handleClosePopup}
+                className="flex-grow text-center mt-8 w-full cursor-pointer rounded-lg bg-black py-2 text-white disabled:opacity-40"
+              >
+                Close
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/TeamSidebar.tsx

@@ -11,12 +11,14 @@ import { useState } from 'preact/hooks';
 import { useStore } from '@nanostores/preact';
 import { $canManageCurrentTeam, $currentTeam } from '../stores/team';
 import { WarningIcon } from './ReactIcons/WarningIcon';
+import { SubmitFeedbackPopup } from './Feedback/SubmitFeedbackPopup';
 
 export const TeamSidebar: FunctionalComponent<{
   activePageId: string;
 }> = ({ activePageId, children }) => {
   const [menuShown, setMenuShown] = useState(false);
   const currentTeam = useStore($currentTeam);
+  const [showFeedbackPopup, setShowFeedbackPopup] = useState(true);
 
   const { teamId } = useTeamId();
 
@@ -74,8 +76,7 @@ export const TeamSidebar: FunctionalComponent<{
             <li>
               <a
                 href="/team"
-                class={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200 ${
+                class={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200 ${activePageId === 'team' ? 'bg-slate-100' : ''
-                  activePageId === 'team' ? 'bg-slate-100' : ''
                   }`}
               >
                 <img alt={'teams'} src={GroupIcon} class={`mr-2 h-4 w-4`} />
@@ -89,8 +90,7 @@ export const TeamSidebar: FunctionalComponent<{
                 <li>
                   <a
                     href={sidebarLink.href}
-                    class={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200 ${
+                    class={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200 ${isActive ? 'bg-slate-100' : ''
-                      isActive ? 'bg-slate-100' : ''
                       }`}
                   >
                     <img
@@ -105,10 +105,9 @@ export const TeamSidebar: FunctionalComponent<{
             })}
 
             <li>
-              <a
+              <button
-                  href={feedbackFormLink}
+                className={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200`}
-                  target={'_blank'}
+                onClick={() => setShowFeedbackPopup(true)}
-                  class={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200`}
               >
                 <img
                   alt={'menu icon'}
@@ -116,11 +115,14 @@ export const TeamSidebar: FunctionalComponent<{
                   className="mr-2 h-4 w-4"
                 />
                 Send Feedback
-              </a>
+              </button>
             </li>
           </ul>
         )}
       </div>
+      {showFeedbackPopup && <SubmitFeedbackPopup onClose={() => {
+        setShowFeedbackPopup(false);
+      }} />}
 
       <div class="container flex min-h-screen items-stretch">
         <aside class="hidden w-44 shrink-0 border-r border-slate-200 py-10 md:block">
@@ -134,8 +136,7 @@ export const TeamSidebar: FunctionalComponent<{
                   <li>
                     <a
                       href={sidebarLink.href}
-                      class={`font-regular flex w-full items-center border-r-2 px-2 py-1.5 text-sm ${
+                      class={`font-regular flex w-full items-center border-r-2 px-2 py-1.5 text-sm ${isActive
-                        isActive
                         ? 'border-r-black bg-gray-100 text-black'
                         : 'border-r-transparent text-gray-500 hover:border-r-gray-300'
                         }`}
@@ -162,10 +163,12 @@ export const TeamSidebar: FunctionalComponent<{
               })}
             </ul>
 
-            <a href={feedbackFormLink} target={'_blank'} className="mr-3 mt-4 flex items-center justify-center rounded-md border p-2 text-gray-500 text-sm hover:text-black transition-colors hover:border-gray-300 hover:bg-gray-50">
+            <button className="mr-3 mt-4 flex items-center justify-center rounded-md border p-2 text-gray-500 text-sm hover:text-black transition-colors hover:border-gray-300 hover:bg-gray-50"
+              onClick={() => setShowFeedbackPopup(true)}
+            >
               <img src={ChatIcon} className="mr-2 h-4 w-4" />
               Send Feedback
-            </a>
+            </button>
           </nav>
         </aside>
         <div className="grow px-0 py-0 md:px-10 md:py-10">{children}</div>