[dev] [Itsnotaka] daniel/confirm-before-upload-screenshot (#1850)

* feat(tasks): add screenshot reminder dialog for file uploads

* feat(comments): implement screenshot reminder dialog for file uploads

* refactor(comments): remove unused interfaces and clean up code

---------

Co-authored-by: Daniel Fu <[email protected]>
Co-authored-by: Mariano Fuentes <[email protected]>

Author: 3 people

apps/app/src/app/(app)/[orgId]/tasks/[taskId]/components/TaskBody.tsx

@@ -2,13 +2,19 @@
 
 import { useTaskAttachmentActions, useTaskAttachments } from '@/hooks/use-tasks-api';
 import { Button } from '@comp/ui/button';
-import { FileIcon, FileText, ImageIcon, Loader2, Upload, X } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@comp/ui/dialog';
+import { Camera, FileIcon, FileText, ImageIcon, Loader2, Upload, X } from 'lucide-react';
 import type React from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { toast } from 'sonner';
 
-// Removed ApiAttachment interface - using database Attachment type directly
-
 interface TaskBodyProps {
   taskId: string;
   title?: string;
@@ -37,6 +43,8 @@ export function TaskBody({
   const [isUploading, setIsUploading] = useState(false);
   const [busyAttachmentId, setBusyAttachmentId] = useState<string | null>(null);
   const [isDragging, setIsDragging] = useState(false);
+  const [showReminderDialog, setShowReminderDialog] = useState(false);
+  const [pendingFiles, setPendingFiles] = useState<FileList | File[] | null>(null);
 
   // Auto-resize function for textarea
   const autoResizeTextarea = useCallback(() => {
@@ -161,14 +169,35 @@ export function TaskBody({
     [uploadAttachment, refreshAttachments],
   );
 
-  // Handle multiple file uploads using API
+  const initiateUpload = useCallback((files: FileList | File[]) => {
+    if (!files || files.length === 0) return;
+    setPendingFiles(files);
+    setShowReminderDialog(true);
+  }, []);
+
+  const handleReminderConfirm = useCallback(() => {
+    setShowReminderDialog(false);
+    if (pendingFiles) {
+      processFiles(pendingFiles);
+      setPendingFiles(null);
+    }
+  }, [pendingFiles, processFiles]);
+
+  const handleReminderClose = useCallback(() => {
+    setShowReminderDialog(false);
+    setPendingFiles(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  }, []);
+
   const handleFileSelectMultiple = useCallback(
-    async (event: React.ChangeEvent<HTMLInputElement>) => {
+    (event: React.ChangeEvent<HTMLInputElement>) => {
       const files = event.target.files;
       if (!files || files.length === 0) return;
-      await processFiles(files);
+      initiateUpload(files);
     },
-    [processFiles],
+    [initiateUpload],
   );
 
   const triggerFileInput = () => {
@@ -199,7 +228,7 @@ export function TaskBody({
   }, []);
 
   const handleDrop = useCallback(
-    async (e: React.DragEvent) => {
+    (e: React.DragEvent) => {
       e.preventDefault();
       e.stopPropagation();
       setIsDragging(false);
@@ -208,10 +237,10 @@ export function TaskBody({
 
       const files = e.dataTransfer.files;
       if (files && files.length > 0) {
-        await processFiles(files);
+        initiateUpload(Array.from(files));
       }
     },
-    [isUploading, busyAttachmentId, processFiles],
+    [isUploading, busyAttachmentId, initiateUpload],
   );
 
   const handleDownloadClick = async (attachmentId: string) => {
@@ -395,6 +424,32 @@ export function TaskBody({
           </div>
         )}
       </div>
+
+      <Dialog open={showReminderDialog} onOpenChange={(open) => !open && handleReminderClose()}>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <div className="flex items-center gap-3">
+              <div className="rounded-full bg-primary/10 p-2">
+                <Camera className="h-5 w-5 text-primary" />
+              </div>
+              <DialogTitle>Screenshot Requirements</DialogTitle>
+            </div>
+            <DialogDescription className="pt-2">
+              Ensure your organisation name is clearly visible within the screenshot.
+            </DialogDescription>
+          </DialogHeader>
+          <p className="text-sm text-muted-foreground">
+            Auditors require this to verify the source of the data; without it, evidence may be
+            rejected.
+          </p>
+          <DialogFooter>
+            <Button variant="outline" onClick={handleReminderClose}>
+              Cancel
+            </Button>
+            <Button onClick={handleReminderConfirm}>Continue Upload</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

apps/app/src/components/comments/CommentForm.tsx

@@ -1,40 +1,39 @@
 'use client';
 
 import { useComments, useCommentWithAttachments } from '@/hooks/use-comments-api';
-import { authClient } from '@/utils/auth-client';
 import { Button } from '@comp/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@comp/ui/dialog';
 import { Textarea } from '@comp/ui/textarea';
 import type { CommentEntityType } from '@db';
-import { FileIcon, Loader2, Paperclip, X } from 'lucide-react';
-import { useParams } from 'next/navigation';
+import { Camera, FileIcon, Loader2, Paperclip, X } from 'lucide-react';
 import type React from 'react';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { toast } from 'sonner';
 
 interface CommentFormProps {
   entityId: string;
   entityType: CommentEntityType;
 }
 
-// Removed PendingAttachment interface - using File objects directly with API hooks
-
 export function CommentForm({ entityId, entityType }: CommentFormProps) {
-  const session = authClient.useSession();
-  const params = useParams();
   const [newComment, setNewComment] = useState('');
   const [pendingFiles, setPendingFiles] = useState<File[]>([]);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const [hasMounted, setHasMounted] = useState(false);
+  const [showReminderDialog, setShowReminderDialog] = useState(false);
+  const [filesToAdd, setFilesToAdd] = useState<File[]>([]);
 
   // Use SWR hooks for generic comments
   const { mutate: refreshComments } = useComments(entityId, entityType);
   const { createCommentWithFiles } = useCommentWithAttachments();
 
-  useEffect(() => {
-    setHasMounted(true);
-  }, []);
-
   const triggerFileInput = () => {
     fileInputRef.current?.click();
   };
@@ -52,42 +51,38 @@ export function CommentForm({ entityId, entityType }: CommentFormProps) {
     for (const file of newFiles) {
       if (file.size > MAX_FILE_SIZE_BYTES) {
         toast.error(`File "${file.name}" exceeds the ${MAX_FILE_SIZE_MB}MB limit.`);
+        if (fileInputRef.current) fileInputRef.current.value = '';
         return;
       }
     }
 
-    // Add files to pending list
-    setPendingFiles((prev) => [...prev, ...newFiles]);
+    setFilesToAdd(newFiles);
+    setShowReminderDialog(true);
+  }, []);
+
+  const handleReminderConfirm = useCallback(() => {
+    setShowReminderDialog(false);
+    if (filesToAdd.length > 0) {
+      setPendingFiles((prev) => [...prev, ...filesToAdd]);
+      filesToAdd.forEach((file) => {
+        toast.success(`File "${file.name}" ready for attachment.`);
+      });
+      setFilesToAdd([]);
+    }
     if (fileInputRef.current) fileInputRef.current.value = '';
+  }, [filesToAdd]);
 
-    newFiles.forEach((file) => {
-      toast.success(`File "${file.name}" ready for attachment.`);
-    });
+  const handleReminderClose = useCallback(() => {
+    setShowReminderDialog(false);
+    setFilesToAdd([]);
+    if (fileInputRef.current) fileInputRef.current.value = '';
   }, []);
 
   const handleRemovePendingFile = (fileIndexToRemove: number) => {
     setPendingFiles((prev) => prev.filter((_, index) => index !== fileIndexToRemove));
     toast.info('File removed from comment draft.');
   };
 
-  const handlePendingFileClick = (fileIndex: number) => {
-    const file = pendingFiles[fileIndex];
-    if (!file) {
-      console.error('Could not find pending file for index:', fileIndex);
-      toast.error('Could not find file data.');
-      return;
-    }
-
-    // Create object URL for preview
-    const url = URL.createObjectURL(file);
-
-    // Open in new tab
-    window.open(url, '_blank', 'noopener,noreferrer');
-
-    // Clean up the object URL after a short delay
-    setTimeout(() => URL.revokeObjectURL(url), 100);
-  };
-
   const handleCommentSubmit = async () => {
     if (!newComment.trim() && pendingFiles.length === 0) return;
 
@@ -115,7 +110,6 @@ export function CommentForm({ entityId, entityType }: CommentFormProps) {
 
   // Always show the actual form - no loading gate
   // Users can start typing immediately, authentication is checked on submit
-
   const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (
       (event.metaKey || event.ctrlKey) &&
@@ -167,7 +161,7 @@ export function CommentForm({ entityId, entityType }: CommentFormProps) {
                     <button
                       onClick={() => handleRemovePendingFile(index)}
                       disabled={isSubmitting}
-                      className="text-muted-foreground hover:text-destructive transition-colors flex-shrink-0"
+                      className="text-muted-foreground hover:text-destructive transition-colors shrink-0"
                       aria-label={`Remove ${file.name}`}
                     >
                       <X className="h-3 w-3" />
@@ -202,6 +196,32 @@ export function CommentForm({ entityId, entityType }: CommentFormProps) {
           </div>
         </div>
       </div>
+
+      <Dialog open={showReminderDialog} onOpenChange={(open) => !open && handleReminderClose()}>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <div className="flex items-center gap-3">
+              <div className="rounded-full bg-primary/10 p-2">
+                <Camera className="h-5 w-5 text-primary" />
+              </div>
+              <DialogTitle>Screenshot Requirements</DialogTitle>
+            </div>
+            <DialogDescription className="pt-2">
+              Ensure your organisation name is clearly visible within the screenshot.
+            </DialogDescription>
+          </DialogHeader>
+          <p className="text-sm text-muted-foreground">
+            Auditors require this to verify the source of the data; without it, evidence may be
+            rejected.
+          </p>
+          <DialogFooter>
+            <Button variant="outline" onClick={handleReminderClose}>
+              Cancel
+            </Button>
+            <Button onClick={handleReminderConfirm}>Continue</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }