- Added the option to select an expiry date when an owner or dev creates a code

- Made it so the student's expiry date is the same as the admin when created by one

src/pages/(admin)/BatchCodeGenerator.tsx

@@ -1,21 +1,38 @@
 import Button from "@/components/Low/Button";
-import {Type} from "@/interfaces/user";
+import Checkbox from "@/components/Low/Checkbox";
+import {PERMISSIONS} from "@/constants/userPermissions";
+import {Type, User} from "@/interfaces/user";
 import axios from "axios";
 import clsx from "clsx";
 import {capitalize} from "lodash";
+import moment from "moment";
 import {useEffect, useState} from "react";
+import ReactDatePicker from "react-datepicker";
 import {toast} from "react-toastify";
 import ShortUniqueId from "short-unique-id";
 import {useFilePicker} from "use-file-picker";
 
-export default function BatchCodeGenerator() {
+export default function BatchCodeGenerator({user}: {user: User}) {
 	const [emails, setEmails] = useState<string[]>([]);
 	const [isLoading, setIsLoading] = useState(false);
+	const [expiryDate, setExpiryDate] = useState<Date | null>(null);
+	const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
+
 	const {openFilePicker, filesContent} = useFilePicker({
 		accept: ".txt",
 		multiple: false,
 	});
 
+	useEffect(() => {
+		if (user.type === "admin" || user.type === "teacher") {
+			setExpiryDate(user.subscriptionExpirationDate || null);
+		}
+	}, [user]);
+
+	useEffect(() => {
+		if (!isExpiryDateEnabled) setExpiryDate(null);
+	}, [isExpiryDateEnabled]);
+
 	useEffect(() => {
 		if (filesContent.length > 0) {
 			const file = filesContent[0];
@@ -38,7 +55,7 @@ export default function BatchCodeGenerator() {
 
 		setIsLoading(true);
 		axios
-			.post("/api/code", {type, codes, emails})
+			.post("/api/code", {type, codes, emails, expiryDate})
 			.then(({data, status}) => {
 				if (data.ok) {
 					toast.success(`Successfully generated ${capitalize(type)} codes and they have been notified by e-mail!`, {toastId: "success"});
@@ -66,18 +83,57 @@ export default function BatchCodeGenerator() {
 			<Button onClick={openFilePicker} isLoading={isLoading} disabled={isLoading}>
 				{filesContent.length > 0 ? filesContent[0].name : "Choose a file"}
 			</Button>
+			{(user.type === "developer" || user.type === "owner") && (
+				<>
+					<div className="flex items-center justify-between">
+						<label className="font-normal text-base text-mti-gray-dim">Expiry Date</label>
+						<Checkbox isChecked={isExpiryDateEnabled} onChange={setIsExpiryDateEnabled}>
+							Enabled
+						</Checkbox>
+					</div>
+					{isExpiryDateEnabled && (
+						<ReactDatePicker
+							className={clsx(
+								"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+								"hover:border-mti-purple tooltip",
+								"transition duration-300 ease-in-out",
+							)}
+							filterDate={(date) => moment(date).isAfter(new Date())}
+							dateFormat="dd/MM/yyyy"
+							selected={expiryDate}
+							onChange={(date) => setExpiryDate(date)}
+						/>
+					)}
+				</>
+			)}
 			<label className="font-normal text-base text-mti-gray-dim">Select the type of user they should be</label>
 			<div className="grid grid-cols-2 gap-4">
-				<Button className="w-48" variant="outline" onClick={() => generateCode("student")} disabled={emails.length === 0 || isLoading}>
+				<Button
+					className="w-48"
+					variant="outline"
+					onClick={() => generateCode("student")}
+					disabled={emails.length === 0 || isLoading || !PERMISSIONS.generateCode.student.includes(user.type)}>
 					Student
 				</Button>
-				<Button className="w-48" variant="outline" onClick={() => generateCode("teacher")} disabled={emails.length === 0 || isLoading}>
+				<Button
+					className="w-48"
+					variant="outline"
+					onClick={() => generateCode("teacher")}
+					disabled={emails.length === 0 || isLoading || !PERMISSIONS.generateCode.teacher.includes(user.type)}>
 					Teacher
 				</Button>
-				<Button className="w-48" variant="outline" onClick={() => generateCode("admin")} disabled={emails.length === 0 || isLoading}>
+				<Button
+					className="w-48"
+					variant="outline"
+					onClick={() => generateCode("admin")}
+					disabled={emails.length === 0 || isLoading || !PERMISSIONS.generateCode.admin.includes(user.type)}>
 					Admin
 				</Button>
-				<Button className="w-48" variant="outline" onClick={() => generateCode("owner")} disabled={emails.length === 0 || isLoading}>
+				<Button
+					className="w-48"
+					variant="outline"
+					onClick={() => generateCode("owner")}
+					disabled={emails.length === 0 || isLoading || !PERMISSIONS.generateCode.owner.includes(user.type)}>
 					Owner
 				</Button>
 			</div>

src/pages/(admin)/CodeGenerator.tsx

@@ -1,21 +1,37 @@
 import Button from "@/components/Low/Button";
-import {Type} from "@/interfaces/user";
+import Checkbox from "@/components/Low/Checkbox";
+import {PERMISSIONS} from "@/constants/userPermissions";
+import {Type, User} from "@/interfaces/user";
 import axios from "axios";
 import clsx from "clsx";
 import {capitalize} from "lodash";
-import {useState} from "react";
+import moment from "moment";
+import {useEffect, useState} from "react";
+import ReactDatePicker from "react-datepicker";
 import {toast} from "react-toastify";
 import ShortUniqueId from "short-unique-id";
 
-export default function CodeGenerator() {
+export default function CodeGenerator({user}: {user: User}) {
 	const [generatedCode, setGeneratedCode] = useState<string>();
+	const [expiryDate, setExpiryDate] = useState<Date | null>(null);
+	const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
+
+	useEffect(() => {
+		if (user.type === "admin" || user.type === "teacher") {
+			setExpiryDate(user.subscriptionExpirationDate || null);
+		}
+	}, [user]);
+
+	useEffect(() => {
+		if (!isExpiryDateEnabled) setExpiryDate(null);
+	}, [isExpiryDateEnabled]);
 
 	const generateCode = (type: Type) => {
 		const uid = new ShortUniqueId();
 		const code = uid.randomUUID(6);
 
 		axios
-			.post("/api/code", {type, codes: [code]})
+			.post("/api/code", {type, codes: [code], expiryDate})
 			.then(({data, status}) => {
 				if (data.ok) {
 					toast.success(`Successfully generated a ${capitalize(type)} code!`, {toastId: "success"});
@@ -41,19 +57,58 @@ export default function CodeGenerator() {
 		<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
 			<label className="font-normal text-base text-mti-gray-dim">User Code Generator</label>
 			<div className="grid grid-cols-2 gap-4">
-				<Button className="w-48" variant="outline" onClick={() => generateCode("student")}>
+				<Button
+					className="w-48"
+					variant="outline"
+					onClick={() => generateCode("student")}
+					disabled={!PERMISSIONS.generateCode.student.includes(user.type) || (isExpiryDateEnabled && expiryDate === null)}>
 					Student
 				</Button>
-				<Button className="w-48" variant="outline" onClick={() => generateCode("teacher")}>
+				<Button
+					className="w-48"
+					variant="outline"
+					onClick={() => generateCode("teacher")}
+					disabled={!PERMISSIONS.generateCode.teacher.includes(user.type) || (isExpiryDateEnabled && expiryDate === null)}>
 					Teacher
 				</Button>
-				<Button className="w-48" variant="outline" onClick={() => generateCode("admin")}>
+				<Button
+					className="w-48"
+					variant="outline"
+					onClick={() => generateCode("admin")}
+					disabled={!PERMISSIONS.generateCode.admin.includes(user.type) || (isExpiryDateEnabled && expiryDate === null)}>
 					Admin
 				</Button>
-				<Button className="w-48" variant="outline" onClick={() => generateCode("owner")}>
+				<Button
+					className="w-48"
+					variant="outline"
+					onClick={() => generateCode("owner")}
+					disabled={!PERMISSIONS.generateCode.owner.includes(user.type) || (isExpiryDateEnabled && expiryDate === null)}>
 					Owner
 				</Button>
 			</div>
+			{(user.type === "developer" || user.type === "owner") && (
+				<>
+					<div className="flex items-center justify-between">
+						<label className="font-normal text-base text-mti-gray-dim">Expiry Date</label>
+						<Checkbox isChecked={isExpiryDateEnabled} onChange={setIsExpiryDateEnabled}>
+							Enabled
+						</Checkbox>
+					</div>
+					{isExpiryDateEnabled && (
+						<ReactDatePicker
+							className={clsx(
+								"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+								"hover:border-mti-purple tooltip",
+								"transition duration-300 ease-in-out",
+							)}
+							filterDate={(date) => moment(date).isAfter(new Date())}
+							dateFormat="dd/MM/yyyy"
+							selected={expiryDate}
+							onChange={(date) => setExpiryDate(date)}
+						/>
+					)}
+				</>
+			)}
 			<label className="font-normal text-base text-mti-gray-dim">Generated Code:</label>
 			<div
 				className={clsx(

src/pages/admin.tsx

@@ -61,8 +61,8 @@ export default function Admin() {
 				<Layout user={user} className="gap-6">
 					<section className="w-full flex gap-8 justify-between">
 						<ExamLoader />
-						<CodeGenerator />
-						<BatchCodeGenerator />
+						<CodeGenerator user={user} />
+						<BatchCodeGenerator user={user} />
 					</section>
 					<section className="w-full">
 						<Lists user={user} />

src/pages/api/code.ts

@@ -19,7 +19,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 		return;
 	}
 
-	const {type, codes, emails} = req.body as {type: Type; codes: string[]; emails?: string[]};
+	const {type, codes, emails, expiryDate} = req.body as {type: Type; codes: string[]; emails?: string[]; expiryDate: null | Date};
 	const permission = PERMISSIONS.generateCode[type];
 
 	if (!permission.includes(req.session.user.type)) {
@@ -29,7 +29,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 
 	const codePromises = codes.map(async (code, index) => {
 		const codeRef = doc(db, "codes", code);
-		await setDoc(codeRef, {type, code, creator: req.session.user!.id});
+		await setDoc(codeRef, {type, code, creator: req.session.user!.id, expiryDate});
 
 		if (emails && emails.length > index) {
 			const transport = prepareMailer();

src/pages/api/register.ts

@@ -37,7 +37,7 @@ async function login(req: NextApiRequest, res: NextApiResponse) {
 		return;
 	}
 
-	const codeData = codeDocs[0].data() as {code: string; type: Type; creator: string};
+	const codeData = codeDocs[0].data() as {code: string; type: Type; creator: string; expiryDate: Date | null};
 
 	createUserWithEmailAndPassword(auth, email, password)
 		.then(async (userCredentials) => {
@@ -52,6 +52,7 @@ async function login(req: NextApiRequest, res: NextApiResponse) {
 				isFirstLogin: codeData.type === "student",
 				focus: "academic",
 				type: codeData.type,
+				subscriptionExpirationDate: codeData.expiryDate,
 			};
 
 			await setDoc(doc(db, "users", userId), user);