give / src / DonationForms / OrphanedForms / resources / app.tsx

app.tsx in GiveWP – Donation Plugin and Fundraising Platform 4.17.0, at src/DonationForms/OrphanedForms/resources/app.tsx

246 lines 6.9 KB

Raw Download Zip

1	import {__, _x} from '@wordpress/i18n';
2	import {useState} from 'react';
3	import apiFetch from '@wordpress/api-fetch';
4	import {Button, Card, Modal, Notice, Pagination as ListTablePagination, Spinner, Table} from '@givewp/components';
5	import {useForms} from '../../resources/utils';
6	import useCampaigns from '../../../Campaigns/Blocks/shared/hooks/useCampaigns';
7	import {format} from 'date-fns';
8	import * as locales from 'date-fns/locale';
9	import styles from './styles.module.scss';
10
11
12	const browserLanguage = navigator.language;
13	const localizedCode = browserLanguage.replace('-', '');
14	const genericCode = browserLanguage.split('-')[0];
15	const locale = locales[localizedCode] ?? locales[genericCode] ?? locales.enUS;
16	const dateFormat = _x('MM/dd/yyyy \'at\' h:mmaaa', 'Date format', 'give');
17
18	type Props = {
19	ids: number[];
20	currentPage: number;
21	showModal: boolean;
22	campaign?: number;
23	}
24
25	const OrphanedFormsListTable = () => {
26	const [state, setState] = useState<Props>({
27	ids: [],
28	currentPage: 1,
29	showModal: false,
30	});
31
32	const {forms, hasResolved, totalPages} = useForms({
33	page: state.currentPage,
34	status: ['orphaned'],
35	});
36
37	const {campaigns, hasResolved: campaignsLoaded} = useCampaigns();
38
39	const showModal = (showModal: boolean) => {
40	setState(prevState => {
41	return {
42	...prevState,
43	showModal,
44	};
45	});
46	};
47
48	const selectForm = (selectedId: number) => {
49
50	let ids = state.ids;
51
52	if (ids.includes(selectedId)) {
53	ids = ids.filter(id => id !== selectedId);
54	} else {
55	ids.push(selectedId);
56	}
57
58	setState(prevState => {
59	return {
60	...prevState,
61	ids,
62	};
63	});
64	};
65
66	const selectCampaign = (campaign: number) => {
67	setState(prevState => {
68	return {
69	...prevState,
70	campaign,
71	};
72	});
73	};
74
75
76	const setCurrentPage = (currentPage: number) => {
77	setState((previousState) => {
78	return {
79	...previousState,
80	currentPage,
81	};
82	});
83	};
84
85	const getFormName = (id: number) => {
86	//@ts-ignore
87	const form = forms.filter(form => form.id === id);
88	//@ts-ignore
89	return form[0].title;
90	};
91
92	const handleSave = () => {
93	apiFetch({
94	path: '/givewp/v3/associate-forms-with-campaign',
95	method: 'POST',
96	data: {
97	campaignId: state.campaign,
98	formIDs: state.ids,
99	},
100	}).then(() => {
101	window.location.reload();
102	});
103	};
104
105	const Pagination = () => (
106	<div className={styles.pagination}>
107	<ListTablePagination
108	currentPage={state.currentPage}
109	setPage={(page: number) => setCurrentPage(page)}
110	totalPages={totalPages}
111	disabled={!hasResolved}
112	/>
113	</div>
114	);
115
116
117	const ConfirmationModal = () => {
118	return (
119	<Modal
120	type="info"
121	handleClose={() => showModal(false)}
122	>
123	<Modal.Title>
124	{__('Associate forms with campaign', 'give')}
125
126	<Modal.CloseIcon onClick={() => showModal(false)} />
127	</Modal.Title>
128
129	<div>
130	<h4>{__('Selected forms', 'give')}</h4>
131	{state.ids.map(id => (
132	<p key={id}>
133	{getFormName(id)}
134	</p>
135	))}
136	</div>
137
138	<div className={styles.section}>
139	<h4>{__('Select campaign', 'give')}</h4>
140	<select
141	className={styles.input}
142	onChange={e => selectCampaign(Number(e.target.value))}>
143	<option>
144	{__('Select campaign', 'give')}
145	</option>
146	{campaigns.map((campaign) => (
147	<option
148	selected={state.campaign === campaign.id}
149	value={campaign.id}
150	>
151	{campaign.title}
152	</option>
153	))}
154	</select>
155
156	</div>
157
158	<div className={styles.buttons}>
159
160	<Button
161	className="button button-primary"
162	onClick={handleSave}
163	icon={null}
164	disabled={!state.campaign}
165	>
166	{__('Associate forms ', 'give')}
167	</Button>
168
169	<Button
170	className="button button-secondary"
171	icon={null}
172	type="reset"
173	onClick={() => showModal(false)}
174	>
175	{__('Cancel', 'give')}
176	</Button>
177	</div>
178	</Modal>
179	);
180	};
181
182
183	const columns = [
184	{
185	key: 'id',
186	label: __('Donation Form', 'give'),
187	},
188	{
189	key: 'createdAt',
190	label: __('Date created', 'give'),
191	},
192	];
193
194	const columnFilters = {
195	id: (id: number, form: {title: string}) => (
196	<div className={styles.row}>
197	<input type="checkbox" onChange={() => selectForm(id)} />
198	<div>{form.title}</div>
199	</div>
200	),
201	createdAt: (value: {date: string}) => {
202	return format(new Date(value.date), dateFormat, {locale});
203	},
204	};
205
206	if (!hasResolved) {
207	return (
208	<Notice>
209	<Spinner />
210	<h2>{__('Loading donation forms', 'give')}</h2>
211	</Notice>
212	);
213	}
214
215	return (
216	<>
217	<Card>
218	<Table
219	columns={columns}
220	columnFilters={columnFilters}
221	data={forms ?? []}
222	isLoading={!hasResolved}
223	stripped={false}
224	isSorting={false}
225	/>
226	</Card>
227
228	<div className={styles.footerRow}>
229	{hasResolved && forms && (
230	<button
231	className="button"
232	disabled={state.ids.length === 0}
233	onClick={() => showModal(true)}
234	>
235	{__('Associate forms', 'give')}
236	</button>
237	)}
238	<Pagination />
239	</div>
240	{state.showModal && campaignsLoaded && <ConfirmationModal />}
241	</>
242	);
243	};
244
245	export default OrphanedFormsListTable;
246