Merge branch 'develop' into feature-paypal-simple

src/components/Exercises/InteractiveSpeaking.tsx

@@ -76,7 +76,7 @@ export default function InteractiveSpeaking({
 		onBack({
 			exercise: id,
 			solutions: [...answers.filter((x) => x.questionIndex !== questionIndex), answer],
-			score: {correct: 1, total: 1, missing: 0},
+			score: {correct: 100, total: 100, missing: 0},
 			type,
 		});
 	};
@@ -96,7 +96,7 @@ export default function InteractiveSpeaking({
 		onNext({
 			exercise: id,
 			solutions: [...answers.filter((x) => x.questionIndex !== questionIndex), answer],
-			score: {correct: 1, total: 1, missing: 0},
+			score: {correct: 100, total: 100, missing: 0},
 			type,
 		});
 	};
@@ -131,7 +131,7 @@ export default function InteractiveSpeaking({
 			onNext({
 				exercise: id,
 				solutions: [...answers.filter((x) => x.questionIndex !== questionIndex), answer],
-				score: {correct: 1, total: 1, missing: 0},
+				score: {correct: 100, total: 100, missing: 0},
 				type,
 			});
 		}
@@ -176,7 +176,7 @@ export default function InteractiveSpeaking({
 			{
 				exercise: id,
 				solutions: [...answers.filter((x) => x.questionIndex !== questionIndex), answer],
-				score: {correct: 1, total: 1, missing: 0},
+				score: {correct: 100, total: 100, missing: 0},
 				module: "speaking",
 				exam: examID,
 				type,

src/components/Exercises/Speaking.tsx

@@ -81,7 +81,7 @@ export default function Speaking({id, title, text, video_url, type, prompts, use
 		onNext({
 			exercise: id,
 			solutions: storagePath ? [{id, solution: storagePath}] : [],
-			score: {correct: 1, total: 1, missing: 0},
+			score: {correct: 100, total: 100, missing: 0},
 			type,
 		});
 	};
@@ -94,7 +94,7 @@ export default function Speaking({id, title, text, video_url, type, prompts, use
 		onBack({
 			exercise: id,
 			solutions: storagePath ? [{id, solution: storagePath}] : [],
-			score: {correct: 1, total: 1, missing: 0},
+			score: {correct: 100, total: 100, missing: 0},
 			type,
 		});
 	};

src/components/Exercises/Writing.tsx

@@ -41,7 +41,7 @@ export default function Writing({
 		if (inputText.length > 0 && saveTimer % 10 === 0) {
 			setUserSolutions([
 				...storeUserSolutions.filter((x) => x.exercise !== id),
-				{exercise: id, solutions: [{id, solution: inputText}], score: {correct: 1, total: 1, missing: 0}, type, module: "writing"},
+				{exercise: id, solutions: [{id, solution: inputText}], score: {correct: 100, total: 100, missing: 0}, type, module: "writing"},
 			]);
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -65,7 +65,7 @@ export default function Writing({
 
 	useEffect(() => {
 		if (hasExamEnded)
-			onNext({exercise: id, solutions: [{id, solution: inputText}], score: {correct: 1, total: 1, missing: 0}, type, module: "writing"});
+			onNext({exercise: id, solutions: [{id, solution: inputText}], score: {correct: 100, total: 100, missing: 0}, type, module: "writing"});
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [hasExamEnded]);
 
@@ -148,7 +148,9 @@ export default function Writing({
 				<Button
 					color="purple"
 					variant="outline"
-					onClick={() => onBack({exercise: id, solutions: [{id, solution: inputText}], score: {correct: 1, total: 1, missing: 0}, type})}
+					onClick={() =>
+						onBack({exercise: id, solutions: [{id, solution: inputText}], score: {correct: 100, total: 100, missing: 0}, type})
+					}
 					className="max-w-[200px] self-end w-full">
 					Back
 				</Button>
@@ -159,7 +161,7 @@ export default function Writing({
 						onNext({
 							exercise: id,
 							solutions: [{id, solution: inputText.replaceAll(/\s{2,}/g, " ")}],
-							score: {correct: 1, total: 1, missing: 0},
+							score: {correct: 100, total: 100, missing: 0},
 							type,
 							module: "writing",
 						})

src/hooks/usePaypalPayments.tsx

@@ -0,0 +1,23 @@
+import {PaypalPayment} from "@/interfaces/paypal";
+import axios from "axios";
+import {useEffect, useState} from "react";
+
+export default function usePaypalPayments() {
+	const [payments, setPayments] = useState<PaypalPayment[]>([]);
+	const [isLoading, setIsLoading] = useState(false);
+	const [isError, setIsError] = useState(false);
+
+	const getData = () => {
+		setIsLoading(true);
+		axios
+			.get<PaypalPayment[]>("/api/payments/paypal")
+			.then((response) => {
+				return setPayments(response.data);
+			})
+			.finally(() => setIsLoading(false));
+	};
+
+	useEffect(getData, []);
+
+	return {payments, isLoading, isError, reload: getData};
+}

src/hooks/useTickets.tsx

@@ -1,17 +1,17 @@
-import { Ticket } from "@/interfaces/ticket";
+import { TicketWithCorporate } from "@/interfaces/ticket";
 import { Code, Group, User } from "@/interfaces/user";
 import axios from "axios";
 import { useEffect, useState, useCallback } from "react";
 
 export default function useTickets() {
-  const [tickets, setTickets] = useState<Ticket[]>([]);
+  const [tickets, setTickets] = useState<TicketWithCorporate[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [isError, setIsError] = useState(false);
 
   const getData = useCallback(() => {
     setIsLoading(true);
     axios
-      .get<Ticket[]>(`/api/tickets`)
+      .get<TicketWithCorporate[]>(`/api/tickets`)
       .then((response) => setTickets(response.data))
       .finally(() => setIsLoading(false));
   }, []);

src/interfaces/paypal.ts

@@ -35,3 +35,16 @@ export interface Payment {
 	corporateTransfer?: string;
 	commissionTransfer?: string;
 }
+
+
+export interface PaypalPayment {
+	orderId: string;
+	userId: string;
+	status: string;
+	createdAt: Date;
+	value: number;
+	currency: string;
+	subscriptionDuration: number;
+	subscriptionDurationUnit: DurationUnit;
+	subscriptionExpirationDate: Date;
+}

src/interfaces/ticket.ts

@@ -32,3 +32,7 @@ export const TicketStatusLabel: { [key in TicketStatus]: string } = {
   "in-progress": "In Progress",
   completed: "Completed",
 };
+
+export interface TicketWithCorporate extends Ticket {
+  corporate?: string;
+}

src/pages/(exam)/ExamPage.tsx

@@ -424,7 +424,7 @@ export default function ExamPage({page}: Props) {
 							<AbandonPopup
 								isOpen={showAbandonPopup}
 								abandonPopupTitle="Leave Exercise"
-								abandonPopupDescription="Are you sure you want to leave the exercise? You will lose all your progress."
+								abandonPopupDescription="Are you sure you want to leave the exercise? Your progress will be saved and this exam can be resumed on the Dashboard."
 								abandonConfirmButtonText="Confirm"
 								onAbandon={() => {
 									reset();

src/pages/api/payments/paypal.ts

@@ -0,0 +1,30 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from "next";
+import { app } from "@/firebase";
+import {
+  getFirestore,
+  getDocs,
+  collection,
+} from "firebase/firestore";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+  const payments = await getDocs(collection(db, "paypalpayments"));
+
+  const data = payments.docs.map((doc) => doc.data());
+  res.status(200).json(data);
+}
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (!req.session.user) {
+    res.status(401).json({ ok: false });
+    return;
+  }
+
+  if (req.method === "GET") await get(req, res);
+}

src/pages/api/paypal/approve.ts

@@ -73,6 +73,25 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
       },
       { merge: true }
     );
+  
+		try {
+			await setDoc(
+				doc(db, 'paypalpayments', v4()),
+				{
+					orderId: id,
+					userId: req.session.user.id,
+					status: request.data.status,
+					createdAt: new Date().toISOString(),
+					value: request.data.purchase_units[0].payments.captures[0].amount.value,
+					currency: request.data.purchase_units[0].payments.captures[0].amount.currency_code,
+					subscriptionDuration: duration,
+					subscriptionDurationUnit: duration_unit,
+					subscriptionExpirationDate: updatedExpirationDate.toISOString(),
+				}
+			);
+		} catch(err) {
+			console.error('Failed to insert paypal payment!', err);
+		}
 
     if (user.type === "corporate") {
       const snapshot = await getDocs(collection(db, "groups"));

src/pages/api/storage/insert.ts

@@ -28,7 +28,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 		}
 
 		const audioFile = files.audio;
-		const audioFileRef = ref(storage, `${fields.root}/${(audioFile as any).path.split("/").pop()!.replace("upload_", "")}`);
+		const audioFileRef = ref(storage, `${fields.root}/${(audioFile as any).path.replace("upload_", "")}`);
 
 		const binary = fs.readFileSync((audioFile as any).path).buffer;
 		const snapshot = await uploadBytes(audioFileRef, binary);

src/pages/api/tickets/index.ts

@@ -1,7 +1,7 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 import { sendEmail } from "@/email";
 import { app } from "@/firebase";
-import { Ticket, TicketTypeLabel } from "@/interfaces/ticket";
+import { Ticket, TicketTypeLabel, TicketWithCorporate } from "@/interfaces/ticket";
 import { sessionOptions } from "@/lib/session";
 import {
   collection,
@@ -9,11 +9,14 @@ import {
   getDocs,
   getFirestore,
   setDoc,
+  where,
+  query,
 } from "firebase/firestore";
 import { withIronSessionApiRoute } from "iron-session/next";
 import moment from "moment";
 import type { NextApiRequest, NextApiResponse } from "next";
 import ShortUniqueId from "short-unique-id";
+import { Group, CorporateUser } from "@/interfaces/user";
 
 const db = getFirestore(app);
 
@@ -44,12 +47,38 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 async function get(req: NextApiRequest, res: NextApiResponse) {
   const snapshot = await getDocs(collection(db, "tickets"));
 
-  res.status(200).json(
+  const docs = snapshot.docs.map((doc) => ({
-    snapshot.docs.map((doc) => ({
+    id: doc.id,
-      id: doc.id,
+    ...doc.data(),
-      ...doc.data(),
+  })) as Ticket[];
-    }))
+
-  );
+  // fetch all groups for these users
+
+  const reporters = [...new Set(docs.map((d) => d.reporter.id).filter((id) => id))];
+
+  const groupsSnapshot = await getDocs(query(collection(db, "groups"), where("participants", "array-contains-any", reporters)));
+  const groups = groupsSnapshot.docs.map((doc) => doc.data()) as Group[];
+
+  // based on the admin of each group, verify if it exists and it's of type corporate
+  const groupsAdmins = [...new Set(groups.map((g) => g.admin).filter((id) => id))];
+  const adminsSnapshot = await getDocs(query(collection(db, "users"), where("id", "in", groupsAdmins), where("type", "==", "corporate")));
+  const admins = adminsSnapshot.docs.map((doc) => doc.data());
+
+  const docsWithAdmins = docs.map((d) => {
+    const group = groups.find((g) => g.participants.includes(d.reporter.id));
+    const admin = admins.find((a) => a.id === group?.admin) as CorporateUser;
+
+    if(admin) {
+      return {
+        ...d,
+        corporate: admin.corporateInformation?.companyInformation?.name,
+      };
+    }
+
+    return d;
+  }) as TicketWithCorporate[];
+
+  res.status(200).json(docsWithAdmins);
 }
 
 async function post(req: NextApiRequest, res: NextApiResponse) {

src/pages/api/users/agents/[code].ts

@@ -23,7 +23,7 @@ interface Contact {
   number: string;
 }
 async function get(req: NextApiRequest, res: NextApiResponse) {
-  const { code } = req.query as { code: string };
+  const { code, language = 'en' } = req.query as { code: string, language: string};
 
   const usersQuery = query(
     collection(db, "users"),
@@ -43,9 +43,11 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
     return newUser;
   }) as Contact[];
 
-  const country = countryCodes.findOne("countryCode" as any, code);
+  const country = countryCodes.findOne("countryCode" as any, code.toUpperCase());
+  const key = language === 'ar' ? 'countryNameLocal' : 'countryNameEn';
+
   res.json({
-    label: country.countryNameEn,
+    label: country[key],
     entries,
   });
 }

src/pages/api/users/agents/index.ts

@@ -23,6 +23,8 @@ interface Contact {
   number: string;
 }
 async function get(req: NextApiRequest, res: NextApiResponse) {
+  const { language = 'en' } = req.query as { language: string };
+
   const usersQuery = query(
     collection(db, "users"),
     where("type", "==", "agent")
@@ -49,9 +51,10 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
   ) as Record<string, Contact[]>;
 
   const result = Object.keys(data).map((code) => {
-    const country = countryCodes.findOne("countryCode" as any, code);
+    const country = countryCodes.findOne("countryCode" as any, code.toUpperCase());
+    const key = language === 'ar' ? 'countryNameLocal' : 'countryNameEn';
     return {
-      label: country.countryNameEn,
+      label: country[key],
       key: code,
       entries: data[code],
     };

src/pages/tickets.tsx

@@ -11,6 +11,7 @@ import {
   TicketStatusLabel,
   TicketType,
   TicketTypeLabel,
+  TicketWithCorporate,
 } from "@/interfaces/ticket";
 import { sessionOptions } from "@/lib/session";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
@@ -28,7 +29,7 @@ import { useEffect, useState } from "react";
 import { BsArrowDown, BsArrowUp } from "react-icons/bs";
 import { ToastContainer } from "react-toastify";
 
-const columnHelper = createColumnHelper<Ticket>();
+const columnHelper = createColumnHelper<TicketWithCorporate>();
 
 export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
   const user = req.session.user;
@@ -75,10 +76,26 @@ const TypesClassNames: { [key in TicketType]: string } = {
   help: "bg-mti-blue-light",
 };
 
+const escapedURL = process.env.NEXT_PUBLIC_WEBSITE_URL || ''.replace(
+  /[.*+?^${}()|[\]\\]/g,
+  "\\$&"
+);
+const fromHomepage = [new RegExp(`^${escapedURL}`), /\/contact$/];
+
+type Source = "webpage" | "platform" | "";
+
+const SOURCE_OPTIONS = [
+  { value: "", label: "All" },
+  { value: "webpage", label: "Webpage" },
+  { value: "platform", label: "Platform" },
+]
+
 export default function Tickets() {
   const [filteredTickets, setFilteredTickets] = useState<Ticket[]>([]);
   const [selectedTicket, setSelectedTicket] = useState<Ticket>();
   const [assigneeFilter, setAssigneeFilter] = useState<string>();
+  const [sourceFilter, setSourceFilter] = useState<Source>("");
+
   const [dateSorting, setDateSorting] = useState<"asc" | "desc">("desc");
 
   const [typeFilter, setTypeFilter] = useState<TicketType>();
@@ -90,7 +107,7 @@ export default function Tickets() {
 
   const sortByDate = (a: Ticket, b: Ticket) => {
     return moment((dateSorting === "desc" ? b : a).date).diff(
-      moment((dateSorting === "desc" ? a : b).date),
+      moment((dateSorting === "desc" ? a : b).date)
     );
   };
 
@@ -102,11 +119,16 @@ export default function Tickets() {
     if (statusFilter) filters.push((x: Ticket) => x.status === statusFilter);
     if (assigneeFilter)
       filters.push((x: Ticket) => x.assignedTo === assigneeFilter);
-
+    if (sourceFilter) {
+      if (sourceFilter === "webpage")
+        filters.push((x: Ticket) => fromHomepage.some((r) => r.test(x.reportedFrom)));
+      if (sourceFilter === "platform")
+        filters.push((x: Ticket) => !fromHomepage.some((r) => r.test(x.reportedFrom)));
+    }
     setFilteredTickets(
-      [...filters.reduce((d, f) => d.filter(f), tickets)].sort(sortByDate),
+      [...filters.reduce((d, f) => d.filter(f), tickets)].sort(sortByDate)
     );
-  }, [tickets, typeFilter, statusFilter, assigneeFilter, dateSorting, user]);
+  }, [tickets, typeFilter, statusFilter, assigneeFilter, dateSorting, user, sourceFilter]);
 
   const columns = [
     columnHelper.accessor("id", {
@@ -119,7 +141,7 @@ export default function Tickets() {
         <span
           className={clsx(
             "rounded-lg p-1 px-2 text-white",
-            TypesClassNames[info.getValue()],
+            TypesClassNames[info.getValue()]
           )}
         >
           {TicketTypeLabel[info.getValue()]}
@@ -164,7 +186,7 @@ export default function Tickets() {
         <span
           className={clsx(
             "rounded-lg p-1 px-2 text-white",
-            StatusClassNames[info.getValue()],
+            StatusClassNames[info.getValue()]
           )}
         >
           {TicketStatusLabel[info.getValue()]}
@@ -175,6 +197,10 @@ export default function Tickets() {
       header: "Assignee",
       cell: (info) => users.find((x) => x.id === info.getValue())?.name || "",
     }),
+    columnHelper.accessor("corporate", {
+      header: "Corporate",
+      cell: (info) => info.getValue(),
+    }),
   ];
 
   const getAssigneeValue = () => {
@@ -290,7 +316,7 @@ export default function Tickets() {
                   { value: "me", label: "Assigned to me" },
                   ...users
                     .filter((x) =>
-                      ["admin", "developer", "agent"].includes(x.type),
+                      ["admin", "developer", "agent"].includes(x.type)
                     )
                     .map((u) => ({
                       value: u.id,
@@ -302,7 +328,7 @@ export default function Tickets() {
                 onChange={(value) =>
                   value
                     ? setAssigneeFilter(
-                        value.value === "me" ? user.id : value.value,
+                        value.value === "me" ? user.id : value.value
                       )
                     : setAssigneeFilter(undefined)
                 }
@@ -310,6 +336,18 @@ export default function Tickets() {
                 isClearable
               />
             </div>
+            <div className="flex w-full flex-col gap-3">
+              <label className="text-mti-gray-dim text-base font-normal">
+                Source
+              </label>
+              <Select
+                options={SOURCE_OPTIONS}
+                disabled={user.type === "agent"}
+                value={SOURCE_OPTIONS.find((x) => x.value === sourceFilter)}
+                onChange={(value) => setSourceFilter(value?.value as Source)
+                }
+              />
+            </div>
           </div>
 
           <table className="bg-mti-purple-ultralight/40 w-full rounded-xl">
@@ -322,7 +360,7 @@ export default function Tickets() {
                         ? null
                         : flexRender(
                             header.column.columnDef.header,
-                            header.getContext(),
+                            header.getContext()
                           )}
                     </th>
                   ))}
@@ -334,7 +372,7 @@ export default function Tickets() {
                 <tr
                   className={clsx(
                     "even:bg-mti-purple-ultralight/40 hover:bg-mti-purple-ultralight cursor-pointer rounded-lg py-2 odd:bg-white",
-                    "transition duration-300 ease-in-out",
+                    "transition duration-300 ease-in-out"
                   )}
                   onClick={() => setSelectedTicket(row.original)}
                   key={row.id}
@@ -343,7 +381,7 @@ export default function Tickets() {
                     <td className="w-fit items-center px-4 py-2" key={cell.id}>
                       {flexRender(
                         cell.column.columnDef.cell,
-                        cell.getContext(),
+                        cell.getContext()
                       )}
                     </td>
                   ))}