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

ENCOA-272

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-12-11 11:58:52 +00:00
parent 6a6c4661c4
commit d074ec390c
46 changed files with 1940 additions and 6423 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,20 +1,20 @@
/* eslint-disable @next/next/no-img-element */
import Head from "next/head";
import {withIronSessionSsr} from "iron-session/next";
import {sessionOptions} from "@/lib/session";
import { withIronSessionSsr } from "iron-session/next";
import { sessionOptions } from "@/lib/session";
import useUser from "@/hooks/useUser";
import {toast, ToastContainer} from "react-toastify";
import { toast, ToastContainer } from "react-toastify";
import Layout from "@/components/High/Layout";
import {shouldRedirectHome} from "@/utils/navigation.disabled";
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 {CURRENCIES} from "@/resources/paypal";
import {BsTrash} from "react-icons/bs";
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";
import {useEffect, useState, useMemo} from "react";
import {AgentUser, CorporateUser, User} from "@/interfaces/user";
import { useEffect, useState, useMemo } from "react";
import { AgentUser, CorporateUser, User } from "@/interfaces/user";
import UserCard from "@/components/UserCard";
import Modal from "@/components/Modal";
import clsx from "clsx";
@@ -26,15 +26,15 @@ import Input from "@/components/Low/Input";
import ReactDatePicker from "react-datepicker";
import moment from "moment";
import PaymentAssetManager from "@/components/PaymentAssetManager";
import {toFixedNumber} from "@/utils/number";
import {CSVLink} from "react-csv";
import {Tab} from "@headlessui/react";
import {useListSearch} from "@/hooks/useListSearch";
import {checkAccess, getTypesOfUser} from "@/utils/permissions";
import { toFixedNumber } from "@/utils/number";
import { CSVLink } from "react-csv";
import { Tab } from "@headlessui/react";
import { useListSearch } from "@/hooks/useListSearch";
import { checkAccess, getTypesOfUser } from "@/utils/permissions";
import { requestUser } from "@/utils/api";
import { redirect } from "@/utils";
export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
const user = await requestUser(req, res)
if (!user) return redirect("/login")
@@ -43,18 +43,18 @@ export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
}
return {
props: {user},
props: { user },
};
}, sessionOptions);
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());
const {users} = useUsers();
const { users } = useUsers();
const price = corporate?.corporateInformation?.payment?.value || 0;
const commission = corporate?.corporateInformation?.payment?.commission || 0;
@@ -101,13 +101,13 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
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.name} - ${user.email}`,
}))}
defaultValue={{value: "undefined", label: "Select an account"}}
defaultValue={{ value: "undefined", label: "Select an account" }}
onChange={(value) => setCorporate((value as any)?.meta ?? undefined)}
menuPortalTarget={document?.body}
styles={{
menuPortal: (base) => ({...base, zIndex: 9999}),
menuPortal: (base) => ({ ...base, zIndex: 9999 }),
control: (styles) => ({
...styles,
paddingLeft: "4px",
@@ -129,10 +129,10 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
<div className="flex flex-col gap-3 w-full">
<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}) => ({
options={CURRENCIES.map(({ label, currency }) => ({
value: currency,
label,
}))}
@@ -140,14 +140,14 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
value: currency || "EUR",
label: CURRENCIES.find((c) => c.currency === currency)?.label || "Euro",
}}
onChange={() => {}}
onChange={() => { }}
value={{
value: currency || "EUR",
label: CURRENCIES.find((c) => c.currency === currency)?.label || "Euro",
}}
menuPortalTarget={document?.body}
styles={{
menuPortal: (base) => ({...base, zIndex: 9999}),
menuPortal: (base) => ({ ...base, zIndex: 9999 }),
control: (styles) => ({
...styles,
paddingLeft: "4px",
@@ -171,7 +171,7 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
<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 />
<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>
@@ -277,16 +277,16 @@ 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>();
const [agent, setAgent] = useState<User>();
const {user} = useUser({redirectTo: "/login"});
const {users, reload: reloadUsers} = useUsers();
const {payments: originalPayments, reload: reloadPayment} = usePayments();
const {payments: paypalPayments, reload: reloadPaypalPayment} = usePaypalPayments();
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());
@@ -331,11 +331,11 @@ export default function PaymentRecord() {
...(!agent
? []
: [
{
id: "agent-filter",
filter: (p: Payment) => p.agent === agent.id,
},
]),
{
id: "agent-filter",
filter: (p: Payment) => p.agent === agent.id,
},
]),
]);
}, [agent]);
@@ -345,18 +345,18 @@ export default function PaymentRecord() {
...(!corporate
? []
: [
{
id: "corporate-filter",
filter: (p: Payment) => p.corporate === corporate.id,
},
]),
{
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]);
@@ -366,11 +366,11 @@ export default function PaymentRecord() {
...(typeof commissionTransfer !== "boolean"
? []
: [
{
id: "commissionTransfer",
filter: (p: Payment) => !p.commissionTransfer === commissionTransfer,
},
]),
{
id: "commissionTransfer",
filter: (p: Payment) => !p.commissionTransfer === commissionTransfer,
},
]),
]);
}, [commissionTransfer]);
@@ -380,11 +380,11 @@ export default function PaymentRecord() {
...(typeof corporateTransfer !== "boolean"
? []
: [
{
id: "corporateTransfer",
filter: (p: Payment) => !p.corporateTransfer === corporateTransfer,
},
]),
{
id: "corporateTransfer",
filter: (p: Payment) => !p.corporateTransfer === corporateTransfer,
},
]),
]);
}, [corporateTransfer]);
@@ -395,7 +395,7 @@ export default function PaymentRecord() {
const updatePayment = (payment: Payment, key: string, value: any) => {
axios
.patch(`api/payments/${payment.id}`, {...payment, [key]: value})
.patch(`api/payments/${payment.id}`, { ...payment, [key]: value })
.then(() => toast.success("Updated the payment"))
.finally(reload);
};
@@ -540,7 +540,7 @@ export default function PaymentRecord() {
switch (key) {
case "agentCommission": {
const value = info.getValue();
return {value: `${value}%`};
return { value: `${value}%` };
}
case "agent": {
const user = users.find((x) => x.id === info.row.original.agent) as AgentUser;
@@ -553,18 +553,18 @@ export default function PaymentRecord() {
case "amount": {
const value = info.getValue();
const numberValue = toFixedNumber(value, 2);
return {value: numberValue};
return { value: numberValue };
}
case "date": {
const value = info.getValue();
return {value: moment(value).format("DD/MM/YYYY")};
return { value: moment(value).format("DD/MM/YYYY") };
}
case "corporate": {
const specificValue = info.row.original.corporate;
const user = users.find((x) => x.id === specificValue) as CorporateUser;
return {
user,
value: user?.corporateInformation.companyInformation.name || user?.name,
value: user?.name,
};
}
case "currency": {
@@ -576,7 +576,7 @@ export default function PaymentRecord() {
case "corporateId":
default: {
const value = info.getValue();
return {value};
return { value };
}
}
};
@@ -588,7 +588,7 @@ export default function PaymentRecord() {
header: "Country Manager",
id: "agent",
cell: (info) => {
const {user, value} = columHelperValue(info.column.id, info);
const { user, value } = columHelperValue(info.column.id, info);
return (
<div
className={clsx(
@@ -604,7 +604,7 @@ export default function PaymentRecord() {
header: "Commission",
id: "agentCommission",
cell: (info) => {
const {value} = columHelperValue(info.column.id, info);
const { value } = columHelperValue(info.column.id, info);
return <>{value}</>;
},
}),
@@ -612,7 +612,7 @@ export default function PaymentRecord() {
header: "Commission Value",
id: "agentValue",
cell: (info) => {
const {value} = columHelperValue(info.column.id, info);
const { value } = columHelperValue(info.column.id, info);
const finalValue = `${value} ${info.row.original.currency}`;
return <span>{finalValue}</span>;
},
@@ -626,7 +626,7 @@ export default function PaymentRecord() {
header: "Corporate ID",
id: "corporateId",
cell: (info) => {
const {value} = columHelperValue(info.column.id, info);
const { value } = columHelperValue(info.column.id, info);
return value;
},
}),
@@ -634,7 +634,7 @@ export default function PaymentRecord() {
header: "Corporate",
id: "corporate",
cell: (info) => {
const {user, value} = columHelperValue(info.column.id, info);
const { user, value } = columHelperValue(info.column.id, info);
return (
<div
className={clsx(
@@ -650,7 +650,7 @@ export default function PaymentRecord() {
header: "Date",
id: "date",
cell: (info) => {
const {value} = columHelperValue(info.column.id, info);
const { value } = columHelperValue(info.column.id, info);
return <span>{value}</span>;
},
}),
@@ -658,7 +658,7 @@ export default function PaymentRecord() {
header: "Amount",
id: "amount",
cell: (info) => {
const {value} = columHelperValue(info.column.id, 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>;
@@ -669,7 +669,7 @@ export default function PaymentRecord() {
header: "Paid",
id: "isPaid",
cell: (info) => {
const {value} = columHelperValue(info.column.id, info);
const { value } = columHelperValue(info.column.id, info);
return (
<Checkbox
@@ -691,7 +691,7 @@ export default function PaymentRecord() {
{
header: "",
id: "actions",
cell: ({row}: {row: {original: Payment}}) => {
cell: ({ row }: { row: { original: Payment } }) => {
return (
<div className="flex gap-4">
{user?.type !== "agent" && (
@@ -720,7 +720,7 @@ export default function PaymentRecord() {
})
.map((p) => {
const user = users.find((x) => x.id === p.userId) as User;
return {...p, name: user?.name, email: user?.email};
return { ...p, name: user?.name, email: user?.email };
}),
[paypalPayments, users, startDatePaymob, endDatePaymob],
);
@@ -730,7 +730,7 @@ export default function PaymentRecord() {
header: "Order ID",
id: "orderId",
cell: (info) => {
const {value} = columHelperValue(info.column.id, info);
const { value } = columHelperValue(info.column.id, info);
return <span>{value}</span>;
},
}),
@@ -738,7 +738,7 @@ export default function PaymentRecord() {
header: "Status",
id: "status",
cell: (info) => {
const {value} = columHelperValue(info.column.id, info);
const { value } = columHelperValue(info.column.id, info);
return <span>{value}</span>;
},
}),
@@ -746,7 +746,7 @@ export default function PaymentRecord() {
header: "User Name",
id: "name",
cell: (info) => {
const {value} = columHelperValue(info.column.id, info);
const { value } = columHelperValue(info.column.id, info);
return <span>{value}</span>;
},
}),
@@ -754,7 +754,7 @@ export default function PaymentRecord() {
header: "Email",
id: "email",
cell: (info) => {
const {value} = columHelperValue(info.column.id, info);
const { value } = columHelperValue(info.column.id, info);
return <span>{value}</span>;
},
}),
@@ -762,7 +762,7 @@ export default function PaymentRecord() {
header: "Amount",
id: "value",
cell: (info) => {
const {value} = columHelperValue(info.column.id, info);
const { value } = columHelperValue(info.column.id, info);
const finalValue = `${value} ${info.row.original.currency}`;
return <span>{finalValue}</span>;
},
@@ -771,7 +771,7 @@ export default function PaymentRecord() {
header: "Date",
id: "createdAt",
cell: (info) => {
const {value} = columHelperValue(info.column.id, info);
const { value } = columHelperValue(info.column.id, info);
return <span>{moment(value).format("DD/MM/YYYY")}</span>;
},
}),
@@ -779,13 +779,13 @@ export default function PaymentRecord() {
header: "Expiration Date",
id: "subscriptionExpirationDate",
cell: (info) => {
const {value} = columHelperValue(info.column.id, info);
const { value } = columHelperValue(info.column.id, info);
return <span>{moment(value).format("DD/MM/YYYY")}</span>;
},
}),
];
const {rows: filteredRows, renderSearch} = useListSearch(paypalFilterRows, updatedPaypalPayments);
const { rows: filteredRows, renderSearch } = useListSearch(paypalFilterRows, updatedPaypalPayments);
const paypalTable = useReactTable({
data: filteredRows.sort((a, b) => moment(b.createdAt).diff(moment(a.createdAt), "second")),
@@ -809,7 +809,7 @@ export default function PaymentRecord() {
}}
user={selectedCorporateUser}
disabled
disabledFields={{countryManager: true}}
disabledFields={{ countryManager: true }}
/>
</div>
)}
@@ -859,7 +859,7 @@ export default function PaymentRecord() {
return [...accm, ...data];
}, []);
const {rows} = currentTable.getRowModel();
const { rows } = currentTable.getRowModel();
const finalColumns = [
...columns,
@@ -872,8 +872,8 @@ export default function PaymentRecord() {
return {
columns: finalColumns,
rows: rows.map((row) => {
return finalColumns.reduce((accm, {key}) => {
const {value} = columHelperValue(key, {
return finalColumns.reduce((accm, { key }) => {
const { value } = columHelperValue(key, {
row,
getValue: () => row.getValue(key),
});
@@ -886,7 +886,7 @@ export default function PaymentRecord() {
};
};
const {rows: csvRows, columns: csvColumns} = getCSVData();
const { rows: csvRows, columns: csvColumns } = getCSVData();
const renderTable = (table: Table<any>) => (
<table className="rounded-xl h-full bg-mti-purple-ultralight/40 w-full">
@@ -958,7 +958,7 @@ export default function PaymentRecord() {
<Tab.Group selectedIndex={selectedIndex} onChange={setSelectedIndex}>
<Tab.List className="flex space-x-1 rounded-xl bg-mti-purple-ultralight/40 p-1">
<Tab
className={({selected}) =>
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",
@@ -970,7 +970,7 @@ export default function PaymentRecord() {
</Tab>
{checkAccess(user, ["developer", "admin"]) && (
<Tab
className={({selected}) =>
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",
@@ -996,24 +996,22 @@ export default function PaymentRecord() {
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.name} - ${user.email}`,
}))}
defaultValue={
user.type === "corporate"
? {
value: user.id,
meta: user,
label: `${user.corporateInformation?.companyInformation?.name || user.name} - ${
user.email
}`,
}
value: user.id,
meta: user,
label: `${user.name} - ${user.email}`,
}
: undefined
}
isDisabled={user.type === "corporate"}
onChange={(value) => setCorporate((value as any)?.meta ?? undefined)}
menuPortalTarget={document?.body}
styles={{
menuPortal: (base) => ({...base, zIndex: 9999}),
menuPortal: (base) => ({ ...base, zIndex: 9999 }),
control: (styles) => ({
...styles,
paddingLeft: "4px",
@@ -1049,15 +1047,15 @@ export default function PaymentRecord() {
value={
agent
? {
value: agent?.id,
label: `${agent.name} - ${agent.email}`,
}
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}),
menuPortal: (base) => ({ ...base, zIndex: 9999 }),
control: (styles) => ({
...styles,
paddingLeft: "4px",
@@ -1092,7 +1090,7 @@ export default function PaymentRecord() {
}}
menuPortalTarget={document?.body}
styles={{
menuPortal: (base) => ({...base, zIndex: 9999}),
menuPortal: (base) => ({ ...base, zIndex: 9999 }),
control: (styles) => ({
...styles,
paddingLeft: "4px",
@@ -1149,7 +1147,7 @@ export default function PaymentRecord() {
}}
menuPortalTarget={document?.body}
styles={{
menuPortal: (base) => ({...base, zIndex: 9999}),
menuPortal: (base) => ({ ...base, zIndex: 9999 }),
control: (styles) => ({
...styles,
paddingLeft: "4px",
@@ -1183,7 +1181,7 @@ export default function PaymentRecord() {
}}
menuPortalTarget={document?.body}
styles={{
menuPortal: (base) => ({...base, zIndex: 9999}),
menuPortal: (base) => ({ ...base, zIndex: 9999 }),
control: (styles) => ({
...styles,
paddingLeft: "4px",