From 06dc92fdaaca7657852ccbf4a3df596f47127fba Mon Sep 17 00:00:00 2001 From: Tiago Ribeiro Date: Wed, 3 Jan 2024 10:33:37 +0000 Subject: [PATCH] Added a confirmation for the payment record --- src/pages/payment-record.tsx | 193 +++++++++++++++-------------------- 1 file changed, 85 insertions(+), 108 deletions(-) diff --git a/src/pages/payment-record.tsx b/src/pages/payment-record.tsx index 28e90d25..580500a7 100644 --- a/src/pages/payment-record.tsx +++ b/src/pages/payment-record.tsx @@ -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: () =
- {}} - type="number" - value={price} - defaultValue={0} - className="col-span-3" - disabled - /> + {}} type="number" value={price} defaultValue={0} className="col-span-3" disabled /> {}} - type="number" - defaultValue={0} - value={commission} - disabled - /> + {}} type="number" defaultValue={0} value={commission} disabled />
@@ -240,34 +225,27 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () = }; const IS_PAID_OPTIONS = [ -{ - value: null, - label: 'All', -}, { - value: false, - label: 'Unpaid', -}, { - value: true, - label: 'Paid', -}, + { + value: null, + label: "All", + }, + { + value: false, + label: "Unpaid", + }, + { + value: true, + 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(); @@ -283,7 +261,7 @@ export default function PaymentRecord() { const {users, reload: reloadUsers} = useUsers(); const {payments: originalPayments, reload: reloadPayment} = usePayments(); const [startDate, setStartDate] = useState(moment("01/01/2023").toDate()); - const [endDate, setEndDate] = useState(moment().endOf('day').toDate()); + const [endDate, setEndDate] = useState(moment().endOf("day").toDate()); const [paid, setPaid] = useState(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 (
{ - const { value } = columHelperValue(info.column.id, info); + const {value} = columHelperValue(info.column.id, info); return {value}; }, }), @@ -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 {finalValue}; - } + }, }), 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 (
setSelectedAgentUser(user)}> {value}
@@ -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 {finalValue}; }, @@ -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 ( (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 + }> ); @@ -633,8 +617,8 @@ export default function PaymentRecord() { }); const getUserModal = () => { - if(user) { - if(selectedCorporateUser) { + if (user) { + if (selectedCorporateUser) { return ( setSelectedCorporateUser(undefined)}> <> @@ -656,7 +640,7 @@ export default function PaymentRecord() { ); } - if(selectedAgentUser) { + if (selectedAgentUser) { return ( setSelectedAgentUser(undefined)}> <> @@ -679,52 +663,48 @@ export default function PaymentRecord() { } return null; - } - + }; const getCSVData = () => { const columns = table.getHeaderGroups().reduce((accm: SimpleCSVColumn[], group: HeaderGroup) => { const whitelistedColumns = group.headers.filter((header) => CSV_WHITELISTED_KEYS.includes(header.id)); - + const data = whitelistedColumns.map((data) => ({ key: data.column.columnDef.id, 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), }); return { - ...accm, + ...accm, [key]: value, }; }, {}); }), }; - } + }; - const { rows: csvRows, columns: csvColumns } = getCSVData(); + const {rows: csvRows, columns: csvColumns} = getCSVData(); return ( <> @@ -753,10 +733,7 @@ export default function PaymentRecord() { {(user.type === "developer" || user.type === "admin") && (
@@ -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,16 +853,16 @@ 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); }} /> -
+