give / src / Donors / resources / components / DonorsListTable.tsx

DonorsListTable.tsx in GiveWP – Donation Plugin and Fundraising Platform 4.17.0, at src/Donors/resources/components/DonorsListTable.tsx

169 lines 5.9 KB

Raw Download Zip

1	import {__} from '@wordpress/i18n';
2	import {ListTableApi, ListTablePage} from '@givewp/components';
3	import {DonorsRowActions} from './DonorsRowActions';
4	import {BulkActionsConfig, FilterConfig} from '@givewp/components/ListTable/ListTablePage';
5	import styles from '@givewp/components/ListTable/ListTablePage/ListTablePage.module.scss';
6	import {Interweave} from 'interweave';
7	import './style.scss';
8	import BlankSlate from '@givewp/components/ListTable/BlankSlate';
9	import ProductRecommendations from '@givewp/components/ListTable/ProductRecommendations';
10	import { StatConfig } from '@givewp/components/ListTable/ListTableStats/ListTableStats';
11	import filterByOptions from '../constants/filterByOptions';
12
13	declare global {
14	interface Window {
15	GiveDonors: {
16	apiNonce: string;
17	apiRoot: string;
18	forms: Array<{value: string; text: string}>;
19	table: {columns: Array<object>};
20	adminUrl: string;
21	pluginUrl: string;
22	dissedRecommendations: Array<string>;
23	recurringDonationsEnabled: boolean;
24	};
25	}
26	}
27
28	const API = new ListTableApi(window.GiveDonors);
29
30	const donorsFilters: Array<FilterConfig> = [
31	{
32	name: 'campaignId',
33	type: 'campaignselect',
34	text: __('All Campaigns', 'give'),
35	ariaLabel: __('Filter donors by campaign', 'give'),
36	options: window.GiveDonors.forms,
37	},
38	{
39	name: 'search',
40	type: 'search',
41	inlineSize: '14rem',
42	text: __('Name, Email, or Donor ID', 'give'),
43	ariaLabel: __('Search donors', 'give'),
44	},
45	{
46	name: 'filterBy',
47	type: 'filterby',
48	groupedOptions: filterByOptions,
49	}
50	];
51
52	const donorsBulkActions: Array<BulkActionsConfig> = [
53	{
54	label: __('Delete', 'give'),
55	value: 'delete',
56	type: 'danger',
57	action: async (selected) => {
58	const deleteDonations = document.querySelector('#giveDonorsTableDeleteDonations') as HTMLInputElement;
59	const args = {ids: selected.join(','), deleteDonationsAndRecords: deleteDonations.checked};
60	const response = await API.fetchWithArgs('/delete', args, 'DELETE');
61	return response;
62	},
63	confirm: (selected, names) => (
64	<>
65	<p>{__('Are you sure you want to delete the following donors?', 'give')}</p>
66	<ul role="document" tabIndex={0}>
67	{selected.map((id, index) => (
68	<li key={id}>
69	<Interweave attributes={{className: 'donorBulkModalContent'}} content={names[index]} />
70	</li>
71	))}
72	</ul>
73	<br></br>
74	<label htmlFor="giveDonorsTableDeleteDonations">
75	<input id="giveDonorsTableDeleteDonations" type="checkbox" defaultChecked={true} />
76	{__('Delete all associated donations and records', 'give')}
77	</label>
78	</>
79	),
80	},
81	];
82
83	/**
84	* Displays a blank slate for the Donors table.
85	* @since 2.27.0
86	*/
87	const ListTableBlankSlate = (
88	<BlankSlate
89	imagePath={`${window.GiveDonors.pluginUrl}build/assets/dist/images/list-table/blank-slate-donor-icon.svg`}
90	description={__('No donors found', 'give')}
91	href={'https://docs.givewp.com/donors'}
92	linkText={__('GiveWP Donors.', 'give')}
93	/>
94	);
95
96	/**
97	* @since 2.27.1
98	*/
99	const RecommendationConfig: any = {
100	feeRecovery: {
101	enum: 'givewp_donors_fee_recovery_recommendation_dismissed',
102	documentationPage: 'https://docs.givewp.com/feerecovery-donors-list',
103	message: __(
104	' 90% of donors opt to give more to help cover transaction fees when given the opportunity. Give donors that opportunity.',
105	'give'
106	),
107	innerHtml: __('Get the Fee Recovery add-on today', 'give'),
108	},
109	};
110
111	const recommendation = (
112	<ProductRecommendations options={[RecommendationConfig.feeRecovery]} apiSettings={window.GiveDonors} />
113	);
114
115	/**
116	* Configuration for the statistic tiles rendered above the ListTable.
117	*
118	* IMPORTANT: Object keys MUST MATCH the keys returned by the API's `stats` payload.
119	* For example, if the API returns:
120	*
121	* data.stats = {
122	* donorsCount: number;
123	* oneTimeDonorsCount: number;
124	* recurringDonationsCount: number;
125	* }
126	*
127	* then this config must use those same keys: "donorsCount", "oneTimeDonorsCount", "subscribersCount".
128	* Missing or mismatched keys will result in empty/undefined values in the UI.
129	*
130	* @since 4.11.0
131	*/
132	const statsConfig: Record<string, StatConfig> = {
133	donorsCount: { label: __('Number of Donors', 'give')},
134	oneTimeDonorsCount: { label: __('One-Time Donors', 'give')},
135	subscribersCount: {
136	label: __('Subscribers', 'give'),
137	upgrade: !window.GiveDonors.recurringDonationsEnabled && {
138	href: 'https://docs.givewp.com/subscribers-stat',
139	tooltip: __('Increase your fundraising revenue by over 30% with recurring giving campaigns.', 'give')
140	}
141	},
142	};
143
144	export default function DonorsListTable() {
145	return (
146	<ListTablePage
147	title={__('Donors', 'give')}
148	singleName={__('donors', 'give')}
149	pluralName={__('donors', 'give')}
150	rowActions={DonorsRowActions}
151	bulkActions={donorsBulkActions}
152	apiSettings={window.GiveDonors}
153	filterSettings={donorsFilters}
154	listTableBlankSlate={ListTableBlankSlate}
155	productRecommendation={recommendation}
156	statsConfig={statsConfig}
157	>
158	<button className={`button button-tertiary ${styles.secondaryActionButton}`} onClick={showLegacyDonors}>
159	{__('Switch to Legacy View', 'give')}
160	</button>
161	</ListTablePage>
162	);
163	}
164
165	const showLegacyDonors = async (event) => {
166	await API.fetchWithArgs('/view', {isLegacy: 1});
167	window.location.reload();
168	};
169