devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated the payment to work with Paymob

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-05-15 22:59:51 +01:00
parent 7af96ecccc
commit 2920fa7f3a
6 changed files with 1164 additions and 1412 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Navbar.tsx
View File

@@ -86,7 +86,7 @@ export default function Navbar({user, path, navDisabled = false, focusMode = fal
{showExpirationDate() && (
<Link
href={user.subscriptionExpirationDate && disablePaymentPage ? "/payment" : ""}
href={!!user.subscriptionExpirationDate && !disablePaymentPage ? "/payment" : ""}
data-tip="Expiry date"
className={clsx(
"flex w-fit cursor-pointer justify-center rounded-full border px-6 py-2 text-sm font-normal focus:outline-none",

12
src/components/PaymobPayment.tsx
View File

@@ -2,6 +2,7 @@ import {PaymentIntention} from "@/interfaces/paymob";
import {DurationUnit} from "@/interfaces/paypal";
import {User} from "@/interfaces/user";
import axios from "axios";
import {useRouter} from "next/router";
import {useState} from "react";
import Button from "./Low/Button";
import Input from "./Low/Input";
@@ -11,14 +12,13 @@ interface Props {
user: User;
currency: string;
price: number;
packageID: string;
setIsPaymentLoading: (v: boolean) => void;
duration: number;
duration_unit: DurationUnit;
onSuccess: (duration: number, duration_unit: DurationUnit) => void;
}
export default function PaymobPayment({user, price, packageID, setIsPaymentLoading, currency, duration, duration_unit, onSuccess}: Props) {
export default function PaymobPayment({user, price, setIsPaymentLoading, currency, duration, duration_unit, onSuccess}: Props) {
const [isLoading, setIsLoading] = useState(false);
const [isModalOpen, setIsModalOpen] = useState(false);
@@ -30,6 +30,8 @@ export default function PaymobPayment({user, price, packageID, setIsPaymentLoadi
const [state, setState] = useState("");
const [floor, setFloor] = useState("");
const router = useRouter();
const handleCardPayment = async () => {
try {
setIsPaymentLoading(true);
@@ -61,13 +63,15 @@ export default function PaymobPayment({user, price, packageID, setIsPaymentLoadi
},
extras: {
userID: user.id,
packageID: packageID,
duration,
duration_unit,
},
};
const response = await axios.post<{iframeURL: string}>(`/api/paymob`, paymentIntention);
window.open(response.data.iframeURL, "_blank", "noopener,noreferrer");
router.push(response.data.iframeURL);
setIsModalOpen(false);
} catch (error) {
console.error("Error starting card payment process:", error);
}

2
src/interfaces/paymob.ts
View File

@@ -28,7 +28,7 @@ interface Customer {
extras: IntentionExtras;
}
type IntentionExtras = {[key: string]: string};
type IntentionExtras = {[key: string]: string | number};
export interface IntentionResult {
payment_keys: PaymentKeysItem[];

44
src/pages/(status)/PaymentDue.tsx
View File

@@ -1,6 +1,5 @@
/* 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";
@@ -13,8 +12,6 @@ import useInvites from "@/hooks/useInvites";
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 useDiscounts from "@/hooks/useDiscounts";
import PaymobPayment from "@/components/PaymobPayment";
@@ -37,7 +34,6 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
const {users} = useUsers();
const {groups} = useGroups();
const {invites, isLoading: isInvitesLoading, reload: reloadInvites} = useInvites({to: user?.id});
const trackingId = usePaypalTracking();
useEffect(() => {
const userDiscounts = discounts.filter((x) => user.email.endsWith(`@${x.domain}`));
@@ -65,9 +61,15 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
<ToastContainer />
{isLoading && (
<div className="absolute left-0 top-0 z-[999] h-screen w-screen overflow-hidden bg-black/60">
<div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-8 text-white">
<span className={clsx("loading loading-infinity w-48")} />
<span className={clsx("text-2xl font-bold")}>Completing your payment...</span>
<div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-8 text-white">
<span className={clsx("loading loading-infinity w-48 animate-pulse")} />
<span className={clsx("text-2xl font-bold animate-pulse")}>Completing your payment...</span>
<span>If you canceled your payment or it failed, please click the button below to restart</span>
<button
onClick={() => setIsLoading(false)}
className="border border-white rounded-full px-4 py-2 hover:bg-white/80 hover:text-black cursor-pointer transition ease-in-out duration-300">
Cancel Payment
</button>
</div>
</div>
)}
@@ -137,29 +139,10 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
</span>
</div>
)}
{/* <PayPalPayment
key={clientID}
clientID={clientID}
setIsLoading={setIsLoading}
onSuccess={() => {
setTimeout(reload, 500);
}}
trackingId={trackingId}
currency={p.currency}
duration={p.duration}
duration_unit={p.duration_unit}
price={
+(
p.price -
p.price * (appliedDiscount / 100)
).toFixed(2)
}
/> */}
<PaymobPayment
key={clientID}
user={user}
setIsPaymentLoading={setIsLoading}
packageID={p.id}
onSuccess={() => {
setTimeout(reload, 500);
}}
@@ -179,7 +162,6 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
</div>
</div>
))}
z
</div>
</div>
)}
@@ -198,10 +180,10 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
{user.corporateInformation.payment.value}
{getSymbolFromCurrency(user.corporateInformation.payment.currency)}
</span>
<PayPalPayment
<PaymobPayment
key={clientID}
clientID={clientID}
setIsLoading={setIsLoading}
user={user}
setIsPaymentLoading={setIsLoading}
currency={user.corporateInformation.payment.currency}
price={user.corporateInformation.payment.value}
duration={user.corporateInformation.monthlyDuration}
@@ -210,8 +192,6 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
setIsLoading(false);
setTimeout(reload, 500);
}}
loadScript
trackingId={trackingId}
/>
</div>
<div className="flex flex-col items-start gap-1">

27
src/pages/api/paymob/webhook.ts
View File

@@ -5,7 +5,7 @@ import {getFirestore, collection, getDocs, setDoc, doc, getDoc, query, where} fr
import {withIronSessionApiRoute} from "iron-session/next";
import {sessionOptions} from "@/lib/session";
import {Group, User} from "@/interfaces/user";
import {Package, Payment} from "@/interfaces/paypal";
import {DurationUnit, Package, Payment} from "@/interfaces/paypal";
import {v4} from "uuid";
import ShortUniqueId from "short-unique-id";
import axios from "axios";
@@ -25,24 +25,37 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
if (!checkTransaction(authToken, transactionResult.transaction.order.id)) return res.status(404).json({ok: false});
if (!transactionResult.transaction.success) return res.status(200).json({ok: false});
const {userID, packageID} = transactionResult.intention.extras.creation_extras;
const {userID, duration, duration_unit} = transactionResult.intention.extras.creation_extras as {
userID: string;
duration: number;
duration_unit: DurationUnit;
};
const userSnapshot = await getDoc(doc(db, "users", userID));
const packageSnapshot = await getDoc(doc(db, "packages", packageID));
const userSnapshot = await getDoc(doc(db, "users", userID as string));
if (!userSnapshot.exists() || !packageSnapshot.exists()) return res.status(404).json({ok: false});
if (!userSnapshot.exists() || !duration || !duration_unit) return res.status(404).json({ok: false});
const user = {...userSnapshot.data(), id: userSnapshot.id} as User;
const pack = {...packageSnapshot.data(), id: packageSnapshot.id} as Package;
const subscriptionExpirationDate = user.subscriptionExpirationDate;
if (!subscriptionExpirationDate) return res.status(200).json({ok: false});
const initialDate = moment(subscriptionExpirationDate).isAfter(moment()) ? moment(subscriptionExpirationDate) : moment();
const updatedSubscriptionExpirationDate = moment(initialDate).add(pack.duration, pack.duration_unit).toISOString();
const updatedSubscriptionExpirationDate = moment(initialDate).add(duration, duration_unit).toISOString();
await setDoc(userSnapshot.ref, {subscriptionExpirationDate: updatedSubscriptionExpirationDate}, {merge: true});
await setDoc(doc(db, "paypalpayments", v4()), {
createdAt: new Date().toISOString(),
currency: transactionResult.transaction.currency,
orderId: transactionResult.transaction.id,
status: "COMPLETED",
subscriptionDuration: duration,
subscriptionDurationUnit: duration_unit,
subscriptionExpirationDate: updatedSubscriptionExpirationDate,
userId: userID,
value: transactionResult.transaction.amount_cents / 1000,
});
if (user.type === "corporate") {
const groupsSnapshot = await getDocs(query(collection(db, "groups"), where("admin", "==", user.id)));

421
src/pages/payment-record.tsx
View File

@@ -9,15 +9,7 @@ import { shouldRedirectHome } from "@/utils/navigation.disabled";
import usePayments from "@/hooks/usePayments";
import usePaypalPayments from "@/hooks/usePaypalPayments";
import {Payment, PaypalPayment} from "@/interfaces/paypal";
import {
CellContext,
createColumnHelper,
flexRender,
getCoreRowModel,
HeaderGroup,
Table,
useReactTable,
} from "@tanstack/react-table";
import {CellContext, createColumnHelper, flexRender, getCoreRowModel, HeaderGroup, Table, useReactTable} from "@tanstack/react-table";
import {CURRENCIES} from "@/resources/paypal";
import {BsTrash} from "react-icons/bs";
import axios from "axios";
@@ -50,10 +42,7 @@ export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
};
}
if (
shouldRedirectHome(user) ||
!["admin", "developer", "agent", "corporate"].includes(user.type)
) {
if (shouldRedirectHome(user) || !["admin", "developer", "agent", "corporate"].includes(user.type)) {
return {
redirect: {
destination: "/",
@@ -70,15 +59,7 @@ export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
const columnHelper = createColumnHelper<Payment>();
const paypalColumnHelper = createColumnHelper<PaypalPaymentWithUserData>();
const PaymentCreator = ({
onClose,
reload,
showComission = false,
}: {
onClose: () => void;
reload: () => void;
showComission: boolean;
}) => {
const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () => void; reload: () => void; showComission: boolean}) => {
const [corporate, setCorporate] = useState<CorporateUser>();
const [date, setDate] = useState<Date>(new Date());
@@ -90,9 +71,7 @@ const PaymentCreator = ({
const referralAgent = useMemo(() => {
if (corporate?.corporateInformation?.referralAgent) {
return users.find(
(u) => u.id === corporate.corporateInformation.referralAgent,
);
return users.find((u) => u.id === corporate.corporateInformation.referralAgent);
}
return undefined;
@@ -125,22 +104,16 @@ const PaymentCreator = ({
<h1 className="text-2xl font-semibold">New Payment</h1>
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-3">
<label className="font-normal text-base text-mti-gray-dim">
Corporate account *
</label>
<label className="font-normal text-base text-mti-gray-dim">Corporate account *</label>
<Select
className="px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
options={(
users.filter((u) => u.type === "corporate") as CorporateUser[]
).map((user) => ({
options={(users.filter((u) => u.type === "corporate") as CorporateUser[]).map((user) => ({
value: user.id,
meta: user,
label: `${user.corporateInformation?.companyInformation?.name || user.name} - ${user.email}`,
}))}
defaultValue={{value: "undefined", label: "Select an account"}}
onChange={(value) =>
setCorporate((value as any)?.meta ?? undefined)
}
onChange={(value) => setCorporate((value as any)?.meta ?? undefined)}
menuPortalTarget={document?.body}
styles={{
menuPortal: (base) => ({...base, zIndex: 9999}),
@@ -155,11 +128,7 @@ const PaymentCreator = ({
}),
option: (styles, state) => ({
...styles,
backgroundColor: state.isFocused
? "#D5D9F0"
: state.isSelected
? "#7872BF"
: "white",
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
color: state.isFocused ? "black" : styles.color,
}),
}}
@@ -167,19 +136,9 @@ const PaymentCreator = ({
</div>
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">
Price *
</label>
<label className="font-normal text-base text-mti-gray-dim">Price *</label>
<div className="w-full grid grid-cols-5 gap-2">
<Input
name="paymentValue"
onChange={() => {}}
type="number"
value={price}
defaultValue={0}
className="col-span-3"
disabled
/>
<Input name="paymentValue" onChange={() => {}} type="number" value={price} defaultValue={0} className="col-span-3" disabled />
<Select
className="px-4 col-span-2 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-mti-gray-platinum/40 text-mti-gray-dim cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none"
options={CURRENCIES.map(({label, currency}) => ({
@@ -188,16 +147,12 @@ const PaymentCreator = ({
}))}
defaultValue={{
value: currency || "EUR",
label:
CURRENCIES.find((c) => c.currency === currency)?.label ||
"Euro",
label: CURRENCIES.find((c) => c.currency === currency)?.label || "Euro",
}}
onChange={() => {}}
value={{
value: currency || "EUR",
label:
CURRENCIES.find((c) => c.currency === currency)?.label ||
"Euro",
label: CURRENCIES.find((c) => c.currency === currency)?.label || "Euro",
}}
menuPortalTarget={document?.body}
styles={{
@@ -213,11 +168,7 @@ const PaymentCreator = ({
}),
option: (styles, state) => ({
...styles,
backgroundColor: state.isFocused
? "#D5D9F0"
: state.isSelected
? "#7872BF"
: "white",
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
color: state.isFocused ? "black" : styles.color,
}),
}}
@@ -228,22 +179,11 @@ const PaymentCreator = ({
{showComission && (
<div className="flex gap-4 w-full">
<div className="flex flex-col w-full gap-3">
<label className="font-normal text-base text-mti-gray-dim">
Commission *
</label>
<Input
name="commission"
onChange={() => {}}
type="number"
defaultValue={0}
value={commission}
disabled
/>
<label className="font-normal text-base text-mti-gray-dim">Commission *</label>
<Input name="commission" onChange={() => {}} type="number" defaultValue={0} value={commission} disabled />
</div>
<div className="flex flex-col w-full gap-3">
<label className="font-normal text-base text-mti-gray-dim">
Commission Value*
</label>
<label className="font-normal text-base text-mti-gray-dim">Commission Value*</label>
<Input
name="commissionValue"
value={`${(commission! / 100) * price!} ${CURRENCIES.find((c) => c.currency === currency)?.label}`}
@@ -258,9 +198,7 @@ const PaymentCreator = ({
<div className="flex gap-4">
<div className="flex flex-col w-full gap-3">
<label className="font-normal text-base text-mti-gray-dim">
Date *
</label>
<label className="font-normal text-base text-mti-gray-dim">Date *</label>
<ReactDatePicker
className={clsx(
"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
@@ -274,16 +212,10 @@ const PaymentCreator = ({
</div>
<div className="flex flex-col w-full gap-3">
<label className="font-normal text-base text-mti-gray-dim">
Country Manager *
</label>
<label className="font-normal text-base text-mti-gray-dim">Country Manager *</label>
<Input
name="referralAgent"
value={
referralAgent
? `${referralAgent.name} - ${referralAgent.email}`
: "No country manager"
}
value={referralAgent ? `${referralAgent.name} - ${referralAgent.email}` : "No country manager"}
onChange={() => null}
type="text"
defaultValue={"No country manager"}
@@ -292,19 +224,10 @@ const PaymentCreator = ({
</div>
</div>
<div className="flex w-full justify-end items-center gap-8 mt-4">
<Button
variant="outline"
color="red"
className="w-full max-w-[200px]"
onClick={onClose}
>
<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={!corporate || !price}
>
<Button className="w-full max-w-[200px]" onClick={submit} disabled={!corporate || !price}>
Submit
</Button>
</div>
@@ -343,26 +266,9 @@ const IS_FILE_SUBMITTED_OPTIONS = [
},
];
const CSV_PAYMENTS_WHITELISTED_KEYS = [
"corporateId",
"corporate",
"date",
"amount",
"agent",
"agentCommission",
"agentValue",
"isPaid",
];
const CSV_PAYMENTS_WHITELISTED_KEYS = ["corporateId", "corporate", "date", "amount", "agent", "agentCommission", "agentValue", "isPaid"];
const CSV_PAYPAL_WHITELISTED_KEYS = [
"orderId",
"status",
"name",
"email",
"value",
"createdAt",
"subscriptionExpirationDate",
];
const CSV_PAYPAL_WHITELISTED_KEYS = ["orderId", "status", "name", "email", "value", "createdAt", "subscriptionExpirationDate"];
interface SimpleCSVColumn {
key: string;
@@ -380,9 +286,7 @@ export default function PaymentRecord() {
const [selectedCorporateUser, setSelectedCorporateUser] = useState<User>();
const [selectedAgentUser, setSelectedAgentUser] = useState<User>();
const [isCreatingPayment, setIsCreatingPayment] = useState(false);
const [filters, setFilters] = useState<
{ filter: (p: Payment) => boolean; id: string }[]
>([]);
const [filters, setFilters] = useState<{filter: (p: Payment) => boolean; id: string}[]>([]);
const [displayPayments, setDisplayPayments] = useState<Payment[]>([]);
const [corporate, setCorporate] = useState<User>();
@@ -391,21 +295,12 @@ export default function PaymentRecord() {
const {user} = useUser({redirectTo: "/login"});
const {users, reload: reloadUsers} = useUsers();
const {payments: originalPayments, reload: reloadPayment} = usePayments();
const { payments: paypalPayments, reload: reloadPaypalPayment } =
usePaypalPayments();
const [startDate, setStartDate] = useState<Date | null>(
moment("01/01/2023").toDate(),
);
const [endDate, setEndDate] = useState<Date | null>(
moment().endOf("day").toDate(),
);
const {payments: paypalPayments, reload: reloadPaypalPayment} = usePaypalPayments();
const [startDate, setStartDate] = useState<Date | null>(moment("01/01/2023").toDate());
const [endDate, setEndDate] = useState<Date | null>(moment().endOf("day").toDate());
const [paid, setPaid] = useState<Boolean | null>(IS_PAID_OPTIONS[0].value);
const [commissionTransfer, setCommissionTransfer] = useState<Boolean | null>(
IS_FILE_SUBMITTED_OPTIONS[0].value,
);
const [corporateTransfer, setCorporateTransfer] = useState<Boolean | null>(
IS_FILE_SUBMITTED_OPTIONS[0].value,
);
const [commissionTransfer, setCommissionTransfer] = useState<Boolean | null>(IS_FILE_SUBMITTED_OPTIONS[0].value);
const [corporateTransfer, setCorporateTransfer] = useState<Boolean | null>(IS_FILE_SUBMITTED_OPTIONS[0].value);
const reload = () => {
reloadUsers();
reloadPayment();
@@ -466,9 +361,7 @@ export default function PaymentRecord() {
useEffect(() => {
setFilters((prev) => [
...prev.filter((x) => x.id !== "paid"),
...(typeof paid !== "boolean"
? []
: [{ id: "paid", filter: (p: Payment) => p.isPaid === paid }]),
...(typeof paid !== "boolean" ? [] : [{id: "paid", filter: (p: Payment) => p.isPaid === paid}]),
]);
}, [paid]);
@@ -480,8 +373,7 @@ export default function PaymentRecord() {
: [
{
id: "commissionTransfer",
filter: (p: Payment) =>
!p.commissionTransfer === commissionTransfer,
filter: (p: Payment) => !p.commissionTransfer === commissionTransfer,
},
]),
]);
@@ -495,8 +387,7 @@ export default function PaymentRecord() {
: [
{
id: "corporateTransfer",
filter: (p: Payment) =>
!p.corporateTransfer === corporateTransfer,
filter: (p: Payment) => !p.corporateTransfer === corporateTransfer,
},
]),
]);
@@ -527,9 +418,7 @@ export default function PaymentRecord() {
}
if (reason.response.status === 403) {
toast.error(
"You do not have permission to delete an approved payment record!",
);
toast.error("You do not have permission to delete an approved payment record!");
return;
}
@@ -540,8 +429,7 @@ export default function PaymentRecord() {
const getFileAssetsColumns = () => {
if (user) {
const containerClassName =
"flex gap-2 text-mti-purple-light hover:text-mti-purple-dark ease-in-out duration-300 cursor-pointer";
const containerClassName = "flex gap-2 text-mti-purple-light hover:text-mti-purple-dark ease-in-out duration-300 cursor-pointer";
switch (user.type) {
case "corporate":
return [
@@ -660,9 +548,7 @@ export default function PaymentRecord() {
return {value: `${value}%`};
}
case "agent": {
const user = users.find(
(x) => x.id === info.row.original.agent,
) as AgentUser;
const user = users.find((x) => x.id === info.row.original.agent) as AgentUser;
return {
value: user?.name,
user,
@@ -683,8 +569,7 @@ export default function PaymentRecord() {
const user = users.find((x) => x.id === specificValue) as CorporateUser;
return {
user,
value:
user?.corporateInformation.companyInformation.name || user?.name,
value: user?.corporateInformation.companyInformation.name || user?.name,
};
}
case "currency": {
@@ -714,8 +599,7 @@ export default function PaymentRecord() {
className={clsx(
"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
)}
onClick={() => setSelectedAgentUser(user)}
>
onClick={() => setSelectedAgentUser(user)}>
{value}
</div>
);
@@ -734,9 +618,7 @@ export default function PaymentRecord() {
id: "agentValue",
cell: (info) => {
const {value} = columHelperValue(info.column.id, info);
const currency = CURRENCIES.find(
(x) => x.currency === info.row.original.currency,
)?.label;
const currency = CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label;
const finalValue = `${value} ${currency}`;
return <span>{finalValue}</span>;
},
@@ -764,8 +646,7 @@ export default function PaymentRecord() {
className={clsx(
"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
)}
onClick={() => setSelectedCorporateUser(user)}
>
onClick={() => setSelectedCorporateUser(user)}>
{value}
</div>
);
@@ -784,9 +665,7 @@ export default function PaymentRecord() {
id: "amount",
cell: (info) => {
const {value} = columHelperValue(info.column.id, info);
const currency = CURRENCIES.find(
(x) => x.currency === info.row.original.currency,
)?.label;
const currency = CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label;
const finalValue = `${value} ${currency}`;
return <span>{finalValue}</span>;
},
@@ -802,23 +681,13 @@ export default function PaymentRecord() {
<Checkbox
isChecked={value}
onChange={(e) => {
if (user?.type === agent || user?.type === "corporate" || value)
return null;
if (
!info.row.original.commissionTransfer ||
!info.row.original.corporateTransfer
)
return alert(
"All files need to be uploaded to consider it paid!",
);
if (
!confirm(`Are you sure you want to consider this payment paid?`)
)
return null;
if (user?.type === agent || user?.type === "corporate" || value) return null;
if (!info.row.original.commissionTransfer || !info.row.original.corporateTransfer)
return alert("All files need to be uploaded to consider it paid!");
if (!confirm(`Are you sure you want to consider this payment paid?`)) return null;
return updatePayment(info.row.original, "isPaid", e);
}}
>
}}>
<span></span>
</Checkbox>
);
@@ -832,11 +701,7 @@ export default function PaymentRecord() {
return (
<div className="flex gap-4">
{user?.type !== "agent" && (
<div
data-tip="Delete"
className="cursor-pointer tooltip"
onClick={() => deletePayment(row.original.id)}
>
<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deletePayment(row.original.id)}>
<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
</div>
)}
@@ -899,10 +764,7 @@ export default function PaymentRecord() {
id: "value",
cell: (info) => {
const {value} = columHelperValue(info.column.id, info);
const currency = CURRENCIES.find(
(x) => x.currency === info.row.original.currency,
)?.label;
const finalValue = `${value} ${currency}`;
const finalValue = `${value} ${info.row.original.currency}`;
return <span>{finalValue}</span>;
},
}),
@@ -924,10 +786,7 @@ export default function PaymentRecord() {
}),
];
const { rows: filteredRows, renderSearch } = useListSearch(
paypalFilterRows,
updatedPaypalPayments,
);
const {rows: filteredRows, renderSearch} = useListSearch(paypalFilterRows, updatedPaypalPayments);
const paypalTable = useReactTable({
data: filteredRows,
@@ -938,10 +797,7 @@ export default function PaymentRecord() {
if (user) {
if (selectedCorporateUser) {
return (
<Modal
isOpen={!!selectedCorporateUser}
onClose={() => setSelectedCorporateUser(undefined)}
>
<Modal isOpen={!!selectedCorporateUser} onClose={() => setSelectedCorporateUser(undefined)}>
<>
{selectedCorporateUser && (
<div className="w-full flex flex-col gap-8">
@@ -964,10 +820,7 @@ export default function PaymentRecord() {
if (selectedAgentUser) {
return (
<Modal
isOpen={!!selectedAgentUser}
onClose={() => setSelectedAgentUser(undefined)}
>
<Modal isOpen={!!selectedAgentUser} onClose={() => setSelectedAgentUser(undefined)}>
<>
{selectedAgentUser && (
<div className="w-full flex flex-col gap-8">
@@ -992,17 +845,11 @@ export default function PaymentRecord() {
const getCSVData = () => {
const tables = [table, paypalTable];
const whitelists = [
CSV_PAYMENTS_WHITELISTED_KEYS,
CSV_PAYPAL_WHITELISTED_KEYS,
];
const whitelists = [CSV_PAYMENTS_WHITELISTED_KEYS, CSV_PAYPAL_WHITELISTED_KEYS];
const currentTable = tables[selectedIndex];
const whitelist = whitelists[selectedIndex];
const columns = (currentTable.getHeaderGroups() as any[]).reduce(
(accm: any[], group: any) => {
const whitelistedColumns = group.headers.filter((header: any) =>
whitelist.includes(header.id),
);
const columns = (currentTable.getHeaderGroups() as any[]).reduce((accm: any[], group: any) => {
const whitelistedColumns = group.headers.filter((header: any) => whitelist.includes(header.id));
const data = whitelistedColumns.map((data: any) => ({
key: data.column.columnDef.id,
@@ -1010,9 +857,7 @@ export default function PaymentRecord() {
})) as SimpleCSVColumn[];
return [...accm, ...data];
},
[],
);
}, []);
const {rows} = currentTable.getRowModel();
@@ -1050,12 +895,7 @@ export default function PaymentRecord() {
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th className="p-4 text-left" key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext(),
)}
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
</th>
))}
</tr>
@@ -1063,10 +903,7 @@ export default function PaymentRecord() {
</thead>
<tbody className="px-2">
{table.getRowModel().rows.map((row) => (
<tr
className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2"
key={row.id}
>
<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
{row.getVisibleCells().map((cell) => (
<td className="px-4 py-2" key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
@@ -1093,10 +930,7 @@ export default function PaymentRecord() {
{user && (
<Layout user={user} className="gap-6">
{getUserModal()}
<Modal
isOpen={isCreatingPayment}
onClose={() => setIsCreatingPayment(false)}
>
<Modal isOpen={isCreatingPayment} onClose={() => setIsCreatingPayment(false)}>
<PaymentCreator
onClose={() => setIsCreatingPayment(false)}
reload={reload}
@@ -1107,26 +941,15 @@ export default function PaymentRecord() {
<div className="w-full flex flex-end justify-between p-2">
<h1 className="text-2xl font-semibold">Payment Record</h1>
<div className="flex justify-end gap-2">
{(user.type === "developer" ||
user.type === "admin" ||
user.type === "agent" ||
user.type === "corporate") && (
{(user.type === "developer" || user.type === "admin" || user.type === "agent" || user.type === "corporate") && (
<Button className="max-w-[200px]" variant="outline">
<CSVLink
data={csvRows}
headers={csvColumns}
filename="payment-records.csv"
>
<CSVLink data={csvRows} headers={csvColumns} filename="payment-records.csv">
Download CSV
</CSVLink>
</Button>
)}
{(user.type === "developer" || user.type === "admin") && (
<Button
className="max-w-[200px]"
variant="outline"
onClick={() => setIsCreatingPayment(true)}
>
<Button className="max-w-[200px]" variant="outline" onClick={() => setIsCreatingPayment(true)}>
New Payment
</Button>
)}
@@ -1140,12 +963,9 @@ export default function PaymentRecord() {
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
"transition duration-300 ease-in-out",
selected
? "bg-white shadow"
: "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
)
}
>
}>
Payments
</Tab>
{["admin", "developer"].includes(user.type) && (
@@ -1155,40 +975,25 @@ export default function PaymentRecord() {
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
"transition duration-300 ease-in-out",
selected
? "bg-white shadow"
: "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
)
}
>
Paypal
}>
Paymob
</Tab>
)}
</Tab.List>
<Tab.Panels>
<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide gap-8 flex flex-col">
<div
className={clsx(
"grid grid-cols-1 md:grid-cols-2 gap-8 w-full",
user.type !== "corporate" && "lg:grid-cols-3",
)}
>
<div className={clsx("grid grid-cols-1 md:grid-cols-2 gap-8 w-full", user.type !== "corporate" && "lg:grid-cols-3")}>
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">
Corporate account *
</label>
<label className="font-normal text-base text-mti-gray-dim">Corporate account *</label>
<Select
isClearable={user.type !== "corporate"}
className={clsx(
"px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none",
user.type === "corporate" &&
"!bg-mti-gray-platinum/40 !text-mti-gray-dim !cursor-not-allowed",
user.type === "corporate" && "!bg-mti-gray-platinum/40 !text-mti-gray-dim !cursor-not-allowed",
)}
options={(
users.filter(
(u) => u.type === "corporate",
) as CorporateUser[]
).map((user) => ({
options={(users.filter((u) => u.type === "corporate") as CorporateUser[]).map((user) => ({
value: user.id,
meta: user,
label: `${user.corporateInformation?.companyInformation?.name || user.name} - ${user.email}`,
@@ -1205,9 +1010,7 @@ export default function PaymentRecord() {
: undefined
}
isDisabled={user.type === "corporate"}
onChange={(value) =>
setCorporate((value as any)?.meta ?? undefined)
}
onChange={(value) => setCorporate((value as any)?.meta ?? undefined)}
menuPortalTarget={document?.body}
styles={{
menuPortal: (base) => ({...base, zIndex: 9999}),
@@ -1222,11 +1025,7 @@ export default function PaymentRecord() {
}),
option: (styles, state) => ({
...styles,
backgroundColor: state.isFocused
? "#D5D9F0"
: state.isSelected
? "#7872BF"
: "white",
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
color: state.isFocused ? "black" : styles.color,
}),
}}
@@ -1234,21 +1033,15 @@ export default function PaymentRecord() {
</div>
{user.type !== "corporate" && (
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">
Country manager *
</label>
<label className="font-normal text-base text-mti-gray-dim">Country manager *</label>
<Select
isClearable
isDisabled={user.type === "agent"}
className={clsx(
"px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none",
user.type === "agent"
? "bg-mti-gray-platinum/40"
: "bg-white",
user.type === "agent" ? "bg-mti-gray-platinum/40" : "bg-white",
)}
options={(
users.filter((u) => u.type === "agent") as AgentUser[]
).map((user) => ({
options={(users.filter((u) => u.type === "agent") as AgentUser[]).map((user) => ({
value: user.id,
meta: user,
label: `${user.name} - ${user.email}`,
@@ -1261,11 +1054,7 @@ export default function PaymentRecord() {
}
: undefined
}
onChange={(value) =>
setAgent(
value !== null ? (value as any).meta : undefined,
)
}
onChange={(value) => setAgent(value !== null ? (value as any).meta : undefined)}
menuPortalTarget={document?.body}
styles={{
menuPortal: (base) => ({...base, zIndex: 9999}),
@@ -1280,11 +1069,7 @@ export default function PaymentRecord() {
}),
option: (styles, state) => ({
...styles,
backgroundColor: state.isFocused
? "#D5D9F0"
: state.isSelected
? "#7872BF"
: "white",
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
color: state.isFocused ? "black" : styles.color,
}),
}}
@@ -1292,16 +1077,12 @@ export default function PaymentRecord() {
</div>
)}
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">
Paid
</label>
<label className="font-normal text-base text-mti-gray-dim">Paid</label>
<Select
isClearable
className={clsx(
"px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none",
user.type === "agent"
? "bg-mti-gray-platinum/40"
: "bg-white",
user.type === "agent" ? "bg-mti-gray-platinum/40" : "bg-white",
)}
options={IS_PAID_OPTIONS}
value={IS_PAID_OPTIONS.find((e) => e.value === paid)}
@@ -1323,20 +1104,14 @@ export default function PaymentRecord() {
}),
option: (styles, state) => ({
...styles,
backgroundColor: state.isFocused
? "#D5D9F0"
: state.isSelected
? "#7872BF"
: "white",
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
color: state.isFocused ? "black" : styles.color,
}),
}}
/>
</div>
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">
Date
</label>
<label className="font-normal text-base text-mti-gray-dim">Date</label>
<ReactDatePicker
dateFormat="dd/MM/yyyy"
className="px-4 py-6 w-full text-sm text-center font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none"
@@ -1345,13 +1120,9 @@ export default function PaymentRecord() {
endDate={endDate}
selectsRange
showMonthDropdown
filterDate={(date: Date) =>
moment(date).isSameOrBefore(moment(new Date()))
}
filterDate={(date: Date) => moment(date).isSameOrBefore(moment(new Date()))}
onChange={([initialDate, finalDate]: [Date, Date]) => {
setStartDate(
initialDate ?? moment("01/01/2023").toDate(),
);
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
@@ -1364,18 +1135,14 @@ export default function PaymentRecord() {
</div>
{user.type !== "corporate" && (
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">
Commission transfer
</label>
<label className="font-normal text-base text-mti-gray-dim">Commission transfer</label>
<Select
isClearable
className={clsx(
"px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none",
)}
options={IS_FILE_SUBMITTED_OPTIONS}
value={IS_FILE_SUBMITTED_OPTIONS.find(
(e) => e.value === commissionTransfer,
)}
value={IS_FILE_SUBMITTED_OPTIONS.find((e) => e.value === commissionTransfer)}
onChange={(value) => {
if (value) return setCommissionTransfer(value.value);
setCommissionTransfer(null);
@@ -1394,11 +1161,7 @@ export default function PaymentRecord() {
}),
option: (styles, state) => ({
...styles,
backgroundColor: state.isFocused
? "#D5D9F0"
: state.isSelected
? "#7872BF"
: "white",
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
color: state.isFocused ? "black" : styles.color,
}),
}}
@@ -1406,18 +1169,14 @@ export default function PaymentRecord() {
</div>
)}
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">
Corporate transfer
</label>
<label className="font-normal text-base text-mti-gray-dim">Corporate transfer</label>
<Select
isClearable
className={clsx(
"px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none",
)}
options={IS_FILE_SUBMITTED_OPTIONS}
value={IS_FILE_SUBMITTED_OPTIONS.find(
(e) => e.value === corporateTransfer,
)}
value={IS_FILE_SUBMITTED_OPTIONS.find((e) => e.value === corporateTransfer)}
onChange={(value) => {
if (value) return setCorporateTransfer(value.value);
setCorporateTransfer(null);
@@ -1436,11 +1195,7 @@ export default function PaymentRecord() {
}),
option: (styles, state) => ({
...styles,
backgroundColor: state.isFocused
? "#D5D9F0"
: state.isSelected
? "#7872BF"
: "white",
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
color: state.isFocused ? "black" : styles.color,
}),
}}