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 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) {
@@ -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>
@@ -242,32 +227,25 @@ 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) => {
@@ -474,28 +452,28 @@ export default function PaymentRecord() {
const columHelperValue = (key: string, info: any) => {
switch (key) {
case 'agentCommission': {
case "agentCommission": {
const value = info.getValue();
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")};
}
case 'corporate': {
case "corporate": {
const specificValue = info.row.original.corporate;
const user = users.find((x) => x.id === specificValue) as CorporateUser;
return {
@@ -503,26 +481,24 @@ 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};
}
}
}
};
const defaultColumns = [
columnHelper.accessor("corporate", {
header: "Corporate ID",
id: 'corporateId',
id: "corporateId",
cell: (info) => {
const {value} = columHelperValue(info.column.id, info);
return value;
@@ -557,10 +533,10 @@ 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>;
}
},
}),
columnHelper.accessor("agent", {
header: "Country Manager",
@@ -569,7 +545,9 @@ export default function PaymentRecord() {
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>
@@ -581,7 +559,7 @@ export default function PaymentRecord() {
id: "agentCommission",
cell: (info) => {
const {value} = columHelperValue(info.column.id, info);
return <>{value}</>
return <>{value}</>;
},
}),
columnHelper.accessor("agentValue", {
@@ -589,7 +567,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>;
},
@@ -602,7 +580,13 @@ export default function PaymentRecord() {
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>
);
@@ -679,8 +663,7 @@ export default function PaymentRecord() {
}
return null;
}
};
const getCSVData = () => {
const columns = table.getHeaderGroups().reduce((accm: SimpleCSVColumn[], group: HeaderGroup<Payment>) => {
@@ -691,10 +674,7 @@ export default function PaymentRecord() {
label: data.column.columnDef.header,
})) as SimpleCSVColumn[];
return [
...accm,
...data,
];
return [...accm, ...data];
}, []);
const {rows} = table.getRowModel();
@@ -702,8 +682,8 @@ export default function PaymentRecord() {
const finalColumns = [
...columns,
{
key: 'currency',
label: 'Currency',
key: "currency",
label: "Currency",
},
];
@@ -722,7 +702,7 @@ export default function PaymentRecord() {
}, {});
}),
};
}
};
const {rows: csvRows, columns: csvColumns} = getCSVData();
return (
@@ -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>
@@ -879,7 +856,7 @@ export default function PaymentRecord() {
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);