extendify / src / Launch / components / RestartLaunchModal.jsx

RestartLaunchModal.jsx in Extendify 3.2.1, at src/Launch/components/RestartLaunchModal.jsx

242 lines 6.7 KB

Raw Download Zip

1	import { Dialog } from '@headlessui/react';
2	import { updateOption } from '@launch/api/WPApi';
3	import { useUserSelectionStore } from '@launch/state/user-selections';
4	import apiFetch from '@wordpress/api-fetch';
5	import { Spinner } from '@wordpress/components';
6	import { forwardRef, useEffect, useRef, useState } from '@wordpress/element';
7	import { __, sprintf } from '@wordpress/i18n';
8	import classnames from 'classnames';
9	import { AnimatePresence, motion } from 'framer-motion';
10
11	export const RestartLaunchModal = ({ setPage }) => {
12	const oldPages = window.extOnbData.resetSiteInformation.pagesIds ?? [];
13	const oldNavigations =
14	window.extOnbData.resetSiteInformation.navigationsIds ?? [];
15	const templatePartsIds =
16	window.extOnbData.resetSiteInformation.templatePartsIds ?? [];
17	const pageWithTitleTemplateId =
18	window.extOnbData.resetSiteInformation.pageWithTitleTemplateId ?? '';
19	const globalStylesPostID = window.extSharedData.globalStylesPostID;
20
21	const { resetState } = useUserSelectionStore();
22	const [open, setOpen] = useState(false);
23	const [processing, setProcessing] = useState(false);
24	const initialFocus = useRef(null);
25	const handleExit = () => {
26	window.location.href = `${window.extSharedData.adminUrl}admin.php?page=extendify-assist`;
27	};
28
29	const handleOk = async () => {
30	setProcessing(true);
31	resetState();
32	for (const pageId of oldPages) {
33	try {
34	await apiFetch({
35	path: `/wp/v2/pages/${pageId}`,
36	method: 'DELETE',
37	});
38	} catch (responseError) {
39	console.warn(
40	`delete pages failed to delete a page (id: ${pageId}) with the following error`,
41	responseError,
42	);
43	}
44	}
45	// They could be posts
46	for (const pageId of oldPages) {
47	try {
48	await apiFetch({
49	path: `/wp/v2/posts/${pageId}`,
50	method: 'DELETE',
51	});
52	} catch (responseError) {
53	console.warn(
54	`delete posts failed to delete a page (id: ${pageId}) with the following error`,
55	responseError,
56	);
57	}
58	}
59	// delete the wp_navigation posts created by Launch
60	for (const navigationId of oldNavigations) {
61	try {
62	await apiFetch({
63	path: `/wp/v2/navigation/${navigationId}`,
64	method: 'DELETE',
65	});
66	} catch (responseError) {
67	console.warn(
68	`delete navigation failed to delete a navigation (id: ${navigationId}) with the following error`,
69	responseError,
70	);
71	}
72	}
73
74	for (const template of templatePartsIds) {
75	try {
76	await apiFetch({
77	path: `/wp/v2/template-parts/${template}?force=true`,
78	method: 'DELETE',
79	});
80	} catch (responseError) {
81	console.warn(
82	`delete template failed to delete template (id: ${template}) with the following error`,
83	responseError,
84	);
85	}
86	}
87
88	try {
89	await apiFetch({
90	path: `/wp/v2/templates/${pageWithTitleTemplateId}?force=true`,
91	method: 'DELETE',
92	});
93	} catch (responseError) {
94	console.warn('Failed to delete page-with-title template:', responseError);
95	}
96
97	// Reset global styles
98	try {
99	await apiFetch({
100	path: `/wp/v2/global-styles/${globalStylesPostID}`,
101	method: 'POST',
102	headers: {
103	'Content-Type': 'application/json',
104	},
105	body: JSON.stringify({
106	settings: {},
107	styles: {},
108	}),
109	});
110	} catch (styleResetError) {
111	console.warn(
112	'Failed to reset global styles with the following error:',
113	styleResetError,
114	);
115	}
116
117	// Reset animation settings to none
118	try {
119	await updateOption('extendify_animation_settings', {
120	type: 'none',
121	speed: 'medium',
122	});
123	} catch (animationResetError) {
124	console.warn(
125	'Failed to reset animation settings with the following error:',
126	animationResetError,
127	);
128	}
129
130	setOpen(false);
131	window.location.reload();
132	};
133
134	useEffect(() => {
135	if (oldPages.length > 0) {
136	setOpen(true);
137	setPage(0);
138	}
139	}, [oldPages.length, setOpen, setPage]);
140
141	return (
142	<AnimatePresence>
143	{open && (
144	<Dialog
145	initialFocus={initialFocus}
146	static
147	open={open}
148	as={motion.div}
149	initial={false}
150	animate={{ opacity: 1 }}
151	exit={{ opacity: 0 }}
152	data-test="confirmation-launch"
153	className="extendify-launch extendify-launch-modal"
154	onClose={() => null}
155	>
156	<div className="absolute top-0 mx-auto flex h-screen w-full items-center justify-center md:p-8">
157	<div
158	className="fixed inset-0 bg-black/30"
159	style={{ backdropFilter: 'blur(2px)', zIndex: 99999 }}
160	aria-hidden="true"
161	/>
162	<div
163	style={{ zIndex: 99999 + 100 }}
164	className="relative mx-6 max-w-[1600px] rounded-sm bg-white shadow-2xl sm:flex sm:overflow-hidden"
165	>
166	<Dialog.Panel className="flex flex-col">
167	<Dialog.Title className="m-0 flex items-center py-6 pl-8 pr-7 text-2xl font-bold text-gray-900">
168	{__('Start over?', 'extendify-local')}
169	</Dialog.Title>
170	<div className="relative max-w-[600px] px-8 py-0 text-left font-normal rtl:text-right">
171	<p className="m-0 mb-2 p-0 text-base">
172	{__(
173	'Go through the AI website creation process again to create a new site.',
174	'extendify-local',
175	)}
176	</p>
177	<p className="m-0 mb-2 p-0 text-base">
178	<strong>
179	{sprintf(
180	// translators: %3$s is the number of old pages
181	__(
182	'%s pages/posts created in the prior onboarding session will be deleted.',
183	'extendify-local',
184	),
185	oldPages.length,
186	)}
187	</strong>
188	</p>
189	</div>
190	<div className="flex justify-end gap-2 px-8 py-8 text-base">
191	<NavigationButton
192	data-test="modal-exit-button"
193	onClick={handleExit}
194	disabled={processing}
195	className="border-gray-200 bg-white text-design-main hover:bg-gray-50 focus:bg-gray-50"
196	>
197	{__('Exit', 'extendify-local')}
198	</NavigationButton>
199	<NavigationButton
200	onClick={handleOk}
201	disabled={processing}
202	className="border-design-main bg-design-main text-design-text"
203	data-test="modal-continue-button"
204	>
205	{!processing ? (
206	__('Delete and start over', 'extendify-local')
207	) : (
208	<div className="flex items-center justify-center">
209	<Spinner />
210	<div>{__('Processing', 'extendify-local')}</div>
211	</div>
212	)}
213	</NavigationButton>
214	</div>
215	</Dialog.Panel>
216	</div>
217	</div>
218	</Dialog>
219	)}
220	</AnimatePresence>
221	);
222	};
223
224	const NavigationButton = forwardRef((props, ref) => {
225	return (
226	<button
227	ref={ref}
228	{...props}
229	className={classnames(
230	'button-focus flex items-center rounded-sm border px-6 py-3 leading-6',
231	{
232	'opacity-50': props.disabled,
233	},
234	props.className,
235	)}
236	type="button"
237	>
238	{props.children}
239	</button>
240	);
241	});
242