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

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

62 lines 1.9 KB

Raw Download Zip

1	import {__, _x} from '@wordpress/i18n';
2	import {format} from 'date-fns';
3	import {useState} from 'react';
4	import EventFormModal from '../../EventFormModal';
5	import locale from '../../../../date-fns-locale';
6	import SectionTable from '../SectionTable';
7	import {EventSectionRowActions} from './EventSectionRowActions';
8	import styles from './EventSection.module.scss';
9
10	const dateFormat = _x("MM/dd/yyyy 'at' h:mmaaa", 'Date format for event details page', 'give');
11
12	/**
13	* @since 3.6.0
14	*/
15	export default function EventSection({setUpdateErrors}) {
16	const {apiRoot, apiNonce, event} = window.GiveEventTicketsDetails;
17	const [data, setData] = useState(event);
18
19	const [isOpen, setOpen] = useState<boolean>(false);
20	const openModal = () => setOpen(true);
21	const closeModal = (response = null) => {
22	if (response?.id) {
23	setData(response);
24	}
25
26	setOpen(false);
27	};
28
29	const tableHeaders = {
30	title: __('Event', 'give'),
31	description: __('Description', 'give'),
32	startDateTime: __('Start Date', 'give'),
33	endDateTime: __('End Date', 'give'),
34	};
35
36	const formattedData = [
37	{
38	...data,
39	startDateTime: format(new Date(data.startDateTime.date), dateFormat, {locale}),
40	endDateTime: format(new Date(data.endDateTime.date), dateFormat, {locale}),
41	},
42	];
43
44	return (
45	<section id={styles.eventSection}>
46	<h2>{__('Event', 'give')}</h2>
47	<SectionTable
48	tableHeaders={tableHeaders}
49	data={formattedData}
50	rowActions={EventSectionRowActions({event: data, openEditModal: openModal})}
51	/>
52	<EventFormModal
53	isOpen={isOpen}
54	handleClose={closeModal}
55	apiSettings={{apiRoot, apiNonce}}
56	title={__('Edit your event', 'give')}
57	event={data}
58	/>
59	</section>
60	);
61	}
62