Created the validity dates for discounts

src/interfaces/paypal.ts

@@ -24,6 +24,7 @@ export interface Discount {
 	id: string;
 	percentage: number;
 	domain: string;
+	validUntil?: Date;
 }
 
 export type DurationUnit = "weeks" | "days" | "months" | "years";

src/pages/(admin)/Lists/DiscountList.tsx

@@ -7,35 +7,27 @@ import useCodes from "@/hooks/useCodes";
 import useDiscounts from "@/hooks/useDiscounts";
 import useUser from "@/hooks/useUser";
 import useUsers from "@/hooks/useUsers";
-import { Discount } from "@/interfaces/paypal";
+import {Discount} from "@/interfaces/paypal";
-import { Code, User } from "@/interfaces/user";
+import {Code, User} from "@/interfaces/user";
-import { USER_TYPE_LABELS } from "@/resources/user";
+import {USER_TYPE_LABELS} from "@/resources/user";
-import {
+import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
-  createColumnHelper,
-  flexRender,
-  getCoreRowModel,
-  useReactTable,
-} from "@tanstack/react-table";
 import axios from "axios";
+import clsx from "clsx";
 import moment from "moment";
-import { useEffect, useState } from "react";
+import {useEffect, useState} from "react";
-import { BsPencil, BsTrash } from "react-icons/bs";
+import ReactDatePicker from "react-datepicker";
-import { toast } from "react-toastify";
+import {BsPencil, BsTrash} from "react-icons/bs";
+import {toast} from "react-toastify";
 
 const columnHelper = createColumnHelper<Discount>();
 
