93 lines
3.5 KiB
TypeScript
93 lines
3.5 KiB
TypeScript
import { useRef, useState } from 'react';
|
|
import { FiUpload } from 'react-icons/fi'
|
|
import { 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';
|
|
|
|
|
|
const StartNow = () => {
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
const [files, setFiles] = useState<File[]>([]);
|
|
|
|
const userData = useSelector((state: RootState) => state.user);
|
|
|
|
const dispatch = useDispatch();
|
|
const navigate = useNavigate();
|
|
|
|
const handleUpload = async (filesToUpload: File[]) => {
|
|
|
|
const accountId = userData.account?.id;
|
|
const transactionRes = await api.post(`/api/accounts/${userData.account?.id}/transactions`);
|
|
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 handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
await dispatch(resetDocuments())
|
|
const selectedFiles = e.target.files ? Array.from(e.target.files) : [];
|
|
if (selectedFiles.length > 0) {
|
|
setFiles((prev) => [...prev, ...selectedFiles]);
|
|
handleUpload(selectedFiles);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
onClick={() => fileInputRef.current?.click()}
|
|
id='start-now-upload-con'
|
|
className="group col-span-1 cursor-pointer border-2 border-dashed border-slate-300 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 with subtle animation */}
|
|
<div className="p-2 text-blue-600 group-hover:text-blue-700 transition-colors">
|
|
<FiUpload className="text-lg" />
|
|
</div>
|
|
|
|
{/* Compact text */}
|
|
<p className="text-xs text-gray-600">
|
|
<span className="text-blue-600 font-medium">Click to upload</span> or drag and drop
|
|
</p>
|
|
|
|
<button
|
|
className="mt-1 text-sm font-medium text-white bg-gradient-to-br from-[var(--primary)] to-blue-600 hover:bg-blue-700 px-3 py-1 rounded shadow-xs transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-blue-400 cursor-pointer"
|
|
>
|
|
Start Now
|
|
</button>
|
|
|
|
<p className="text-[0.65rem] text-gray-400 mt-0.5">
|
|
PDF, JPG, PNG (max. 10MB)
|
|
</p>
|
|
|
|
<input
|
|
type="file"
|
|
ref={fileInputRef}
|
|
className="hidden"
|
|
onChange={handleFileChange}
|
|
accept=".pdf,.doc,.docx,.jpg,.png,.jpeg,.txt"
|
|
multiple
|
|
/>
|
|
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default StartNow |