feat: add feedback system for closed support tickets

Author: GiselleNessi

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/SupportCaseDetails.tsx

@@ -20,6 +20,7 @@ import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { AutoResizeTextarea } from "@/components/ui/textarea";
 import { cn } from "@/lib/utils";
 import { ThirdwebMiniLogo } from "../../../../../../components/ThirdwebMiniLogo";
+import { submitSupportFeedback } from "../apis/feedback";
 import { sendMessageToTicket } from "../apis/support";
 import type { SupportMessage, SupportTicket } from "../types/tickets";
 import {
@@ -37,6 +38,65 @@ export function SupportCaseDetails({ ticket, team }: SupportCaseDetailsProps) {
   const [isSubmittingReply, setIsSubmittingReply] = useState(false);
   const [localMessages, setLocalMessages] = useState(ticket.messages || []);
 
+  // rating/feedback
+  const [rating, setRating] = useState(0);
+  const [feedback, setFeedback] = useState("");
+  const [feedbackSubmitted, setFeedbackSubmitted] = useState(() => {
+    // Check if feedback has already been submitted for this ticket
+    if (typeof window !== "undefined") {
+      const submittedTickets = JSON.parse(
+        localStorage.getItem("feedbackSubmittedTickets") || "[]",
+      );
+      return submittedTickets.includes(ticket.id);
+    }
+    return false;
+  });
+
+  const handleStarClick = (starIndex: number) => {
+    setRating(starIndex + 1);
+  };
+
+  const handleSendFeedback = async () => {
+    if (rating === 0) {
+      toast.error("Please select a rating");
+      return;
+    }
+
+    try {
+      const result = await submitSupportFeedback({
+        rating,
+        feedback,
+        ticketId: ticket.id,
+      });
+
+      if ("error" in result) {
+        throw new Error(result.error);
+      }
+
+      toast.success("Thank you for your feedback!");
+      setRating(0);
+      setFeedback("");
+      setFeedbackSubmitted(true);
+
+      // Store the ticket ID in localStorage to prevent future submissions
+      if (typeof window !== "undefined") {
+        const submittedTickets = JSON.parse(
+          localStorage.getItem("feedbackSubmittedTickets") || "[]",
+        );
+        if (!submittedTickets.includes(ticket.id)) {
+          submittedTickets.push(ticket.id);
+          localStorage.setItem(
+            "feedbackSubmittedTickets",
+            JSON.stringify(submittedTickets),
+          );
+        }
+      }
+    } catch (error) {
+      console.error("Failed to submit feedback:", error);
+      toast.error("Failed to submit feedback. Please try again.");
+    }
+  };
+
   const handleSendReply = async () => {
     if (!team.unthreadCustomerId) {
       toast.error("No unthread customer id found for this team");
@@ -149,11 +209,62 @@ export function SupportCaseDetails({ ticket, team }: SupportCaseDetailsProps) {
           )}
         </div>
 
-        {ticket.status === "closed" && (
+        {ticket.status === "closed" && !feedbackSubmitted && (
+          <div className="border-t p-6">
+            <p className="text-muted-foreground text-sm">
+              This ticket is closed. Give us a quick rating to let us know how
+              we did!
+            </p>
+
+            <div className="flex gap-2 mb-6 mt-4">
+              {[1, 2, 3, 4, 5].map((starValue) => (
+                <button
+                  key={`star-${starValue}`}
+                  type="button"
+                  onClick={() => handleStarClick(starValue - 1)}
+                  className="transition-colors"
+                  aria-label={`Rate ${starValue} out of 5 stars`}
+                >
+                  <svg
+                    width="32"
+                    height="32"
+                    viewBox="0 0 24 24"
+                    fill={starValue <= rating ? "#ff00aa" : "none"}
+                    stroke={starValue <= rating ? "#ff00aa" : "#666"}
+                    strokeWidth={starValue <= rating ? "2" : "1"}
+                    className="hover:fill-pink-500 hover:stroke-pink-500 rounded-sm"
+                    rx="2"
+                    aria-hidden="true"
+                  >
+                    <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26" />
+                  </svg>
+                </button>
+              ))}
+            </div>
+
+            <div className="relative">
+              <textarea
+                value={feedback}
+                onChange={(e) => setFeedback(e.target.value)}
+                placeholder="Optional: Tell us how we can improve."
+                className="text-muted-foreground text-sm w-full bg-black text-white rounded-lg p-4 pr-28 min-h-[100px] resize-none border border-[#262626] focus:border-[#262626] focus:outline-none placeholder-[#A1A1A1]"
+              />
+              <button
+                type="button"
+                onClick={handleSendFeedback}
+                className="absolute mb-2 bottom-3 right-3 bg-white text-black px-4 py-2 rounded-full text-sm font-medium hover:bg-gray-100 transition-colors"
+              >
+                Send Feedback
+              </button>
+            </div>
+          </div>
+        )}
+
+        {ticket.status === "closed" && feedbackSubmitted && (
           <div className="border-t p-6">
             <p className="text-muted-foreground text-sm">
-              This ticket is closed. If you need further assistance, please
-              create a new ticket.
+              Thank you for your feedback! We appreciate your input and will use
+              it to improve our service.
             </p>
           </div>
         )}

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/apis/feedback.ts

@@ -0,0 +1,46 @@
+"use server";
+
+interface FeedbackData {
+  rating: number;
+  feedback: string;
+  ticketId?: string;
+}
+
+export async function submitSupportFeedback(
+  data: FeedbackData,
+): Promise<{ success: true } | { error: string }> {
+  try {
+    const siwaUrl = process.env.NEXT_PUBLIC_SIWA_URL;
+
+    if (!siwaUrl) {
+      throw new Error("SIWA URL not configured");
+    }
+
+    const payload = {
+      rating: data.rating,
+      feedback: data.feedback,
+      ticket_id: data.ticketId || null,
+    };
+
+    const response = await fetch(`${siwaUrl}/v1/csat/saveCSATFeedback`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "x-service-api-key": process.env.SERVICE_AUTH_KEY_SIWA || "",
+      },
+      body: JSON.stringify(payload),
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      return { error: `API Server error: ${response.status} - ${errorText}` };
+    }
+
+    return { success: true };
+  } catch (error) {
+    console.error("Feedback submission error:", error);
+    return {
+      error: `Failed to submit feedback: ${error instanceof Error ? error.message : "Unknown error"}`,
+    };
+  }
+}