give / src / Campaigns / Blocks / Campaign / edit.tsx

edit.tsx in GiveWP – Donation Plugin and Fundraising Platform 4.18.0, at src/Campaigns/Blocks/Campaign/edit.tsx

151 lines 5.6 KB

Raw Download Zip

1	import {__} from '@wordpress/i18n';
2	import React, {CSSProperties, useState} from 'react';
3	import {InspectorControls, useBlockProps} from '@wordpress/block-editor';
4	import {BlockEditProps} from '@wordpress/blocks';
5	import {PanelBody, ToggleControl} from '@wordpress/components';
6	import {CampaignBlockType} from './types';
7	import CampaignSelector from '../shared/components/CampaignSelector';
8	import CampaignCard from '../shared/components/CampaignCard';
9	import {BlockNotice} from '@givewp/form-builder-library';
10	import {getCampaignOptionsWindowData, updateUserNoticeOptions, useCampaignEntityRecord, createCampaignPage} from '@givewp/campaigns/utils';
11
12
13	const styles = {
14	title: {
15	fontWeight: 600
16	},
17	notice: {
18	position: 'relative',
19	display: 'flex',
20	flexDirection: 'column',
21	gap: 8,
22	padding: 16,
23	borderRadius: 2,
24	color: '#0e0e0e',
25	background: '#f2f2f2',
26	fontSize: 12,
27	lineHeight: 1.33,
28	},
29	close: {
30	position: 'absolute',
31	cursor: 'pointer',
32	right: 16,
33	top: 16,
34	},
35	link: {
36	color: '#0e0e0e',
37	}
38	} as CSSProperties;
39
40	const CloseIcon = () => (
41	<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
42	<path
43	d="M11.805 5.138a.667.667 0 1 0-.943-.943L8 7.057 5.138 4.195a.667.667 0 1 0-.943.943L7.057 8l-2.862 2.862a.667.667 0 1 0 .943.943L8 8.943l2.862 2.862a.667.667 0 1 0 .943-.943L8.943 8l2.862-2.862z"
44	fill="#0E0E0E" />
45	</svg>
46	)
47
48	export default function Edit({attributes, setAttributes}: BlockEditProps<CampaignBlockType>) {
49	const blockProps = useBlockProps();
50	const campaignWindowData = getCampaignOptionsWindowData();
51	const [showNotification, setShowNotification] = useState(campaignWindowData.admin.showCampaignInteractionNotice);
52	const {record: campaign, hasResolved, edit, save} = useCampaignEntityRecord(attributes.campaignId);
53
54
55	const Notices = () => {
56	if (!attributes.campaignId) {
57	return null;
58	}
59
60	if (campaign.pageId) {
61	if (!showNotification) {
62	return null;
63	}
64
65	return (
66	<p style={styles['notice']}>
67	<span
68	style={styles['close']}
69	onClick={() => {
70	updateUserNoticeOptions('givewp_campaign_interaction_notice').then(() => setShowNotification(false))
71	}}>
72	<CloseIcon />
73	</span>
74	<span style={styles['title']}>
75	{__('Campaign interaction', 'give ')}
76	</span>
77	<span>
78	{__('Users will be redirected to campaign page.', 'give')}
79	</span>
80	</p>
81	)
82	}
83
84	return (
85	<BlockNotice
86	title={__('There is no Campaign page for this campaign.', 'give ')}
87	description={__('For this campaign block to work properly, create a campaign page.', 'give')}
88	>
89	<a
90	href="#"
91	onClick={async (e) => {
92	e.preventDefault();
93	const campaignPageResponse = await createCampaignPage(campaign.id)
94
95	if (campaignPageResponse) {
96	edit({...campaign, pageId: campaignPageResponse?.id});
97
98	await save();
99	}
100	}}
101	style={styles['link']}
102	>
103	{__('Create campaign page.', 'give')}
104	</a>
105	</BlockNotice>
106	)
107	};
108
109	return (
110	<div {...blockProps}>
111	{hasResolved && (
112	<>
113	<CampaignSelector
114	campaignId={attributes.campaignId}
115	handleSelect={(campaignId: number) => setAttributes({campaignId})}
116	showInspectorControl={true}
117	inspectorControls={<Notices />}
118	>
119	<CampaignCard
120	campaign={campaign}
121	showImage={attributes.showImage}
122	showDescription={attributes.showDescription}
123	showGoal={attributes.showGoal}
124	/>
125	</CampaignSelector>
126
127	<InspectorControls>
128	<PanelBody title={__('Display Elements', 'give')} initialOpen={true}>
129	<ToggleControl
130	label={__('Show campaign image', 'give')}
131	checked={attributes.showImage}
132	onChange={(showImage) => setAttributes({showImage})}
133	/>
134	<ToggleControl
135	label={__('Show description', 'give')}
136	checked={attributes.showDescription}
137	onChange={(showDescription) => setAttributes({showDescription})}
138	/>
139	<ToggleControl
140	label={__('Show goal', 'give')}
141	checked={attributes.showGoal}
142	onChange={(showGoal) => setAttributes({showGoal})}
143	/>
144	</PanelBody>
145	</InspectorControls>
146	</>
147	)}
148	</div>
149	)
150	}
151