Merge branch 'develop' into ENCOA-38/add-validity-date-for-discounts

package.json

@@ -47,7 +47,6 @@
     "next": "13.1.6",
     "nodemailer": "^6.9.5",
     "nodemailer-express-handlebars": "^6.1.0",
-    "paymob-react": "git+https://github.com/tiago-ecrop/paymob-react-oman.git",
     "primeicons": "^6.0.1",
     "primereact": "^9.2.3",
     "qrcode": "^1.5.3",

src/components/Exercises/MultipleChoice.tsx

@@ -16,9 +16,13 @@ function Question({
 }: MultipleChoiceQuestion & {userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean}) {
 	return (
 		<div className="flex flex-col gap-10">
-			<span className="">
+			{isNaN(Number(id)) ? (
-				{id} - {prompt}
+				<span className="">{prompt}</span>
-			</span>
+			) : (
+				<span className="">
+					{id} - {prompt}
+				</span>
+			)}
 			<div className="flex flex-wrap gap-4 justify-between">
 				{variant === "image" &&
 					options.map((option) => (

src/components/PaymobPayment.tsx

@@ -20,15 +20,6 @@ interface Props {
 
 export default function PaymobPayment({user, price, setIsPaymentLoading, currency, duration, duration_unit, onSuccess}: Props) {
 	const [isLoading, setIsLoading] = useState(false);
-	const [isModalOpen, setIsModalOpen] = useState(false);
-
-	const [firstName, setFirstName] = useState(user.name.split(" ")[0]);
-	const [lastName, setLastName] = useState([...user.name.split(" ")].pop());
-	const [street, setStreet] = useState("");
-	const [apartment, setApartment] = useState("");
-	const [building, setBuilding] = useState("");
-	const [state, setState] = useState("");
-	const [floor, setFloor] = useState("");
 
 	const router = useRouter();
 
@@ -50,16 +41,16 @@ export default function PaymobPayment({user, price, setIsPaymentLoading, currenc
 					},
 				},
 				billing_data: {
-					apartment: apartment || "N/A",
+					apartment: "N/A",
-					building: building || "N/A",
+					building: "N/A",
 					country: user.demographicInformation?.country || "N/A",
 					email: user.email,
 					first_name: user.name.split(" ")[0],
 					last_name: [...user.name.split(" ")].pop() || "N/A",
-					floor: floor || "N/A",
+					floor: "N/A",
 					phone_number: user.demographicInformation?.phone || "N/A",
-					state: state || "N/A",
+					state: "N/A",
-					street: street || "N/A",
+					street: "N/A",
 				},
 				extras: {
 					userID: user.id,
@@ -71,7 +62,6 @@ export default function PaymobPayment({user, price, setIsPaymentLoading, currenc
 			const response = await axios.post<{iframeURL: string}>(`/api/paymob`, paymentIntention);
 
 			router.push(response.data.iframeURL);
-			setIsModalOpen(false);
 		} catch (error) {
 			console.error("Error starting card payment process:", error);
 		}
@@ -79,27 +69,7 @@ export default function PaymobPayment({user, price, setIsPaymentLoading, currenc
 
 	return (
 		<>
-			<Modal isOpen={isModalOpen} title="Billing Data" onClose={() => setIsModalOpen(false)}>
+			<Button isLoading={isLoading} onClick={handleCardPayment}>
-				<div className="flex flex-col gap-4 mt-4">
-					<div className="grid grid-cols-2 gap-4">
-						<Input label="First Name" value={firstName} onChange={setFirstName} type="text" name="firstName" />
-						<Input label="Last Name" value={lastName} onChange={setLastName} type="text" name="lastName" />
-					</div>
-					<div className="grid grid-cols-3 -md:grid-cols-1 gap-4">
-						<Input label="State" value={state} onChange={setState} type="text" name="state" />
-						<Input label="Street" value={street} onChange={setStreet} type="text" name="street" />
-						<Input label="Building" value={building} onChange={setBuilding} type="text" name="building" />
-					</div>
-					<div className="grid grid-cols-2 gap-4">
-						<Input label="Floor" value={floor} onChange={setFloor} type="text" name="floor" />
-						<Input label="Apartment" value={apartment} onChange={setApartment} type="text" name="apartment" />
-					</div>
-					<Button className="w-full max-w-[200px] self-end mt-4" disabled={!firstName || !lastName} onClick={handleCardPayment}>
-						Complete Payment
-					</Button>
-				</div>
-			</Modal>
-			<Button isLoading={isLoading} onClick={() => setIsModalOpen(true)}>
 				Select
 			</Button>
 		</>

src/components/Solutions/MultipleChoice.tsx

@@ -27,9 +27,13 @@ function Question({
 
 	return (
 		<div className="flex flex-col items-center gap-4">
-			<span>
+			{isNaN(Number(id)) ? (
-				{id} - {prompt}
+				<span className="">{prompt}</span>
-			</span>
+			) : (
+				<span className="">
+					{id} - {prompt}
+				</span>
+			)}
 			<div className="grid grid-cols-4 gap-4 place-items-center">
 				{variant === "image" &&
 					options.map((option) => (

src/interfaces/paypal.ts

@@ -1,55 +1,56 @@
 export interface TokenSuccess {
-  scope: string;
+	scope: string;
-  access_token: string;
+	access_token: string;
-  token_type: string;
+	token_type: string;
-  app_id: string;
+	app_id: string;
-  expires_in: number;
+	expires_in: number;
-  nonce: string;
+	nonce: string;
 }
 
 export interface TokenError {
-  error: string;
+	error: string;
-  error_description: string;
+	error_description: string;
 }
 
 export interface Package {
-  id: string;
+	id: string;
-  currency: string;
+	currency: string;
-  duration: number;
+	duration: number;
-  duration_unit: DurationUnit;
+	duration_unit: DurationUnit;
-  price: number;
+	price: number;
 }
 
 export interface Discount {
-  id: string;
+	id: string;
-  percentage: number;
+	percentage: number;
-  domain: string;
+	domain: string;
+	validUntil?: Date;
 }
 
 export type DurationUnit = "weeks" | "days" | "months" | "years";
 
 export interface Payment {
-  id: string;
+	id: string;
-  corporate: string;
+	corporate: string;
-  agent?: string;
+	agent?: string;
-  agentCommission: number;
+	agentCommission: number;
-  agentValue: number;
+	agentValue: number;
-  currency: string;
+	currency: string;
-  value: number;
+	value: number;
-  isPaid: boolean;
+	isPaid: boolean;
-  date: Date | string;
+	date: Date | string;
-  corporateTransfer?: string;
+	corporateTransfer?: string;
-  commissionTransfer?: string;
+	commissionTransfer?: string;
 }
 
 export interface PaypalPayment {
-  orderId: string;
+	orderId: string;
-  userId: string;
+	userId: string;
-  status: string;
+	status: string;
-  createdAt: Date;
+	createdAt: Date;
-  value: number;
+	value: number;
-  currency: string;
+	currency: string;
-  subscriptionDuration: number;
+	subscriptionDuration: number;
-  subscriptionDurationUnit: DurationUnit;
+	subscriptionDurationUnit: DurationUnit;
-  subscriptionExpirationDate: Date;
+	subscriptionExpirationDate: Date;
 }

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

@@ -7,336 +7,301 @@ 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,
+	const [percentage, setPercentage] = useState(discount?.percentage);
-  onClose,
+	const [domain, setDomain] = useState(discount?.domain);
-}: {
+	const [validUntil, setValidUntil] = useState(discount?.validUntil);
-  discount?: Discount;
-  onClose: () => void;
-}) => {
-  const [percentage, setPercentage] = useState(discount?.percentage);
-  const [domain, setDomain] = useState(discount?.domain);
 
-  const submit = async () => {
+	const submit = async () => {
-    const body = { percentage, domain };
+		const body = {percentage, domain, validUntil: validUntil?.toISOString() || undefined};
 
-    if (discount) {
+		if (discount) {
-      return axios
+			return axios
-        .patch(`/api/discounts/${discount.id}`, body)
+				.patch(`/api/discounts/${discount.id}`, body)
-        .then(() => {
+				.then(() => {
-          toast.success("Discount has been edited successfully!");
+					toast.success("Discount has been edited successfully!");
-          onClose();
+					onClose();
-        })
+				})
-        .catch(() => {
+				.catch(() => {
-          toast.error("Something went wrong, please try again later!");
+					toast.error("Something went wrong, please try again later!");
-        });
+				});
-    }
+		}
 
-    return axios
+		return axios
-      .post(`/api/discounts`, body)
+			.post(`/api/discounts`, body)
-      .then(() => {
+			.then(() => {
-        toast.success("New discount has been created successfully!");
+				toast.success("New discount has been created successfully!");
-        onClose();
+				onClose();
-      })
+			})
-      .catch(() => {
+			.catch(() => {
-        toast.error("Something went wrong, please try again later!");
+				toast.error("Something went wrong, please try again later!");
-      });
+			});
-  };
+	};
 
-  return (
+	return (
-    <div className="flex flex-col gap-8 py-8">
+		<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">
+				<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 *
+					<div className="flex gap-4 items-center">
-          </label>
+						<Input
-          <div className="flex gap-4 items-center">
+							defaultValue={domain}
-            <Input
+							placeholder="encoach.com"
-              defaultValue={domain}
+							name="domain"
-              placeholder="encoach.com"
+							type="text"
-              name="domain"
+							onChange={(e) => setDomain(e.replaceAll("@", ""))}
-              type="text"
+						/>
-              onChange={(e) => setDomain(e.replaceAll("@", ""))}
+					</div>
-            />
+				</div>
-          </div>
+				<div className="flex flex-col gap-3">
-        </div>
+					<label className="font-normal text-base text-mti-gray-dim">Percentage (in %) *</label>
-        <div className="flex flex-col gap-3">
+					<div className="flex gap-4 items-center">
-          <label className="font-normal text-base text-mti-gray-dim">
+						<Input
-            Percentage (in %) *
+							defaultValue={percentage}
-          </label>
+							placeholder="20"
-          <div className="flex gap-4 items-center">
+							name="percentage"
-            <Input
+							type="number"
-              defaultValue={percentage}
+							onChange={(e) => setPercentage(parseFloat(e))}
-              placeholder="20"
+						/>
-              name="percentage"
+					</div>
-              type="number"
+				</div>
-              onChange={(e) => setPercentage(parseFloat(e))}
+				<div className="flex flex-col gap-3 w-full">
-            />
+					<label className="font-normal text-base text-mti-gray-dim">Valid Until</label>
-          </div>
+					<div className="flex gap-4 items-center w-full">
-        </div>
+						<ReactDatePicker
-      </div>
+							wrapperClassName="w-full z-[900]"
-      <div className="flex w-full justify-end items-center gap-8 mt-8">
+							calendarClassName="z-[900]"
-        <Button
+							popperClassName="z-[900]"
-          variant="outline"
+							isClearable
-          color="red"
+							className={clsx(
-          className="w-full max-w-[200px]"
+								"flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
-          onClick={onClose}
+								"hover:border-mti-purple tooltip",
-        >
+								"transition duration-300 ease-in-out",
-          Cancel
+							)}
-        </Button>
+							filterDate={(date) => moment(date).isAfter(new Date())}
-        <Button
+							dateFormat="dd/MM/yyyy"
-          className="w-full max-w-[200px]"
+							selected={validUntil}
-          onClick={submit}
+							onChange={(date) => setValidUntil(date ? moment(date).endOf("day").toDate() : undefined)}
-          disabled={!percentage || !domain}
+						/>
-        >
+					</div>
-          Submit
+				</div>
-        </Button>
+			</div>
-      </div>
+			<div className="flex w-full justify-end items-center gap-8 mt-8">
-    </div>
+				<Button variant="outline" color="red" className="w-full max-w-[200px]" onClick={onClose}>
-  );
+					Cancel
+				</Button>
+				<Button className="w-full max-w-[200px]" onClick={submit} disabled={!percentage || !domain}>
+					Submit
+				</Button>
+			</div>
+		</div>
+	);
 };
 
-export default function DiscountList({ user }: { user: User }) {
+export default function DiscountList({user}: {user: User}) {
-  const [selectedDiscounts, setSelectedDiscounts] = useState<string[]>([]);
+	const [selectedDiscounts, setSelectedDiscounts] = useState<string[]>([]);
 
-  const [isCreating, setIsCreating] = useState(false);
+	const [isCreating, setIsCreating] = useState(false);
-  const [editingDiscount, setEditingDiscount] = useState<Discount>();
+	const [editingDiscount, setEditingDiscount] = useState<Discount>();
 
-  const [filteredDiscounts, setFilteredDiscounts] = useState<Discount[]>([]);
+	const [filteredDiscounts, setFilteredDiscounts] = useState<Discount[]>([]);
 
-  const { users } = useUsers();
+	const {users} = useUsers();
-  const { discounts, reload } = useDiscounts();
+	const {discounts, reload} = useDiscounts();
 
-  useEffect(() => {
+	useEffect(() => {
-    setFilteredDiscounts(discounts);
+		setFilteredDiscounts(discounts);
-  }, [discounts]);
+	}, [discounts]);
 
-  const toggleDiscount = (id: string) => {
+	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) => {
+	const toggleAllDiscounts = (checked: boolean) => {
-    if (checked)
+		if (checked) return setSelectedDiscounts(filteredDiscounts.map((x) => x.id));
-      return setSelectedDiscounts(filteredDiscounts.map((x) => x.id));
 
-    return setSelectedDiscounts([]);
+		return setSelectedDiscounts([]);
-  };
+	};
 
-  const deleteDiscounts = async (discounts: string[]) => {
+	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();
+		const params = new URLSearchParams();
-    discounts.forEach((code) => params.append("discount", code));
+		discounts.forEach((code) => params.append("discount", code));
 
-    axios
+		axios
-      .delete(`/api/discounts?${params.toString()}`)
+			.delete(`/api/discounts?${params.toString()}`)
-      .then(() => toast.success(`Deleted the discount(s)!`))
+			.then(() => toast.success(`Deleted the discount(s)!`))
-      .catch((reason) => {
+			.catch((reason) => {
-        if (reason.response.status === 404) {
+				if (reason.response.status === 404) {
-          toast.error("Discount not found!");
+					toast.error("Discount not found!");
-          return;
+					return;
-        }
+				}
 
-        if (reason.response.status === 403) {
+				if (reason.response.status === 403) {
-          toast.error("You do not have permission to delete this discount!");
+					toast.error("You do not have permission to delete this discount!");
-          return;
+					return;
-        }
+				}
 
-        toast.error("Something went wrong, please try again later.");
+				toast.error("Something went wrong, please try again later.");
-      })
+			})
-      .finally(reload);
+			.finally(reload);
-  };
+	};
 
-  const deleteDiscount = async (discount: Discount) => {
+	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
+		axios
-      .delete(`/api/discounts/${discount.id}`)
+			.delete(`/api/discounts/${discount.id}`)
-      .then(() => toast.success(`Deleted the "${discount.id}" discount`))
+			.then(() => toast.success(`Deleted the "${discount.id}" discount`))
-      .catch((reason) => {
+			.catch((reason) => {
-        if (reason.response.status === 404) {
+				if (reason.response.status === 404) {
-          toast.error("Code not found!");
+					toast.error("Code not found!");
-          return;
+					return;
-        }
+				}
 
-        if (reason.response.status === 403) {
+				if (reason.response.status === 403) {
-          toast.error("You do not have permission to delete this discount!");
+					toast.error("You do not have permission to delete this discount!");
-          return;
+					return;
-        }
+				}
 
-        toast.error("Something went wrong, please try again later.");
+				toast.error("Something went wrong, please try again later.");
-      })
+			})
-      .finally(reload);
+			.finally(reload);
-  };
+	};
 
-  const defaultColumns = [
+	const defaultColumns = [
-    columnHelper.accessor("id", {
+		columnHelper.accessor("id", {
-      id: "id",
+			id: "id",
-      header: () => (
+			header: () => (
-        <Checkbox
+				<Checkbox
-          disabled={filteredDiscounts.length === 0}
+					disabled={filteredDiscounts.length === 0}
-          isChecked={
+					isChecked={selectedDiscounts.length === filteredDiscounts.length && filteredDiscounts.length > 0}
-            selectedDiscounts.length === filteredDiscounts.length &&
+					onChange={(checked) => toggleAllDiscounts(checked)}>
-            filteredDiscounts.length > 0
+					{""}
-          }
+				</Checkbox>
-          onChange={(checked) => toggleAllDiscounts(checked)}
+			),
-        >
+			cell: (info) => (
-          {""}
+				<Checkbox isChecked={selectedDiscounts.includes(info.getValue())} onChange={() => toggleDiscount(info.getValue())}>
-        </Checkbox>
+					{""}
-      ),
+				</Checkbox>
-      cell: (info) => (
+			),
-        <Checkbox
+		}),
-          isChecked={selectedDiscounts.includes(info.getValue())}
+		columnHelper.accessor("id", {
-          onChange={() => toggleDiscount(info.getValue())}
+			header: "ID",
-        >
+			cell: (info) => info.getValue(),
-          {""}
+		}),
-        </Checkbox>
+		columnHelper.accessor("domain", {
-      ),
+			header: "Domain",
-    }),
+			cell: (info) => `@${info.getValue()}`,
-    columnHelper.accessor("id", {
+		}),
-      header: "ID",
+		columnHelper.accessor("percentage", {
-      cell: (info) => info.getValue(),
+			header: "Percentage",
-    }),
+			cell: (info) => `${info.getValue()}%`,
-    columnHelper.accessor("domain", {
+		}),
-      header: "Domain",
+		columnHelper.accessor("validUntil", {
-      cell: (info) => `@${info.getValue()}`,
+			header: "Valid Until",
-    }),
+			cell: (info) => (info.getValue() ? moment(info.getValue()).format("DD/MM/YYYY") : ""),
-    columnHelper.accessor("percentage", {
+		}),
-      header: "Percentage",
+		{
-      cell: (info) => `${info.getValue()}%`,
+			header: "",
-    }),
+			id: "actions",
-    {
+			cell: ({row}: {row: {original: Discount}}) => {
-      header: "",
+				return (
-      id: "actions",
+					<div className="flex gap-4">
-      cell: ({ row }: { row: { original: Discount } }) => {
+						<div
-        return (
+							data-tip="Delete"
-          <div className="flex gap-4">
+							className="cursor-pointer tooltip"
-            <div
+							onClick={() => {
-              data-tip="Delete"
+								setEditingDiscount(row.original);
-              className="cursor-pointer tooltip"
+							}}>
-              onClick={() => {
+							<BsPencil className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-                setEditingDiscount(row.original);
+						</div>
-              }}
+						<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteDiscount(row.original)}>
-            >
+							<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-              <BsPencil className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+						</div>
-            </div>
+					</div>
-            <div
+				);
-              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>
-        );
-      },
-    },
-  ];
 
-  const table = useReactTable({
+	const table = useReactTable({
-    data: filteredDiscounts,
+		data: filteredDiscounts,
-    columns: defaultColumns,
+		columns: defaultColumns,
-    getCoreRowModel: getCoreRowModel(),
+		getCoreRowModel: getCoreRowModel(),
-  });
+	});
 
-  const closeModal = () => {
+	const closeModal = () => {
-    setIsCreating(false);
+		setIsCreating(false);
-    setEditingDiscount(undefined);
+		setEditingDiscount(undefined);
-    reload();
+		reload();
-  };
+	};
 
-  return (
+	return (
-    <>
+		<>
-      <Modal
+			<Modal
-        isOpen={isCreating || !!editingDiscount}
+				isOpen={isCreating || !!editingDiscount}
-        onClose={closeModal}
+				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">
-        <DiscountCreator onClose={closeModal} discount={editingDiscount} />
+				<div className="flex gap-4 items-center">
-      </Modal>
+					<span>{selectedDiscounts.length} code(s) selected</span>
-      <div className="flex items-center justify-end pb-4 pt-1">
+					<Button
-        <div className="flex gap-4 items-center">
+						disabled={selectedDiscounts.length === 0}
-          <span>{selectedDiscounts.length} code(s) selected</span>
+						variant="outline"
-          <Button
+						color="red"
-            disabled={selectedDiscounts.length === 0}
+						className="!py-1 px-10"
-            variant="outline"
+						onClick={() => deleteDiscounts(selectedDiscounts)}>
-            color="red"
+						Delete
-            className="!py-1 px-10"
+					</Button>
-            onClick={() => deleteDiscounts(selectedDiscounts)}
+				</div>
-          >
+			</div>
-            Delete
+			<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
-          </Button>
+				<thead>
-        </div>
+					{table.getHeaderGroups().map((headerGroup) => (
-      </div>
+						<tr key={headerGroup.id}>
-      <table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
+							{headerGroup.headers.map((header) => (
-        <thead>
+								<th className="p-4 text-left" key={header.id}>
-          {table.getHeaderGroups().map((headerGroup) => (
+									{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-            <tr key={headerGroup.id}>
+								</th>
-              {headerGroup.headers.map((header) => (
+							))}
-                <th className="p-4 text-left" key={header.id}>
+						</tr>
-                  {header.isPlaceholder
+					))}
-                    ? null
+				</thead>
-                    : flexRender(
+				<tbody className="px-2">
-                        header.column.columnDef.header,
+					{table.getRowModel().rows.map((row) => (
-                        header.getContext(),
+						<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
-                      )}
+							{row.getVisibleCells().map((cell) => (
-                </th>
+								<td className="px-4 py-2" key={cell.id}>
-              ))}
+									{flexRender(cell.column.columnDef.cell, cell.getContext())}
-            </tr>
+								</td>
-          ))}
+							))}
-        </thead>
+						</tr>
-        <tbody className="px-2">
+					))}
-          {table.getRowModel().rows.map((row) => (
+				</tbody>
-            <tr
+			</table>
-              className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2"
+			<button
-              key={row.id}
+				onClick={() => setIsCreating(true)}
-            >
+				className="w-full py-2 bg-mti-purple-light hover:bg-mti-purple transition ease-in-out duration-300 text-white">
-              {row.getVisibleCells().map((cell) => (
+				New Discount
-                <td className="px-4 py-2" key={cell.id}>
+			</button>
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+		</>
-                </td>
+	);
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </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"
-      >
-        New Discount
-      </button>
-    </>
-  );
 }

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

@@ -40,7 +40,7 @@ function PackageCreator({pack, onClose}: {pack?: Package; onClose: () => void})
 	const [unit, setUnit] = useState<DurationUnit>(pack?.duration_unit || "months");
 
 	const [price, setPrice] = useState(pack?.price || 0);
-	const [currency, setCurrency] = useState<string>(pack?.currency || "EUR");
+	const [currency, setCurrency] = useState<string>(pack?.currency || "OMR");
 
 	const submit = () => {
 		(pack ? axios.patch : axios.post)(pack ? `/api/packages/${pack.id}` : "/api/packages", {

src/pages/(exam)/ExamPage.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
-import { Module } from "@/interfaces";
+import {Module} from "@/interfaces";
-import { useEffect, useState } from "react";
+import {useEffect, useState} from "react";
 
 import AbandonPopup from "@/components/AbandonPopup";
 import Layout from "@/components/High/Layout";
@@ -12,567 +12,447 @@ import Selection from "@/exams/Selection";
 import Speaking from "@/exams/Speaking";
 import Writing from "@/exams/Writing";
 import useUser from "@/hooks/useUser";
-import { Exam, UserSolution, Variant } from "@/interfaces/exam";
+import {Exam, UserSolution, Variant} from "@/interfaces/exam";
-import { Stat } from "@/interfaces/user";
+import {Stat} from "@/interfaces/user";
 import useExamStore from "@/stores/examStore";
-import {
+import {evaluateSpeakingAnswer, evaluateWritingAnswer} from "@/utils/evaluation";
-  evaluateSpeakingAnswer,
+import {defaultExamUserSolutions, getExam} from "@/utils/exams";
-  evaluateWritingAnswer,
-} from "@/utils/evaluation";
-import { defaultExamUserSolutions, getExam } from "@/utils/exams";
 import axios from "axios";
-import { useRouter } from "next/router";
+import {useRouter} from "next/router";
-import { toast, ToastContainer } from "react-toastify";
+import {toast, ToastContainer} from "react-toastify";
-import { v4 as uuidv4 } from "uuid";
+import {v4 as uuidv4} from "uuid";
 import useSessions from "@/hooks/useSessions";
 import ShortUniqueId from "short-unique-id";
 
 interface Props {
-  page: "exams" | "exercises";
+	page: "exams" | "exercises";
 }
 
-export default function ExamPage({ page }: Props) {
+export default function ExamPage({page}: Props) {
-  const [variant, setVariant] = useState<Variant>("full");
+	const [variant, setVariant] = useState<Variant>("full");
-  const [avoidRepeated, setAvoidRepeated] = useState(false);
+	const [avoidRepeated, setAvoidRepeated] = useState(false);
-  const [hasBeenUploaded, setHasBeenUploaded] = useState(false);
+	const [hasBeenUploaded, setHasBeenUploaded] = useState(false);
-  const [showAbandonPopup, setShowAbandonPopup] = useState(false);
+	const [showAbandonPopup, setShowAbandonPopup] = useState(false);
-  const [isEvaluationLoading, setIsEvaluationLoading] = useState(false);
+	const [isEvaluationLoading, setIsEvaluationLoading] = useState(false);
-  const [statsAwaitingEvaluation, setStatsAwaitingEvaluation] = useState<
+	const [statsAwaitingEvaluation, setStatsAwaitingEvaluation] = useState<string[]>([]);
-    string[]
+	const [timeSpent, setTimeSpent] = useState(0);
-  >([]);
-  const [timeSpent, setTimeSpent] = useState(0);
 
-  const resetStore = useExamStore((state) => state.reset);
+	const resetStore = useExamStore((state) => state.reset);
-  const assignment = useExamStore((state) => state.assignment);
+	const assignment = useExamStore((state) => state.assignment);
-  const initialTimeSpent = useExamStore((state) => state.timeSpent);
+	const initialTimeSpent = useExamStore((state) => state.timeSpent);
 
-  const examStore = useExamStore;
+	const examStore = useExamStore;
 
-  const { exam, setExam } = useExamStore((state) => state);
+	const {exam, setExam} = useExamStore((state) => state);
-  const { exams, setExams } = useExamStore((state) => state);
+	const {exams, setExams} = useExamStore((state) => state);
-  const { sessionId, setSessionId } = useExamStore((state) => state);
+	const {sessionId, setSessionId} = useExamStore((state) => state);
-  const { partIndex, setPartIndex } = useExamStore((state) => state);
+	const {partIndex, setPartIndex} = useExamStore((state) => state);
-  const { moduleIndex, setModuleIndex } = useExamStore((state) => state);
+	const {moduleIndex, setModuleIndex} = useExamStore((state) => state);
-  const { questionIndex, setQuestionIndex } = useExamStore((state) => state);
+	const {questionIndex, setQuestionIndex} = useExamStore((state) => state);
-  const { exerciseIndex, setExerciseIndex } = useExamStore((state) => state);
+	const {exerciseIndex, setExerciseIndex} = useExamStore((state) => state);
-  const { userSolutions, setUserSolutions } = useExamStore((state) => state);
+	const {userSolutions, setUserSolutions} = useExamStore((state) => state);
-  const { showSolutions, setShowSolutions } = useExamStore((state) => state);
+	const {showSolutions, setShowSolutions} = useExamStore((state) => state);
-  const { selectedModules, setSelectedModules } = useExamStore(
+	const {selectedModules, setSelectedModules} = useExamStore((state) => state);
-    (state) => state,
-  );
 
-  const { user } = useUser({ redirectTo: "/login" });
+	const {user} = useUser({redirectTo: "/login"});
-  const router = useRouter();
+	const router = useRouter();
 
-  const reset = () => {
+	const reset = () => {
-    resetStore();
+		resetStore();
-    setVariant("full");
+		setVariant("full");
-    setAvoidRepeated(false);
+		setAvoidRepeated(false);
-    setHasBeenUploaded(false);
+		setHasBeenUploaded(false);
-    setShowAbandonPopup(false);
+		setShowAbandonPopup(false);
-    setIsEvaluationLoading(false);
+		setIsEvaluationLoading(false);
-    setStatsAwaitingEvaluation([]);
+		setStatsAwaitingEvaluation([]);
-    setTimeSpent(0);
+		setTimeSpent(0);
-  };
+	};
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+	// eslint-disable-next-line react-hooks/exhaustive-deps
-  const saveSession = async () => {
+	const saveSession = async () => {
-    console.log("Saving your session...");
+		console.log("Saving your session...");
 
-    await axios.post("/api/sessions", {
+		await axios.post("/api/sessions", {
-      id: sessionId,
+			id: sessionId,
-      sessionId,
+			sessionId,
-      date: new Date().toISOString(),
+			date: new Date().toISOString(),
-      userSolutions,
+			userSolutions,
-      moduleIndex,
+			moduleIndex,
-      selectedModules,
+			selectedModules,
-      assignment,
+			assignment,
-      timeSpent,
+			timeSpent,
-      exams,
+			exams,
-      exam,
+			exam,
-      partIndex,
+			partIndex,
-      exerciseIndex,
+			exerciseIndex,
-      questionIndex,
+			questionIndex,
-      user: user?.id,
+			user: user?.id,
-    });
+		});
-  };
+	};
 
-  useEffect(
+	useEffect(() => setTimeSpent((prev) => prev + initialTimeSpent), [initialTimeSpent]);
-    () => setTimeSpent((prev) => prev + initialTimeSpent),
-    [initialTimeSpent],
-  );
 
-  useEffect(() => {
+	useEffect(() => {
-    if (userSolutions.length === 0 && exams.length > 0) {
+		if (userSolutions.length === 0 && exams.length > 0) {
-      const defaultSolutions = exams.map(defaultExamUserSolutions).flat();
+			const defaultSolutions = exams.map(defaultExamUserSolutions).flat();
-      setUserSolutions(defaultSolutions);
+			setUserSolutions(defaultSolutions);
-    }
+		}
-  }, [exams, setUserSolutions, userSolutions]);
+	}, [exams, setUserSolutions, userSolutions]);
 
-  useEffect(() => {
+	useEffect(() => {
-    if (
+		if (
-      sessionId.length > 0 &&
+			sessionId.length > 0 &&
-      userSolutions.length > 0 &&
+			userSolutions.length > 0 &&
-      selectedModules.length > 0 &&
+			selectedModules.length > 0 &&
-      exams.length > 0 &&
+			exams.length > 0 &&
-      !!exam &&
+			!!exam &&
-      timeSpent > 0 &&
+			timeSpent > 0 &&
-      !showSolutions &&
+			!showSolutions &&
-      moduleIndex < selectedModules.length
+			moduleIndex < selectedModules.length
-    )
+		)
-      saveSession();
+			saveSession();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+		// eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
+	}, [assignment, exam, exams, moduleIndex, selectedModules, sessionId, userSolutions, user, exerciseIndex, partIndex, questionIndex]);
-    assignment,
-    exam,
-    exams,
-    moduleIndex,
-    selectedModules,
-    sessionId,
-    userSolutions,
-    user,
-    exerciseIndex,
-    partIndex,
-    questionIndex,
-  ]);
 
-  useEffect(() => {
+	useEffect(() => {
-    if (
+		if (timeSpent % 20 === 0 && timeSpent > 0 && moduleIndex < selectedModules.length && !showSolutions) saveSession();
-      timeSpent % 20 === 0 &&
+		// eslint-disable-next-line react-hooks/exhaustive-deps
-      timeSpent > 0 &&
+	}, [timeSpent]);
-      moduleIndex < selectedModules.length &&
-      !showSolutions
-    )
-      saveSession();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [timeSpent]);
 
-  useEffect(() => {
+	useEffect(() => {
-    if (selectedModules.length > 0 && sessionId.length === 0) {
+		if (selectedModules.length > 0 && sessionId.length === 0) {
-      const shortUID = new ShortUniqueId();
+			const shortUID = new ShortUniqueId();
-      setSessionId(shortUID.randomUUID(8));
+			setSessionId(shortUID.randomUUID(8));
-    }
+		}
-  }, [setSessionId, selectedModules, sessionId]);
+	}, [setSessionId, selectedModules, sessionId]);
 
-  useEffect(() => {
+	useEffect(() => {
-    if (user?.type === "developer") console.log(exam);
+		if (user?.type === "developer") console.log(exam);
-  }, [exam, user]);
+	}, [exam, user]);
 
-  useEffect(() => {
+	useEffect(() => {
-    if (selectedModules.length > 0 && timeSpent === 0 && !showSolutions) {
+		if (selectedModules.length > 0 && timeSpent === 0 && !showSolutions) {
-      const timerInterval = setInterval(() => {
+			const timerInterval = setInterval(() => {
-        setTimeSpent((prev) => prev + 1);
+				setTimeSpent((prev) => prev + 1);
-      }, 1000);
+			}, 1000);
 
-      return () => {
+			return () => {
-        clearInterval(timerInterval);
+				clearInterval(timerInterval);
-      };
+			};
-    }
+		}
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+		// eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedModules.length]);
+	}, [selectedModules.length]);
 
-  useEffect(() => {
+	useEffect(() => {
-    if (showSolutions) setModuleIndex(-1);
+		if (showSolutions) setModuleIndex(-1);
-  }, [setModuleIndex, showSolutions]);
+	}, [setModuleIndex, showSolutions]);
 
-  useEffect(() => {
+	useEffect(() => {
-    (async () => {
+		(async () => {
-      if (
+			if (selectedModules.length > 0 && exams.length > 0 && moduleIndex < selectedModules.length) {
-        selectedModules.length > 0 &&
+				const nextExam = exams[moduleIndex];
-        exams.length > 0 &&
-        moduleIndex < selectedModules.length
-      ) {
-        const nextExam = exams[moduleIndex];
 
-        if (partIndex === -1 && nextExam.module !== "listening")
+				if (partIndex === -1 && nextExam.module !== "listening") setPartIndex(0);
-          setPartIndex(0);
+				if (exerciseIndex === -1 && !["reading", "listening"].includes(nextExam?.module)) setExerciseIndex(0);
-        if (
+				setExam(nextExam ? updateExamWithUserSolutions(nextExam) : undefined);
-          exerciseIndex === -1 &&
+			}
-          !["reading", "listening"].includes(nextExam?.module)
+		})();
-        )
+		// eslint-disable-next-line react-hooks/exhaustive-deps
-          setExerciseIndex(0);
+	}, [selectedModules, moduleIndex, exams]);
-        setExam(nextExam ? updateExamWithUserSolutions(nextExam) : undefined);
-      }
-    })();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedModules, moduleIndex, exams]);
 
-  useEffect(() => {
+	useEffect(() => {
-    (async () => {
+		(async () => {
-      if (selectedModules.length > 0 && exams.length === 0) {
+			if (selectedModules.length > 0 && exams.length === 0) {
-        const examPromises = selectedModules.map((module) =>
+				const examPromises = selectedModules.map((module) =>
-          getExam(
+					getExam(
-            module,
+						module,
-            avoidRepeated,
+						avoidRepeated,
-            variant,
+						variant,
-            user?.type === "student" || user?.type === "developer"
+						user?.type === "student" || user?.type === "developer" ? user.preferredGender : undefined,
-              ? user.preferredGender
+					),
-              : undefined,
+				);
-          ),
+				Promise.all(examPromises).then((values) => {
-        );
+					if (values.every((x) => !!x)) {
-        Promise.all(examPromises).then((values) => {
+						setExams(values.map((x) => x!));
-          if (values.every((x) => !!x)) {
+					} else {
-            setExams(values.map((x) => x!));
+						toast.error("Something went wrong, please try again");
-          } else {
+						setTimeout(router.reload, 500);
-            toast.error("Something went wrong, please try again");
+					}
-            setTimeout(router.reload, 500);
+				});
-          }
+			}
-        });
+		})();
-      }
+		// eslint-disable-next-line react-hooks/exhaustive-deps
-    })();
+	}, [selectedModules, setExams, exams]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedModules, setExams, exams]);
 
-  useEffect(() => {
+	useEffect(() => {
-    if (
+		if (selectedModules.length > 0 && exams.length !== 0 && moduleIndex >= selectedModules.length && !hasBeenUploaded && !showSolutions) {
-      selectedModules.length > 0 &&
+			const newStats: Stat[] = userSolutions.map((solution) => ({
-      exams.length !== 0 &&
+				...solution,
-      moduleIndex >= selectedModules.length &&
+				id: solution.id || uuidv4(),
-      !hasBeenUploaded &&
+				timeSpent,
-      !showSolutions
+				session: sessionId,
-    ) {
+				exam: solution.exam!,
-      const newStats: Stat[] = userSolutions.map((solution) => ({
+				module: solution.module!,
-        ...solution,
+				user: user?.id || "",
-        id: solution.id || uuidv4(),
+				date: new Date().getTime(),
-        timeSpent,
+				isDisabled: solution.isDisabled,
-        session: sessionId,
+				...(assignment ? {assignment: assignment.id} : {}),
-        exam: solution.exam!,
+			}));
-        module: solution.module!,
-        user: user?.id || "",
-        date: new Date().getTime(),
-        isDisabled: solution.isDisabled,
-        ...(assignment ? { assignment: assignment.id } : {}),
-      }));
 
-      axios
+			axios
-        .post<{ ok: boolean }>("/api/stats", newStats)
+				.post<{ok: boolean}>("/api/stats", newStats)
-        .then((response) => setHasBeenUploaded(response.data.ok))
+				.then((response) => setHasBeenUploaded(response.data.ok))
-        .catch(() => setHasBeenUploaded(false));
+				.catch(() => setHasBeenUploaded(false));
-    }
+		}
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+		// eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedModules, moduleIndex, hasBeenUploaded]);
+	}, [selectedModules, moduleIndex, hasBeenUploaded]);
 
-  useEffect(() => {
+	useEffect(() => {
-    setIsEvaluationLoading(statsAwaitingEvaluation.length !== 0);
+		setIsEvaluationLoading(statsAwaitingEvaluation.length !== 0);
-  }, [statsAwaitingEvaluation]);
+	}, [statsAwaitingEvaluation]);
 
-  useEffect(() => {
+	useEffect(() => {
-    if (statsAwaitingEvaluation.length > 0) {
+		if (statsAwaitingEvaluation.length > 0) {
-      checkIfStatsHaveBeenEvaluated(statsAwaitingEvaluation);
+			checkIfStatsHaveBeenEvaluated(statsAwaitingEvaluation);
-    }
+		}
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+		// eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [statsAwaitingEvaluation]);
+	}, [statsAwaitingEvaluation]);
 
-  const checkIfStatsHaveBeenEvaluated = (ids: string[]) => {
+	const checkIfStatsHaveBeenEvaluated = (ids: string[]) => {
-    setTimeout(async () => {
+		setTimeout(async () => {
-      try {
+			try {
-        const awaitedStats = await Promise.all(
+				const awaitedStats = await Promise.all(ids.map(async (id) => (await axios.get<Stat>(`/api/stats/${id}`)).data));
-          ids.map(
+				const solutionsEvaluated = awaitedStats.every((stat) => stat.solutions.every((x) => x.evaluation !== null));
-            async (id) => (await axios.get<Stat>(`/api/stats/${id}`)).data,
+				if (solutionsEvaluated) {
-          ),
+					const statsUserSolutions: UserSolution[] = awaitedStats.map((stat) => ({
-        );
+						id: stat.id,
-        const solutionsEvaluated = awaitedStats.every((stat) =>
+						exercise: stat.exercise,
-          stat.solutions.every((x) => x.evaluation !== null),
+						score: stat.score,
-        );
+						solutions: stat.solutions,
-        if (solutionsEvaluated) {
+						type: stat.type,
-          const statsUserSolutions: UserSolution[] = awaitedStats.map(
+						exam: stat.exam,
-            (stat) => ({
+						module: stat.module,
-              id: stat.id,
+					}));
-              exercise: stat.exercise,
-              score: stat.score,
-              solutions: stat.solutions,
-              type: stat.type,
-              exam: stat.exam,
-              module: stat.module,
-            }),
-          );
 
-          const updatedUserSolutions = userSolutions.map((x) => {
+					const updatedUserSolutions = userSolutions.map((x) => {
-            const respectiveSolution = statsUserSolutions.find(
+						const respectiveSolution = statsUserSolutions.find((y) => y.exercise === x.exercise);
-              (y) => y.exercise === x.exercise,
+						return respectiveSolution ? respectiveSolution : x;
-            );
+					});
-            return respectiveSolution ? respectiveSolution : x;
-          });
 
-          setUserSolutions(updatedUserSolutions);
+					setUserSolutions(updatedUserSolutions);
-          return setStatsAwaitingEvaluation((prev) =>
+					return setStatsAwaitingEvaluation((prev) => prev.filter((x) => !ids.includes(x)));
-            prev.filter((x) => !ids.includes(x)),
+				}
-          );
-        }
 
-        return checkIfStatsHaveBeenEvaluated(ids);
+				return checkIfStatsHaveBeenEvaluated(ids);
-      } catch {
+			} catch {
-        return checkIfStatsHaveBeenEvaluated(ids);
+				return checkIfStatsHaveBeenEvaluated(ids);
-      }
+			}
-    }, 5 * 1000);
+		}, 5 * 1000);
-  };
+	};
 
-  const updateExamWithUserSolutions = (exam: Exam): Exam => {
+	const updateExamWithUserSolutions = (exam: Exam): Exam => {
-    if (exam.module === "reading" || exam.module === "listening") {
+		if (exam.module === "reading" || exam.module === "listening") {
-      const parts = exam.parts.map((p) =>
+			const parts = exam.parts.map((p) =>
-        Object.assign(p, {
+				Object.assign(p, {
-          exercises: p.exercises.map((x) =>
+					exercises: p.exercises.map((x) =>
-            Object.assign(x, {
+						Object.assign(x, {
-              userSolutions: userSolutions.find((y) => x.id === y.exercise)
+							userSolutions: userSolutions.find((y) => x.id === y.exercise)?.solutions,
-                ?.solutions,
+						}),
-            }),
+					),
-          ),
+				}),
-        }),
+			);
-      );
+			return Object.assign(exam, {parts});
-      return Object.assign(exam, { parts });
+		}
-    }
 
-    const exercises = exam.exercises.map((x) =>
+		const exercises = exam.exercises.map((x) =>
-      Object.assign(x, {
+			Object.assign(x, {
-        userSolutions: userSolutions.find((y) => x.id === y.exercise)
+				userSolutions: userSolutions.find((y) => x.id === y.exercise)?.solutions,
-          ?.solutions,
+			}),
-      }),
+		);
-    );
+		return Object.assign(exam, {exercises});
-    return Object.assign(exam, { exercises });
+	};
-  };
 
-  const onFinish = async (solutions: UserSolution[]) => {
+	const onFinish = async (solutions: UserSolution[]) => {
-    const solutionIds = solutions.map((x) => x.exercise);
+		const solutionIds = solutions.map((x) => x.exercise);
-    const solutionExams = solutions.map((x) => x.exam);
+		const solutionExams = solutions.map((x) => x.exam);
 
-    let newSolutions = [...solutions];
+		let newSolutions = [...solutions];
 
-    if (exam && !solutionExams.includes(exam.id)) return;
+		if (exam && !solutionExams.includes(exam.id)) return;
 
-    if (
+		if (exam && (exam.module === "writing" || exam.module === "speaking") && solutions.length > 0 && !showSolutions) {
-      exam &&
+			setHasBeenUploaded(true);
-      (exam.module === "writing" || exam.module === "speaking") &&
+			setIsEvaluationLoading(true);
-      solutions.length > 0 &&
-      !showSolutions
-    ) {
-      setHasBeenUploaded(true);
-      setIsEvaluationLoading(true);
 
-      const responses: UserSolution[] = (
+			const responses: UserSolution[] = (
-        await Promise.all(
+				await Promise.all(
-          exam.exercises.map(async (exercise, index) => {
+					exam.exercises.map(async (exercise, index) => {
-            const evaluationID = uuidv4();
+						const evaluationID = uuidv4();
-            if (exercise.type === "writing")
+						if (exercise.type === "writing")
-              return await evaluateWritingAnswer(
+							return await evaluateWritingAnswer(exercise, index + 1, solutions.find((x) => x.exercise === exercise.id)!, evaluationID);
-                exercise,
-                index + 1,
-                solutions.find((x) => x.exercise === exercise.id)!,
-                evaluationID,
-              );
 
-            if (
+						if (exercise.type === "interactiveSpeaking" || exercise.type === "speaking")
-              exercise.type === "interactiveSpeaking" ||
+							return await evaluateSpeakingAnswer(
-              exercise.type === "speaking"
+								exercise,
-            )
+								solutions.find((x) => x.exercise === exercise.id)!,
-              return await evaluateSpeakingAnswer(
+								evaluationID,
-                exercise,
+								index === 0 ? 1 : 2,
-                solutions.find((x) => x.exercise === exercise.id)!,
+							);
-                evaluationID,
+					}),
-              );
+				)
-          }),
+			).filter((x) => !!x) as UserSolution[];
-        )
-      ).filter((x) => !!x) as UserSolution[];
 
-      newSolutions = [
+			newSolutions = [...newSolutions.filter((x) => !responses.map((y) => y.exercise).includes(x.exercise)), ...responses];
-        ...newSolutions.filter(
+			setStatsAwaitingEvaluation((prev) => [...prev, ...responses.filter((x) => !!x).map((r) => (r as any).id)]);
-          (x) => !responses.map((y) => y.exercise).includes(x.exercise),
+			setHasBeenUploaded(false);
-        ),
+		}
-        ...responses,
-      ];
-      setStatsAwaitingEvaluation((prev) => [
-        ...prev,
-        ...responses.filter((x) => !!x).map((r) => (r as any).id),
-      ]);
-      setHasBeenUploaded(false);
-    }
 
-    axios.get("/api/stats/update");
+		axios.get("/api/stats/update");
 
-    setUserSolutions([
+		setUserSolutions([...userSolutions.filter((x) => !solutionIds.includes(x.exercise)), ...newSolutions]);
-      ...userSolutions.filter((x) => !solutionIds.includes(x.exercise)),
+		setModuleIndex(moduleIndex + 1);
-      ...newSolutions,
-    ]);
-    setModuleIndex(moduleIndex + 1);
 
-    setPartIndex(-1);
+		setPartIndex(-1);
-    setExerciseIndex(-1);
+		setExerciseIndex(-1);
-    setQuestionIndex(0);
+		setQuestionIndex(0);
-  };
+	};
 
-  const aggregateScoresByModule = (): {
+	const aggregateScoresByModule = (): {
-    module: Module;
+		module: Module;
-    total: number;
+		total: number;
-    missing: number;
+		missing: number;
-    correct: number;
+		correct: number;
-  }[] => {
+	}[] => {
-    const scores: {
+		const scores: {
-      [key in Module]: { total: number; missing: number; correct: number };
+			[key in Module]: {total: number; missing: number; correct: number};
-    } = {
+		} = {
-      reading: {
+			reading: {
-        total: 0,
+				total: 0,
-        correct: 0,
+				correct: 0,
-        missing: 0,
+				missing: 0,
-      },
+			},
-      listening: {
+			listening: {
-        total: 0,
+				total: 0,
-        correct: 0,
+				correct: 0,
-        missing: 0,
+				missing: 0,
-      },
+			},
-      writing: {
+			writing: {
-        total: 0,
+				total: 0,
-        correct: 0,
+				correct: 0,
-        missing: 0,
+				missing: 0,
-      },
+			},
-      speaking: {
+			speaking: {
-        total: 0,
+				total: 0,
-        correct: 0,
+				correct: 0,
-        missing: 0,
+				missing: 0,
-      },
+			},
-      level: {
+			level: {
-        total: 0,
+				total: 0,
-        correct: 0,
+				correct: 0,
-        missing: 0,
+				missing: 0,
-      },
+			},
-    };
+		};
 
-    userSolutions.forEach((x) => {
+		userSolutions.forEach((x) => {
-      const examModule =
+			const examModule =
-        x.module ||
+				x.module || (x.type === "writing" ? "writing" : x.type === "speaking" || x.type === "interactiveSpeaking" ? "speaking" : undefined);
-        (x.type === "writing"
-          ? "writing"
-          : x.type === "speaking" || x.type === "interactiveSpeaking"
-            ? "speaking"
-            : undefined);
 
-      scores[examModule!] = {
+			scores[examModule!] = {
-        total: scores[examModule!].total + x.score.total,
+				total: scores[examModule!].total + x.score.total,
-        correct: scores[examModule!].correct + x.score.correct,
+				correct: scores[examModule!].correct + x.score.correct,
-        missing: scores[examModule!].missing + x.score.missing,
+				missing: scores[examModule!].missing + x.score.missing,
-      };
+			};
-    });
+		});
 
-    return Object.keys(scores)
+		return Object.keys(scores)
-      .filter((x) => scores[x as Module].total > 0)
+			.filter((x) => scores[x as Module].total > 0)
-      .map((x) => ({ module: x as Module, ...scores[x as Module] }));
+			.map((x) => ({module: x as Module, ...scores[x as Module]}));
-  };
+	};
 
-  const renderScreen = () => {
+	const renderScreen = () => {
-    if (selectedModules.length === 0) {
+		if (selectedModules.length === 0) {
-      return (
+			return (
-        <Selection
+				<Selection
-          page={page}
+					page={page}
-          user={user!}
+					user={user!}
-          disableSelection={page === "exams"}
+					disableSelection={page === "exams"}
-          onStart={(modules: Module[], avoid: boolean, variant: Variant) => {
+					onStart={(modules: Module[], avoid: boolean, variant: Variant) => {
-            setModuleIndex(0);
+						setModuleIndex(0);
-            setAvoidRepeated(avoid);
+						setAvoidRepeated(avoid);
-            setSelectedModules(modules);
+						setSelectedModules(modules);
-            setVariant(variant);
+						setVariant(variant);
-          }}
+					}}
-        />
+				/>
-      );
+			);
-    }
+		}
 
-    if (moduleIndex >= selectedModules.length || moduleIndex === -1) {
+		if (moduleIndex >= selectedModules.length || moduleIndex === -1) {
-      return (
+			return (
-        <Finish
+				<Finish
-          isLoading={isEvaluationLoading}
+					isLoading={isEvaluationLoading}
-          user={user!}
+					user={user!}
-          modules={selectedModules}
+					modules={selectedModules}
-          onViewResults={(index?: number) => {
+					onViewResults={(index?: number) => {
-            setShowSolutions(true);
+						setShowSolutions(true);
-            setModuleIndex(index || 0);
+						setModuleIndex(index || 0);
-            setExerciseIndex(
+						setExerciseIndex(["reading", "listening"].includes(exams[0].module) ? -1 : 0);
-              ["reading", "listening"].includes(exams[0].module) ? -1 : 0,
+						setPartIndex(exams[0].module === "listening" ? -1 : 0);
-            );
+						setExam(exams[0]);
-            setPartIndex(exams[0].module === "listening" ? -1 : 0);
+					}}
-            setExam(exams[0]);
+					scores={aggregateScoresByModule()}
-          }}
+				/>
-          scores={aggregateScoresByModule()}
+			);
-        />
+		}
-      );
-    }
 
-    if (exam && exam.module === "reading") {
+		if (exam && exam.module === "reading") {
-      return (
+			return <Reading exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
-        <Reading
+		}
-          exam={exam}
-          onFinish={onFinish}
-          showSolutions={showSolutions}
-        />
-      );
-    }
 
-    if (exam && exam.module === "listening") {
+		if (exam && exam.module === "listening") {
-      return (
+			return <Listening exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
-        <Listening
+		}
-          exam={exam}
-          onFinish={onFinish}
-          showSolutions={showSolutions}
-        />
-      );
-    }
 
-    if (exam && exam.module === "writing") {
+		if (exam && exam.module === "writing") {
-      return (
+			return <Writing exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
-        <Writing
+		}
-          exam={exam}
-          onFinish={onFinish}
-          showSolutions={showSolutions}
-        />
-      );
-    }
 
-    if (exam && exam.module === "speaking") {
+		if (exam && exam.module === "speaking") {
-      return (
+			return <Speaking exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
-        <Speaking
+		}
-          exam={exam}
-          onFinish={onFinish}
-          showSolutions={showSolutions}
-        />
-      );
-    }
 
-    if (exam && exam.module === "level") {
+		if (exam && exam.module === "level") {
-      return (
+			return <Level exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
-        <Level exam={exam} onFinish={onFinish} showSolutions={showSolutions} />
+		}
-      );
-    }
 
-    return <>Loading...</>;
+		return <>Loading...</>;
-  };
+	};
 
-  return (
+	return (
-    <>
+		<>
-      <ToastContainer />
+			<ToastContainer />
-      {user && (
+			{user && (
-        <Layout
+				<Layout
-          user={user}
+					user={user}
-          className="justify-between"
+					className="justify-between"
-          focusMode={
+					focusMode={selectedModules.length !== 0 && !showSolutions && moduleIndex < selectedModules.length}
-            selectedModules.length !== 0 &&
+					onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}>
-            !showSolutions &&
+					<>
-            moduleIndex < selectedModules.length
+						{renderScreen()}
-          }
+						{!showSolutions && moduleIndex < selectedModules.length && (
-          onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}
+							<AbandonPopup
-        >
+								isOpen={showAbandonPopup}
-          <>
+								abandonPopupTitle="Leave Exercise"
-            {renderScreen()}
+								abandonPopupDescription="Are you sure you want to leave the exercise? Your progress will be saved and this exam can be resumed on the Dashboard."
-            {!showSolutions && moduleIndex < selectedModules.length && (
+								abandonConfirmButtonText="Confirm"
-              <AbandonPopup
+								onAbandon={() => {
-                isOpen={showAbandonPopup}
+									reset();
-                abandonPopupTitle="Leave Exercise"
+								}}
-                abandonPopupDescription="Are you sure you want to leave the exercise? Your progress will be saved and this exam can be resumed on the Dashboard."
+								onCancel={() => setShowAbandonPopup(false)}
-                abandonConfirmButtonText="Confirm"
+							/>
-                onAbandon={() => {
+						)}
-                  reset();
+					</>
-                }}
+				</Layout>
-                onCancel={() => setShowAbandonPopup(false)}
+			)}
-              />
+		</>
-            )}
+	);
-          </>
-        </Layout>
-      )}
-    </>
-  );
 }

src/pages/(status)/PaymentDue.tsx

@@ -7,7 +7,6 @@ import {User} from "@/interfaces/user";
 import clsx from "clsx";
 import {capitalize} from "lodash";
 import {useEffect, useState} from "react";
-import getSymbolFromCurrency from "currency-symbol-map";
 import useInvites from "@/hooks/useInvites";
 import {BsArrowRepeat} from "react-icons/bs";
 import InviteCard from "@/components/Medium/InviteCard";
@@ -15,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;
@@ -40,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]);
@@ -121,21 +121,18 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
 												</span>
 											</div>
 											<div className="flex w-full flex-col items-start gap-2">
-												{!appliedDiscount && (
+												{appliedDiscount === 0 && (
 													<span className="text-2xl">
-														{p.price}
+														{p.price} {p.currency}
-														{getSymbolFromCurrency(p.currency)}
 													</span>
 												)}
-												{appliedDiscount && (
+												{appliedDiscount > 0 && (
 													<div className="flex items-center gap-2">
 														<span className="text-2xl line-through">
-															{p.price}
+															{p.price} {p.currency}
-															{getSymbolFromCurrency(p.currency)}
 														</span>
 														<span className="text-2xl text-mti-red-light">
-															{(p.price - p.price * (appliedDiscount / 100)).toFixed(2)}
+															{(p.price - p.price * (appliedDiscount / 100)).toFixed(2)} {p.currency}
-															{getSymbolFromCurrency(p.currency)}
 														</span>
 													</div>
 												)}
@@ -177,8 +174,7 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
 									</div>
 									<div className="flex w-full flex-col items-start gap-2">
 										<span className="text-2xl">
-											{user.corporateInformation.payment.value}
+											{user.corporateInformation.payment.value} {user.corporateInformation.payment.currency}
-											{getSymbolFromCurrency(user.corporateInformation.payment.currency)}
 										</span>
 										<PaymobPayment
 											key={clientID}

src/pages/api/evaluate/speaking.ts

@@ -30,6 +30,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 
 		const audioFile = files.audio;
 		const audioFileRef = ref(storage, `speaking_recordings/${fields.id}.wav`);
+		const task = parseInt(fields.task.toString());
 
 		const binary = fs.readFileSync((audioFile as any).path).buffer;
 		const snapshot = await uploadBytes(audioFileRef, binary);
@@ -39,7 +40,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 		res.status(200).json(null);
 
 		console.log("🌱 - Still processing");
-		const backendRequest = await evaluate({answers: [{question: fields.question, answer: path}]});
+		const backendRequest = await evaluate({answer: path, question: fields.question}, task);
 		console.log("🌱 - Process complete");
 
 		const correspondingStat = await getCorrespondingStat(fields.id, 1);
@@ -76,14 +77,14 @@ async function getCorrespondingStat(id: string, index: number): Promise<Stat> {
 	return getCorrespondingStat(id, index + 1);
 }
 
-async function evaluate(body: {answers: object[]}): Promise<AxiosResponse> {
+async function evaluate(body: {answer: string; question: string}, task: number): Promise<AxiosResponse> {
-	const backendRequest = await axios.post(`${process.env.BACKEND_URL}/speaking_task_3`, body, {
+	const backendRequest = await axios.post(`${process.env.BACKEND_URL}/speaking_task_${task}`, body, {
 		headers: {
 			Authorization: `Bearer ${process.env.BACKEND_JWT}`,
 		},
 	});
 
-	if (typeof backendRequest.data === "string") return evaluate(body);
+	if (typeof backendRequest.data === "string") return evaluate(body, task);
 	return backendRequest;
 }
 

src/pages/api/users/update.ts

@@ -90,7 +90,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 		if (updatedUser.status || updatedUser.type === "corporate") {
 			// there's no await as this does not affect the user
 			propagateStatusChange(queryId, updatedUser.status);
-			propagateExpiryDateChanges(queryId, user.subscriptionExpirationDate || null, updatedUser.subscriptionExpirationDate || null);
+			propagateExpiryDateChanges(queryId, user.subscriptionExpirationDate, updatedUser.subscriptionExpirationDate || null);
 		}
 
 		res.status(200).json({ok: true});

src/resources/paypal.ts

@@ -95,4 +95,8 @@ export const CURRENCIES: {label: string; currency: string}[] = [
 		label: "United States dollar",
 		currency: "USD",
 	},
+	{
+		label: "Omani rial",
+		currency: "OMR",
+	},
 ];

src/utils/evaluation.ts

@@ -45,10 +45,11 @@ export const evaluateSpeakingAnswer = async (
 	exercise: SpeakingExercise | InteractiveSpeakingExercise,
 	solution: UserSolution,
 	id: string,
+	task: number,
 ): Promise<UserSolution | undefined> => {
 	switch (exercise?.type) {
 		case "speaking":
-			return {...(await evaluateSpeakingExercise(exercise, exercise.id, solution, id)), id} as UserSolution;
+			return {...(await evaluateSpeakingExercise(exercise, exercise.id, solution, id, task)), id} as UserSolution;
 		case "interactiveSpeaking":
 			return {...(await evaluateInteractiveSpeakingExercise(exercise.id, solution, id)), id} as UserSolution;
 		default:
@@ -66,6 +67,7 @@ const evaluateSpeakingExercise = async (
 	exerciseId: string,
 	solution: UserSolution,
 	id: string,
+	task: number,
 ): Promise<UserSolution | undefined> => {
 	const formData = new FormData();
 
@@ -81,6 +83,7 @@ const evaluateSpeakingExercise = async (
 		`${exercise.text.replaceAll("\n", "")}` + (exercise.prompts.length > 0 ? `You should talk about: ${exercise.prompts.join(", ")}` : "");
 	formData.append("question", evaluationQuestion);
 	formData.append("id", id);
+	formData.append("task", task.toString());
 
 	const config = {
 		headers: {

src/utils/propagate.user.changes.ts

@@ -67,7 +67,7 @@ export const propagateStatusChange = (userId: string, status: UserStatus) =>
 			});
 	});
 
-export const propagateExpiryDateChanges = (userId: string, initialExpiryDate: Date | null, subscriptionExpirationDate: Date | null) =>
+export const propagateExpiryDateChanges = (userId: string, initialExpiryDate: Date | null | undefined, subscriptionExpirationDate: Date | null) =>
 	new Promise((resolve, reject) => {
 		getDoc(doc(db, "users", userId))
 			.then((docUser) => {
@@ -93,6 +93,7 @@ export const propagateExpiryDateChanges = (userId: string, initialExpiryDate: Da
 							.then(async (data) => {
 								const filtered = data.filter((x) => {
 									if (x === null) return false;
+									if (!x.subscriptionExpirationDate && !initialExpiryDate) return true;
 									if (x.subscriptionExpirationDate !== initialExpiryDate) return false;
 									return true;
 								}) as User[];

yarn.lock

@@ -4870,13 +4870,6 @@ path-type@^4.0.0:
   resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-"paymob-react@git+https://github.com/tiago-ecrop/paymob-react-oman.git":
-  version "1.0.0"
-  resolved "git+https://github.com/tiago-ecrop/paymob-react-oman.git#9e7d1e86f01d29dd10192bbd371517849a264e5d"
-  dependencies:
-    react "^18.2.0"
-    react-dom "^18.2.0"
-
 picocolors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz"
@@ -5208,14 +5201,6 @@ react-dom@18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
-react-dom@^18.2.0:
-  version "18.3.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
-  integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
-  dependencies:
-    loose-envify "^1.1.0"
-    scheduler "^0.23.2"
-
 react-fast-compare@^3.0.1:
   version "3.2.1"
   resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.1.tgz"
@@ -5345,13 +5330,6 @@ react@18.2.0:
   dependencies:
     loose-envify "^1.1.0"
 
-react@^18.2.0:
-  version "18.3.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
-  integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
-  dependencies:
-    loose-envify "^1.1.0"
-
 read-cache@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz"
@@ -5557,13 +5535,6 @@ scheduler@^0.23.0:
   dependencies:
     loose-envify "^1.1.0"
 
-scheduler@^0.23.2:
-  version "0.23.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
-  integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
-  dependencies:
-    loose-envify "^1.1.0"
-
 seedrandom@^3.0.5:
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/seedrandom/-/seedrandom-3.0.5.tgz#54edc85c95222525b0c7a6f6b3543d8e0b3aa0a7"