All files / src/features/Events/EventDetail/tickets TicketDetailsSection.tsx

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
 
 
 
 
 
 
 
 
 
 
 
2x
33x
 
33x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { toEnFormat } from "@utils/index";
import { EventTicketRow, TICKET_PICKUP_LABELS } from "./ticket.types";
import { Row, Section, usePanelDateTime } from "./EventTicketPanel.atoms";
 
type Props = {
  row?: EventTicketRow;
  /** Physical-ticket events only, like the table column it mirrors. */
  showPickup?: boolean;
};
 
/** The panel's "Ticket Details" section. */
const TicketDetailsSection = ({ row, showPickup }: Props) => {
  const dateTime = usePanelDateTime();
 
  return (
    <Section title="Ticket Details">
      <Row label="Ticket ID" value={row?.displayId} />
      <Row label="Ticket Name" value={row?.ticketName} />
      <Row label="Seat" value={row?.seatLabel} />
      {/* The phone frames label this row "Customer" and the scan row "Scanned
          by" where the desktop frames say "Ticket Holder" and "Host". Copy
          drift between the two frame sets, not a per-viewport label — both
          breakpoints follow the desktop wording until design settles it. */}
      <Row label="Ticket Holder" value={row?.holderName} />
      <Row label="Email" value={row?.holderEmail} />
      <Row
        label="Ticket Price"
        // Minor units on the wire. The platform is single-currency, which is
        // why the table's own money columns are labelled "(USD)" rather than
        // carrying a currency per row. The mockup writes "250 USD"; two
        // decimals is what every other amount in the portal shows, and
        // dropping them would hide cents.
        value={
          row?.ticketPrice === undefined
            ? undefined
            : `${toEnFormat(row.ticketPrice / 100)} USD`
        }
      />
      <Row label="Purchase Date" value={dateTime(row?.purchasedAt)} />
      {/* Read-only here; the table column is where it is edited. */}
      {showPickup && (
        <Row
          label="Ticket Picked Up"
          value={TICKET_PICKUP_LABELS[row?.pickupStatus ?? "pending"]}
          testId="ticket-panel-pickup"
        />
      )}
    </Section>
  );
};
 
export default TicketDetailsSection;