give / src / Campaigns / resources / admin / components / CampaignFormModal / index.tsx

index.tsx in GiveWP – Donation Plugin and Fundraising Platform 4.18.0, at src/Campaigns/resources/admin/components/CampaignFormModal/index.tsx

351 lines 15.7 KB

Raw Download Zip

1	import {FormProvider, SubmitHandler, useForm} from 'react-hook-form';
2	import {__, sprintf} from '@wordpress/i18n';
3	import styles from './CampaignFormModal.module.scss';
4	import FormModal from '../FormModal';
5	import CampaignsApi from '../api';
6	import {CampaignFormInputs, CampaignModalProps, GoalTypeOption as GoalTypeOptionType} from './types';
7	import {useRef, useState} from 'react';
8	import {Currency, Upload} from '../Inputs';
9	import {
10	AmountFromSubscriptionsIcon,
11	AmountIcon,
12	DonationsIcon,
13	DonorsFromSubscriptionsIcon,
14	DonorsIcon,
15	SubscriptionsIcon,
16	} from './GoalTypeIcons';
17	import {getGiveCampaignsListTableWindowData} from '../CampaignsListTable';
18	import {amountFormatter} from '@givewp/campaigns/utils';
19	import TextareaControl from '../CampaignDetailsPage/Components/TextareaControl';
20	import {CampaignGoalInputAttributes, isValidGoalType} from '../../constants/goalInputAttributes';
21
22	const {currency, isRecurringEnabled} = getGiveCampaignsListTableWindowData();
23	const currencyFormatter = amountFormatter(currency);
24
25	/**
26	* @since 4.0.0
27	*/
28	const getGoalTypeIcon = (type: string) => {
29	switch (type) {
30	case 'amount':
31	return <AmountIcon />;
32	case 'donations':
33	return <DonationsIcon />;
34	case 'donors':
35	return <DonorsIcon />;
36	case 'amountFromSubscriptions':
37	return <AmountFromSubscriptionsIcon />;
38	case 'subscriptions':
39	return <SubscriptionsIcon />;
40	case 'donorsFromSubscriptions':
41	return <DonorsFromSubscriptionsIcon />;
42	}
43	};
44
45	/**
46	* Goal Type Option component
47	*
48	* @since 4.0.0
49	*/
50	const GoalTypeOption = ({type, label, description, selected, register}: GoalTypeOptionType) => {
51	const divRef = useRef(null);
52	const labelRef = useRef(null);
53
54	const handleDivClick = () => {
55	labelRef.current.click();
56	};
57
58	return (
59	<div
60	className={`${styles.goalTypeOption} ${selected ? styles.goalTypeOptionSelected : ''}`}
61	ref={divRef}
62	onClick={handleDivClick}
63	>
64	<div className={styles.goalTypeOptionIcon}>{getGoalTypeIcon(type)}</div>
65	<div className={styles.goalTypeOptionText}>
66	<label ref={labelRef}>
67	<input type="radio" value={type} {...register('goalType')} />
68	{label}
69	</label>
70	<span>{description}</span>
71	</div>
72	</div>
73	);
74	};
75
76	/**
77	* Campaign Form Modal component
78	*
79	* @since 4.13.0 remove unused date inputs
80	* @since 4.0.0
81	*/
82	export default function CampaignFormModal({isOpen, handleClose, apiSettings}: CampaignModalProps) {
83	const API = new CampaignsApi(apiSettings);
84	const [step, setStep] = useState<number>(1);
85
86	const methods = useForm<CampaignFormInputs>({
87	defaultValues: {
88	title: '',
89	shortDescription: '',
90	image: '',
91	goalType: 'amount',
92	goal: null,
93	},
94	});
95
96	const {
97	register,
98	handleSubmit,
99	formState: {errors, isDirty, isSubmitting},
100	setValue,
101	watch,
102	trigger,
103	} = methods;
104
105	const image = watch('image');
106	const selectedGoalType = watch('goalType');
107	const goal = watch('goal');
108
109	const getFormModalTitle = () => {
110	switch (step) {
111	case 1:
112	return __('Tell us about your fundraising cause', 'give');
113	case 2:
114	return __('Set up your campaign goal', 'give');
115	}
116
117	return null;
118	};
119
120	const goalInputAttribute =
121	selectedGoalType && isValidGoalType(selectedGoalType)
122	? new CampaignGoalInputAttributes(selectedGoalType, currency)
123	: new CampaignGoalInputAttributes('amount', currency);
124
125	const requiredAsterisk = <span className={`givewp-field-required ${styles.fieldRequired}`}>*</span>;
126
127	const validateTitle = async () => {
128	return await trigger('title');
129	};
130
131	const onSubmit: SubmitHandler<CampaignFormInputs> = async (inputs, event) => {
132	event.preventDefault();
133
134	if (step !== 2) {
135	return;
136	}
137
138	try {
139	const response = await API.fetchWithArgs('', inputs, 'POST');
140
141	handleClose(response);
142	} catch (error) {
143	console.error('Error submitting campaign campaign', error);
144	}
145	};
146
147	return (
148	<FormProvider {...methods}>
149	<FormModal
150	isOpen={isOpen}
151	handleClose={handleClose}
152	title={getFormModalTitle()}
153	handleSubmit={handleSubmit(onSubmit)}
154	errors={[]}
155	className={styles.campaignForm}
156	>
157	{step === 1 && (
158	<>
159	<div className="givewp-campaigns__form-row">
160	<label htmlFor="title">
161	{__("What's the title of your campaign?", 'give')} {requiredAsterisk}
162	</label>
163	<span>{__("Give your campaign a title that tells donors what it's about.", 'give')}</span>
164	<input
165	type="text"
166	{...register('title', {required: __('The campaign title is required.', 'give')})}
167	aria-invalid={errors.title ? 'true' : 'false'}
168	placeholder={__('Eg. Holiday Food Drive', 'give')}
169	onBlur={validateTitle}
170	/>
171	{errors.title && (
172	<div className={'givewp-campaigns__form-errors'}>
173	<p>{errors.title.message}</p>
174	</div>
175	)}
176	</div>
177	<div className="givewp-campaigns__form-row">
178	<label htmlFor="shortDescription">{__("What's your campaign about?", 'give')}</label>
179	<span>{__('Let your donors know the story behind your campaign.', 'give')}</span>
180	<TextareaControl
181	name="shortDescription"
182	rows={4}
183	maxLength={120}
184	placeholder={__('Brief description for your campaign.', 'give')}
185	/>
186	</div>
187	<div className="givewp-campaigns__form-row">
188	<label htmlFor="image">{__('Add a cover image for your campaign.', 'give')}</label>
189	<span>{__('Upload an image to represent and inspire your campaign.', 'give')}</span>
190	<Upload
191	id="givewp-campaigns-upload-cover-image"
192	label={__('Cover', 'give')}
193	actionLabel={__('Select to upload', 'give')}
194	value={image}
195	onChange={(coverImageUrl, coverImageAlt) => {
196	setValue('image', coverImageUrl);
197	}}
198	reset={() => setValue('image', '')}
199	/>
200	</div>
201	<button
202	type="submit"
203	onClick={async () => (await validateTitle()) && setStep(2)}
204	className={`button button-primary ${!isDirty ? 'disabled' : ''}`}
205	aria-disabled={!isDirty}
206	disabled={!isDirty}
207	>
208	{__('Continue', 'give')}
209	</button>
210	</>
211	)}
212	{step === 2 && (
213	<>
214	<div className="givewp-campaigns__form-row">
215	<label htmlFor="goalType">
216	{__('How would you like to set your goal?', 'give')} {requiredAsterisk}
217	</label>
218	<span>{__('Set the goal your fundraising efforts will work toward.', 'give')}</span>
219	<div className={styles.goalType}>
220	<GoalTypeOption
221	type={'amount'}
222	label={__('Amount raised', 'give')}
223	description={sprintf(
224	__(
225	'Your goal progress is measured by the total amount of funds raised eg. %s of %s raised.',
226	'give'
227	),
228	currencyFormatter.format(500),
229	currencyFormatter.format(1000)
230	)}
231	selected={selectedGoalType === 'amount'}
232	register={register}
233	/>
234	<GoalTypeOption
235	type={'donations'}
236	label={__('Number of donations', 'give')}
237	description={__(
238	'Your goal progress is measured by the number of donations. eg. 1 of 5 donations.',
239	'give'
240	)}
241	selected={selectedGoalType === 'donations'}
242	register={register}
243	/>
244	<GoalTypeOption
245	type={'donors'}
246	label={__('Number of donors', 'give')}
247	description={__(
248	'Your goal progress is measured by the number of donors. eg. 10 of 50 donors have given.',
249	'give'
250	)}
251	selected={selectedGoalType === 'donors'}
252	register={register}
253	/>
254	{isRecurringEnabled && (
255	<>
256	<GoalTypeOption
257	type={'amountFromSubscriptions'}
258	label={__('Recurring amount raised', 'give')}
259	description={__(
260	'Only the first donation amount of a recurring donation is counted toward the goal.',
261	'give'
262	)}
263	selected={selectedGoalType === 'amountFromSubscriptions'}
264	register={register}
265	/>
266	<GoalTypeOption
267	type={'subscriptions'}
268	label={__('Number of recurring donations', 'give')}
269	description={__(
270	'Only the first donation of a recurring donation is counted toward the goal.',
271	'give'
272	)}
273	selected={selectedGoalType === 'subscriptions'}
274	register={register}
275	/>
276	<GoalTypeOption
277	type={'donorsFromSubscriptions'}
278	label={__('Number of recurring donors', 'give')}
279	description={__(
280	'Only the donors that subscribed to a recurring donation are counted toward the goal.',
281	'give'
282	)}
283	selected={selectedGoalType === 'donorsFromSubscriptions'}
284	register={register}
285	/>
286	</>
287	)}
288	</div>
289	{errors.goalType && (
290	<div className={'givewp-campaigns__form-errors'}>
291	<p>{errors.goalType.message}</p>
292	</div>
293	)}
294	</div>
295	{selectedGoalType && (
296	<div className="givewp-campaigns__form-row">
297	<label htmlFor="title">
298	{goalInputAttribute.getLabel()} {requiredAsterisk}
299	</label>
300	<span>{goalInputAttribute.getDescription()}</span>
301	{selectedGoalType === 'amount' \|\| selectedGoalType === 'amountFromSubscriptions' ? (
302	<Currency
303	name="goal"
304	currency={currency}
305	placeholder={goalInputAttribute.getPlaceholder()}
306	/>
307	) : (
308	<input
309	type="number"
310	{...register('goal', {valueAsNumber: true})}
311	aria-invalid={errors.goal ? 'true' : 'false'}
312	placeholder={goalInputAttribute.getPlaceholder()}
313	/>
314	)}
315	{errors.goal && (
316	<div className={'givewp-campaigns__form-errors'}>
317	<p>{errors.goal.message}</p>
318	</div>
319	)}
320	</div>
321	)}
322	<div
323	className="givewp-campaigns__form-row givewp-campaigns__form-row--half"
324	style={{marginBottom: 0}}
325	>
326	<button
327	type="button"
328	onClick={() => setStep(1)}
329	className={`button button-secondary ${styles.button} ${styles.previousButton}`}
330	>
331	{__('Previous', 'give')}
332	</button>
333
334	<button
335	type="submit"
336	className={`button button-primary ${styles.button} ${
337	!goal \|\| isSubmitting ? 'disabled' : ''
338	}`}
339	aria-disabled={!goal \|\| isSubmitting}
340	disabled={!goal \|\| isSubmitting}
341	>
342	{__('Continue', 'give')}
343	</button>
344	</div>
345	</>
346	)}
347	</FormModal>
348	</FormProvider>
349	);
350	}
351