extendify / src / Agent / workflows / block-selector / components / UpdateImageConfirm.jsx

UpdateImageConfirm.jsx in Extendify 3.0.6, at src/Agent/workflows/block-selector/components/UpdateImageConfirm.jsx

183 lines 5.1 KB

Raw Download Zip

1	import { walkAndUpdateImageDetails } from '@agent/lib/blocks';
2	import {
3	addCustomMediaViewsCss,
4	removeCustomMediaViewsCss,
5	} from '@agent/lib/media-views';
6	import { useWorkflowStore } from '@agent/state/workflows';
7	import { registerCoreBlocks } from '@wordpress/block-library';
8	import { getBlockTypes } from '@wordpress/blocks';
9	import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
10	import { __, sprintf } from '@wordpress/i18n';
11	import { MediaUpload } from '@wordpress/media-utils';
12
13	const openButton = __('Open Media Library', 'extendify-local');
14
15	export const UpdateImageConfirm = ({ inputs, onConfirm, onCancel }) => {
16	const [showConfirmation, setShowConfirmation] = useState(false);
17	const [selectedImage, setSelectedImage] = useState(null);
18	const { block } = useWorkflowStore();
19
20	const resetImagePreview = useCallback(() => {
21	if (!selectedImage) return;
22	const imageElement = document.querySelector(
23	// The CSS.escape() method can also be used for escaping strings
24	// https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape_static
25	`[data-extendify-agent-block-id="${block?.id}"] > img[src="${CSS.escape(
26	selectedImage.url,
27	)}"]`,
28	);
29	if (imageElement) {
30	imageElement.src = inputs.url.replaceAll(',', '%2C');
31	}
32	}, [block?.id, selectedImage, inputs.url]);
33
34	const confirmed = useRef(false);
35	useEffect(() => {
36	if (!selectedImage) return;
37	return () => {
38	if (!confirmed.current) resetImagePreview();
39	};
40	}, [selectedImage]);
41
42	const previewImage = (image) => {
43	// Query the DOM based on the block id and the image url
44	const originalImage = document.querySelector(
45	// The CSS.escape() method can also be used for escaping strings
46	// https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape_static
47	`[data-extendify-agent-block-id="${block?.id}"] img[src="${CSS.escape(
48	inputs.url.replaceAll(',', '%2C'),
49	)}"]`,
50	);
51	if (!originalImage) return;
52	originalImage.srcset = '';
53	// replace the original image source with the new image url
54	originalImage.src = image.url;
55	// show the confirmation message
56	setShowConfirmation(true);
57	// save the image in the state to be used later in onConfirm and onCancel
58	setSelectedImage(image);
59	};
60
61	const handleConfirm = async () => {
62	if (!selectedImage) return;
63	confirmed.current = true;
64	await onConfirm({
65	data: {
66	previousContent: inputs.previousContent,
67	newContent: walkAndUpdateImageDetails(inputs, selectedImage),
68	},
69	shouldRefreshPage: true,
70	});
71	};
72
73	useEffect(() => {
74	if (getBlockTypes().length !== 0) return;
75	registerCoreBlocks();
76	}, []);
77
78	useEffect(() => {
79	// Put modal above the Agent
80	const style = document.createElement('style');
81	style.textContent = `.media-modal {
82	z-index: 999999 !important;
83	}`;
84	document.head.appendChild(style);
85	return () => style.remove();
86	}, []);
87
88	useEffect(() => {
89	addCustomMediaViewsCss();
90
91	return () => removeCustomMediaViewsCss();
92	}, []);
93
94	if (showConfirmation) {
95	return (
96	<Wrapper>
97	<Confirmation handleConfirm={handleConfirm} handleCancel={onCancel} />
98	</Wrapper>
99	);
100	}
101
102	return (
103	<Wrapper>
104	<Content>
105	<p className="m-0 p-0 text-sm text-gray-900">
106	{sprintf(
107	__(
108	'The agent has requested the media library. Press "%s" to upload or select an image.',
109	'extendify-local',
110	),
111	openButton,
112	)}
113	</p>
114	</Content>
115	<div className="flex justify-start gap-2 p-3">
116	<button
117	type="button"
118	className="w-full rounded-sm border border-gray-500 bg-white p-2 text-sm text-gray-900"
119	onClick={onCancel}
120	>
121	{__('Cancel', 'extendify-local')}
122	</button>
123	<MediaUpload
124	title={__('Select or Upload Image', 'extendify-local')}
125	onSelect={previewImage}
126	allowedTypes={['image']}
127	modalClass="image__media-modal"
128	render={({ open }) => (
129	<button
130	type="button"
131	className="w-full rounded-sm border border-design-main bg-design-main p-2 text-sm text-white"
132	onClick={open}
133	>
134	{openButton}
135	</button>
136	)}
137	/>
138	</div>
139	</Wrapper>
140	);
141	};
142
143	const Wrapper = ({ children }) => (
144	<div className="mb-4 ml-10 mr-2 flex flex-col rounded-lg border border-gray-300 bg-gray-50 rtl:ml-2 rtl:mr-10">
145	{children}
146	</div>
147	);
148
149	const Content = ({ children }) => (
150	<div className="rounded-lg border-b border-gray-300 bg-white">
151	<div className="p-3">{children}</div>
152	</div>
153	);
154
155	const Confirmation = ({ handleConfirm, handleCancel }) => (
156	<>
157	<Content>
158	<p className="m-0 p-0 text-sm text-gray-900">
159	{__(
160	'The agent has made the changes in the browser. Please review and confirm.',
161	'extendify-local',
162	)}
163	</p>
164	</Content>
165	<div className="flex flex-wrap justify-start gap-2 p-3">
166	<button
167	type="button"
168	className="flex-1 rounded-sm border border-gray-500 bg-white p-2 text-sm text-gray-900"
169	onClick={handleCancel}
170	>
171	{__('Cancel', 'extendify-local')}
172	</button>
173	<button
174	type="button"
175	className="flex-1 rounded-sm border border-design-main bg-design-main p-2 text-sm text-white"
176	onClick={handleConfirm}
177	>
178	{__('Save', 'extendify-local')}
179	</button>
180	</div>
181	</>
182	);
183