- It is no longer possible to upload/edit/delete a transfer after it is considered paid

- When deleting a row, the transfers are also deleted from the storage

src/components/PaymentAssetManager.tsx

@@ -1,5 +1,5 @@
 import React, {ChangeEvent} from "react";
-import {BsUpload, BsDownload, BsTrash, BsArrowRepeat} from "react-icons/bs";
+import {BsUpload, BsDownload, BsTrash, BsArrowRepeat, BsXCircleFill} from "react-icons/bs";
 import {FilesStorage} from "@/interfaces/storage.files";
 import axios from "axios";
 
@@ -14,6 +14,7 @@ const PaymentAssetManager = (props: {
 	type: FilesStorage;
 	reload: () => void;
 	paymentId: string;
+	canEdit: boolean;
 }) => {
 	const {asset, permissions, type, paymentId} = props;
 
@@ -121,22 +122,28 @@ const PaymentAssetManager = (props: {
 			return (
 				<>
 					<BsDownload onClick={downloadAsset} />
+					{props.canEdit && (
+						<>
 							<BsArrowRepeat onClick={() => fileInputReplaceRef.current?.click()} />
 							<BsTrash onClick={deleteAsset} />
 							{renderFileInput((e: Event) => handleFileChange(e, "patch"), fileInputReplaceRef)}
 							{renderFileInput((e: Event) => handleFileChange(e, "post"), fileInputRef)}
 						</>
+					)}
+				</>
 			);
 		}
 
 		return <span className="loading loading-infinity w-8" />;
 	}
 
-	return (
+	return props.canEdit ? (
 		<>
 			<BsUpload onClick={() => fileInputRef.current?.click()} />
 			{renderFileInput((e: Event) => handleFileChange(e, "post"), fileInputRef)}
 		</>
+	) : (
+		<BsXCircleFill />
 	);
 };
 

src/pages/api/payments/[id].ts

@@ -1,10 +1,12 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 import type {NextApiRequest, NextApiResponse} from "next";
-import {app} from "@/firebase";
+import {app, storage} from "@/firebase";
 import {getFirestore, collection, getDocs, getDoc, doc, deleteDoc, setDoc} from "firebase/firestore";
 import {withIronSessionApiRoute} from "iron-session/next";
 import {sessionOptions} from "@/lib/session";
 import {Group} from "@/interfaces/user";
+import {Payment} from "@/interfaces/paypal";
+import {deleteObject, ref} from "firebase/storage";
 
 const db = getFirestore(app);
 
@@ -44,11 +46,14 @@ async function del(req: NextApiRequest, res: NextApiResponse) {
 	const {id} = req.query as {id: string};
 
 	const snapshot = await getDoc(doc(db, "payments", id));
+	const data = snapshot.data() as Payment;
 
 	const user = req.session.user;
 	if (user.type === "admin" || user.type === "developer") {
-		await deleteDoc(snapshot.ref);
+		if (data.commissionTransfer) await deleteObject(ref(storage, data.commissionTransfer));
+		if (data.corporateTransfer) await deleteObject(ref(storage, data.corporateTransfer));
 
+		await deleteDoc(snapshot.ref);
 		res.status(200).json({ok: true});
 		return;
 	}

src/pages/payment-record.tsx

@@ -390,6 +390,7 @@ export default function PaymentRecord() {
 										reload={reload}
 										permissions={info.row.original.isPaid ? "read" : "write"}
 										asset={info.row.original.corporateTransfer}
+										canEdit={!info.row.original.isPaid}
 										paymentId={info.row.original.id}
 										type="corporate"
 									/>
@@ -409,6 +410,7 @@ export default function PaymentRecord() {
 										permissions="read"
 										asset={info.row.original.commissionTransfer}
 										paymentId={info.row.original.id}
+										canEdit={!info.row.original.isPaid}
 										type="commission"
 									/>
 								</div>
@@ -427,6 +429,7 @@ export default function PaymentRecord() {
 										permissions="read"
 										asset={info.row.original.corporateTransfer}
 										paymentId={info.row.original.id}
+										canEdit={!info.row.original.isPaid}
 										type="corporate"
 									/>
 								</div>
@@ -442,6 +445,7 @@ export default function PaymentRecord() {
 										permissions={info.row.original.isPaid ? "read" : "write"}
 										asset={info.row.original.commissionTransfer}
 										paymentId={info.row.original.id}
+										canEdit={!info.row.original.isPaid}
 										type="commission"
 									/>
 								</div>
@@ -460,6 +464,7 @@ export default function PaymentRecord() {
 										permissions="write"
 										asset={info.row.original.corporateTransfer}
 										paymentId={info.row.original.id}
+										canEdit={!info.row.original.isPaid}
 										type="corporate"
 									/>
 								</div>
@@ -475,6 +480,7 @@ export default function PaymentRecord() {
 										permissions="write"
 										asset={info.row.original.commissionTransfer}
 										paymentId={info.row.original.id}
+										canEdit={!info.row.original.isPaid}
 										type="commission"
 									/>
 								</div>
@@ -534,6 +540,31 @@ export default function PaymentRecord() {
 		}
 	};
 
+	const commissionColumn = () => {
+		if (user && user.type !== "corporate")
+			return [
+				columnHelper.accessor("agentCommission", {
+					header: "Commission",
+					id: "agentCommission",
+					cell: (info) => {
+						const {value} = columHelperValue(info.column.id, info);
+						return <>{value}</>;
+					},
+				}),
+				columnHelper.accessor("agentValue", {
+					header: "Commission Value",
+					id: "agentValue",
+					cell: (info) => {
+						const {value} = columHelperValue(info.column.id, info);
+						const currency = CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label;
+						const finalValue = `${value} ${currency}`;
+						return <span>{finalValue}</span>;
+					},
+				}),
+			];
+		return [];
+	};
+
 	const defaultColumns = [
 		columnHelper.accessor("corporate", {
 			header: "Corporate ID",
@@ -593,24 +624,7 @@ export default function PaymentRecord() {
 				);
 			},
 		}),
-		columnHelper.accessor("agentCommission", {
+		...commissionColumn(),
-			header: "Commission",
-			id: "agentCommission",
-			cell: (info) => {
-				const {value} = columHelperValue(info.column.id, info);
-				return <>{value}</>;
-			},
-		}),
-		columnHelper.accessor("agentValue", {
-			header: "Commission Value",
-			id: "agentValue",
-			cell: (info) => {
-				const {value} = columHelperValue(info.column.id, info);
-				const currency = CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label;
-				const finalValue = `${value} ${currency}`;
-				return <span>{finalValue}</span>;
-			},
-		}),
 		columnHelper.accessor("isPaid", {
 			header: "Paid",
 			id: "isPaid",