give / src / EventTickets / resources / admin / components / EventDetailsPage / AttendeesSection / index.tsx

index.tsx in GiveWP – Donation Plugin and Fundraising Platform 4.18.0, at src/EventTickets/resources/admin/components/EventDetailsPage/AttendeesSection/index.tsx

59 lines 1.9 KB

Raw Download Zip

1	import {__, _x} from '@wordpress/i18n';
2	import styles from './AttendeesSection.module.scss';
3	import {GiveEventTicketsDetails} from '../types';
4	import {useState} from 'react';
5	import SectionTable from '../SectionTable';
6	import locale from '../../../../date-fns-locale';
7	import {format} from 'date-fns';
8
9	const dateFormat = _x("MM/dd/yyyy 'at' h:mmaaa", 'Date format for event details page', 'give');
10
11	/**
12	* Displays a blank slate for the Attendees table.
13	*
14	* @since 3.6.0
15	*/
16	const BlankSlate = () => {
17	const imagePath = `${window.GiveEventTicketsDetails.pluginUrl}build/assets/dist/images/list-table/blank-slate-attendees-icon.svg`;
18	return (
19	<div className={styles.container}>
20	<img src={imagePath} alt={__('No attendees yet', 'give')} />
21	<h3>{__('No attendees yet', 'give')}</h3>
22	</div>
23	);
24	};
25
26	export default function AttendeesSection() {
27	const {
28	event: {ticketTypes, tickets},
29	}: GiveEventTicketsDetails = window.GiveEventTicketsDetails;
30	const [data, setData] = useState(tickets);
31
32	const getTicketTypeById = (id: number) =>
33	ticketTypes.find((type) => type.id === id)?.title \|\| __('Unknown', 'give');
34
35	const tableHeaders = {
36	id: __('ID', 'give'),
37	attendeeName: __('Name', 'give'),
38	attendeeEmail: __('Email', 'give'),
39	ticketType: __('Ticket Type', 'give'),
40	date: __('Purchase Date', 'give'),
41	};
42
43	const formattedData = data.map((ticket) => {
44	return {
45	...ticket,
46	attendeeName: ticket.attendee.name,
47	attendeeEmail: ticket.attendee.email,
48	ticketType: getTicketTypeById(ticket.ticketTypeId),
49	date: format(new Date(ticket.createdAt.date), dateFormat, {locale}),
50	};
51	});
52
53	return (
54	<section>
55	<SectionTable tableHeaders={tableHeaders} data={formattedData} blankSlate={<BlankSlate />} />
56	</section>
57	);
58	}
59