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

Added a confirmation for the payment record

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-01-03 10:33:37 +00:00
parent c9cac3539c
commit 06dc92fdaa
1 changed files with 85 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -68,7 +68,7 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
const price = corporate?.corporateInformation?.payment?.value || 0; const price = corporate?.corporateInformation?.payment?.value || 0;
const commission = corporate?.corporateInformation?.payment?.commission || 0; const commission = corporate?.corporateInformation?.payment?.commission || 0;
const currency = corporate?.corporateInformation?.payment?.currency || 'EUR'; const currency = corporate?.corporateInformation?.payment?.currency || "EUR";
const referralAgent = useMemo(() => { const referralAgent = useMemo(() => {
if (corporate?.corporateInformation?.referralAgent) { if (corporate?.corporateInformation?.referralAgent) {
@@ -137,15 +137,7 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
<div className="flex flex-col gap-3 w-full"> <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"> <div className="w-full grid grid-cols-5 gap-2">
<Input <Input name="paymentValue" onChange={() => {}} type="number" value={price} defaultValue={0} className="col-span-3" disabled />
name="paymentValue"
onChange={() => {}}
type="number"
value={price}
defaultValue={0}
className="col-span-3"
disabled
/>
<Select <Select
className="px-4 col-span-2 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" className="px-4 col-span-2 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={CURRENCIES.map(({label, currency}) => ({value: currency, label}))} options={CURRENCIES.map(({label, currency}) => ({value: currency, label}))}
@@ -176,14 +168,7 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
<div className="flex gap-4 w-full"> <div className="flex gap-4 w-full">
<div className="flex flex-col w-full gap-3"> <div className="flex flex-col w-full gap-3">
<label className="font-normal text-base text-mti-gray-dim">Commission *</label> <label className="font-normal text-base text-mti-gray-dim">Commission *</label>
<Input <Input name="commission" onChange={() => {}} type="number" defaultValue={0} value={commission} disabled />
name="commission"
onChange={() => {}}
type="number"
defaultValue={0}
value={commission}
disabled
/>
</div> </div>
<div className="flex flex-col w-full gap-3"> <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>
@@ -242,32 +227,25 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
const IS_PAID_OPTIONS = [ const IS_PAID_OPTIONS = [
{ {
value: null, value: null,
label: 'All', label: "All",
}, { },
{
value: false, value: false,
label: 'Unpaid', label: "Unpaid",
}, { },
{
value: true, value: true,
label: 'Paid', label: "Paid",
}, },
]; ];
const CSV_WHITELISTED_KEYS = [ const CSV_WHITELISTED_KEYS = ["corporateId", "corporate", "date", "amount", "agent", "agentCommission", "agentValue", "isPaid"];
'corporateId',
'corporate',
'date',
'amount',
'agent',
'agentCommission',
'agentValue',
'isPaid',
];
interface SimpleCSVColumn { interface SimpleCSVColumn {
key: string, key: string;
label: string, label: string;
index: number, index: number;
}; }
export default function PaymentRecord() { export default function PaymentRecord() {
const [selectedCorporateUser, setSelectedCorporateUser] = useState<User>(); const [selectedCorporateUser, setSelectedCorporateUser] = useState<User>();
@@ -283,7 +261,7 @@ export default function PaymentRecord() {
const {users, reload: reloadUsers} = useUsers(); const {users, reload: reloadUsers} = useUsers();
const {payments: originalPayments, reload: reloadPayment} = usePayments(); const {payments: originalPayments, reload: reloadPayment} = usePayments();
const [startDate, setStartDate] = useState<Date | null>(moment("01/01/2023").toDate()); const [startDate, setStartDate] = useState<Date | null>(moment("01/01/2023").toDate());
const [endDate, setEndDate] = useState<Date | null>(moment().endOf('day').toDate()); const [endDate, setEndDate] = useState<Date | null>(moment().endOf("day").toDate());
const [paid, setPaid] = useState<Boolean | null>(IS_PAID_OPTIONS[0].value); const [paid, setPaid] = useState<Boolean | null>(IS_PAID_OPTIONS[0].value);
const reload = () => { const reload = () => {
reloadUsers(); reloadUsers();
@@ -331,8 +309,8 @@ export default function PaymentRecord() {
useEffect(() => { useEffect(() => {
setFilters((prev) => [ setFilters((prev) => [
...prev.filter((x) => x.id !== "paid"), ...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]); }, [paid]);
const updatePayment = (payment: Payment, key: string, value: any) => { const updatePayment = (payment: Payment, key: string, value: any) => {
@@ -474,28 +452,28 @@ export default function PaymentRecord() {
const columHelperValue = (key: string, info: any) => { const columHelperValue = (key: string, info: any) => {
switch (key) { switch (key) {
case 'agentCommission': { case "agentCommission": {
const value = info.getValue(); const value = info.getValue();
return {value: `${value}%`}; return {value: `${value}%`};
} }
case 'agent': { 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 { return {
value: user?.name, value: user?.name,
user, user,
};
} }
} case "agentValue":
case 'agentValue': case "amount": {
case 'amount': {
const value = info.getValue(); const value = info.getValue();
const numberValue = toFixedNumber(value, 2) const numberValue = toFixedNumber(value, 2);
return { value: numberValue } return {value: numberValue};
} }
case 'date': { case "date": {
const value = info.getValue(); const value = info.getValue();
return {value: moment(value).format("DD/MM/YYYY")}; return {value: moment(value).format("DD/MM/YYYY")};
} }
case 'corporate': { case "corporate": {
const specificValue = info.row.original.corporate; const specificValue = info.row.original.corporate;
const user = users.find((x) => x.id === specificValue) as CorporateUser; const user = users.find((x) => x.id === specificValue) as CorporateUser;
return { return {
@@ -503,26 +481,24 @@ export default function PaymentRecord() {
value: user?.corporateInformation.companyInformation.name || user?.name, value: user?.corporateInformation.companyInformation.name || user?.name,
}; };
} }
case 'currency': { case "currency": {
return { return {
value: info.row.original.currency, value: info.row.original.currency,
}; };
} }
case 'isPaid': case "isPaid":
case 'corporateId': case "corporateId":
default: { default: {
const value = info.getValue(); const value = info.getValue();
return {value}; return {value};
} }
} }
};
}
const defaultColumns = [ const defaultColumns = [
columnHelper.accessor("corporate", { columnHelper.accessor("corporate", {
header: "Corporate ID", header: "Corporate ID",
id: 'corporateId', id: "corporateId",
cell: (info) => { cell: (info) => {
const {value} = columHelperValue(info.column.id, info); const {value} = columHelperValue(info.column.id, info);
return value; return value;
@@ -557,10 +533,10 @@ export default function PaymentRecord() {
id: "amount", id: "amount",
cell: (info) => { 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 currency = CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label;
const finalValue = `${value} ${currency}`; const finalValue = `${value} ${currency}`;
return <span>{finalValue}</span>; return <span>{finalValue}</span>;
} },
}), }),
columnHelper.accessor("agent", { columnHelper.accessor("agent", {
header: "Country Manager", header: "Country Manager",
@@ -569,7 +545,9 @@ export default function PaymentRecord() {
const {user, value} = columHelperValue(info.column.id, info); const {user, value} = columHelperValue(info.column.id, info);
return ( return (
<div <div
className={clsx("underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer")} 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} {value}
</div> </div>
@@ -581,7 +559,7 @@ export default function PaymentRecord() {
id: "agentCommission", id: "agentCommission",
cell: (info) => { cell: (info) => {
const {value} = columHelperValue(info.column.id, info); const {value} = columHelperValue(info.column.id, info);
return <>{value}</> return <>{value}</>;
}, },
}), }),
columnHelper.accessor("agentValue", { columnHelper.accessor("agentValue", {
@@ -589,7 +567,7 @@ export default function PaymentRecord() {
id: "agentValue", id: "agentValue",
cell: (info) => { 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 currency = CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label;
const finalValue = `${value} ${currency}`; const finalValue = `${value} ${currency}`;
return <span>{finalValue}</span>; return <span>{finalValue}</span>;
}, },
@@ -602,7 +580,13 @@ export default function PaymentRecord() {
return ( return (
<Checkbox <Checkbox
isChecked={value} isChecked={value}
onChange={(e) => (user?.type !== "agent" ? updatePayment(info.row.original, "isPaid", e) : null)}> onChange={(e) =>
user?.type !== "agent" && !value
? confirm(`Are you sure you want to consider this payment paid?`)
? updatePayment(info.row.original, "isPaid", e)
: null
: null
}>
<span></span> <span></span>
</Checkbox> </Checkbox>
); );
@@ -679,8 +663,7 @@ export default function PaymentRecord() {
} }
return null; return null;
} };
const getCSVData = () => { const getCSVData = () => {
const columns = table.getHeaderGroups().reduce((accm: SimpleCSVColumn[], group: HeaderGroup<Payment>) => { const columns = table.getHeaderGroups().reduce((accm: SimpleCSVColumn[], group: HeaderGroup<Payment>) => {
@@ -691,10 +674,7 @@ export default function PaymentRecord() {
label: data.column.columnDef.header, label: data.column.columnDef.header,
})) as SimpleCSVColumn[]; })) as SimpleCSVColumn[];
return [ return [...accm, ...data];
...accm,
...data,
];
}, []); }, []);
const {rows} = table.getRowModel(); const {rows} = table.getRowModel();
@@ -702,8 +682,8 @@ export default function PaymentRecord() {
const finalColumns = [ const finalColumns = [
...columns, ...columns,
{ {
key: 'currency', key: "currency",
label: 'Currency', label: "Currency",
}, },
]; ];
@@ -722,7 +702,7 @@ export default function PaymentRecord() {
}, {}); }, {});
}), }),
}; };
} };
const {rows: csvRows, columns: csvColumns} = getCSVData(); const {rows: csvRows, columns: csvColumns} = getCSVData();
return ( return (
@@ -753,10 +733,7 @@ export default function PaymentRecord() {
{(user.type === "developer" || user.type === "admin") && ( {(user.type === "developer" || user.type === "admin") && (
<div className="flex justify-end gap-2"> <div className="flex justify-end gap-2">
<Button className="max-w-[200px]" variant="outline"> <Button className="max-w-[200px]" variant="outline">
<CSVLink <CSVLink data={csvRows} headers={csvColumns} filename="payment-records.csv">
data={csvRows}
headers={csvColumns}
filename="payment-records.csv">
Download CSV Download CSV
</CSVLink> </CSVLink>
</Button> </Button>
@@ -879,7 +856,7 @@ export default function PaymentRecord() {
if (finalDate) { if (finalDate) {
// basicly selecting a final day works as if I'm selecting the first // basicly selecting a final day works as if I'm selecting the first
// minute of that day. this way it covers the whole day // minute of that day. this way it covers the whole day
setEndDate(moment(finalDate).endOf('day').toDate()); setEndDate(moment(finalDate).endOf("day").toDate());
return; return;
} }
setEndDate(null); setEndDate(null);