-const DiscountCreator = ({
+const DiscountCreator = ({discount, onClose}: {discount?: Discount; onClose: () => void}) => {
-  discount,
-  onClose,
-}: {
-  discount?: Discount;
-  onClose: () => void;
-}) => {
 	const [percentage, setPercentage] = useState(discount?.percentage);
 	const [domain, setDomain] = useState(discount?.domain);
+	const [validUntil, setValidUntil] = useState(discount?.validUntil);
 
 	const submit = async () => {
-    const body = { percentage, domain };
+		const body = {percentage, domain, validUntil: validUntil?.toISOString() || undefined};
 
 		if (discount) {
 			return axios
@@ -62,11 +54,9 @@ const DiscountCreator = ({
 
 	return (
 		<div className="flex flex-col gap-8 py-8">
-      <div className="w-full grid grid-cols-1 md:grid-cols-2 gap-8">
+			<div className="w-full grid grid-cols-1 gap-8">
 				<div className="flex flex-col gap-3">
-          <label className="font-normal text-base text-mti-gray-dim">
+					<label className="font-normal text-base text-mti-gray-dim">Domain *</label>
-            Domain *
-          </label>
 					<div className="flex gap-4 items-center">
 						<Input
 							defaultValue={domain}
@@ -78,9 +68,7 @@ const DiscountCreator = ({
 					</div>
 				</div>
 				<div className="flex flex-col gap-3">
-          <label className="font-normal text-base text-mti-gray-dim">
+					<label className="font-normal text-base text-mti-gray-dim">Percentage (in %) *</label>
-            Percentage (in %) *
-          </label>
 					<div className="flex gap-4 items-center">
 						<Input
 							defaultValue={percentage}
@@ -91,21 +79,32 @@ const DiscountCreator = ({
 						/>
 					</div>
 				</div>
+				<div className="flex flex-col gap-3 w-full">
+					<label className="font-normal text-base text-mti-gray-dim">Valid Until</label>
+					<div className="flex gap-4 items-center w-full">
+						<ReactDatePicker
+							wrapperClassName="w-full z-[900]"
+							calendarClassName="z-[900]"
+							popperClassName="z-[900]"
+							isClearable
+							className={clsx(
+								"flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
+								"hover:border-mti-purple tooltip",
+								"transition duration-300 ease-in-out",
+							)}
+							filterDate={(date) => moment(date).isAfter(new Date())}
+							dateFormat="dd/MM/yyyy"
+							selected={validUntil}
+							onChange={(date) => setValidUntil(date ? moment(date).endOf("day").toDate() : undefined)}
+						/>
+					</div>
+				</div>
 			</div>
 			<div className="flex w-full justify-end items-center gap-8 mt-8">
-        <Button
+				<Button variant="outline" color="red" className="w-full max-w-[200px]" onClick={onClose}>
-          variant="outline"
-          color="red"
-          className="w-full max-w-[200px]"
-          onClick={onClose}
-        >
 					Cancel
 				</Button>
-        <Button
+				<Button className="w-full max-w-[200px]" onClick={submit} disabled={!percentage || !domain}>
-          className="w-full max-w-[200px]"
-          onClick={submit}
-          disabled={!percentage || !domain}
-        >
 					Submit
 				</Button>
 			</div>
@@ -113,7 +112,7 @@ const DiscountCreator = ({
 	);
 };
 
-export default function DiscountList({ user }: { user: User }) {
+export default function DiscountList({user}: {user: User}) {
 	const [selectedDiscounts, setSelectedDiscounts] = useState<string[]>([]);
 
 	const [isCreating, setIsCreating] = useState(false);
@@ -121,33 +120,25 @@ export default function DiscountList({ user }: { user: User }) {
 
 	const [filteredDiscounts, setFilteredDiscounts] = useState<Discount[]>([]);
 
-  const { users } = useUsers();
+	const {users} = useUsers();
-  const { discounts, reload } = useDiscounts();
+	const {discounts, reload} = useDiscounts();
 
 	useEffect(() => {
 		setFilteredDiscounts(discounts);
 	}, [discounts]);
 
 	const toggleDiscount = (id: string) => {
-    setSelectedDiscounts((prev) =>
+		setSelectedDiscounts((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
-      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id],
-    );
 	};
 
 	const toggleAllDiscounts = (checked: boolean) => {
-    if (checked)
+		if (checked) return setSelectedDiscounts(filteredDiscounts.map((x) => x.id));
-      return setSelectedDiscounts(filteredDiscounts.map((x) => x.id));
 
 		return setSelectedDiscounts([]);
 	};
 
 	const deleteDiscounts = async (discounts: string[]) => {
-    if (
+		if (!confirm(`Are you sure you want to delete these ${discounts.length} discount(s)?`)) return;
-      !confirm(
-        `Are you sure you want to delete these ${discounts.length} discount(s)?`,
-      )
-    )
-      return;
 
 		const params = new URLSearchParams();
 		discounts.forEach((code) => params.append("discount", code));
@@ -172,12 +163,7 @@ export default function DiscountList({ user }: { user: User }) {
 	};
 
 	const deleteDiscount = async (discount: Discount) => {
-    if (
+		if (!confirm(`Are you sure you want to delete this "${discount.id}" discount?`)) return;
-      !confirm(
-        `Are you sure you want to delete this "${discount.id}" discount?`,
-      )
-    )
-      return;
 
 		axios
 			.delete(`/api/discounts/${discount.id}`)
@@ -204,20 +190,13 @@ export default function DiscountList({ user }: { user: User }) {
 			header: () => (
 				<Checkbox
 					disabled={filteredDiscounts.length === 0}
-          isChecked={
+					isChecked={selectedDiscounts.length === filteredDiscounts.length && filteredDiscounts.length > 0}
-            selectedDiscounts.length === filteredDiscounts.length &&
+					onChange={(checked) => toggleAllDiscounts(checked)}>
-            filteredDiscounts.length > 0
-          }
-          onChange={(checked) => toggleAllDiscounts(checked)}
-        >
 					{""}
 				</Checkbox>
 			),
 			cell: (info) => (
-        <Checkbox
+				<Checkbox isChecked={selectedDiscounts.includes(info.getValue())} onChange={() => toggleDiscount(info.getValue())}>
-          isChecked={selectedDiscounts.includes(info.getValue())}
-          onChange={() => toggleDiscount(info.getValue())}
-        >
 					{""}
 				</Checkbox>
 			),
@@ -234,10 +213,14 @@ export default function DiscountList({ user }: { user: User }) {
 			header: "Percentage",
 			cell: (info) => `${info.getValue()}%`,
 		}),
+		columnHelper.accessor("validUntil", {
+			header: "Valid Until",
+			cell: (info) => (info.getValue() ? moment(info.getValue()).format("DD/MM/YYYY") : ""),
+		}),
 		{
 			header: "",
 			id: "actions",
-      cell: ({ row }: { row: { original: Discount } }) => {
+			cell: ({row}: {row: {original: Discount}}) => {
 				return (
 					<div className="flex gap-4">
 						<div
@@ -245,15 +228,10 @@ export default function DiscountList({ user }: { user: User }) {
 							className="cursor-pointer tooltip"
 							onClick={() => {
 								setEditingDiscount(row.original);
-              }}
+							}}>
-            >
 							<BsPencil className="hover:text-mti-purple-light transition ease-in-out duration-300" />
 						</div>
-            <div
+						<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteDiscount(row.original)}>
-              data-tip="Delete"
-              className="cursor-pointer tooltip"
-              onClick={() => deleteDiscount(row.original)}
-            >
 							<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
 						</div>
 					</div>
@@ -279,10 +257,7 @@ export default function DiscountList({ user }: { user: User }) {
 			<Modal
 				isOpen={isCreating || !!editingDiscount}
 				onClose={closeModal}
-        title={
+				title={editingDiscount ? `Editing ${editingDiscount.id}` : "New Discount"}>
-          editingDiscount ? `Editing ${editingDiscount.id}` : "New Discount"
-        }
-      >
 				<DiscountCreator onClose={closeModal} discount={editingDiscount} />
 			</Modal>
 			<div className="flex items-center justify-end pb-4 pt-1">
@@ -293,8 +268,7 @@ export default function DiscountList({ user }: { user: User }) {
 						variant="outline"
 						color="red"
 						className="!py-1 px-10"
-            onClick={() => deleteDiscounts(selectedDiscounts)}
+						onClick={() => deleteDiscounts(selectedDiscounts)}>
-          >
 						Delete
 					</Button>
 				</div>
@@ -305,12 +279,7 @@ export default function DiscountList({ user }: { user: User }) {
 						<tr key={headerGroup.id}>
 							{headerGroup.headers.map((header) => (
 								<th className="p-4 text-left" key={header.id}>
-                  {header.isPlaceholder
+									{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-                    ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext(),
-                      )}
 								</th>
 							))}
 						</tr>
@@ -318,10 +287,7 @@ export default function DiscountList({ user }: { user: User }) {
 				</thead>
 				<tbody className="px-2">
 					{table.getRowModel().rows.map((row) => (
-            <tr
+						<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
-              className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2"
-              key={row.id}
-            >
 							{row.getVisibleCells().map((cell) => (
 								<td className="px-4 py-2" key={cell.id}>
 									{flexRender(cell.column.columnDef.cell, cell.getContext())}
@@ -333,8 +299,7 @@ export default function DiscountList({ user }: { user: User }) {
 			</table>
 			<button
 				onClick={() => setIsCreating(true)}
-        className="w-full py-2 bg-mti-purple-light hover:bg-mti-purple transition ease-in-out duration-300 text-white"
+				className="w-full py-2 bg-mti-purple-light hover:bg-mti-purple transition ease-in-out duration-300 text-white">
-      >
 				New Discount
 			</button>
 		</>

src/pages/(status)/PaymentDue.tsx

@@ -14,6 +14,7 @@ import {useRouter} from "next/router";
 import {ToastContainer} from "react-toastify";
 import useDiscounts from "@/hooks/useDiscounts";
 import PaymobPayment from "@/components/PaymobPayment";
+import moment from "moment";
 
 interface Props {
 	user: User;
@@ -39,7 +40,7 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
 		if (userDiscounts.length === 0) return;
 
 		const biggestDiscount = [...userDiscounts].sort((a, b) => b.percentage - a.percentage).shift();
-		if (!biggestDiscount) return;
+		if (!biggestDiscount || (biggestDiscount.validUntil && moment(biggestDiscount.validUntil).isBefore(moment()))) return;
 
 		setAppliedDiscount(biggestDiscount.percentage);
 	}, [discounts, user]);