dashboard: send product feedback to the team (#9032)

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

Author: 0xFirekeeper

apps/dashboard/src/@/actions/product-feedback.ts

@@ -0,0 +1,39 @@
+"use server";
+import "server-only";
+
+import { getAuthToken } from "@/api/auth-token";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
+
+export async function submitProductFeedback(request: {
+  feedback: string;
+  source: "desktop" | "mobile";
+}): Promise<{ ok: true } | { ok: false; error: string }> {
+  const token = await getAuthToken();
+  if (!token) {
+    return { error: "You are not logged in", ok: false };
+  }
+
+  const res = await fetch(
+    new URL("/v1/account/feedback", NEXT_PUBLIC_THIRDWEB_API_HOST),
+    {
+      body: JSON.stringify(request),
+      headers: {
+        Authorization: `Bearer ${token}`,
+        "Content-Type": "application/json",
+      },
+      method: "POST",
+    },
+  );
+
+  if (!res.ok) {
+    return {
+      error:
+        res.status === 429
+          ? "Too many requests, please try again in a minute"
+          : "Failed to submit feedback, please try again later",
+      ok: false,
+    };
+  }
+
+  return { ok: true };
+}

apps/dashboard/src/app/(app)/components/Header/SecondaryNav/SecondaryNav.tsx

@@ -5,6 +5,7 @@ import type React from "react";
 import { useState } from "react";
 import { toast } from "sonner";
 import type { ThirdwebClient } from "thirdweb";
+import { submitProductFeedback } from "@/actions/product-feedback";
 import { reportProductFeedback } from "@/analytics/report";
 import { NotificationsButton } from "@/components/notifications/notification-button";
 import { NavLink } from "@/components/ui/NavLink";
@@ -39,8 +40,9 @@ export function SecondaryNav(props: {
 export function SecondaryNavLinks() {
   const [showFeedbackDropdown, setShowFeedbackDropdown] = useState(false);
   const [modalFeedback, setModalFeedback] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
-  const handleModalSubmit = (e?: React.FormEvent) => {
+  const handleModalSubmit = async (e?: React.FormEvent) => {
     e?.preventDefault();
 
     // Report feedback to PostHog
@@ -49,6 +51,18 @@ export function SecondaryNavLinks() {
       source: "desktop",
     });
 
+    setIsSubmitting(true);
+    const result = await submitProductFeedback({
+      feedback: modalFeedback,
+      source: "desktop",
+    });
+    setIsSubmitting(false);
+
+    if (!result.ok) {
+      toast.error(result.error);
+      return;
+    }
+
     // Show success notification
     toast.success("Feedback submitted successfully!", {
       description: "Thank you for your feedback. We'll review it shortly.",
@@ -135,8 +149,8 @@ export function SecondaryNavLinks() {
                   </button>
                   <button
                     type="submit"
-                    disabled={!modalFeedback.trim()}
-                    aria-disabled={!modalFeedback.trim()}
+                    disabled={!modalFeedback.trim() || isSubmitting}
+                    aria-disabled={!modalFeedback.trim() || isSubmitting}
                     className="bg-primary text-primary-foreground px-4 py-1.5 rounded-full font-sans text-sm hover:bg-primary/90 transition-colors disabled:opacity-50"
                   >
                     Submit

apps/dashboard/src/app/(app)/components/MobileBurgerMenuButton.tsx

@@ -16,6 +16,7 @@ import { useTheme } from "next-themes";
 import { useLayoutEffect, useState } from "react";
 import { toast } from "sonner";
 import type { ThirdwebClient } from "thirdweb";
+import { submitProductFeedback } from "@/actions/product-feedback";
 import { reportProductFeedback } from "@/analytics/report";
 import { Button } from "@/components/ui/button";
 import { NavLink } from "@/components/ui/NavLink";
@@ -43,6 +44,7 @@ export function MobileBurgerMenuButton(
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [showFeedbackSection, setShowFeedbackSection] = useState(false);
   const [modalFeedback, setModalFeedback] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const { setTheme, theme } = useTheme();
   const ensQuery = useEns({
     addressOrEnsName:
@@ -51,7 +53,7 @@ export function MobileBurgerMenuButton(
   });
   // const [isCMDSearchModalOpen, setIsCMDSearchModalOpen] = useState(false);
 
-  const handleModalSubmit = (e?: React.FormEvent) => {
+  const handleModalSubmit = async (e?: React.FormEvent) => {
     e?.preventDefault();
 
     // Report feedback to PostHog
@@ -60,6 +62,18 @@ export function MobileBurgerMenuButton(
       source: "mobile",
     });
 
+    setIsSubmitting(true);
+    const result = await submitProductFeedback({
+      feedback: modalFeedback,
+      source: "mobile",
+    });
+    setIsSubmitting(false);
+
+    if (!result.ok) {
+      toast.error(result.error);
+      return;
+    }
+
     // Show success notification
     toast.success("Feedback submitted successfully!", {
       description: "Thank you for your feedback. We'll review it shortly.",
@@ -281,8 +295,10 @@ export function MobileBurgerMenuButton(
                           </button>
                           <button
                             type="submit"
-                            disabled={!modalFeedback.trim()}
-                            aria-disabled={!modalFeedback.trim()}
+                            disabled={!modalFeedback.trim() || isSubmitting}
+                            aria-disabled={
+                              !modalFeedback.trim() || isSubmitting
+                            }
                             className="flex-1 bg-primary text-primary-foreground px-3 py-2 rounded-full font-sans text-sm hover:bg-primary/90 transition-colors disabled:opacity-50"
                           >
                             Submit