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

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

59 lines 1.6 KB

Raw Download Zip

1	import {__} from '@wordpress/i18n';
2	import {createInterpolateElement} from '@wordpress/element';
3	import styles from './DonationFormsSection.module.scss';
4	import SectionTable from '../SectionTable';
5	import {useState} from 'react';
6
7	/**
8	* Displays a blank slate for the Donation Forms table.
9	*
10	* @since 3.6.0
11	*/
12	const BlankSlate = () => {
13	const helpMessage = createInterpolateElement(
14	__(
15	'<a>To link an event to a donation form</a>, add an event block to a donation form in the visual form builder.',
16	'give'
17	),
18	{
19	a: <a href="https://docs.givewp.com/events-documentation" target="_blank" rel="noreferrer" />,
20	}
21	);
22	return (
23	<div className={styles.container}>
24	<h3>{__('No linked form yet', 'give')}</h3>
25	<p className={styles.helpMessage}>{helpMessage}</p>
26	</div>
27	);
28	};
29
30	/**
31	* @since 3.6.0
32	*/
33	export default function DonationFormsSection() {
34	const {
35	adminUrl,
36	event: {forms},
37	} = window.GiveEventTicketsDetails;
38	const [data, setData] = useState(forms);
39
40	const tableHeaders = {
41	id: __('ID', 'give'),
42	title: __('Name', 'give'),
43	};
44
45	const formattedData = data.map((form) => {
46	return {
47	id: form.id,
48	title: <a href={`${adminUrl}post.php?post=${form.id}&action=edit`}>{form.title}</a>,
49	};
50	});
51
52	return (
53	<section>
54	<h2>{__('Donation Forms', 'give')}</h2>
55	<SectionTable tableHeaders={tableHeaders} data={formattedData} blankSlate={<BlankSlate />} />
56	</section>
57	);
58	}
59