feat: improve feedback UX - hide form after submission and only show for closed tickets

Author: GiselleNessi

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

@@ -41,6 +41,7 @@ export function SupportCaseDetails({ ticket, team }: SupportCaseDetailsProps) {
   // rating/feedback
   const [rating, setRating] = useState(0);
   const [feedback, setFeedback] = useState("");
+  const [feedbackSubmitted, setFeedbackSubmitted] = useState(false);
 
   const handleStarClick = (starIndex: number) => {
     setRating(starIndex + 1);
@@ -63,6 +64,7 @@ export function SupportCaseDetails({ ticket, team }: SupportCaseDetailsProps) {
       }
 
       toast.success("Thank you for your feedback!");
+      setFeedbackSubmitted(true);
       setRating(0);
       setFeedback("");
     } catch (error) {
@@ -183,58 +185,74 @@ export function SupportCaseDetails({ ticket, team }: SupportCaseDetailsProps) {
           )}
         </div>
 
+        {/* Feedback Section - Only show for closed tickets */}
         {ticket.status === "closed" && (
-          <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>
-        )}
-
-        <div className="flex gap-2 mb-6 px-6">
-          {[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>
+          <>
+            {!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>
+
+                <div className="flex gap-2 mb-6 px-6">
+                  {[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 p-6">
+                  <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>
+              </>
+            )}
 
-        <div className="relative p-6">
-          <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>
+            {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.
+                </p>
+              </div>
+            )}
+          </>
+        )}
       </div>
 
       <div className="h-8" />

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

@@ -25,7 +25,8 @@ export async function submitSupportFeedback(
     });
 
     if (!supabase) {
-      const error = "Supabase client not initialized. Please check your environment variables.";
+      const error =
+        "Supabase client not initialized. Please check your environment variables.";
       console.error("❌ Supabase client error:", error);
       throw new Error(error);
     }
@@ -55,10 +56,12 @@ export async function submitSupportFeedback(
       feedbackLength: data.feedback?.length || 0,
     });
 
-    const { data: insertData, error } = await supabase.from("support_feedback").insert({
-      rating: data.rating,
-      feedback: data.feedback,
-    });
+    const { data: insertData, error } = await supabase
+      .from("support_feedback")
+      .insert({
+        rating: data.rating,
+        feedback: data.feedback,
+      });
 
     console.log("🔍 Debug - Insert result:", {
       insertData,