feat: add support siwa feedback system for closed support tickets (#7916)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a feedback system for support tickets, allowing users to submit ratings and comments. It includes API calls for submitting feedback and checking its status, along with UI updates to handle user interactions and display feedback status.

### Detailed summary
- Added `submitSupportFeedback` function to submit feedback.
- Added `checkFeedbackStatus` function to verify if feedback has been submitted.
- Integrated feedback submission UI in `SupportCaseDetails` component.
- Implemented rating selection using stars.
- Added input field for optional feedback comments.
- Displayed loading and error states for feedback status checks.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

* **New Features**
  * 5‑star rating UI and optional comment for closed support cases, with Send Feedback button, “Checking feedback status…” and sending spinners, disabled send until a rating is chosen, and a thank‑you message after submission.

* **Improvements**
  * Server-backed feedback status check and submission with input validation, 1–5 rating, 1000‑char comment limit, 10s request timeout, and contextual success/error toasts.
  * Accessible star controls with ARIA labels and filled‑star visuals.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: GiselleNessi

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

@@ -1,7 +1,8 @@
 "use client";
 
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { format } from "date-fns";
-import { ChevronDownIcon, UserIcon } from "lucide-react";
+import { ChevronDownIcon, StarIcon, UserIcon } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 import { toast } from "sonner";
@@ -20,6 +21,7 @@ import { Spinner } from "@/components/ui/Spinner";
 import { AutoResizeTextarea } from "@/components/ui/textarea";
 import { cn } from "@/lib/utils";
 import { ThirdwebMiniLogo } from "../../../../../../components/ThirdwebMiniLogo";
+import { checkFeedbackStatus, submitSupportFeedback } from "../apis/feedback";
 import { sendMessageToTicket } from "../apis/support";
 import type { SupportMessage, SupportTicket } from "../types/tickets";
 import {
@@ -37,6 +39,77 @@ 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("");
+
+  // Check if feedback has already been submitted for this ticket
+  const feedbackStatusQuery = useQuery({
+    queryKey: ["feedbackStatus", ticket.id],
+    queryFn: async () => {
+      const result = await checkFeedbackStatus(ticket.id);
+      if ("error" in result) {
+        throw new Error(result.error);
+      }
+      return result.hasFeedback;
+    },
+    enabled: ticket.status === "closed",
+    staleTime: 60_000,
+    gcTime: 5 * 60_000,
+  });
+
+  const feedbackSubmitted = feedbackStatusQuery.data ?? false;
+  const isLoading = feedbackStatusQuery.isLoading;
+  const hasError = feedbackStatusQuery.isError;
+
+  const handleStarClick = (starIndex: number) => {
+    setRating(starIndex + 1);
+  };
+
+  const queryClient = useQueryClient();
+  const submitFeedbackMutation = useMutation({
+    mutationFn: async () => {
+      if (rating === 0) {
+        throw new Error("Please select a rating");
+      }
+      const result = await submitSupportFeedback({
+        rating,
+        feedback,
+        ticketId: ticket.id,
+      });
+      if ("error" in result) {
+        throw new Error(result.error);
+      }
+      return result;
+    },
+    onSuccess: () => {
+      toast.success("Thank you for your feedback!");
+      setRating(0);
+      setFeedback("");
+      // mark as submitted immediately
+      queryClient.setQueryData(["feedbackStatus", ticket.id], true);
+    },
+    onError: (err) => {
+      console.error("Failed to submit feedback:", err);
+      const msg = err instanceof Error ? err.message : String(err ?? "");
+      let message = "Failed to submit feedback. Please try again.";
+      if (/network|fetch/i.test(msg)) {
+        message = "Network error. Please check your connection and try again.";
+      } else if (
+        /validation|Rating must be|Please select a rating/i.test(msg)
+      ) {
+        message = msg; // show precise user-facing validation error
+      } else if (/API Server error/i.test(msg)) {
+        message = "Server error. Please try again later.";
+      }
+      toast.error(message);
+    },
+  });
+
+  const handleSendFeedback = () => {
+    submitFeedbackMutation.mutate();
+  };
+
   const handleSendReply = async () => {
     if (!team.unthreadCustomerId) {
       toast.error("No unthread customer id found for this team");
@@ -149,11 +222,88 @@ export function SupportCaseDetails({ ticket, team }: SupportCaseDetailsProps) {
           )}
         </div>
 
-        {ticket.status === "closed" && (
+        {ticket.status === "closed" && isLoading && (
+          <div className="border-t p-6">
+            <div className="flex items-center gap-2">
+              <Spinner className="size-4" />
+              <span className="text-muted-foreground text-sm">
+                Checking feedback status...
+              </span>
+            </div>
+          </div>
+        )}
+
+        {ticket.status === "closed" && !isLoading && !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>
+            {hasError && (
+              <p className="text-destructive text-xs mt-2">
+                Couldn't verify prior feedback right now — you can still submit
+                a rating.
+              </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`}
+                >
+                  <StarIcon
+                    size={32}
+                    className={cn(
+                      "transition-colors",
+                      starValue <= rating
+                        ? "text-pink-500 fill-current stroke-current"
+                        : "text-muted-foreground fill-current stroke-current",
+                      "hover:text-pink-500",
+                    )}
+                    strokeWidth={starValue <= rating ? 2 : 1}
+                  />
+                </button>
+              ))}
+            </div>
+
+            <div className="relative">
+              <AutoResizeTextarea
+                value={feedback}
+                onChange={(e) => setFeedback(e.target.value)}
+                placeholder="Optional: Tell us how we can improve."
+                maxLength={1000}
+                className="text-sm w-full bg-card text-foreground rounded-lg p-4 pr-28 min-h-[100px] resize-none border border-border focus:outline-none placeholder:text-muted-foreground"
+              />
+              <Button
+                type="button"
+                onClick={handleSendFeedback}
+                disabled={submitFeedbackMutation.isPending || rating === 0}
+                className="absolute bottom-3 right-3 rounded-full h-auto py-2 px-4"
+                variant="secondary"
+                size="sm"
+              >
+                {submitFeedbackMutation.isPending ? (
+                  <>
+                    <Spinner className="size-4 mr-2" />
+                    Sending...
+                  </>
+                ) : (
+                  "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,123 @@
+"use server";
+
+type FeedbackSubmitResult = { success: true } | { error: string };
+type FeedbackStatusResult = { hasFeedback: boolean } | { error: string };
+
+export async function submitSupportFeedback({
+  rating,
+  feedback,
+  ticketId,
+}: {
+  rating: number;
+  feedback?: string;
+  ticketId: string;
+}): Promise<FeedbackSubmitResult> {
+  try {
+    // Fail fast on missing configuration
+    const siwaUrl =
+      process.env.SIWA_URL ?? process.env.NEXT_PUBLIC_SIWA_URL ?? "";
+
+    if (!siwaUrl) {
+      throw new Error("SIWA URL not configured");
+    }
+
+    const apiKey = process.env.SERVICE_AUTH_KEY_SIWA;
+
+    if (!apiKey) {
+      throw new Error("SERVICE_AUTH_KEY_SIWA not configured");
+    }
+
+    // Basic input validation/normalization
+    if (!ticketId?.trim()) {
+      return { error: "ticketId is required." };
+    }
+
+    if (!Number.isInteger(rating) || rating < 1 || rating > 5) {
+      return { error: "Rating must be an integer between 1 and 5." };
+    }
+
+    const normalizedFeedback = (feedback ?? "")
+      .toString()
+      .trim()
+      .slice(0, 1000); // hard cap length
+
+    const payload = {
+      rating: rating.toString(),
+      feedback: normalizedFeedback,
+      ticket_id: ticketId,
+    };
+
+    const ac = new AbortController();
+    const t = setTimeout(() => ac.abort(), 10_000);
+    const response = await fetch(`${siwaUrl}/v1/csat/saveCSATFeedback`, {
+      method: "POST",
+      cache: "no-store",
+      headers: {
+        "Content-Type": "application/json",
+        "x-service-api-key": apiKey,
+      },
+      body: JSON.stringify(payload),
+      signal: ac.signal,
+    }).finally(() => clearTimeout(t));
+
+    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: "Internal server error" };
+  }
+}
+
+export async function checkFeedbackStatus(
+  ticketId: string,
+): Promise<FeedbackStatusResult> {
+  try {
+    // Basic input validation
+    if (!ticketId?.trim()) {
+      return { error: "ticketId is required." };
+    }
+
+    // Fail fast on missing configuration
+    const siwaUrl =
+      process.env.SIWA_URL ?? process.env.NEXT_PUBLIC_SIWA_URL ?? "";
+
+    if (!siwaUrl) {
+      throw new Error("SIWA URL not configured");
+    }
+
+    const apiKey = process.env.SERVICE_AUTH_KEY_SIWA;
+
+    if (!apiKey) {
+      throw new Error("SERVICE_AUTH_KEY_SIWA not configured");
+    }
+
+    const fullUrl = `${siwaUrl}/v1/csat/getCSATFeedback?ticket_id=${encodeURIComponent(ticketId)}`;
+
+    const ac = new AbortController();
+    const t = setTimeout(() => ac.abort(), 10_000);
+    const response = await fetch(fullUrl, {
+      method: "GET",
+      cache: "no-store",
+      headers: {
+        "Content-Type": "application/json",
+        "x-service-api-key": apiKey,
+      },
+      signal: ac.signal,
+    }).finally(() => clearTimeout(t));
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      return { error: `API Server error: ${response.status} - ${errorText}` };
+    }
+
+    const data = await response.json();
+    return { hasFeedback: data.has_feedback };
+  } catch (error) {
+    console.error("Feedback status check error:", error);
+    return { error: "Internal server error" };
+  }
+}