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

Added integration for paypal payments

Browse Source
This commit is contained in:
Joao Ramos
2024-02-25 16:59:21 +00:00
parent b663e5c706
commit d7f1a4f6b2
5 changed files with 1424 additions and 960 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/hooks/usePaypalPayments.tsx Normal file
View File

@@ -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};
}

13
src/interfaces/paypal.ts
View File

@@ -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;
}

30
src/pages/api/payments/paypal.ts Normal file
View File

@@ -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);
}

19
src/pages/api/paypal/approve.ts
View File

@@ -53,6 +53,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"));
const groups: Group[] = (

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

@@ -7,8 +7,17 @@ import {toast, ToastContainer} from "react-toastify";
import Layout from "@/components/High/Layout";
import { shouldRedirectHome } from "@/utils/navigation.disabled";
import usePayments from "@/hooks/usePayments";
import {Payment} from "@/interfaces/paypal";
import {CellContext, createColumnHelper, flexRender, getCoreRowModel, HeaderGroup, useReactTable} from "@tanstack/react-table";
import usePaypalPayments from "@/hooks/usePaypalPayments";
import { Payment, PaypalPayment } from "@/interfaces/paypal";
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";
@@ -27,6 +36,7 @@ import moment from "moment";
import PaymentAssetManager from "@/components/PaymentAssetManager";
import { toFixedNumber } from "@/utils/number";
import { CSVLink } from "react-csv";
import { Tab } from "@headlessui/react";
export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
const user = req.session.user;
@@ -59,8 +69,17 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
}, sessionOptions);
const columnHelper = createColumnHelper<Payment>();
const paypalColumnHelper = createColumnHelper<PaypalPayment>();
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());
@@ -72,7 +91,9 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
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;
@@ -105,16 +126,24 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
<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}`,
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 }),
@@ -129,7 +158,11 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
}),
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,
}),
}}
@@ -137,15 +170,38 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
</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}) => ({value: currency, label}))}
defaultValue={{value: currency || "EUR", label: CURRENCIES.find((c) => c.currency === currency)?.label || "Euro"}}
options={CURRENCIES.map(({ label, currency }) => ({
value: currency,
label,
}))}
defaultValue={{
value: currency || "EUR",
label:
CURRENCIES.find((c) => c.currency === currency)?.label ||
"Euro",
}}
onChange={() => {}}
value={{value: currency || "EUR", label: CURRENCIES.find((c) => c.currency === currency)?.label || "Euro"}}
value={{
value: currency || "EUR",
label:
CURRENCIES.find((c) => c.currency === currency)?.label ||
"Euro",
}}
menuPortalTarget={document?.body}
styles={{
menuPortal: (base) => ({ ...base, zIndex: 9999 }),
@@ -160,7 +216,11 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
}),
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,
}),
}}
@@ -171,14 +231,27 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
{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}`}
value={`${(commission! / 100) * price!} ${
CURRENCIES.find((c) => c.currency === currency)?.label
}`}
onChange={() => null}
type="text"
defaultValue={0}
@@ -190,12 +263,14 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
<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",
"hover:border-mti-purple tooltip",
"transition duration-300 ease-in-out",
"transition duration-300 ease-in-out"
)}
dateFormat="dd/MM/yyyy"
selected={moment(date).toDate()}
@@ -204,10 +279,16 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
</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"}
@@ -216,10 +297,19 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
</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>
@@ -258,7 +348,16 @@ const IS_FILE_SUBMITTED_OPTIONS = [
},
];
const CSV_WHITELISTED_KEYS = ["corporateId", "corporate", "date", "amount", "agent", "agentCommission", "agentValue", "isPaid"];
const CSV_WHITELISTED_KEYS = [
"corporateId",
"corporate",
"date",
"amount",
"agent",
"agentCommission",
"agentValue",
"isPaid",
];
interface SimpleCSVColumn {
key: string;
@@ -270,7 +369,9 @@ 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>();
@@ -279,11 +380,21 @@ export default function PaymentRecord() {
const { user } = useUser({ redirectTo: "/login" });
const { users, reload: reloadUsers } = useUsers();
const { payments: originalPayments, reload: reloadPayment } = usePayments();
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();
@@ -301,7 +412,7 @@ export default function PaymentRecord() {
filters
.map((f) => f.filter)
.reduce((d, f) => d.filter(f), payments)
.sort((a, b) => moment(b.date).diff(moment(a.date))),
.sort((a, b) => moment(b.date).diff(moment(a.date)))
);
}, [payments, filters]);
@@ -314,21 +425,37 @@ export default function PaymentRecord() {
useEffect(() => {
setFilters((prev) => [
...prev.filter((x) => x.id !== "agent-filter"),
...(!agent ? [] : [{id: "agent-filter", filter: (p: Payment) => p.agent === agent.id}]),
...(!agent
? []
: [
{
id: "agent-filter",
filter: (p: Payment) => p.agent === agent.id,
},
]),
]);
}, [agent]);
useEffect(() => {
setFilters((prev) => [
...prev.filter((x) => x.id !== "corporate-filter"),
...(!corporate ? [] : [{id: "corporate-filter", filter: (p: Payment) => p.corporate === corporate.id}]),
...(!corporate
? []
: [
{
id: "corporate-filter",
filter: (p: Payment) => p.corporate === corporate.id,
},
]),
]);
}, [corporate]);
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]);
@@ -337,7 +464,13 @@ export default function PaymentRecord() {
...prev.filter((x) => x.id !== "commissionTransfer"),
...(typeof commissionTransfer !== "boolean"
? []
: [{id: "commissionTransfer", filter: (p: Payment) => !p.commissionTransfer === commissionTransfer}]),
: [
{
id: "commissionTransfer",
filter: (p: Payment) =>
!p.commissionTransfer === commissionTransfer,
},
]),
]);
}, [commissionTransfer]);
@@ -346,7 +479,13 @@ export default function PaymentRecord() {
...prev.filter((x) => x.id !== "corporateTransfer"),
...(typeof corporateTransfer !== "boolean"
? []
: [{id: "corporateTransfer", filter: (p: Payment) => !p.corporateTransfer === corporateTransfer}]),
: [
{
id: "corporateTransfer",
filter: (p: Payment) =>
!p.corporateTransfer === corporateTransfer,
},
]),
]);
}, [corporateTransfer]);
@@ -375,7 +514,9 @@ 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;
}
@@ -386,7 +527,8 @@ 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 [
@@ -505,7 +647,9 @@ 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,
@@ -526,7 +670,8 @@ 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": {
@@ -554,9 +699,10 @@ export default function PaymentRecord() {
return (
<div
className={clsx(
"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
"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>
);
@@ -575,7 +721,9 @@ 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>;
},
@@ -601,9 +749,10 @@ export default function PaymentRecord() {
return (
<div
className={clsx(
"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
"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>
);
@@ -622,7 +771,9 @@ 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>;
},
@@ -638,13 +789,23 @@ 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>
);
@@ -658,7 +819,11 @@ 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>
)}
@@ -674,11 +839,86 @@ export default function PaymentRecord() {
getCoreRowModel: getCoreRowModel(),
});
const paypalColumns = [
paypalColumnHelper.accessor("orderId", {
header: "Order ID",
id: "orderId",
cell: (info) => {
const { value } = columHelperValue(info.column.id, info);
return <span>{value}</span>;
},
}),
paypalColumnHelper.accessor("status", {
header: "Status",
id: "status",
cell: (info) => {
const { value } = columHelperValue(info.column.id, info);
return <span>{value}</span>;
},
}),
paypalColumnHelper.accessor("userId", {
header: "User Name",
id: "name",
cell: (info) => {
const { value } = columHelperValue("userId", info);
const user = users.find((x) => x.id === value) as User;
return <span>{user?.name}</span>;
},
}),
paypalColumnHelper.accessor("userId", {
header: "Email",
id: "email",
cell: (info) => {
const { value } = columHelperValue("userId", info);
const user = users.find((x) => x.id === value) as User;
return <span>{user?.email}</span>;
},
}),
paypalColumnHelper.accessor("value", {
header: "Amount",
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}`;
return <span>{finalValue}</span>;
},
}),
paypalColumnHelper.accessor("createdAt", {
header: "Date",
id: "createdAt",
cell: (info) => {
const { value } = columHelperValue(info.column.id, info);
return <span>{moment(value).format("DD/MM/YYYY")}</span>;
},
}),
paypalColumnHelper.accessor("subscriptionExpirationDate", {
header: "Expiration Date",
id: "subscriptionExpirationDate",
cell: (info) => {
const { value } = columHelperValue(info.column.id, info);
return <span>{moment(value).format("DD/MM/YYYY")}</span>;
},
}),
];
const paypalTable = useReactTable({
data: paypalPayments,
columns: paypalColumns,
getCoreRowModel: getCoreRowModel(),
});
const getUserModal = () => {
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">
@@ -700,7 +940,10 @@ 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">
@@ -724,8 +967,12 @@ export default function PaymentRecord() {
};
const getCSVData = () => {
const columns = table.getHeaderGroups().reduce((accm: SimpleCSVColumn[], group: HeaderGroup<Payment>) => {
const whitelistedColumns = group.headers.filter((header) => CSV_WHITELISTED_KEYS.includes(header.id));
const columns = table
.getHeaderGroups()
.reduce((accm: SimpleCSVColumn[], group: HeaderGroup<Payment>) => {
const whitelistedColumns = group.headers.filter((header) =>
CSV_WHITELISTED_KEYS.includes(header.id)
);
const data = whitelistedColumns.map((data) => ({
key: data.column.columnDef.id,
@@ -763,6 +1010,41 @@ export default function PaymentRecord() {
};
const { rows: csvRows, columns: csvColumns } = getCSVData();
const renderTable = (table: Table<any>) => (
<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
<thead>
{table.getHeaderGroups().map((headerGroup) => (
<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()
)}
</th>
))}
</tr>
))}
</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}
>
{row.getVisibleCells().map((cell) => (
<td className="px-4 py-2" key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
))}
</tbody>
</table>
);
return (
<>
<Head>
@@ -778,7 +1060,10 @@ 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}
@@ -789,45 +1074,74 @@ 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>
)}
</div>
</div>
<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}`,
label: `${
user.corporateInformation?.companyInformation?.name ||
user.name
} - ${user.email}`,
}))}
defaultValue={
user.type === "corporate"
? {
value: user.id,
meta: user,
label: `${user.corporateInformation?.companyInformation?.name || user.name} - ${user.email}`,
label: `${
user.corporateInformation?.companyInformation?.name ||
user.name
} - ${user.email}`,
}
: 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 }),
@@ -842,7 +1156,11 @@ 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,
}),
}}
@@ -850,21 +1168,36 @@ 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}`,
}))}
value={agent ? {value: agent?.id, label: `${agent.name} - ${agent.email}`} : undefined}
onChange={(value) => setAgent(value !== null ? (value as any).meta : undefined)}
value={
agent
? {
value: agent?.id,
label: `${agent.name} - ${agent.email}`,
}
: undefined
}
onChange={(value) =>
setAgent(value !== null ? (value as any).meta : undefined)
}
menuPortalTarget={document?.body}
styles={{
menuPortal: (base) => ({ ...base, zIndex: 9999 }),
@@ -879,7 +1212,11 @@ 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,
}),
}}
@@ -887,12 +1224,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">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)}
@@ -914,14 +1253,20 @@ 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"
@@ -930,7 +1275,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());
if (finalDate) {
@@ -945,14 +1292,18 @@ 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",
"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);
@@ -971,7 +1322,11 @@ 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,
}),
}}
@@ -979,14 +1334,18 @@ 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",
"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);
@@ -1005,37 +1364,57 @@ 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>
<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
<thead>
{table.getHeaderGroups().map((headerGroup) => (
<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())}
</th>
))}
</tr>
))}
</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}>
{row.getVisibleCells().map((cell) => (
<td className="px-4 py-2" key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
))}
</tbody>
</table>
<Tab.Group>
<Tab.List className="flex space-x-1 rounded-xl bg-mti-purple-ultralight/40 p-1">
<Tab
className={({ selected }) =>
clsx(
"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"
)
}
>
Payments
</Tab>
<Tab
className={({ selected }) =>
clsx(
"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"
)
}
>
Paypal
</Tab>
</Tab.List>
<Tab.Panels className="mt-2">
<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
{renderTable(table as Table<Payment>)}
</Tab.Panel>
<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
{renderTable(paypalTable as Table<PaypalPayment>)}
</Tab.Panel>
</Tab.Panels>
</Tab.Group>
</Layout>
)}
</>