import { useRef, useState } from 'react'; import { FiUpload } from 'react-icons/fi' import { handleMultipleTransactionThunk, resetDocuments, uploadDocuments } from '../../store/slices/documentSlice'; import { useDispatch, useSelector } from 'react-redux'; import { toast } from 'react-toastify'; import { useNavigate } from 'react-router-dom'; import { RootState } from '../../store/store'; import api from '../../config/api'; import TagsCon from '../client/TagsCon'; import TransactionChoiceModal from './TransactionChoiceModal'; import { resetRecipients } from '../../store/slices/selectedRecipientsSlice'; import { AiOutlineConsoleSql } from 'react-icons/ai'; const StartNow = () => { const fileInputRef = useRef(null); const [files, setFiles] = useState([]); const [transactionModal, setTransactionModal] = useState<{ open: boolean, isActive: boolean }>({ open: false, isActive: true }); const userData = useSelector((state: RootState) => state.user); const dispatch = useDispatch(); const navigate = useNavigate(); const handleUpload = async (filesToUpload: File[] = files) => { const accountId = userData.account?.id; const subject = filesToUpload[0].name ? filesToUpload[0].name : "Untitled" const transactionRes = await api.post(`/api/v1/accounts/${userData.account?.id}/transactions`, { subject: "Sign Document - " + subject }); const transactionId = transactionRes.data.id const formData = new FormData(); filesToUpload.forEach(file => { formData.append("file", file); }); dispatch(uploadDocuments({ formData, accountId, transactionId })) .unwrap() .then((res) => { // toast.dismiss(); setFiles([]); navigate(`/process-step-one/${accountId}/${transactionId}`); }) .catch((err) => { console.error("Upload failed", err); }); }; const handleMultipleTransaction = async () => { const filesToUpload = files; const accountId = userData.account?.id; const formData = new FormData(); filesToUpload.forEach(file => { formData.append("file", file); }); dispatch(handleMultipleTransactionThunk({ formData, accountId })) .unwrap() .then(() => { // toast.dismiss(); }) .catch((err: unknown) => { console.error("Upload failed", err); }); } const handleFileChange = async (e: React.ChangeEvent) => { await dispatch(resetRecipients()) await dispatch(resetDocuments()) const selectedFiles = e.target.files ? Array.from(e.target.files) : []; if (selectedFiles.length > 0) { setFiles((prev) => [...selectedFiles]); // handleUpload(selectedFiles); if (transactionModal.isActive && selectedFiles.length > 1) { setTransactionModal({ open: true, isActive: true }) } else { handleUpload(selectedFiles); } } }; const handleDrop = async (e: React.DragEvent) => { e.preventDefault(); await dispatch(resetRecipients()) await dispatch(resetDocuments()) const droppedFiles = Array.from(e.dataTransfer.files); if (droppedFiles.length > 0) { setFiles((prev) => [...prev, ...droppedFiles]); if (transactionModal.isActive && droppedFiles.length > 1) { setTransactionModal({ open: true, isActive: true }) } else { handleUpload(droppedFiles); } } }; const handleDragOver = (e: React.DragEvent) => { e.preventDefault(); }; return ( <> {transactionModal.isActive && files.length > 1 && { setTransactionModal({ open: false, isActive: true }) }} onCreateTransaction={() => { handleUpload() setTransactionModal({ open: false, isActive: true }) }} onCreateSeparateTransactions={() => { handleMultipleTransaction() setTransactionModal({ open: false, isActive: true }) }} />}

fileInputRef.current?.click()} onDrop={handleDrop} onDragOver={handleDragOver} id='start-now-upload-con' className="group col-span-1 cursor-pointer border-1 border-dashed border-[#D3D3D3] rounded-lg bg-[var(--documentUploadBg)] transition-all duration-200 p-4 flex flex-col items-center justify-center gap-2 text-center shadow-sm hover:shadow-md"> {/* Upload icon */} {/* Compact text | Upload or drag & drop files */}

PDF, DOCX (max 10MB)

) } export default StartNow