Made it so the isPaid property is controlled with the file uploads/deletes

src/components/PaymentAssetManager.tsx

@@ -12,6 +12,7 @@ const PaymentAssetManager = (props: {
 	asset: string | undefined;
 	permissions: "read" | "write";
 	type: FilesStorage;
+	reload: () => void;
 	paymentId: string;
 }) => {
 	const {asset, permissions, type, paymentId} = props;
@@ -44,22 +45,13 @@ const PaymentAssetManager = (props: {
 				})
 				.catch((error) => {
 					console.error("Error occurred during file deletion:", error);
-        });
+				})
+				.finally(props.reload);
 		}
 	};
 
-  const renderFileInput = (
+	const renderFileInput = (onChange: any, ref: React.RefObject<HTMLInputElement>) => (
-    onChange: any,
+		<input type="file" ref={ref} style={{display: "none"}} onChange={onChange} multiple={false} accept="application/pdf" />
-    ref: React.RefObject<HTMLInputElement>
-  ) => (
-    <input
-      type="file"
-      ref={ref}
-      style={{ display: "none" }}
-      onChange={onChange}
-      multiple={false}
-      accept="application/pdf"
-    />
 	);
 
 	const handleFileChange = async (e: Event, method: "post" | "patch") => {
@@ -94,7 +86,8 @@ const PaymentAssetManager = (props: {
 				})
 				.catch((error) => {
 					console.error("Error occurred during file upload:", error);
-        });
+				})
+				.finally(props.reload);
 		}
 	};
 
@@ -130,14 +123,8 @@ const PaymentAssetManager = (props: {
 					<BsDownload onClick={downloadAsset} />
 					<BsArrowRepeat onClick={() => fileInputReplaceRef.current?.click()} />
 					<BsTrash onClick={deleteAsset} />
-          {renderFileInput(
+					{renderFileInput((e: Event) => handleFileChange(e, "patch"), fileInputReplaceRef)}
-            (e: Event) => handleFileChange(e, "patch"),
+					{renderFileInput((e: Event) => handleFileChange(e, "post"), fileInputRef)}
-            fileInputReplaceRef
-          )}
-          {renderFileInput(
-            (e: Event) => handleFileChange(e, "post"),
-            fileInputRef
-          )}
 				</>
 			);
 		}

src/pages/api/payments/files/[type]/[paymentId].ts

@@ -1,25 +1,14 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 import type {NextApiRequest, NextApiResponse} from "next";
 import {app, storage} from "@/firebase";
-import {
+import {getFirestore, getDoc, doc, updateDoc, deleteField, setDoc} from "firebase/firestore";
-  getFirestore,
-  getDoc,
-  doc,
-  updateDoc,
-  deleteField,
-} from "firebase/firestore";
 import {withIronSessionApiRoute} from "iron-session/next";
 import {sessionOptions} from "@/lib/session";
 import {FilesStorage} from "@/interfaces/storage.files";
 
 import {Payment} from "@/interfaces/paypal";
 import fs from "fs";
-import {
+import {ref, uploadBytes, deleteObject, getDownloadURL} from "firebase/storage";
-  ref,
-  uploadBytes,
-  deleteObject,
-  getDownloadURL,
-} from "firebase/storage";
 import formidable from "formidable-serverless";
 
 const db = getFirestore(app);
@@ -35,10 +24,7 @@ const getPaymentField = (type: FilesStorage) => {
 	}
 };
 
-const handleDelete = async (
+const handleDelete = async (paymentId: string, paymentField: "commissionTransfer" | "corporateTransfer") => {
-  paymentId: string,
-  paymentField: "commissionTransfer" | "corporateTransfer"
-) => {
 	const paymentRef = doc(db, "payments", paymentId);
 	const paymentDoc = await getDoc(paymentRef);
 	const {[paymentField]: paymentFieldPath} = paymentDoc.data() as Payment;
@@ -47,14 +33,11 @@ const handleDelete = async (
 	await deleteObject(documentRef);
 	await updateDoc(paymentRef, {
 		[paymentField]: deleteField(),
+		isPaid: false,
 	});
 };
 
-const handleUpload = async (
+const handleUpload = async (req: NextApiRequest, paymentId: string, paymentField: "commissionTransfer" | "corporateTransfer") =>
-  req: NextApiRequest,
-  paymentId: string,
-  paymentField: "commissionTransfer" | "corporateTransfer"
-) =>
 	new Promise((resolve, reject) => {
 		const form = formidable({keepExtensions: true});
 		form.parse(req, async (err: any, fields: any, files: any) => {
@@ -110,9 +93,7 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
 		return;
 	}
 	const paymentRef = doc(db, "payments", paymentId);
-  const { [paymentField]: paymentFieldPath } = (
+	const {[paymentField]: paymentFieldPath} = (await getDoc(paymentRef)).data() as Payment;
-    await getDoc(paymentRef)
-  ).data() as Payment;
 
 	// Create a reference to the file to delete
 	const documentRef = ref(storage, paymentFieldPath);
@@ -134,6 +115,12 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 
 	try {
 		const ref = await handleUpload(req, paymentId, paymentField);
+		console.log(ref);
+
+		const updatedDoc = (await getDoc(doc(db, "payments", paymentId))).data() as Payment;
+		if (updatedDoc.commissionTransfer && updatedDoc.corporateTransfer) {
+			await setDoc(doc(db, "payments", paymentId), {isPaid: true}, {merge: true});
+		}
 		res.status(200).json({ref});
 	} catch (error) {
 		res.status(500).json({error});

src/pages/payment-record.tsx

@@ -387,6 +387,7 @@ export default function PaymentRecord() {
 							cell: (info) => (
 								<div className={containerClassName}>
 									<PaymentAssetManager
+										reload={reload}
 										permissions={info.row.original.isPaid ? "read" : "write"}
 										asset={info.row.original.corporateTransfer}
 										paymentId={info.row.original.id}
@@ -404,6 +405,7 @@ export default function PaymentRecord() {
 							cell: (info) => (
 								<div className={containerClassName}>
 									<PaymentAssetManager
+										reload={reload}
 										permissions="read"
 										asset={info.row.original.commissionTransfer}
 										paymentId={info.row.original.id}
@@ -421,6 +423,7 @@ export default function PaymentRecord() {
 							cell: (info) => (
 								<div className={containerClassName}>
 									<PaymentAssetManager
+										reload={reload}
 										permissions="read"
 										asset={info.row.original.corporateTransfer}
 										paymentId={info.row.original.id}
@@ -435,6 +438,7 @@ export default function PaymentRecord() {
 							cell: (info) => (
 								<div className={containerClassName}>
 									<PaymentAssetManager
+										reload={reload}
 										permissions={info.row.original.isPaid ? "read" : "write"}
 										asset={info.row.original.commissionTransfer}
 										paymentId={info.row.original.id}
@@ -452,6 +456,7 @@ export default function PaymentRecord() {
 							cell: (info) => (
 								<div className={containerClassName}>
 									<PaymentAssetManager
+										reload={reload}
 										permissions="write"
 										asset={info.row.original.corporateTransfer}
 										paymentId={info.row.original.id}
@@ -466,6 +471,7 @@ export default function PaymentRecord() {
 							cell: (info) => (
 								<div className={containerClassName}>
 									<PaymentAssetManager
+										reload={reload}
 										permissions="write"
 										asset={info.row.original.commissionTransfer}
 										paymentId={info.row.original.id}