feat: add feedback collection UI with PostHog analytics

Author: GiselleNessi

apps/dashboard/src/@/analytics/report.ts

@@ -547,3 +547,29 @@ export function reportChainInfraRpcOmissionAgreed(properties: {
 }) {
   posthog.capture("chain infra checkout rpc omission agreed", properties);
 }
+
+// ----------------------------
+// FEEDBACK
+// ----------------------------
+
+/**
+ * ### Why do we need to report this event?
+ * - To track user feedback and sentiment about the product
+ * - To identify common issues or feature requests
+ * - To measure user satisfaction and engagement
+ * - To prioritize product improvements based on user input
+ *
+ * ### Who is responsible for this event?
+ * @gisellechacon
+ */
+export function reportProductFeedback(properties: {
+  feedback: string;
+  feedbackLength: number;
+  source: "desktop" | "mobile";
+}) {
+  posthog.capture("product feedback submitted", {
+    feedback: properties.feedback,
+    feedbackLength: properties.feedbackLength,
+    source: properties.source,
+  });
+}

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

@@ -3,7 +3,9 @@
 import Link from "next/link";
 import type React from "react";
 import { useState } from "react";
+import { toast } from "sonner";
 import type { ThirdwebClient } from "thirdweb";
+import { reportProductFeedback } from "@/analytics/report";
 import { NotificationsButton } from "@/components/notifications/notification-button";
 import { NavLink } from "@/components/ui/NavLink";
 import type { Account } from "@/hooks/useApi";
@@ -40,10 +42,19 @@ export function SecondaryNavLinks() {
 
   const handleModalSubmit = (e?: React.FormEvent) => {
     e?.preventDefault();
-    // Avoid logging PII in production. Keep minimal diagnostics in dev.
-    if (process.env.NODE_ENV !== "production") {
-      console.debug("[feedback] length:", modalFeedback.trim().length);
-    }
+
+    // Report feedback to PostHog
+    reportProductFeedback({
+      feedback: modalFeedback,
+      feedbackLength: modalFeedback.trim().length,
+      source: "desktop",
+    });
+
+    // Show success notification
+    toast.success("Feedback submitted successfully!", {
+      description: "Thank you for your feedback. We'll review it shortly.",
+    });
+
     setModalFeedback("");
     setShowFeedbackDropdown(false);
   };

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

@@ -14,7 +14,9 @@ import {
 import Link from "next/link";
 import { useTheme } from "next-themes";
 import { useLayoutEffect, useState } from "react";
+import { toast } from "sonner";
 import type { ThirdwebClient } from "thirdweb";
+import { reportProductFeedback } from "@/analytics/report";
 import { Button } from "@/components/ui/button";
 import { NavLink } from "@/components/ui/NavLink";
 import { Separator } from "@/components/ui/separator";
@@ -51,10 +53,19 @@ export function MobileBurgerMenuButton(
 
   const handleModalSubmit = (e?: React.FormEvent) => {
     e?.preventDefault();
-    // Avoid logging PII in production. Keep minimal diagnostics in dev.
-    if (process.env.NODE_ENV !== "production") {
-      console.debug("[feedback] length:", modalFeedback.trim().length);
-    }
+
+    // Report feedback to PostHog
+    reportProductFeedback({
+      feedback: modalFeedback,
+      feedbackLength: modalFeedback.trim().length,
+      source: "mobile",
+    });
+
+    // Show success notification
+    toast.success("Feedback submitted successfully!", {
+      description: "Thank you for your feedback. We'll review it shortly.",
+    });
+
     setModalFeedback("");
     setShowFeedbackSection(false);
   };