Move feedback

midday-ai · Nov 15, 2023 · de44e46 · de44e46
1 parent fc064ae
commit de44e46
Show file tree

Hide file tree

Showing 6 changed files with 136 additions and 116 deletions.
diff --git a/apps/dashboard/src/components/feedback.tsx b/apps/dashboard/src/components/feedback.tsx
diff --git a/apps/dashboard/src/components/header.tsx b/apps/dashboard/src/components/header.tsx
@@ -1,5 +1,4 @@
 import { CommandMenu } from "@/components/command-menu";
-import { Feedback } from "@/components/feedback";
 import { NotificationCenter } from "@/components/notification-center";
 import { ReconnectBank } from "@/components/reconnect-bank";
 import { UserMenu } from "@/components/user-menu";
@@ -11,7 +10,6 @@ export function Header() {
     <header className="border-b-[1px] flex justify-between py-4">
       <CommandMenu />
       <div className="flex space-x-2">
-        <Feedback />
         <Suspense>
           <ReconnectBank />
         </Suspense>

diff --git a/apps/dashboard/src/components/modals/feedback-modal.tsx b/apps/dashboard/src/components/modals/feedback-modal.tsx
@@ -0,0 +1,86 @@
+"use client";
+
+import { sendFeeback } from "@/actions";
+import { Button } from "@midday/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@midday/ui/dialog";
+import { Textarea } from "@midday/ui/textarea";
+import { Loader2 } from "lucide-react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useState } from "react";
+import { useFormStatus } from "react-dom";
+
+function SubmitButton() {
+  const { pending } = useFormStatus();
+
+  return (
+    <Button type="submit">
+      {pending ? <Loader2 className="h-4 w-4 animate-spin" /> : "Send"}
+    </Button>
+  );
+}
+
+export function FeedbackModal() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const [isSubmitted, setSubmitted] = useState(false);
+  const [value, setValue] = useState("");
+  const isOpen = searchParams.has("feedback");
+
+  return (
+    <Dialog open={isOpen} onOpenChange={() => router.back()}>
+      <DialogContent>
+        <div className="p-4">
+          <DialogHeader>
+            <DialogTitle>Send feedback</DialogTitle>
+            <DialogDescription>
+              How can we improve Midday? If you have a feature request, can you
+              also share why it's important to you?
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="mt-6">
+            {isSubmitted ? (
+              <div className="min-h-[100px] flex items-center justify-center flex-col space-y-1">
+                <p className="font-medium text-sm">
+                  Thank you for your feedback!
+                </p>
+                <p className="text-sm text-[#4C4C4C]">
+                  We will be back with you as soon as possible
+                </p>
+              </div>
+            ) : (
+              <form
+                className="space-y-4"
+                action={async (formData) => {
+                  await sendFeeback(formData);
+                  setSubmitted(true);
+                  setValue("");
+                }}
+              >
+                <Textarea
+                  name="feedback"
+                  value={value}
+                  required
+                  autoFocus
+                  placeholder="Your feedback..."
+                  className="min-h-[100px] resize-none"
+                  onChange={(evt) => setValue(evt.target.value)}
+                />
+
+                <div className="mt-1 flex items-center justify-end">
+                  <SubmitButton />
+                </div>
+              </form>
+            )}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/dashboard/src/components/notification-center.tsx b/apps/dashboard/src/components/notification-center.tsx
@@ -76,11 +76,11 @@ export function NotificationCenter() {
   } = useNotifications();
 
   const unreadNotifications = notifications.filter(
-    (notification) => !notification.read,
+    (notification) => !notification.read
   );
 
   const archivedNotifications = notifications.filter(
-    (notification) => notification.read,
+    (notification) => notification.read
   );
 
   useEffect(() => {

diff --git a/apps/dashboard/src/components/user-menu.tsx b/apps/dashboard/src/components/user-menu.tsx
@@ -10,53 +10,63 @@ import {
   DropdownMenuTrigger,
 } from "@midday/ui/dropdown-menu";
 import Link from "next/link";
+import { FeedbackModal } from "./modals/feedback-modal";
 import { SignOut } from "./sign-out";
 import { ThemeSwitch } from "./theme-switch";
 
 export async function UserMenu() {
   const { data: userData } = await getUser();
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Avatar className="rounded-full w-8 h-8">
-          <AvatarImage src={userData?.avatar_url} />
-          <AvatarFallback>
-            <span className="text-xs">{userData?.full_name?.charAt(0)}</span>
-          </AvatarFallback>
-        </Avatar>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-56" sideOffset={10} align="end">
-        <DropdownMenuGroup>
-          <Link href="/profile">
-            <DropdownMenuItem>
-              Profile
-              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
-            </DropdownMenuItem>
-          </Link>
+    <>
+      {" "}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Avatar className="rounded-full w-8 h-8">
+            <AvatarImage src={userData?.avatar_url} />
+            <AvatarFallback>
+              <span className="text-xs">{userData?.full_name?.charAt(0)}</span>
+            </AvatarFallback>
+          </Avatar>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-56" sideOffset={10} align="end">
+          <DropdownMenuGroup>
+            <Link href="/profile">
+              <DropdownMenuItem>
+                Profile
+                <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            </Link>
 
-          <Link href="/settings">
-            <DropdownMenuItem>
-              Settings
-              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
-            </DropdownMenuItem>
-          </Link>
+            <Link href="/settings">
+              <DropdownMenuItem>
+                Settings
+                <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            </Link>
 
-          <Link href="/onboarding">
             <DropdownMenuItem>
-              Onboarding
-              <DropdownMenuShortcut>⌘O</DropdownMenuShortcut>
+              <Link href="?feedback">Share feedback</Link>
+              <DropdownMenuShortcut>⌘F</DropdownMenuShortcut>
             </DropdownMenuItem>
-          </Link>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
-        <div className="flex flex-row justify-between items-center p-2">
-          <p className="text-sm">Theme</p>
-          <ThemeSwitch />
-        </div>
-        <DropdownMenuSeparator />
-        <SignOut />
-      </DropdownMenuContent>
-    </DropdownMenu>
+
+            <Link href="/onboarding">
+              <DropdownMenuItem>
+                Onboarding
+                <DropdownMenuShortcut>⌘O</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            </Link>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <div className="flex flex-row justify-between items-center p-2">
+            <p className="text-sm">Theme</p>
+            <ThemeSwitch />
+          </div>
+          <DropdownMenuSeparator />
+          <SignOut />
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <FeedbackModal />
+    </>
   );
 }
diff --git a/apps/dashboard/src/jobs/transactions.ts b/apps/dashboard/src/jobs/transactions.ts
@@ -159,6 +159,7 @@ client.defineJob({
           return transactionsData.map((transaction) => ({
             name: TriggerEvents.TransactionNewInApp,
             payload: {
+              transactionId: transaction.id,
               description: t(
                 { id: "notifications.transaction" },
                 {