Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | 4x 65x 65x 65x 65x 65x | import { useMemo } from "react";
import { PaymentFormStatusColumn } from "@features/MerchantPortal/ManageMoney/ManageMoneyTable.atoms";
import { TableColumnType } from "componentsV2/Table/Table.types";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import { useFormatDateInTimezone } from "@utils/date.helpers";
import {
CustomerColumn,
DateColumn,
EventTransactionRow,
MobileAmountColumn,
MobileDescriptionColumn,
PriceColumn,
SubtotalColumn,
TicketNameColumn,
} from "../EventTransactionsTable.atoms";
/**
* PayBuilder 032-b AC006.1 — the Event Detail transactions table columns:
* Date · Customer · Ticket Name · Price (USD) · Subtotal (USD) · Status.
*
* Date is the sortable, default-descending column (AC006.1 "newest first").
* The rest are display-only: the `transaction-items` endpoint does not expose
* sorting for them.
*
* Below `v2_sm` the mockup replaces the grid with a two-part row, so the
* desktop columns are hidden and two mobile-only columns take over.
*/
export const useEventTransactionColumns = () => {
const { formatInTimezone } = useFormatDateInTimezone();
const { isMobileView } = useCustomThemeV2();
const columns: TableColumnType[] = useMemo(
() => [
{
key: "createdAt",
title: "Date",
sortable: true,
columnWidth: 2.4 / 12,
hideColumn: isMobileView,
renderColumn: (row: EventTransactionRow) =>
DateColumn(row, formatInTimezone),
},
{
key: "customer",
title: "Customer",
sortable: false,
columnWidth: 2.6 / 12,
columnType: "double-row",
hideColumn: isMobileView,
renderColumn: CustomerColumn,
},
{
key: "ticketName",
title: "Ticket Name",
sortable: false,
columnWidth: 2.6 / 12,
hideColumn: isMobileView,
renderColumn: TicketNameColumn,
},
{
key: "unitPrice",
title: "Price (USD)",
sortable: false,
columnWidth: 1.4 / 12,
hideColumn: isMobileView,
renderColumn: PriceColumn,
},
{
key: "price",
title: "Subtotal (USD)",
sortable: false,
columnWidth: 1.4 / 12,
headerPosition: "right",
columnType: "half-text",
hideColumn: isMobileView,
renderColumn: SubtotalColumn,
},
{
key: "transactionProcessingState",
title: "Status",
sortable: false,
columnWidth: 1.6 / 12,
columnType: "status-round",
hideColumn: isMobileView,
renderColumn: (row: any) => <PaymentFormStatusColumn row={row} />,
},
{
key: "description",
title: "Description",
sortable: false,
columnWidth: 7 / 12,
columnType: "double-row",
hideColumn: !isMobileView,
renderColumn: (row: EventTransactionRow) =>
MobileDescriptionColumn(row, formatInTimezone),
},
{
key: "amount",
title: "Amount",
sortable: false,
columnWidth: 5 / 12,
columnType: "half-text",
headerPosition: "right",
hideColumn: !isMobileView,
renderColumn: MobileAmountColumn,
},
],
[formatInTimezone, isMobileView],
);
return { columns };
};
|