diff --git a/apps/dashboard/src/@/analytics/report.ts b/apps/dashboard/src/@/analytics/report.ts index b847063b594..a1b404ad1b7 100644 --- a/apps/dashboard/src/@/analytics/report.ts +++ b/apps/dashboard/src/@/analytics/report.ts @@ -547,3 +547,27 @@ 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; + source: "desktop" | "mobile"; +}) { + posthog.capture("product feedback submitted", { + feedback: properties.feedback, + source: properties.source, + }); +} diff --git a/apps/dashboard/src/app/(app)/components/Header/SecondaryNav/SecondaryNav.tsx b/apps/dashboard/src/app/(app)/components/Header/SecondaryNav/SecondaryNav.tsx index bb74c1224f2..c8828651399 100644 --- a/apps/dashboard/src/app/(app)/components/Header/SecondaryNav/SecondaryNav.tsx +++ b/apps/dashboard/src/app/(app)/components/Header/SecondaryNav/SecondaryNav.tsx @@ -1,7 +1,13 @@ +"use client"; + 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"; import { AccountButton } from "./account-button.client"; import { ResourcesDropdownButton } from "./ResourcesDropdownButton"; @@ -31,6 +37,32 @@ export function SecondaryNav(props: { } export function SecondaryNavLinks() { + const [showFeedbackDropdown, setShowFeedbackDropdown] = useState(false); + const [modalFeedback, setModalFeedback] = useState(""); + + const handleModalSubmit = (e?: React.FormEvent) => { + e?.preventDefault(); + + // Report feedback to PostHog + reportProductFeedback({ + feedback: modalFeedback, + source: "desktop", + }); + + // Show success notification + toast.success("Feedback submitted successfully!", { + description: "Thank you for your feedback. We'll review it shortly.", + }); + + setModalFeedback(""); + setShowFeedbackDropdown(false); + }; + + const handleModalCancel = () => { + setModalFeedback(""); + setShowFeedbackDropdown(false); + }; + return (
@@ -44,14 +76,77 @@ export function SecondaryNavLinks() { Docs - - Feedback - +
+ + + {showFeedbackDropdown && ( +