remove console.log, add loading state to response delete button

apps/web/app/environments/[environmentId]/settings/product/editProduct.tsx

@@ -101,16 +101,16 @@ export function EditWaitingTime({ environmentId }) {
 export function DeleteProduct({ environmentId }) {
   const router = useRouter();
 
-  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
 
   const { profile } = useProfile();
-  const{ team } = useMembers(environmentId)
+  const { team } = useMembers(environmentId);
   const { product, isLoadingProduct, isErrorProduct } = useProduct(environmentId);
   const { environment } = useEnvironment(environmentId);
 
-  const availableProducts = environment?.availableProducts?.length; 
-  const role = team?.members?.filter(member => member?.userId === profile?.id)[0]?.role;
-  const isUserAdminOrOwner = role === 'admin' || role === 'owner';
+  const availableProducts = environment?.availableProducts?.length;
+  const role = team?.members?.filter((member) => member?.userId === profile?.id)[0]?.role;
+  const isUserAdminOrOwner = role === "admin" || role === "owner";
   const isDeleteDisabled = availableProducts <= 1 || !isUserAdminOrOwner;
 
   if (isLoadingProduct) {
@@ -122,7 +122,7 @@ export function DeleteProduct({ environmentId }) {
 
   const handleDeleteProduct = async () => {
     if (environment?.availableProducts?.length <= 1) {
-      toast.error("Cannot delete product. Environment needs at least 1.");
+      toast.error("Cannot delete product. Your team needs at least 1.");
       setIsDeleteDialogOpen(false);
       return;
     }
@@ -136,7 +136,7 @@ export function DeleteProduct({ environmentId }) {
       toast.success("Product deleted successfully.");
       router.push("/environments");
     }
-  }
+  };
 
   return (
     <div>
@@ -146,15 +146,18 @@ export function DeleteProduct({ environmentId }) {
         &nbsp;incl. all surveys, responses, people, actions and attributes.{" "}
         <strong>This action cannot be undone.</strong>
       </p>
-      <Button disabled={isDeleteDisabled} variant="warn" className={`mt-4 ${isDeleteDisabled ? 'ring-1 ring-offset-1 ring-grey-500' : ''}`} onClick={() => setIsDeleteDialogOpen(true)}>
+      <Button
+        disabled={isDeleteDisabled}
+        variant="warn"
+        className={`mt-4 ${isDeleteDisabled ? "ring-grey-500 ring-1 ring-offset-1" : ""}`}
+        onClick={() => setIsDeleteDialogOpen(true)}>
         Delete
       </Button>
       {isDeleteDisabled && (
-        <p className="text-xs text-red-700 mt-2">
+        <p className="mt-2 text-xs text-red-700">
           {!isUserAdminOrOwner
-            ? 'Only Admin or Owners can delete products.'
-            : 'Environment needs at least 1 product.'
-          }
+            ? "Only Admin or Owners can delete products."
+            : "Environment needs at least 1 product."}
         </p>
       )}
       <DeleteDialog

apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/ResponseTimeline.tsx

@@ -33,7 +33,6 @@ export default function ResponseTimeline({ environmentId, surveyId }) {
         }> = []; // Specify the type of updatedData
         // iterate over survey questions and build the updated response
         for (const question of survey.questions) {
-          console.log(question);
           const answer = response.data[question.id];
           if (answer) {
             updatedResponse.push({
@@ -68,7 +67,12 @@ export default function ResponseTimeline({ environmentId, surveyId }) {
         <div>
           {matchQandA.map((updatedResponse) => {
             return (
-              <SingleResponse key={updatedResponse.id} data={updatedResponse} surveyId={surveyId} environmentId={environmentId} />
+              <SingleResponse
+                key={updatedResponse.id}
+                data={updatedResponse}
+                surveyId={surveyId}
+                environmentId={environmentId}
+              />
             );
           })}
         </div>

apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/SingleResponse.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import DeleteDialog from "@/components/shared/DeleteDialog";
 import { timeSince } from "@formbricks/lib/time";
 import { PersonAvatar } from "@formbricks/ui";
@@ -13,7 +15,7 @@ interface OpenTextSummaryProps {
   data: {
     id: string;
     personId: string;
-    surveyId: string,
+    surveyId: string;
     person: {
       id: string;
       createdAt: string;
@@ -46,18 +48,18 @@ export default function SingleResponse({ data, environmentId, surveyId }: OpenTe
   const email = data.person && findEmail(data.person);
   const displayIdentifier = email || data.personId;
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const { mutateResponses }  = useResponses(environmentId, surveyId)
+  const { mutateResponses } = useResponses(environmentId, surveyId);
+  const [isDeleting, setIsDeleting] = useState(false);
 
   const handleDeleteSubmission = async () => {
+    setIsDeleting(true);
     const deleteResponse = await deleteSubmission(environmentId, data?.surveyId, data?.id);
     mutateResponses();
-    if(deleteResponse?.id?.length > 0)
-    toast.success("Submission deleted successfully.");
+    if (deleteResponse?.id?.length > 0) toast.success("Submission deleted successfully.");
     setDeleteDialogOpen(false);
+    setIsDeleting(false);
   };
 
-  console.log(data);
-
   return (
     <div className=" my-6 rounded-lg border border-slate-200 bg-slate-50 shadow-sm">
       <div className="space-y-2 px-6 pb-5 pt-6">
@@ -84,17 +86,15 @@ export default function SingleResponse({ data, environmentId, surveyId }: OpenTe
                 Completed <CheckCircleIcon className="ml-1 h-5 w-5 text-green-400" />
               </span>
             )}
-            <div className="flex items-center space-x-3">
-              <button
-                onClick={() => {
-                  setDeleteDialogOpen(true);
-                }}>
-                <TrashIcon className="h-4 w-4 text-slate-500 hover:text-red-700" />
-              </button>
-            </div>
             <time className="text-slate-500" dateTime={timeSince(data.updatedAt)}>
               {timeSince(data.updatedAt)}
             </time>
+            <button
+              onClick={() => {
+                setDeleteDialogOpen(true);
+              }}>
+              <TrashIcon className="h-4 w-4 text-slate-500 hover:text-red-700" />
+            </button>
           </div>
         </div>
       </div>
@@ -121,6 +121,7 @@ export default function SingleResponse({ data, environmentId, surveyId }: OpenTe
         setOpen={setDeleteDialogOpen}
         deleteWhat="response"
         onDelete={handleDeleteSubmission}
+        isDeleting={isDeleting}
       />
     </div>
   );

apps/web/app/environments/[environmentId]/surveys/[surveyId]/summary/RatingSummary.tsx

@@ -73,8 +73,6 @@ export default function RatingSummary({ questionSummary }: RatingSummaryProps) {
     return total;
   }, [results]);
 
-  console.log(JSON.stringify(questionSummary.question, null, 2));
-
   return (
     <div className=" rounded-lg border border-slate-200 bg-slate-50 shadow-sm">
       <div className="space-y-2 px-6 pb-5 pt-6">

apps/web/components/shared/DeleteDialog.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import Modal from "@/components/shared/Modal";
 import { Button } from "@formbricks/ui";
 
@@ -7,9 +9,17 @@ interface DeleteDialogProps {
   deleteWhat: string;
   onDelete: () => void;
   text?: string;
+  isDeleting?: boolean;
 }
 
-export default function DeleteDialog({ open, setOpen, deleteWhat, onDelete, text }: DeleteDialogProps) {
+export default function DeleteDialog({
+  open,
+  setOpen,
+  deleteWhat,
+  onDelete,
+  text,
+  isDeleting,
+}: DeleteDialogProps) {
   return (
     <Modal open={open} setOpen={setOpen} title={`Delete ${deleteWhat}`}>
       <p>{text || "Are you sure? This action cannot be undone."}</p>
@@ -21,7 +31,7 @@ export default function DeleteDialog({ open, setOpen, deleteWhat, onDelete, text
           }}>
           Cancel
         </Button>
-        <Button variant="warn" onClick={onDelete}>
+        <Button variant="warn" onClick={onDelete} loading={isDeleting}>
           Delete
         </Button>
       </div>