Merged in feature-payment-corporate-id (pull request #10)

Replaced display of payment id with corporate's id

Approved-by: Tiago Ribeiro

src/pages/payment-record.tsx

@@ -8,7 +8,7 @@ import Layout from "@/components/High/Layout";
 import {shouldRedirectHome} from "@/utils/navigation.disabled";
 import usePayments from "@/hooks/usePayments";
 import {Payment} from "@/interfaces/paypal";
-import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
+import {CellContext, createColumnHelper, flexRender, getCoreRowModel, HeaderGroup, useReactTable} from "@tanstack/react-table";
 import {CURRENCIES} from "@/resources/paypal";
 import {BsTrash} from "react-icons/bs";
 import axios from "axios";
@@ -251,6 +251,24 @@ const IS_PAID_OPTIONS = [
 	label: 'Paid',
 },
 ];
+
+const CSV_WHITELISTED_KEYS = [
+	'corporateId',
+	'corporate',
+	'date',
+	'amount',
+	'agent',
+	'agentCommission',
+	'agentValue',
+	'isPaid',
+];
+
+interface SimpleCSVColumn {
+	key: string,
+	label: string,
+	index: number,
+};
+
 export default function PaymentRecord() {
 	const [selectedCorporateUser, setSelectedCorporateUser] = useState<User>();
 	const [selectedAgentUser, setSelectedAgentUser] = useState<User>();
@@ -453,24 +471,75 @@ export default function PaymentRecord() {
 
 		return [];
 	};
+
+	const columHelperValue = (key: string, info: any) => {
+		switch(key) {
+			case 'agentCommission': {
+				const value = info.getValue();
+				return { value: `${value}%`};
+			}
+			case 'agent': {
+				const user = users.find((x) => x.id === info.row.original.agent) as AgentUser;
+				return {
+					value: user?.name,
+					user,
+				}
+			}
+			case 'agentValue':
+			case 'amount': {
+				const value = info.getValue();
+				const numberValue = toFixedNumber(value, 2)
+				return { value: numberValue }
+			}
+			case 'date': {
+				const value = info.getValue();
+				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,
+				};
+			}
+			case 'currency': {
+				return {
+					value: info.row.original.currency,
+				};
+			}
+			case 'isPaid':
+			case 'corporateId':
+			default: {
+				const value = info.getValue();
+				return { value };
+			}
+		}
+
+	}
+
+
 	const defaultColumns = [
-		columnHelper.accessor("id", {
+		columnHelper.accessor("corporate", {
-			header: "ID",
+			header: "Corporate ID",
-			id: "id",
+			id: 'corporateId',
-			cell: (info) => info.getValue(),
+			cell: (info) => {
+				const { value } = columHelperValue(info.column.id, info);
+				return value;
+			},
 		}),
 		columnHelper.accessor("corporate", {
 			header: "Corporate",
 			id: "corporate",
 			cell: (info) => {
-				const user = users.find((x) => x.id === info.row.original.corporate) as CorporateUser;
+				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",
 						)}
 						onClick={() => setSelectedCorporateUser(user)}>
-						{user?.corporateInformation.companyInformation.name || user?.name}
+						{value}
 					</div>
 				);
 			},
@@ -478,52 +547,66 @@ export default function PaymentRecord() {
 		columnHelper.accessor("date", {
 			header: "Date",
 			id: "date",
-			cell: (info) => <span>{moment(info.getValue()).format("DD/MM/YYYY")}</span>,
+			cell: (info) => {
+				const { value } = columHelperValue(info.column.id, info);
+				return <span>{value}</span>;
+			},
 		}),
 		columnHelper.accessor("value", {
 			header: "Amount",
 			id: "amount",
-			cell: (info) => (
+			cell: (info) => {
-				<span>
+				const { value } = columHelperValue(info.column.id, info);
-					{toFixedNumber(info.getValue(), 2)} {CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label}
+				const currency = CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label
-				</span>
+				const finalValue = `${value} ${currency}`;
-			),
+				return <span>{finalValue}</span>;
+			}
 		}),
 		columnHelper.accessor("agent", {
 			header: "Country Manager",
 			id: "agent",
-			cell: (info) => (
+			cell: (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")}
-					onClick={() => setSelectedAgentUser(users.find((x) => x.id === info.row.original.agent))}>
+						onClick={() => setSelectedAgentUser(user)}>
-					{(users.find((x) => x.id === info.row.original.agent) as AgentUser)?.name}
+						{value}
 					</div>
-			),
+				);
+			},
 		}),
 		columnHelper.accessor("agentCommission", {
 			header: "Commission",
 			id: "agentCommission",
-			cell: (info) => <>{info.getValue()}%</>,
+			cell: (info) => {
+				const { value } = columHelperValue(info.column.id, info);
+				return <>{value}</>
+			},
 		}),
 		columnHelper.accessor("agentValue", {
 			header: "Commission Value",
 			id: "agentValue",
-			cell: (info) => (
+			cell: (info) => {
-				<span>
+				const { value } = columHelperValue(info.column.id, info);
-					{toFixedNumber(info.getValue(), 2)} {CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label}
+				const currency = CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label
-				</span>
+				const finalValue = `${value} ${currency}`;
-			),
+				return <span>{finalValue}</span>;
+			},
 		}),
 		columnHelper.accessor("isPaid", {
 			header: "Paid",
 			id: "isPaid",
-			cell: (info) => (
+			cell: (info) => {
+				const { value } = columHelperValue(info.column.id, info);
+				return (
 					<Checkbox
-					isChecked={info.getValue()}
+						isChecked={value}
 						onChange={(e) => (user?.type !== "agent" ? updatePayment(info.row.original, "isPaid", e) : null)}>
 						<span></span>
 					</Checkbox>
-			),
+				);
+			},
 		}),
 		...getFileAssetsColumns(),
 		{
@@ -598,6 +681,50 @@ export default function PaymentRecord() {
 		return null;
 	}
 	
+
+	const getCSVData = () => {
+		const columns = table.getHeaderGroups().reduce((accm: SimpleCSVColumn[], group: HeaderGroup<Payment>) => {
+			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,
+			];
+		}, []);
+
+		const { rows } = table.getRowModel();
+	
+		const finalColumns = [
+			...columns,
+			{
+				key: 'currency',
+				label: 'Currency',
+			},
+		];
+
+		return {
+			columns: finalColumns,
+			rows: rows.map((row) => {
+				return finalColumns.reduce((accm, { key }) => {
+					const { value } = columHelperValue(key, {
+						row,
+						getValue: () => row.getValue(key),
+					});
+					return {
+						...accm, 
+						[key]: value,
+					};
+				}, {});
+			}),
+		};
+	}
+
+	const { rows: csvRows, columns: csvColumns } = getCSVData();
 	return (
 		<>
 			<Head>
@@ -627,13 +754,8 @@ export default function PaymentRecord() {
 							<div className="flex justify-end gap-2">
 								<Button className="max-w-[200px]" variant="outline">
 									<CSVLink
-										data={displayPayments}
+										data={csvRows}
-										headers={defaultColumns
+										headers={csvColumns}
-											.filter((e) => e.header)
-											.map((e) => ({
-												label: e.header?.toString() || "",
-												key: e.id || "",
-											}))}
 										filename="payment-records.csv">
 										Download CSV
 									</CSVLink>