Modal.jsx — Advanced Ads – Ad Manager & AdSense 2.0.25

advanced-ads / assets / src / oneclick / Modal.jsx

advanced-ads / assets / src / oneclick Last commit date

store 1 year ago AddonRow.jsx 1 year ago App.jsx 1 year ago Metabox.jsx 1 year ago Modal.jsx 1 year ago Notices.jsx 1 year ago Select2.jsx 1 year ago Settings.jsx 1 year ago Step1.jsx 1 year ago Step2.jsx 1 year ago Step3.jsx 1 year ago StepWrapper.jsx 1 year ago main.js 1 year ago

Modal.jsx

236 lines

1	/**
2	* External Dependencies
3	*/
4	import jQuery from 'jquery';
5	import classnames from 'classnames';
6
7	/**
8	* WordPress Dependencies
9	*/
10	import Select from './Select2';
11	import { useContext, useEffect, useRef, useState } from '@wordpress/element';
12
13	/**
14	* Internal Dependencies
15	*/
16	import { OneClickContext } from './store/context';
17
18	const selectOptions = {
19	minimumInputLength: 3,
20	dropdownParent: '#modal-id',
21	ajax: {
22	url: advancedAds.endpoints.ajaxUrl,
23	dataType: 'json',
24	delay: 250,
25	data: (params) => {
26	return {
27	q: params.term,
28	action: 'search_posts',
29	security: advancedAds.oneclick.security,
30	};
31	},
32	processResults(data) {
33	return {
34	results: data,
35	};
36	},
37	}
38	};
39
40	export default function Modal({ open, onClose }) {
41	const dialogRef = useRef(null);
42	const [updating, setUpdating] = useState(false);
43	const [saved, setSaved] = useState(false);
44	const { modal } = advancedAds.oneclick;
45	const { selectedMethod, selectedPage, selectedPageTitle, setMethod, setPage } = useContext(OneClickContext);
46	const [localMethod, setLocalMethod] = useState(selectedMethod);
47	const [localPage, setLocalPage] = useState(selectedPage);
48
49	useEffect(() => {
50	if (open) {
51	dialogRef.current.showModal();
52	} else {
53	dialogRef.current.close();
54	}
55	}, [open]);
56
57	const selectData = selectedPage ? [{ value: selectedPage, label: selectedPageTitle }] : [];
58	const isDisabled = 'final' === localMethod \|\| ! localPage;
59
60	const updatePreview = () => {
61	setUpdating(true);
62	setSaved(true);
63
64	jQuery.ajax({
65	url: ajaxurl,
66	method: 'POST',
67	data: {
68	action: 'update_oneclick_preview',
69	security: advancedAds.oneclick.security,
70	method: localMethod,
71	page: localPage,
72	},
73	}).complete(() => {
74	setUpdating(false);
75	setMethod(localMethod);
76	setPage(localPage);
77	});
78	}
79
80	const finalImport = () => {
81	setSaved(true);
82
83	jQuery.ajax({
84	url: ajaxurl,
85	method: 'POST',
86	data: {
87	action: 'update_oneclick_preview',
88	security: advancedAds.oneclick.security,
89	method: localMethod,
90	},
91	}).complete(() => {
92	setUpdating(false);
93	setMethod(localMethod);
94	setPage(0);
95	});
96	}
97
98	const updateAndClose = () => {
99	if (saved) {
100	setSaved(false);
101	onClose();
102	return;
103	}
104
105	if ('page' === localMethod) {
106	updatePreview();
107	} else if ('final' === localMethod) {
108	finalImport();
109	}
110
111	setSaved(false);
112	onClose();
113	}
114
115	const finalTextClass = classnames('ml-7', {
116	'import-active': 'final' === localMethod,
117	'text-[#a7aaad]': 'final' !== localMethod,
118	});
119	const finalButtonClass = classnames('button button-primary advads-modal-close-action', {
120	'button-primary': 'final' !== localMethod,
121	'!bg-[#cc3000] !border-[#cc3000] !shadow-none': 'final' === localMethod,
122	});
123
124	return (
125	<dialog id="modal-id" className="advads-modal" ref={dialogRef}>
126	<a
127	href="#close"
128	className="advads-modal-close-background"
129	onClick={onClose}
130	>
131	{advancedAds.oneclick.btnClose}
132	</a>
133	<div className="advads-modal-content">
134	<div className="advads-modal-header">
135	<a
136	href="#close"
137	className="advads-modal-close"
138	title={advancedAds.oneclick.btnCancel}
139	onClick={onClose}
140	>
141	×
142	</a>
143	<h3>{modal.title}</h3>
144	</div>
145	<div className="advads-modal-body">
146	<div className="flex gap-x-8">
147	<div>
148	<strong>{modal.labelImport}</strong>
149	</div>
150	<div>
151	<div className="mb-5">
152	<label htmlFor="specific-page">
153	<input
154	type="radio"
155	name="import-methods"
156	id="specific-page"
157	value="page"
158	checked={'page' === localMethod}
159	onChange={() => setLocalMethod('page')}
160	/>
161	<span className="pl-1">
162	{modal.labelSpecificPage}
163	</span>
164	</label>
165	<div className="ml-7 mt-6">
166	<div>
167	<Select
168	defaultValue={localPage}
169	data={selectData}
170	options={selectOptions}
171	style={{ width: '100%' }}
172	disabled={'final' === localMethod}
173	onChange={(value) => setLocalPage(value.target.value)}
174	/>
175	</div>
176	<p className="buttons-set">
177	<button className="button button-primary" disabled={isDisabled} onClick={updatePreview}>
178	{modal.btnUpdate}
179	</button>
180	<a href={`${advancedAds.siteInfo.homeUrl}/?p=${selectedPage}`} target="_blank" className="button button-secondary !flex items-center gap-x-1" disabled={isDisabled}>
181	<span>{modal.btnGoto}</span>
182	<span className="dashicons dashicons-external"></span>
183	</a>
184	{updating && <img src={advancedAds.oneclick.spinner} alt="" className="h-[11px]" />}
185	</p>
186	</div>
187	</div>
188	<div>
189	<label htmlFor="final-import">
190	<input
191	type="radio"
192	name="import-methods"
193	id="final-import"
194	value="final"
195	checked={'final' === localMethod}
196	onChange={() => setLocalMethod('final')}
197	/>
198	<span className="pl-1">
199	{modal.labelFinalImport}
200	</span>
201	</label>
202	<div
203	className={finalTextClass}
204	dangerouslySetInnerHTML={{
205	__html: modal.descFinalImport,
206	}}
207	/>
208	</div>
209	</div>
210	</div>
211	</div>
212	<div className="advads-modal-footer">
213	<div className="tablenav bottom">
214	<a
215	href="#close"
216	className="button button-secondary advads-modal-close"
217	onClick={onClose}
218	>
219	{advancedAds.oneclick.btnCancel}
220	</a>
221
222	<button
223	type="submit"
224	form=""
225	className={finalButtonClass}
226	onClick={updateAndClose}
227	>
228	{'final' === localMethod ? modal.btnFinal : modal.btnSave}
229	</button>
230	</div>
231	</div>
232	</div>
233	</dialog>
234	);
235	}
236