feat: feedback form

apps/web/src/components/FeedbackButton.tsx

@@ -1,33 +1,143 @@
-import { useState } from "react";
+import Link from "next/link";
+import { Menu, Transition } from "@headlessui/react";
+import { Fragment, useRef, useState } from "react";
+import { useForm } from "react-hook-form";
 
 import chatIconDark from "~/assets/chat-dark.json";
 import chatIconLight from "~/assets/chat-light.json";
+import Button from "~/components/Button";
+import Input from "~/components/Input";
 import LottieIcon from "~/components/LottieIcon";
+import { usePopup } from "~/providers/popup";
 import { useTheme } from "~/providers/theme";
+import { api } from "~/utils/api";
+
+interface NewFeedbackFormInput {
+  feedback: string;
+}
 
 const FeedbackButton: React.FC = () => {
+  const outsideRef = useRef<HTMLDivElement>(null);
   const { activeTheme } = useTheme();
+  const { showPopup } = usePopup();
   const [isHovered, setIsHovered] = useState(false);
   const [index, setIndex] = useState(0);
 
+  const { handleSubmit, setValue, watch, reset } =
+    useForm<NewFeedbackFormInput>({
+      defaultValues: {
+        feedback: "",
+      },
+    });
+
+  const createFeedback = api.feedback.create.useMutation({
+    onSuccess: async () => {
+      reset();
+      showPopup({
+        header: "Feedback sent",
+        message: "Thank you for your feedback!",
+        icon: "success",
+      });
+    },
+    onError: async () => {
+      showPopup({
+        header: "Unable to send feedback",
+        message: "Please try again later, or contact customer support.",
+        icon: "error",
+      });
+    },
+  });
+
   const handleMouseEnter = () => {
     setIsHovered(true);
     setIndex((index) => index + 1);
   };
 
+  const onSubmit = (values: NewFeedbackFormInput) => {
+    createFeedback.mutate({
+      feedback: values.feedback,
+      url: window.location.href,
+    });
+  };
+
   return (
-    <button
-      type="button"
-      onMouseEnter={handleMouseEnter}
-      className="flex items-center rounded-md border-[1px] border-light-600 bg-light-50 px-2.5 py-1.5 text-sm font-normal text-neutral-900 shadow-sm dark:border-dark-400 dark:bg-dark-50 dark:text-dark-1000"
-    >
-      <LottieIcon
-        index={index}
-        json={activeTheme === "dark" ? chatIconDark : chatIconLight}
-        isPlaying={isHovered}
-      />
-      <span className="ml-1">Feedback</span>
-    </button>
+    <>
+      <div ref={outsideRef} />
+      <Menu as="div" className="relative inline-block text-left">
+        <div>
+          <Menu.Button
+            onMouseEnter={handleMouseEnter}
+            className="flex items-center rounded-md border-[1px] border-light-600 bg-light-50 px-2.5 py-1.5 text-sm font-normal text-neutral-900 shadow-sm dark:border-dark-400 dark:bg-dark-50 dark:text-dark-1000"
+          >
+            <LottieIcon
+              index={index}
+              json={activeTheme === "dark" ? chatIconDark : chatIconLight}
+              isPlaying={isHovered}
+            />
+            <span className="ml-1">Feedback</span>
+          </Menu.Button>
+        </div>
+
+        <Transition
+          as={Fragment}
+          enter="transition ease-out duration-100"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-75"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          <Menu.Items
+            as="div"
+            static
+            className="absolute right-0 z-30 mt-2 w-[350px] origin-top-right rounded-md border border-light-200 bg-light-50 p-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-400 dark:bg-dark-300"
+          >
+            <form onSubmit={handleSubmit(onSubmit)} className="p-1">
+              <Input
+                placeholder="Ideas to improve this page..."
+                onChange={(e) => {
+                  setValue("feedback", e.target.value);
+                }}
+                onKeyDown={(e) => {
+                  e.stopPropagation();
+                }}
+                value={watch("feedback")}
+                contentEditable
+                className="max-h-[300px] min-h-[100px]"
+              />
+              <div className="flex flex-row items-center justify-between pt-2">
+                <div>
+                  <p className="ml-2 text-xs text-neutral-900 dark:text-dark-1000">
+                    Need help?{" "}
+                    <Link
+                      href="mailto:support@kanbn.com"
+                      className="text-blue-600 underline"
+                    >
+                      Contact us
+                    </Link>
+                    , or see our{" "}
+                    <Link
+                      href="https://docs.kanbn.com"
+                      target="_blank"
+                      rel="noreferrer"
+                      className="text-blue-600 underline"
+                    >
+                      docs
+                    </Link>
+                    .
+                  </p>
+                </div>
+                <div className="justify-end">
+                  <Button size="sm" isLoading={createFeedback.isPending}>
+                    Send
+                  </Button>
+                </div>
+              </div>
+            </form>
+          </Menu.Items>
+        </Transition>
+      </Menu>
+    </>
   );
 };