import { useState, useRef, useEffect } from 'react'; import { ReactSortable } from 'react-sortablejs'; import { FaPlus, FaGoogleDrive, FaDropbox, FaMicrosoft, FaCloudUploadAlt } from "react-icons/fa"; import { useDispatch, useSelector } from 'react-redux'; // import { setSelectedDocuments } from '../../../store/slices/selectedDocsSlice'; import { clearDocumentUploadErrors, DocumentErrorEnum, setDocuments, uploadDocuments } from '../../../store/slices/documentSlice'; import { RootState } from '../../../store/store'; import { IoMdClose } from 'react-icons/io'; import DocumentCard from './DocumentCard'; import { useParams } from 'react-router-dom'; import { TRANSACTION_TEMPLATE_TOGGLE } from '../../../store/slices/selectedRecipientsSlice'; interface SelectedDocumentsIntProps { transactionTemplateToggle: TRANSACTION_TEMPLATE_TOGGLE } const SelectedDocuments: React.FC = ({ transactionTemplateToggle }) => { const documents = useSelector((state: RootState) => state.documents.documents); const errorDocuments = useSelector((state: RootState) => state.documents.error); const docCount = documents.length; const templateId = useParams<{ templateId: string }>().templateId; let { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>(); const dispatch = useDispatch(); if (!transactionId) { transactionId = templateId; } const [isModalOpen, setModalOpen] = useState(false); const [activeTab, setActiveTab] = useState('Upload'); const [files, setFiles] = useState([]); const fileInputRef = useRef(null); const tabs = [ { name: 'Upload', icon: }, { name: 'Google Drive', icon: }, { name: 'OneDrive', icon: }, { name: 'Dropbox', icon: }, ]; const handleUpload = (filesToUpload: File[]) => { const formData = new FormData(); filesToUpload.forEach(file => { formData.append("file", file); }); // filesToUpload.forEach((file) => formData.append("document", file)); dispatch(uploadDocuments({ formData, accountId, transactionId })) .unwrap() .then((res) => { setFiles([]); }) .catch((err) => { console.error("Upload failed", err); }); }; useEffect(() => { if (isModalOpen) { if (errorDocuments[DocumentErrorEnum.FILE_SIZE_EXCEEDED].length === 0 && errorDocuments[DocumentErrorEnum.UNSUPPORTED_DOC_TYPE].length === 0) setModalOpen(false); } }, [documents]) const handleFileChange = (e: React.ChangeEvent) => { const selectedFiles = e.target.files ? Array.from(e.target.files) : []; if (selectedFiles.length > 0) { setFiles((prev) => [...prev, ...selectedFiles]); handleUpload(selectedFiles); } }; const handleDrop = (e: React.DragEvent) => { e.preventDefault(); const droppedFiles = Array.from(e.dataTransfer.files); if (droppedFiles.length > 0) { setFiles((prev) => [...prev, ...droppedFiles]); handleUpload(droppedFiles); } }; // Get proper Tailwind class names for upload card span const getUploadCardSpanClass = () => { if (docCount === 0) { // Upload card takes all columns only when no docs return "col-span-1 sm:col-span-2 md:col-span-3 lg:col-span-4 xl:col-span-5"; } switch (docCount) { case 1: return "col-span-1 sm:col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4"; case 2: return "col-span-1 sm:col-span-1 md:col-span-1 lg:col-span-2 xl:col-span-3"; case 3: return "col-span-1 sm:col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-2"; case 4: return "col-span-1"; // balanced default: return "col-span-1"; } }; // Calculate how many documents should be in the first row // const getFirstRowDocCount = () => { // if (docCount === 0) return 0; // if (docCount <= 4) return docCount; // All docs fit in first row // return 4; // Max 4 docs in first row when upload card takes 1 column // }; // const firstRowDocCount = getFirstRowDocCount(); // const remainingDocs = Math.max(0, docCount - firstRowDocCount); // console.log(errorDocuments, "errorDocuments Line 121") return ( <> {/* Upload Card First */}

{/* Upload Document Card */}

setModalOpen(true)} onDragOver={(e) => e.preventDefault()} onDrop={handleDrop} className={`${getUploadCardSpanClass()} cursor-pointer h-full flex flex-col items-center justify-center border-1 border-dashed border-gray-300 rounded-xl bg-white hover:bg-gray-50 transition`} > {/* Upload icon */} {/* Compact text | Upload or drag & drop files */}

PDF, DOCX (max 10MB)

{/* First Row Documents */} ({ ...doc }))} setList={(newState) => { const updatedDocs = [...newState]; dispatch(setDocuments(updatedDocs)); }} handle=".drag-handle" animation={200} ghostClass="sortable-ghost" disabled={false} > {documents.map((doc) => (

))}

{/* Additional Rows */} {/* Modal */} {isModalOpen && (

{/* Close Button */} {/* Sidebar Tabs */}

{tabs.map((tab) => ( ))}

{/* Modal Content */}

{activeTab === "Upload" && (

fileInputRef.current?.click()} onDragOver={(e) => e.preventDefault()} onDrop={handleDrop} className="flex flex-col items-center justify-center h-full border-2 border-dashed border-gray-300 rounded-xl p-6 text-center cursor-pointer hover:bg-gray-50" >

Drag & drop files here or

<> { (errorDocuments[DocumentErrorEnum.UNSUPPORTED_DOC_TYPE]).map((docName, indx) => { return (

Unsupportd File Type for {docName}

) }) } { (errorDocuments[DocumentErrorEnum.FILE_SIZE_EXCEEDED]).map((docName, indx) => { return (

File Size Exceeded for {docName}

) }) }

)} {activeTab !== "Upload" && (

{activeTab} integration coming soon...

)}

)}

); }; export default SelectedDocuments;