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

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

208 lines 7.7 KB

Raw Download Zip

1	import { createCampaignPage, getCampaignOptionsWindowData, updateCampaignStatus, useCampaignEntityRecord } from '@givewp/campaigns/utils';
2	import { useDispatch } from '@wordpress/data';
3	import { store as coreStore } from '@wordpress/core-data';
4	import { useEffect, useState } from '@wordpress/element';
5	import { __ } from '@wordpress/i18n';
6	import cx from 'classnames';
7	import { useForm } from 'react-hook-form';
8	import { ArrowReverse, TrashIcon, ViewIcon } from '../Icons';
9	import { Campaign } from '../types';
10	import ArchivedCampaignNotice from './Components/Notices/ArchivedCampaignNotice';
11	import styles from './CampaignDetailsPage.module.scss';
12	import AdminDetailsPage from '@givewp/components/AdminDetailsPage';
13	import ConfirmationDialog from '@givewp/components/AdminDetailsPage/ConfirmationDialog';
14	import tabDefinitions from './Tabs/definitions';
15	import '@givewp/campaigns/store';
16
17	const StatusBadge = ({ status }: { status: string }) => {
18	const statusMap = {
19	active: __('Active', 'give'),
20	archived: __('Archived', 'give'),
21	};
22
23	return (
24	<div className="interweave">
25	<div className={`statusBadge statusBadge--${status}`}>
26	<p>{statusMap[status]}</p>
27	</div>
28	</div>
29	);
30	};
31
32	export default function CampaignsDetailsPage({ campaignId }) {
33	const { adminUrl } = getCampaignOptionsWindowData();
34	const [isCreatingPage, setIsCreatingPage] = useState<boolean>(false);
35	const [showConfirmationDialog, setShowConfirmationDialog] = useState<string \| null>(null);
36
37	const dispatch = useDispatch(`givewp/admin-details-page-notifications`);
38	const { receiveEntityRecords } = useDispatch(coreStore);
39
40	const { record: campaign } = useCampaignEntityRecord(campaignId);
41	const methods = useForm<Campaign>({
42	mode: 'onBlur',
43	shouldFocusError: true,
44	});
45	const { setValue } = methods;
46
47	// Show campaign archived notice
48	useEffect(() => {
49	if (campaign?.status !== 'archived') {
50	return;
51	}
52
53	dispatch.addNotice({
54	id: 'update-archive-notice',
55	type: 'warning',
56	content: (onDismiss) => (
57	<ArchivedCampaignNotice
58	handleClick={() => {
59	onDismiss();
60	updateStatus('active');
61	}}
62	/>
63	),
64	});
65	}, [campaign?.status]);
66
67	const updateStatus = async (status: 'archived' \| 'active') => {
68	const campaignStatusResponse = await updateCampaignStatus(campaign.id, status);
69
70	if (campaignStatusResponse) {
71	receiveEntityRecords('givewp', 'campaign', campaignStatusResponse, undefined, false);
72	setValue('status', campaignStatusResponse?.status);
73	dispatch.addSnackbarNotice({
74	id: `save-success`,
75	content: getMessageByStatus(status),
76	});
77	} else {
78	dispatch.addSnackbarNotice({
79	id: `save-error`,
80	type: 'error',
81	content: __('Failed to update campaign status', 'give'),
82	});
83	}
84	};
85
86	async function handleCampaignPageCreation() {
87	setIsCreatingPage(true);
88	const campaignPageResponse = await createCampaignPage(campaign.id);
89	setIsCreatingPage(false);
90
91	if (campaignPageResponse) {
92	receiveEntityRecords('givewp', 'campaign', {...campaign, pageId: campaignPageResponse?.id}, undefined, false);
93	setValue('pageId', campaignPageResponse?.id);
94	dispatch.addSnackbarNotice({
95	id: `save-success`,
96	content: __('Campaign page created', 'give'),
97	});
98	} else {
99	dispatch.addSnackbarNotice({
100	id: `save-error`,
101	type: 'error',
102	content: __('Failed to create campaign page', 'give'),
103	});
104	}
105	}
106
107	const SecondaryActionButton = ({ className }: { className: string }) => {
108	return (
109	!isCreatingPage && campaign.pageId > 0 ? (
110	<a
111	className={`button button-secondary ${className}`}
112	href={`${adminUrl}post.php?post=${campaign.pageId}&action=edit`}
113	rel="noopener noreferrer"
114	>
115	{__('Edit campaign page', 'give')}
116	</a>
117	) : (
118	<button
119	type="button"
120	className={`button button-tertiary ${className}`}
121	onClick={handleCampaignPageCreation}
122	disabled={isCreatingPage}
123	>
124	{isCreatingPage
125	? __('Creating Campaign Page', 'give')
126	: __('Create Campaign Page', 'give')}
127	</button>
128	)
129	);
130	};
131
132	const ContextMenuItems = ({ className }: { className: string }) => {
133	return (
134	<>
135	{campaign.pagePermalink && (
136	<a
137	href={campaign.pagePermalink}
138	aria-label={__('View Campaign', 'give')}
139	className={className}
140	>
141	<ViewIcon /> {__('View Campaign', 'give')}
142	</a>
143	)}
144	{campaign.status === 'archived' ? (
145	<a
146	href="#"
147	className={cx(className, styles.draft)}
148	onClick={() => {
149	updateStatus('active');
150	dispatch.dismissNotification('update-archive-notice');
151	}}
152	>
153	<ArrowReverse /> {__('Move to Active', 'give')}
154	</a>
155	) : (
156	<a
157	href="#"
158	className={cx(className, styles.archive)}
159	onClick={() => setShowConfirmationDialog('archive')}
160	>
161	<TrashIcon /> {__('Archive Campaign', 'give')}
162	</a>
163	)}
164	</>
165	);
166	};
167
168	return (
169	<AdminDetailsPage
170	objectId={campaign?.id}
171	objectType="campaign"
172	objectTypePlural="campaigns"
173	useObjectEntityRecord={useCampaignEntityRecord}
174	tabDefinitions={tabDefinitions}
175	breadcrumbUrl={`${adminUrl}edit.php?post_type=give_forms&page=give-campaigns`}
176	breadcrumbTitle={__('Campaigns', 'give')}
177	pageTitle={campaign?.title}
178	StatusBadge={() => <StatusBadge status={campaign?.status} />}
179	SecondaryActionButton={SecondaryActionButton}
180	ContextMenuItems={ContextMenuItems}
181	>
182	<ConfirmationDialog
183	title={__('Archive Campaign', 'give')}
184	actionLabel={__('Archive campaign', 'give')}
185	isOpen={showConfirmationDialog === 'archive'}
186	handleClose={() => setShowConfirmationDialog(null)}
187	handleConfirm={() => {
188	updateStatus('archived');
189	setShowConfirmationDialog(null);
190	}}
191	>
192	{__('Are you sure you want to archive your campaign? All forms associated with this campaign will be inaccessible to donors.', 'give')}
193	</ConfirmationDialog>
194	</AdminDetailsPage>
195	);
196	}
197
198	const getMessageByStatus = (status: string) => {
199	switch (status) {
200	case 'archived':
201	return __('Campaign is moved to archive', 'give');
202	case 'active':
203	return __('Campaign is now active', 'give');
204	}
205
206	return null;
207	};
208