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 | 13x 13x 13x 13x 13x 3x 9x | import { Stack } from "@mui/material";
import GiveText from "@shared/Text/GiveText";
// PAY-Builder 032-a — the "Your Tickets" section of the event receipt email
// (mockup 7432-225401), mirroring what the backend actually renders
// (mail/partials/event_tickets_section.html in givesync-api#7132): numbered
// entries, the ticket type on its own line, a "Section — Row, Seat" line for
// assigned seating, and the bare numeric "Ticket ID:" (the GCS- reference
// column does not exist yet; the label swaps when it lands). The first entry
// is the template-slot legend from the mockup; the other two are
// representative samples with and without a seat assignment.
const SAMPLE_TICKETS = [
{
holder: "{Ticket Holder Full Name}",
ticketType: "{Ticket Name}",
seat: "{Section} — {Row}, {Seat}",
ticketId: "Ticket ID: {Ticket ID}",
},
{
holder: "Kevin Blake",
ticketType: "General Admission",
ticketId: "Ticket ID: 4327823",
},
{
holder: "Tony Loopson",
ticketType: "General Admission",
seat: "Section A — Row B, Seat 10",
ticketId: "Ticket ID: 7773248",
},
];
const titleStyle = {
fontWeight: 700,
fontSize: "16px",
lineHeight: "22px",
fontFamily: "Arial",
};
const holderStyle = {
fontFamily: "Arial",
fontWeight: 700,
fontSize: "16px",
};
const detailStyle = {
fontFamily: "Arial",
fontWeight: 400,
fontSize: "16px",
};
export const EventTicketsPreview = () => (
<Stack gap="8px" data-testid="event-tickets-preview">
<GiveText sx={titleStyle}>Your Tickets</GiveText>
<Stack gap="16px">
{SAMPLE_TICKETS.map((ticket, index) => (
<Stack key={ticket.ticketId}>
<GiveText sx={holderStyle}>{`${index + 1}. ${
ticket.holder
}`}</GiveText>
<Stack paddingLeft="21px">
<GiveText sx={detailStyle}>{ticket.ticketType}</GiveText>
{ticket.seat && <GiveText sx={detailStyle}>{ticket.seat}</GiveText>}
<GiveText sx={detailStyle}>{ticket.ticketId}</GiveText>
</Stack>
</Stack>
))}
</Stack>
</Stack>
);
|