give / src / DonationForms / V2 / resources / components / AddCampaignFormModal / index.tsx

index.tsx in GiveWP – Donation Plugin and Fundraising Platform 4.17.0, at src/DonationForms/V2/resources/components/AddCampaignFormModal/index.tsx

150 lines 5.1 KB

Raw Download Zip

1	import ModalDialog from '@givewp/components/AdminUI/ModalDialog';
2	import styles from './AddCampaignFormModal.module.scss';
3	import {__} from '@wordpress/i18n';
4	import {useRef, useState} from 'react';
5
6	export type EditorTypeOptionProps = {
7	editorType: string;
8	label: string;
9	description: string;
10	editorSelected: string;
11	handleEditorSelected: any;
12	};
13
14	const EditorSelectedIcon = () => {
15	return (
16	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
17	<path
18	fillRule="evenodd"
19	clipRule="evenodd"
20	d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zm5.207 8.707a1 1 0 0 0-1.414-1.414L10.5 13.586l-2.293-2.293a1 1 0 0 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l6-6z"
21	fill="#459948"
22	/>
23	</svg>
24	);
25	};
26
27	/**
28	* Editor Type Option component
29	*
30	* @since 4.0.0
31	*/
32	const EditorTypeOption = ({
33	editorType,
34	label,
35	description,
36	editorSelected,
37	handleEditorSelected,
38	}: EditorTypeOptionProps) => {
39	const divRef = useRef(null);
40	const labelRef = useRef(null);
41
42	const handleDivClick = () => {
43	labelRef.current.click();
44	};
45
46	return (
47	<div
48	className={`givewp-editor-options__option ${
49	editorType === editorSelected ? 'givewp-editor-options__option_selected' : ''
50	}`}
51	ref={divRef}
52	onClick={handleDivClick}
53	>
54	<img
55	src={`${window.GiveDonationForms.pluginUrl}${
56	editorType === 'visualFormBuilder'
57	? 'build/assets/dist/images/admin/give-settings-gateways-v3.jpg'
58	: 'build/assets/dist/images/admin/give-settings-gateways-v2.jpg'
59	}`}
60	alt={label}
61	/>
62	{editorType === 'visualFormBuilder' && (
63	<span className={'givewp-editor-options__option_recommended'}>{__('Recommended', 'give')}</span>
64	)}
65	<label ref={labelRef}>
66	<input
67	type="radio"
68	value={editorType}
69	checked={editorType === editorSelected}
70	onChange={handleEditorSelected}
71	/>
72	{label}
73	</label>
74	<p>{description}</p>
75	<div className={'givewp-editor-options__option_selected_icon'}>
76	<EditorSelectedIcon />
77	</div>
78	</div>
79	);
80	};
81
82	/**
83	* Form Modal component that renders a modal with a styled form inside
84	*
85	* @since 4.0.0
86	*/
87	export default function AddCampaignFormModal({isOpen, handleClose, title, campaignId}: FormModalProps) {
88	const [editorSelected, setEditorSelected] = useState('');
89
90	const handleEditorSelected = (event) => {
91	setEditorSelected(event.target.value);
92	};
93
94	return (
95	<ModalDialog
96	isOpen={isOpen}
97	showHeader={true}
98	handleClose={handleClose}
99	title={title}
100	wrapperClassName={styles.addFormModal}
101	>
102	<>
103	<div className={'givewp-editor-options'}>
104	<EditorTypeOption
105	editorType={'visualFormBuilder'}
106	label={__('Visual Form Builder', 'give')}
107	description={__(
108	'Uses the blocks-based visual form builder for creating and customizing a donation form.',
109	'give'
110	)}
111	editorSelected={editorSelected}
112	handleEditorSelected={handleEditorSelected}
113	/>
114	<EditorTypeOption
115	editorType={'optionBasedFormEditor'}
116	label={__('Use Option-Based Form Editor', 'give')}
117	description={__(
118	'Uses the traditional settings options for creating and customizing a donation form.',
119	'give'
120	)}
121	editorSelected={editorSelected}
122	handleEditorSelected={handleEditorSelected}
123	/>
124	</div>
125	<div className={'givewp-editor-actions'}>
126	<a
127	href={
128	editorSelected === 'visualFormBuilder'
129	? `edit.php?post_type=give_forms&page=givewp-form-builder&donationFormID=new&locale=${window.GiveDonationForms.locale}&campaignId=${campaignId}`
130	: `post-new.php?post_type=give_forms&campaignId=${campaignId}`
131	}
132	className={`button button-primary givewp-editor-actions__button ${
133	!editorSelected ? 'disabled' : ''
134	}`}
135	>
136	{__('Proceed', 'give')}
137	</a>
138	</div>
139	</>
140	</ModalDialog>
141	);
142	}
143
144	interface FormModalProps {
145	isOpen: boolean;
146	handleClose: () => void;
147	title: string;
148	campaignId: string;
149	}
150