- {renderSearch()}
+
{table.getHeaderGroups().map((headerGroup) => (
diff --git a/src/pages/(status)/PaymentDue.tsx b/src/pages/(status)/PaymentDue.tsx
index 5809653b..23f1342a 100644
--- a/src/pages/(status)/PaymentDue.tsx
+++ b/src/pages/(status)/PaymentDue.tsx
@@ -1,334 +1,236 @@
/* eslint-disable @next/next/no-img-element */
import Layout from "@/components/High/Layout";
-import PayPalPayment from "@/components/PayPalPayment";
import useGroups from "@/hooks/useGroups";
import usePackages from "@/hooks/usePackages";
import useUsers from "@/hooks/useUsers";
-import { User } from "@/interfaces/user";
+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 {capitalize} from "lodash";
+import {useEffect, useState} from "react";
import useInvites from "@/hooks/useInvites";
-import { BsArrowRepeat } from "react-icons/bs";
+import {BsArrowRepeat} from "react-icons/bs";
import InviteCard from "@/components/Medium/InviteCard";
-import { useRouter } from "next/router";
-import { PayPalScriptProvider } from "@paypal/react-paypal-js";
-import { usePaypalTracking } from "@/hooks/usePaypalTracking";
-import { ToastContainer } from "react-toastify";
+import {useRouter} from "next/router";
+import {ToastContainer} from "react-toastify";
import useDiscounts from "@/hooks/useDiscounts";
+import PaymobPayment from "@/components/PaymobPayment";
interface Props {
- user: User;
- hasExpired?: boolean;
- clientID: string;
- reload: () => void;
+ user: User;
+ hasExpired?: boolean;
+ clientID: string;
+ reload: () => void;
}
-export default function PaymentDue({
- user,
- hasExpired = false,
- clientID,
- reload,
-}: Props) {
- const [isLoading, setIsLoading] = useState(false);
- const [appliedDiscount, setAppliedDiscount] = useState(0);
+export default function PaymentDue({user, hasExpired = false, clientID, reload}: Props) {
+ const [isLoading, setIsLoading] = useState(false);
+ const [appliedDiscount, setAppliedDiscount] = useState(0);
- const router = useRouter();
+ const router = useRouter();
- const { packages } = usePackages();
- const { discounts } = useDiscounts();
- const { users } = useUsers();
- const { groups } = useGroups();
- const {
- invites,
- isLoading: isInvitesLoading,
- reload: reloadInvites,
- } = useInvites({ to: user?.id });
- const trackingId = usePaypalTracking();
+ const {packages} = usePackages();
+ const {discounts} = useDiscounts();
+ const {users} = useUsers();
+ const {groups} = useGroups();
+ const {invites, isLoading: isInvitesLoading, reload: reloadInvites} = useInvites({to: user?.id});
- useEffect(() => {
- const userDiscounts = discounts.filter((x) =>
- user.email.endsWith(`@${x.domain}`),
- );
- if (userDiscounts.length === 0) return;
+ useEffect(() => {
+ const userDiscounts = discounts.filter((x) => user.email.endsWith(`@${x.domain}`));
+ if (userDiscounts.length === 0) return;
- const biggestDiscount = [...userDiscounts]
- .sort((a, b) => b.percentage - a.percentage)
- .shift();
- if (!biggestDiscount) return;
+ const biggestDiscount = [...userDiscounts].sort((a, b) => b.percentage - a.percentage).shift();
+ if (!biggestDiscount) return;
- setAppliedDiscount(biggestDiscount.percentage);
- }, [discounts, user]);
+ setAppliedDiscount(biggestDiscount.percentage);
+ }, [discounts, user]);
- const isIndividual = () => {
- if (user?.type === "developer") return true;
- if (user?.type !== "student") return false;
- const userGroups = groups.filter((g) => g.participants.includes(user?.id));
+ const isIndividual = () => {
+ if (user?.type === "developer") return true;
+ if (user?.type !== "student") return false;
+ const userGroups = groups.filter((g) => g.participants.includes(user?.id));
- if (userGroups.length === 0) return true;
+ if (userGroups.length === 0) return true;
- const userGroupsAdminTypes = userGroups
- .map((g) => users?.find((u) => u.id === g.admin)?.type)
- .filter((t) => !!t);
- return userGroupsAdminTypes.every((t) => t !== "corporate");
- };
+ const userGroupsAdminTypes = userGroups.map((g) => users?.find((u) => u.id === g.admin)?.type).filter((t) => !!t);
+ return userGroupsAdminTypes.every((t) => t !== "corporate");
+ };
- return (
- <>
-
+ {renderSearch()}
+
+
- | - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext(), - )} - | - ))} -
|---|
| - {flexRender(cell.column.columnDef.cell, cell.getContext())} - | - ))} -
| + {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())} + | + ))} +
|---|
| + {flexRender(cell.column.columnDef.cell, cell.getContext())} + | + ))} +
-
- Payment Record
-
- {(user.type === "developer" ||
- user.type === "admin" ||
- user.type === "agent" ||
- user.type === "corporate") && (
-
- )}
- {(user.type === "developer" || user.type === "admin") && (
-
- )}
-
-
-
- {renderTable(table as Table
-
-
- {user.type !== "corporate" && (
-
-
-
- )}
-
-
-
-
-
-
- moment(date).isSameOrBefore(moment(new Date()))
- }
- onChange={([initialDate, finalDate]: [Date, Date]) => {
- setStartDate(
- initialDate ?? moment("01/01/2023").toDate(),
- );
- if (finalDate) {
- // basicly selecting a final day works as if I'm selecting the first
- // minute of that day. this way it covers the whole day
- setEndDate(moment(finalDate).endOf("day").toDate());
- return;
- }
- setEndDate(null);
- }}
- />
-
- {user.type !== "corporate" && (
-
-
-
- )}
-
-
-
-
+
+ Payment Record
+
+ {(user.type === "developer" || user.type === "admin" || user.type === "agent" || user.type === "corporate") && (
+
+ )}
+ {(user.type === "developer" || user.type === "admin") && (
+
+ )}
+
+
+
+ {renderTable(table as Table
+
+
+ {user.type !== "corporate" && (
+
+
+
+ )}
+
+
+
+
+
+ moment(date).isSameOrBefore(moment(new Date()))}
+ onChange={([initialDate, finalDate]: [Date, Date]) => {
+ setStartDate(initialDate ?? moment("01/01/2023").toDate());
+ if (finalDate) {
+ // basicly selecting a final day works as if I'm selecting the first
+ // minute of that day. this way it covers the whole day
+ setEndDate(moment(finalDate).endOf("day").toDate());
+ return;
+ }
+ setEndDate(null);
+ }}
+ />
+
+ {user.type !== "corporate" && (
+
+
+
+ )}
+
+
+
+