137 lines
4.2 KiB
JavaScript
137 lines
4.2 KiB
JavaScript
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { t } from "@/utils";
|
|
import { updateBankTransferApi } from "@/utils/api";
|
|
import { useState, useCallback } from "react";
|
|
import { useDropzone } from "react-dropzone";
|
|
import { MdClose } from "react-icons/md";
|
|
import { toast } from "sonner";
|
|
|
|
const UploadReceiptModal = ({
|
|
IsUploadRecipt,
|
|
setIsUploadRecipt,
|
|
transactionId,
|
|
setData,
|
|
}) => {
|
|
const [selectedFile, setSelectedFile] = useState(null);
|
|
const [isUploading, setIsUploading] = useState(false);
|
|
const [preview, setPreview] = useState(null);
|
|
|
|
const onDrop = useCallback((acceptedFiles) => {
|
|
const file = acceptedFiles[0];
|
|
setSelectedFile(file);
|
|
|
|
// Create preview URL
|
|
const previewUrl = URL.createObjectURL(file);
|
|
setPreview(previewUrl);
|
|
}, []);
|
|
|
|
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
|
onDrop,
|
|
accept: {
|
|
"image/*": [".png", ".jpg", ".jpeg"],
|
|
},
|
|
maxFiles: 1,
|
|
multiple: false,
|
|
});
|
|
|
|
const clearSelection = () => {
|
|
if (preview) {
|
|
URL.revokeObjectURL(preview);
|
|
}
|
|
setSelectedFile(null);
|
|
setPreview(null);
|
|
};
|
|
|
|
const handleReceiptSubmit = async () => {
|
|
try {
|
|
setIsUploading(true);
|
|
const res = await updateBankTransferApi.updateBankTransfer({
|
|
payment_transection_id: transactionId,
|
|
payment_receipt: selectedFile,
|
|
});
|
|
|
|
if (res?.data?.error === false) {
|
|
setData((prevData) =>
|
|
prevData.map((item) =>
|
|
item.id === transactionId ? res?.data?.data : item
|
|
)
|
|
);
|
|
toast.success(t("receiptUploaded"));
|
|
setIsUploadRecipt(false);
|
|
} else {
|
|
toast.error(res?.data?.message);
|
|
}
|
|
} catch (error) {
|
|
console.log("Failed To Upload Receipt", error);
|
|
} finally {
|
|
setIsUploading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Dialog open={IsUploadRecipt} onOpenChange={setIsUploadRecipt}>
|
|
<DialogContent onInteractOutside={(e) => e.preventDefault()}>
|
|
<DialogHeader>
|
|
<DialogTitle className="text-xl font-semibold">
|
|
{t("uploadPaymentReceipt")}
|
|
</DialogTitle>
|
|
<DialogDescription className="!text-base">
|
|
{t("uploadReceiptDescription")}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="flex flex-col gap-4 mt-4">
|
|
{!selectedFile ? (
|
|
<div
|
|
{...getRootProps()}
|
|
className={`border-2 border-dashed border-gray-300 rounded-lg p-8 text-center transition-all duration-200 cursor-pointer hover:border-primary hover:bg-gray-50 ${
|
|
isDragActive ? "border-primary bg-gray-50" : ""
|
|
}`}
|
|
>
|
|
<input {...getInputProps()} />
|
|
{/* <FileImage className="receipt-icon" /> */}
|
|
<p className="text-sm text-black opacity-60">
|
|
{isDragActive
|
|
? t("dropYourReceiptHere")
|
|
: t("dragAndDropReceipt")}
|
|
</p>
|
|
<p className="text-sm text-black opacity-60">
|
|
{t("clickToSelect")}
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="relative">
|
|
<img
|
|
src={preview}
|
|
alt="Receipt preview"
|
|
className="w-full h-48 object-contain rounded-lg border border-gray-200"
|
|
/>
|
|
<button
|
|
className="absolute top-2 right-2 bg-red-500 text-white border-none rounded flex items-center justify-center w-8 h-8 cursor-pointer"
|
|
onClick={clearSelection}
|
|
>
|
|
<MdClose size={24} />
|
|
</button>
|
|
</div>
|
|
)}
|
|
<button
|
|
className="border-0 bg-primary text-white px-3 py-1.5 rounded w-max self-end disabled:opacity-65"
|
|
onClick={handleReceiptSubmit}
|
|
disabled={!selectedFile || isUploading}
|
|
>
|
|
{t("submit")}
|
|
</button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
export default UploadReceiptModal;
|