give / src / Campaigns / resources / admin / components / CampaignDetailsPage / Tabs / Settings.tsx

Settings.tsx in GiveWP – Donation Plugin and Fundraising Platform 4.18.0, at src/Campaigns/resources/admin/components/CampaignDetailsPage/Tabs/Settings.tsx

187 lines 9.0 KB

Raw Download Zip

1	import {__} from '@wordpress/i18n';
2	import {useFormContext} from 'react-hook-form';
3	import {Upload} from '../../Inputs';
4	import styles from '../CampaignDetailsPage.module.scss';
5	import {getCampaignOptionsWindowData} from '@givewp/campaigns/utils';
6	import ColorControl from '@givewp/campaigns/admin/components/CampaignDetailsPage/Components/ColorControl';
7	import TextareaControl from '@givewp/campaigns/admin/components/CampaignDetailsPage/Components/TextareaControl';
8	import {CurrencyControl} from '@givewp/form-builder-library';
9	import type {CurrencyCode} from '@givewp/form-builder-library/build/CurrencyControl/CurrencyCode';
10	import {CampaignGoalInputAttributes} from '@givewp/campaigns/admin/constants/goalInputAttributes';
11	import CampaignNotice from '@givewp/campaigns/admin/components/CampaignDetailsPage/Components/Notices/CampaignNotice';
12	import {useCampaignNoticeHook} from '@givewp/campaigns/hooks';
13	import AdminSection, { AdminSectionField, AdminSectionsWrapper } from '@givewp/components/AdminDetailsPage/AdminSection';
14
15	const {currency, isRecurringEnabled} = getCampaignOptionsWindowData();
16
17	/**
18	* @since 4.0.0
19	*/
20	export default function CampaignDetailsSettingsTab() {
21	const [showTooltip, dismissTooltip] = useCampaignNoticeHook('givewp_campaign_settings_notice');
22
23	const {
24	register,
25	watch,
26	setValue,
27	formState: {errors},
28	} = useFormContext();
29
30	const [goal, goalType, image, status, shortDescription] = watch([
31	'goal',
32	'goalType',
33	'image',
34	'status',
35	'shortDescription',
36	]);
37
38	const isDisabled = status === 'archived';
39
40	const goalInputAttributes = new CampaignGoalInputAttributes(goalType, currency);
41
42	return (
43	<AdminSectionsWrapper>
44	<AdminSection
45	title={__('Campaign Details', 'give')}
46	description={__('This includes the campaign title, description, and the cover of your campaign.', 'give')}
47	>
48	<AdminSectionField
49	subtitle={__("What's the title of your campaign?", 'give')}
50	description={__("Give your campaign a title that tells donors what it's about.", 'give')}
51	error={errors.title?.message as string}
52	>
53	<input {...register('title')} disabled={isDisabled} />
54	</AdminSectionField>
55
56	<AdminSectionField
57	subtitle={__("What's your campaign about?", 'give')}
58	description={__('Let your donors know the story behind your campaign.', 'give')}
59	error={errors.shortDescription?.message as string}
60	>
61	<TextareaControl
62	name={'shortDescription'}
63	disabled={isDisabled}
64	maxLength={120}
65	rows={3}
66	help={__('This will be displayed in your campaign block and campaign grid.', 'give')}
67	/>
68	</AdminSectionField>
69
70	<AdminSectionField
71	subtitle={__('Add a cover image for your campaign.', 'give')}
72	description={__('Upload an image to represent and inspire your campaign.', 'give')}
73	error={errors.image?.message as string}
74	>
75	<div className={styles.upload}>
76	<Upload
77	disabled={isDisabled}
78	id="givewp-campaigns-upload-cover-image"
79	label={__('Cover', 'give')}
80	actionLabel={__('Select to upload', 'give')}
81	value={image}
82	onChange={(coverImageUrl, coverImageAlt) => {
83	setValue('image', coverImageUrl, {shouldDirty: true});
84	}}
85	reset={() => setValue('image', '', {shouldDirty: true})}
86	/>
87	<p className={styles.sectionFieldHelpText}>{__('This will be displayed in your campaign block and campaign grid.', 'give')}</p>
88	</div>
89	</AdminSectionField>
90	</AdminSection>
91
92	{/* Campaign Goal */}
93	<AdminSection
94	title={__('Campaign Goal', 'give')}
95	description={__('How would you like to set your goal?', 'give')}
96	>
97	<AdminSectionField
98	subtitle={__('Set the details of your campaign goal here.', 'give')}
99	description={__('How would you like to set your goal?', 'give')}
100	error={errors.goalType?.message as string}
101	>
102	<select {...register('goalType')} disabled={isDisabled}>
103	<option value="amount">{__('Amount raised', 'give')}</option>
104	<option value="donations">{__('Number of donations', 'give')}</option>
105	<option value="donors">{__('Number of donors', 'give')}</option>
106	{isRecurringEnabled && (
107	<>
108	<option value="amountFromSubscriptions">
109	{__('Recurring amount raised', 'give')}
110	</option>
111	<option value="subscriptions">{__('Number of recurring donations', 'give')}</option>
112	<option value="donorsFromSubscriptions">
113	{__('Number of recurring donors', 'give')}
114	</option>
115	</>
116	)}
117	</select>
118	<div className={styles.sectionFieldDescription}>{goalInputAttributes.getHelp()}</div>
119	</AdminSectionField>
120
121	<AdminSectionField
122	subtitle={goalInputAttributes.getLabel()}
123	description={goalInputAttributes.getDescription()}
124	error={errors.goal?.message as string}
125	>
126
127	{goalInputAttributes.isCurrencyType() ? (
128	<div className={styles.sectionFieldCurrencyControl}>
129	<CurrencyControl
130	name="goal"
131	currency={currency as CurrencyCode}
132	disabled={isDisabled}
133	placeholder={goalInputAttributes.getPlaceholder()}
134	value={goal}
135	onValueChange={(value) => {
136	setValue('goal', Number(value ?? 0), {shouldDirty: true});
137	}}
138	/>
139	</div>
140	) : (
141	<input
142	type="number"
143	{...register('goal', {valueAsNumber: true})}
144	disabled={isDisabled}
145	placeholder={goalInputAttributes.getPlaceholder()}
146	/>
147	)}
148
149	</AdminSectionField>
150	</AdminSection>
151
152	{/* Campaign Theme */}
153	<AdminSection
154	title={__('Campaign Theme', 'give')}
155	description={__('Choose a preferred theme for your campaign.', 'give')}
156	>
157	<AdminSectionField
158	subtitle={__('Select your preferred primary color', 'give')}
159	description={__('This will affect your main cta’s like your donate button, active and focus states of other UI elements.', 'give')}
160	error={errors.primaryColor?.message as string}
161	>
162	<ColorControl name="primaryColor" disabled={isDisabled} className={styles.colorControl} />
163	</AdminSectionField>
164
165	<AdminSectionField
166	subtitle={__('Select your preferred secondary color', 'give')}
167	description={__('This will affect your goal progress indicator, badges, icons, etc', 'give')}
168	error={errors.secondaryColor?.message as string}
169	>
170	<ColorControl name="secondaryColor" disabled={isDisabled} className={styles.colorControl} />
171	</AdminSectionField>
172	</AdminSection>
173
174	{showTooltip && (
175	<CampaignNotice
176	title={__('Campaign Settings', 'give')}
177	description={__('You can make changes to your campaign page, campaign details, campaign goal, and campaign theme. Publish your campaign when you’re done with your changes.', 'give')}
178	linkHref="https://docs.givewp.com/campaign-settings"
179	linkText={__('Learn more about campaign and form settings', 'give')}
180	handleDismiss={dismissTooltip}
181	type={'campaignSettings'}
182	/>
183	)}
184	</AdminSectionsWrapper>
185	);
186	};
187