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 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 | 6x 15x 15x 15x 15x 15x 15x | import { useMemo } from "react";
import { TableColumnType } from "componentsV2/Table/Table.types";
import { useFormatDateInTimezone } from "@utils/date.helpers";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import {
CheckinStatusColumn,
MobileCheckinColumn,
MobileTicketColumn,
PurchaseDateColumn,
TicketHolderColumn,
TicketIdColumn,
TicketNameColumn,
} from "./EventTicketsTable.atoms";
import TicketPickupCell from "./TicketPickupCell";
import { EventTicketRow, TicketPickupStatus } from "./ticket.types";
type Params = {
onCheckIn: (row: EventTicketRow) => void;
checkingInId?: EventTicketRow["id"] | null;
/**
* API sort keys (`TICKET_SORT_KEYS`), supplied by the data hook so the columns
* stay contract-free — the V2 table sends a column's `key` as `sort=`.
*/
sortKeys: { purchaseDate: string; ticketHolder: string };
/**
* Adds the "Ticket Picked Up" column. Only for events that offer printed
* tickets — for everyone else the fulfilment state is meaningless, which is
* what frame 7594-66313's note on the builder's physical-tickets checkbox says.
*/
showPickupColumn?: boolean;
onPickupChange: (row: EventTicketRow, status: TicketPickupStatus) => void;
savingPickupId?: EventTicketRow["id"] | null;
};
/**
* Tickets tab columns (frame 7397-90421): Ticket ID · Purchase Date (sortable)
* · Ticket Holder (sortable) · Ticket Name · Check-in Status, plus Ticket Picked
* Up for physical-ticket events (frame 7594-66313). Widths follow the frame's
* 140/187×4 grid.
*/
export const useEventTicketColumns = ({
onCheckIn,
checkingInId,
sortKeys,
showPickupColumn,
onPickupChange,
savingPickupId,
}: Params) => {
const { formatInTimezone } = useFormatDateInTimezone();
const { isMobileView } = useCustomThemeV2();
// With the extra column the six share the row evenly; without it the five keep
// the frame's wider 2.5/12 cells.
const statusWidth = showPickupColumn ? 2 / 12 : 2.5 / 12;
const columns: TableColumnType[] = useMemo(
() => [
{
key: "displayId",
title: "Ticket ID",
sortable: false,
columnWidth: 2 / 12,
hideColumn: isMobileView,
renderColumn: TicketIdColumn,
},
{
key: sortKeys.purchaseDate,
title: "Purchase Date",
sortable: true,
columnWidth: 2.5 / 12,
columnType: "double-row",
hideColumn: isMobileView,
renderColumn: (row: EventTicketRow) =>
PurchaseDateColumn(row, formatInTimezone),
},
{
key: sortKeys.ticketHolder,
title: "Ticket Holder",
sortable: true,
columnWidth: 2.5 / 12,
columnType: "double-row",
hideColumn: isMobileView,
renderColumn: TicketHolderColumn,
},
{
key: "ticketName",
title: "Ticket Name",
sortable: false,
columnWidth: 2.5 / 12,
columnType: "double-row",
hideColumn: isMobileView,
renderColumn: (row: EventTicketRow) => <TicketNameColumn {...row} />,
},
{
key: "checkinStatus",
title: "Check-in Status",
sortable: false,
columnWidth: statusWidth,
hideColumn: isMobileView,
renderColumn: (row: EventTicketRow) => (
<CheckinStatusColumn
row={row}
formatInTimezone={formatInTimezone}
onCheckIn={onCheckIn}
isCheckingIn={checkingInId === row.id}
/>
),
},
{
key: "pickupStatus",
title: "Ticket Picked Up",
sortable: false,
columnWidth: 2 / 12,
// The V2 table drops a column entirely when hideColumn is set, which is
// what the builder's physical-tickets checkbox controls here. Mobile has
// no room for it either; the detail panel carries the same value.
hideColumn: !showPickupColumn || isMobileView,
renderColumn: (row: EventTicketRow) => (
<TicketPickupCell
row={row}
onChange={onPickupChange}
isSaving={savingPickupId === row.id}
/>
),
},
// Mobile (frame 7397-90578) is a two-part row, not a reflow of the six
// columns above: everything about the ticket on the left, the check-in state
// on the right. Added as hideColumn-gated columns alongside them, the same
// pattern the Transactions tab uses.
{
key: "mobileTicket",
title: "Ticket",
sortable: false,
columnWidth: 7 / 12,
columnType: "double-row",
hideColumn: !isMobileView,
// As elements, not bare refs — the V2 table calls renderColumn as a
// plain function, and these two use useAppTheme, so invoking them
// inline would run hooks in Table's own render (count varies per row).
renderColumn: (row: EventTicketRow) => <MobileTicketColumn {...row} />,
},
{
key: "mobileCheckinStatus",
title: "Status",
sortable: false,
columnWidth: 5 / 12,
columnType: "half-text",
headerPosition: "right",
hideColumn: !isMobileView,
renderColumn: (row: EventTicketRow) => <MobileCheckinColumn {...row} />,
},
],
[
formatInTimezone,
onCheckIn,
checkingInId,
sortKeys,
statusWidth,
showPickupColumn,
onPickupChange,
savingPickupId,
isMobileView,
],
);
return { columns };
};
|