BlockInspectorControls.tsx — GiveWP – Donation Plugin and Fundraising Platform 4.16.3

give / src / Campaigns / Blocks / CampaignForm / resources / components / BlockInspectorControls.tsx

give / src / Campaigns / Blocks / CampaignForm / resources / components Last commit date

BlockInspectorControls.tsx 1 year ago BlockPreview.tsx 1 year ago

BlockInspectorControls.tsx

230 lines

1	import {ExternalLink, PanelBody, PanelRow, SelectControl, TextControl, ToggleControl} from '@wordpress/components';
2	import {__} from '@wordpress/i18n';
3	import {InspectorControls} from '@wordpress/block-editor';
4	import type {FormOption} from '../../../shared/hooks/useFormOptions';
5	import useCampaigns from '../../../shared/hooks/useCampaigns';
6	import {useSelect} from '@wordpress/data';
7	import {useEffect} from '@wordpress/element';
8
9	/**
10	* @unreleasaed
11	*/
12	interface BlockInspectorControls {
13	attributes: Readonly<any>;
14	setAttributes: (newAttributes: Record<string, any>) => void;
15	entityOptions: FormOption[];
16	isResolving: boolean;
17	isLegacyTemplate: boolean;
18	isLegacyForm: boolean;
19	}
20
21	/**
22	* @since 4.3.0
23	*/
24	export default function DonationFormBlockControls({
25	attributes,
26	setAttributes,
27	entityOptions,
28	isResolving,
29	isLegacyTemplate,
30	isLegacyForm,
31	}: BlockInspectorControls) {
32	const {
33	id,
34	displayStyle,
35	continueButtonTitle = __('Donate now', 'give'),
36	showTitle,
37	contentDisplay,
38	showGoal,
39	showContent,
40	useDefaultForm,
41	} = attributes;
42	const showOpenFormButton = ['newTab', 'modal', 'reveal', 'button'].includes(displayStyle);
43	const {campaigns, hasResolved} = useCampaigns({status: ['active', 'draft']});
44	const defaultFormId = campaigns?.find((campaign) => campaign.id === attributes?.campaignId)?.defaultFormId;
45
46	useEffect(() => {
47	if (defaultFormId) {
48	setAttributes({
49	id: defaultFormId,
50	useDefaultForm: true,
51	});
52	}
53	}, [attributes?.campaignId]);
54
55	const displayStyleOptions = (
56	options: {label: string; value: string}[],
57	legacy: {label: string; value: string}[],
58	v3: {label: string; value: string}[]
59	) => {
60	return isLegacyTemplate ? options.concat(legacy) : !isLegacyForm ? options.concat(v3) : options;
61	};
62
63	const adminBaseUrl = useSelect(
64	// @ts-ignore
65	(select) => select('core').getSite()?.url + '/wp-admin/edit.php?post_type=give_forms&page=give-campaigns',
66	[]
67	);
68
69	return (
70	<InspectorControls>
71	<PanelBody title={__('Form Settings', 'give')} initialOpen={true}>
72	<PanelRow>
73	<ToggleControl
74	className={'givewp-default-form-toggle'}
75	label={__('Use default form', 'give')}
76	checked={attributes.useDefaultForm}
77	onChange={(useDefaultForm: boolean) => {
78	setAttributes({useDefaultForm});
79	if (useDefaultForm) {
80	setAttributes({id: defaultFormId});
81	}
82	}}
83	help={
84	<>
85	{__('Uses the campaign’s default form.', 'give')}
86	{` `}
87	<a
88	href={`${adminBaseUrl}&id=${attributes.campaignId}&tab=forms`}
89	target="_blank"
90	rel="noopener noreferrer"
91	aria-label={__('Change campaign default form', 'give')}
92	>
93	{__('Change default form', 'give')}
94	</a>
95	</>
96	}
97	/>
98	</PanelRow>
99	{!useDefaultForm && (
100	<PanelRow>
101	<SelectControl
102	label={__('Choose a donation form', 'give')}
103	value={id ?? ''}
104	options={[...entityOptions.map((form) => ({label: form.label, value: String(form.value)}))]}
105	onChange={(newFormId) => {
106	setAttributes({id: Number(newFormId)});
107	}}
108	/>
109	</PanelRow>
110	)}
111	<PanelRow>
112	<SelectControl
113	label={__('Display style', 'give')}
114	value={displayStyle}
115	options={displayStyleOptions(
116	[
117	{
118	label: __('On page', 'give'),
119	value: 'onpage',
120	},
121	{
122	label: __('Modal', 'give'),
123	value: 'modal',
124	},
125	],
126	[
127	{
128	label: __('Reveal', 'give'),
129	value: 'reveal',
130	},
131	{
132	value: 'button',
133	label: __('One Button Launch', 'give'),
134	},
135	],
136	[
137	{
138	label: __('New Tab', 'give'),
139	value: 'newTab',
140	},
141	]
142	)}
143	onChange={(value) => {
144	setAttributes({displayStyle: value});
145	}}
146	/>
147	</PanelRow>
148
149	{showOpenFormButton && (
150	<PanelRow>
151	<TextControl
152	label={__('Button text', 'give')}
153	value={continueButtonTitle}
154	onChange={(value) => {
155	setAttributes({continueButtonTitle: value});
156	}}
157	/>
158	</PanelRow>
159	)}
160
161	{isLegacyTemplate && (
162	<>
163	<PanelRow>
164	<ToggleControl
165	label={__('Title', 'give')}
166	name="showTitle"
167	checked={!!showTitle}
168	onChange={(value) => {
169	setAttributes({showTitle: value});
170	}}
171	/>
172	</PanelRow>
173	<PanelRow>
174	<ToggleControl
175	label={__('Goal', 'give')}
176	name="showGoal"
177	checked={!!showGoal}
178	onChange={(value) => {
179	setAttributes({showGoal: value});
180	}}
181	/>
182	</PanelRow>
183	<PanelRow>
184	<ToggleControl
185	label={__('Content', 'give')}
186	name="contentDisplay"
187	checked={!!contentDisplay}
188	onChange={(value) => {
189	setAttributes({contentDisplay: value});
190	}}
191	/>
192	</PanelRow>
193
194	{contentDisplay && (
195	<PanelRow>
196	<SelectControl
197	label={__('Content Position', 'give')}
198	name="showContent"
199	value={showContent}
200	options={[
201	{value: 'above', label: __('Above', 'give')},
202	{value: 'below', label: __('Below', 'give')},
203	]}
204	onChange={(value) => {
205	setAttributes({showContent: value});
206	}}
207	/>
208	</PanelRow>
209	)}
210	</>
211	)}
212
213	{id && (
214	<PanelRow>
215	<ExternalLink
216	href={
217	isLegacyForm
218	? `/wp-admin/post.php?post=${id}&action=edit`
219	: `/wp-admin/edit.php?post_type=give_forms&page=givewp-form-builder&donationFormID=${id}`
220	}
221	>
222	{__('Edit donation form', 'give')}
223	</ExternalLink>
224	</PanelRow>
225	)}
226	</PanelBody>
227	</InspectorControls>
228	);
229	}
230