From 04862de9e4e11724720fa40a0ed4713ff2bfdad5 Mon Sep 17 00:00:00 2001 From: GiselleNessi Date: Tue, 16 Sep 2025 16:37:22 +0000 Subject: [PATCH] feat: add feedback collection UI to navigation (#7895) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ## PR-Codex overview This PR introduces a new feature for collecting user feedback within the application. It implements feedback submission forms in both desktop and mobile components, capturing user feedback and sending it to PostHog for analysis. ### Detailed summary - Added `reportProductFeedback` function in `report.ts` to handle feedback submissions. - Implemented feedback submission in the `SecondaryNavLinks` component. - Added feedback dropdown with a form in `SecondaryNavLinks`. - Integrated feedback functionality in the `MobileBurgerMenuButton` component. - Included success notifications using `toast` for feedback submissions in both components. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` ## Summary by CodeRabbit * **New Features** * Replaced external Feedback link with an in-app feedback panel in the header and mobile menu. * Panel includes a textarea (max 1000 chars), Cancel and Submit actions; Submit is disabled when empty, shows a success message, clears input and closes the panel. * Adds an in-panel “Contact support” link for technical issues and preserves existing header controls. * **Style** * Expandable/collapsible feedback UI with visual indicators, improved positioning and mobile menu scrolling. --- apps/dashboard/src/@/analytics/report.ts | 24 ++++ .../Header/SecondaryNav/SecondaryNav.tsx | 111 +++++++++++++++-- .../components/MobileBurgerMenuButton.tsx | 112 ++++++++++++++++-- 3 files changed, 230 insertions(+), 17 deletions(-) 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 && ( +