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

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

@@ -68,10 +68,10 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
const price = corporate?.corporateInformation?.payment?.value || 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(() => {
if(corporate?.corporateInformation?.referralAgent) {
if (corporate?.corporateInformation?.referralAgent) {
return users.find((u) => u.id === corporate.corporateInformation.referralAgent);
}
@@ -137,15 +137,7 @@ 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 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}))}
@@ -176,14 +168,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>
@@ -240,34 +225,27 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
};
const IS_PAID_OPTIONS = [
{
{
value: null,
label: 'All',
}, {
label: "All",
},
{
value: false,
label: 'Unpaid',
}, {
label: "Unpaid",
},
{
value: true,
label: 'Paid',
},
label: "Paid",
},
];
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,
label: string,
index: number,
};
key: string;
label: string;
index: number;
}
export default function PaymentRecord() {
const [selectedCorporateUser, setSelectedCorporateUser] = useState<User>();
@@ -283,7 +261,7 @@ export default function PaymentRecord() {
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 [endDate, setEndDate] = useState<Date | null>(moment().endOf("day").toDate());
const [paid, setPaid] = useState<Boolean | null>(IS_PAID_OPTIONS[0].value);
const reload = () => {
reloadUsers();
@@ -331,8 +309,8 @@ 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]);
const updatePayment = (payment: Payment, key: string, value: any) => {
@@ -473,29 +451,29 @@ export default function PaymentRecord() {
};
const columHelperValue = (key: string, info: any) => {
switch(key) {
case 'agentCommission': {
switch (key) {
case "agentCommission": {
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;
return {
value: user?.name,
user,
};
}
}
case 'agentValue':
case 'amount': {
case "agentValue":
case "amount": {
const value = info.getValue();
const numberValue = toFixedNumber(value, 2)
return { value: numberValue }
const numberValue = toFixedNumber(value, 2);
return {value: numberValue};
}
case 'date': {
case "date": {
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 user = users.find((x) => x.id === specificValue) as CorporateUser;
return {
@@ -503,28 +481,26 @@ export default function PaymentRecord() {
value: user?.corporateInformation.companyInformation.name || user?.name,
};
}
case 'currency': {
case "currency": {
return {
value: info.row.original.currency,
};
}
case 'isPaid':
case 'corporateId':
case "isPaid":
case "corporateId":
default: {
const value = info.getValue();
return { value };
return {value};
}
}
}
};
const defaultColumns = [
columnHelper.accessor("corporate", {
header: "Corporate ID",
id: 'corporateId',
id: "corporateId",
cell: (info) => {
const { value } = columHelperValue(info.column.id, info);
const {value} = columHelperValue(info.column.id, info);
return value;
},
}),
@@ -532,7 +508,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(
@@ -548,7 +524,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>;
},
}),
@@ -556,20 +532,22 @@ export default function PaymentRecord() {
header: "Amount",
id: "amount",
cell: (info) => {
const { value } = columHelperValue(info.column.id, info);
const currency = CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label
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>;
}
},
}),
columnHelper.accessor("agent", {
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("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)}>
{value}
</div>
@@ -580,16 +558,16 @@ export default function PaymentRecord() {
header: "Commission",
id: "agentCommission",
cell: (info) => {
const { value } = columHelperValue(info.column.id, info);
return <>{value}</>
const {value} = columHelperValue(info.column.id, info);
return <>{value}</>;
},
}),
columnHelper.accessor("agentValue", {
header: "Commission Value",
id: "agentValue",
cell: (info) => {
const { value } = columHelperValue(info.column.id, info);
const currency = CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label
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>;
},
@@ -598,11 +576,17 @@ 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
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>
</Checkbox>
);
@@ -633,8 +617,8 @@ export default function PaymentRecord() {
});
const getUserModal = () => {
if(user) {
if(selectedCorporateUser) {
if (user) {
if (selectedCorporateUser) {
return (
<Modal isOpen={!!selectedCorporateUser} onClose={() => setSelectedCorporateUser(undefined)}>
<>
@@ -656,7 +640,7 @@ export default function PaymentRecord() {
);
}
if(selectedAgentUser) {
if (selectedAgentUser) {
return (
<Modal isOpen={!!selectedAgentUser} onClose={() => setSelectedAgentUser(undefined)}>
<>
@@ -679,8 +663,7 @@ export default function PaymentRecord() {
}
return null;
}
};
const getCSVData = () => {
const columns = table.getHeaderGroups().reduce((accm: SimpleCSVColumn[], group: HeaderGroup<Payment>) => {
@@ -691,27 +674,24 @@ export default function PaymentRecord() {
label: data.column.columnDef.header,
})) as SimpleCSVColumn[];
return [
...accm,
...data,
];
return [...accm, ...data];
}, []);
const { rows } = table.getRowModel();
const {rows} = table.getRowModel();
const finalColumns = [
...columns,
{
key: 'currency',
label: 'Currency',
key: "currency",
label: "Currency",
},
];
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),
});
@@ -722,9 +702,9 @@ export default function PaymentRecord() {
}, {});
}),
};
}
};
const { rows: csvRows, columns: csvColumns } = getCSVData();
const {rows: csvRows, columns: csvColumns} = getCSVData();
return (
<>
<Head>
@@ -753,10 +733,7 @@ export default function PaymentRecord() {
{(user.type === "developer" || user.type === "admin") && (
<div className="flex justify-end gap-2">
<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>
@@ -841,7 +818,7 @@ export default function PaymentRecord() {
options={IS_PAID_OPTIONS}
value={IS_PAID_OPTIONS.find((e) => e.value === paid)}
onChange={(value) => {
if(value) {
if (value) {
setPaid(value.value);
}
}}
@@ -876,10 +853,10 @@ export default function PaymentRecord() {
filterDate={(date: Date) => moment(date).isSameOrBefore(moment(new Date()))}
onChange={([initialDate, finalDate]: [Date, Date]) => {
setStartDate(initialDate ?? moment("01/01/2023").toDate());
if(finalDate) {
if (finalDate) {
// basicly selecting a final day works as if I'm selecting the first
// minute of that day. this way it covers the whole day
setEndDate(moment(finalDate).endOf('day').toDate());
setEndDate(moment(finalDate).endOf("day").toDate());
return;
}
setEndDate(null);