improve feedback system with validation and UI enhancements

Author: GiselleNessi

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

@@ -1,7 +1,8 @@
 "use client";
 
+import { useMutation } 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";
@@ -56,13 +57,12 @@ export function SupportCaseDetails({ ticket, team }: SupportCaseDetailsProps) {
     setRating(starIndex + 1);
   };
 
-  const handleSendFeedback = async () => {
-    if (rating === 0) {
-      toast.error("Please select a rating");
-      return;
-    }
+  const submitFeedbackMutation = useMutation({
+    mutationFn: async () => {
+      if (rating === 0) {
+        throw new Error("Please select a rating");
+      }
 
-    try {
       const result = await submitSupportFeedback({
         rating,
         feedback,
@@ -73,6 +73,9 @@ export function SupportCaseDetails({ ticket, team }: SupportCaseDetailsProps) {
         throw new Error(result.error);
       }
 
+      return result;
+    },
+    onSuccess: () => {
       toast.success("Thank you for your feedback!");
       setRating(0);
       setFeedback("");
@@ -91,10 +94,17 @@ export function SupportCaseDetails({ ticket, team }: SupportCaseDetailsProps) {
           );
         }
       }
-    } catch (error) {
+    },
+    onError: (error) => {
       console.error("Failed to submit feedback:", error);
-      toast.error("Failed to submit feedback. Please try again.");
-    }
+      toast.error(
+        error.message || "Failed to submit feedback. Please try again.",
+      );
+    },
+  });
+
+  const handleSendFeedback = () => {
+    submitFeedbackMutation.mutate();
   };
 
   const handleSendReply = async () => {
@@ -225,36 +235,42 @@ export function SupportCaseDetails({ ticket, team }: SupportCaseDetailsProps) {
                   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"}
+                  <StarIcon
+                    size={32}
+                    className={cn(
+                      "transition-colors hover:fill-pink-500 hover:stroke-pink-500",
+                      starValue <= rating
+                        ? "fill-[#ff00aa] stroke-[#ff00aa]"
+                        : "fill-none stroke-[#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
+              <AutoResizeTextarea
                 value={feedback}
                 onChange={(e) => setFeedback(e.target.value)}
                 placeholder="Optional: Tell us how we can improve."
+                maxLength={1000}
                 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"
+                disabled={submitFeedbackMutation.isPending}
+                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 disabled:opacity-50 disabled:cursor-not-allowed"
               >
-                Send Feedback
+                {submitFeedbackMutation.isPending ? (
+                  <>
+                    <Spinner className="size-4 mr-2" />
+                    Sending...
+                  </>
+                ) : (
+                  "Send Feedback"
+                )}
               </button>
             </div>
           </div>

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

@@ -23,7 +23,7 @@ export async function submitSupportFeedback(
     }
 
     // Basic input validation/normalization
-    if (!Number.isFinite(data.rating) || data.rating < 1 || data.rating > 5) {
+    if (!Number.isInteger(data.rating) || data.rating < 1 || data.rating > 5) {
       return { error: "Rating must be an integer between 1 and 5." };
     }
 
@@ -33,7 +33,7 @@ export async function submitSupportFeedback(
       .slice(0, 1000); // hard cap length
 
     const payload = {
-      rating: Math.round(data.rating),
+      rating: data.rating.toString(),
       feedback: normalizedFeedback,
       ticket_id: data.ticketId || null,
     };