← All changes | src/AutoLaunch/components/CreatingSite.jsx +44 -74 3.1.4 → trunk View file →

		@@ -1,20 +1,32 @@
	1	+import { Logo } from '@auto-launch/components/Logo';
	2	+import { LoaderGraphic, StatusMessage } from '@auto-launch/components/Progress';
	3	+import { WaitingOverlay } from '@auto-launch/components/Waiting';
	4	+import { activeLogo, designRoot } from '@auto-launch/functions/design';
1	5	import { useCreateSite } from '@auto-launch/hooks/useCreateSite';
2	6	import { useRateLimitedCursor } from '@auto-launch/hooks/useRateLimitedCursor';
3		-import { loaderSiteCreation } from '@auto-launch/icons';
4	7	import {
5	8	clearPersistedLaunchData,
6	9	useLaunchDataStore,
7	10	} from '@auto-launch/state/launch-data';
	11	+import { launchStrings } from '@auto-launch/strings';
	12	+import { activeProgressTemplate } from '@auto-launch/templates';
8	13	import { useEffect, useRef, useState } from '@wordpress/element';
9		-import { __ } from '@wordpress/i18n';
10	14	import { Icon, info } from '@wordpress/icons';
11		-import { AnimatePresence, motion } from 'framer-motion';
12	15
13		-const { adminUrl, homeUrl } = window.extSharedData;
	16	+const loaderImage = () => {
	17	+ const root = designRoot();
	18	+ if (!root) return '';
14	19
15		-export const CreatingSite = ({ height }) => {
	20	+ return getComputedStyle(root)
	21	+ .getPropertyValue('--ext-ui-loader-image')
	22	+ .trim()
	23	+ .replace(/^url\(["']?|["']?\)$/g, '');
	24	+};
	25	+
	26	+export const CreatingSite = () => {
16	27	const { done } = useCreateSite();
	28	+ const { partnerLogo, partnerName } = window.extSharedData ?? {};
17	29	const pos = useRef(0);
18	30	const [currentMessage, setCurrentMessage] = useState(null);
19	31	const [loadAdmin, setLoadAdmin] = useState(false);
20	32	const {
		@@ -23,10 +35,10 @@
23	35	setErrorMessage,
24	36	errorCount,
25	37	needToStall,
26	38	resetErrorCount,
27		- setPulse,
28	39	} = useLaunchDataStore();
	40	+ const Page = activeProgressTemplate();
29	41
30	42	useRateLimitedCursor(
31	43	() => {
32	44	if (errorMessage) return false;
		@@ -59,17 +71,15 @@
59	71	return () => clearTimeout(timeout);
60	72	}, [errorMessage, setErrorMessage]);
61	73
62	74	useEffect(() => {
63		- setPulse(!done);
64		- }, [done]);
65		-
66		- useEffect(() => {
67	75	if (!done) return;
68	76	setLoadAdmin(true);
69	77	const timeout = setTimeout(() => {
70	78	clearPersistedLaunchData();
71		- window.location.replace(`${homeUrl}?extendify-launch-success=1`);
	79	+ window.location.replace(
	80	+ `${window.extSharedData.homeUrl}?extendify-launch-success=1`,
	81	+ );
72	82	}, 3000);
73	83	return () => clearTimeout(timeout);
74	84	}, [done]);
75	85
		@@ -80,73 +90,33 @@
80	90	}, 10000); // reset after 10 seconds
81	91	return () => clearTimeout(timer);
82	92	}, [needToStall, errorCount, resetErrorCount]);
83	93
84		- if (needToStall()) {
85		- return (
86		- <div
87		- className="w-full rounded-3xl border border-gray-300 bg-[#F0F0F0CC]/80 backdrop-blur-[80px] p-6 flex items-center gap-2"
88		- style={{
89		- boxShadow: '0px 4px 30px 0px #0000001A',
90		- }}
91		- >
92		- <div className="flex gap-2">
93		- <div className="w-6 shrink-0 pt-0.5">
94		- <Icon icon={info} size={24} />
95		- </div>
96		- <div className="flex flex-col gap-2">
97		- <span className="text-lg font-semibold leading-7 text-gray-900">
98		- {__('We are experiencing some delays', 'extendify-local')}
99		- </span>
100		- <span className="text-base font-normal leading-6 text-gray-900">
101		- {__('Pausing for a few seconds', 'extendify-local')}
102		- </span>
103		- </div>
104		- </div>
105		- </div>
106		- );
107		- }
	94	+ const stalling = needToStall();
108	95
109	96	return (
110		- <div
111		- className="w-full rounded-3xl border border-gray-300 bg-gray-100/80 backdrop-blur-2xl shadow-md flex flex-col items-center justify-center gap-3 relative"
112		- style={{
113		- height: height || 'auto',
114		- }}
115		- >
116		- <div className="text-design-main">{loaderSiteCreation}</div>
117		- <div className="h-5 overflow-hidden">
118		- <AnimatePresence mode="wait">
119		- {currentMessage ? (
120		- <motion.p
121		- key={currentMessage}
122		- initial={{ opacity: 0, y: 8 }}
123		- animate={{ opacity: 1, y: 0 }}
124		- exit={{ opacity: 0 }}
125		- transition={{ duration: 0.25 }}
126		- className="m-0 text-sm font-medium leading-5 text-center status-animation"
127		- >
128		- {currentMessage}
129		- </motion.p>
130		- ) : null}
131		- </AnimatePresence>
132		- </div>
133		- {errorMessage ? (
134		- <div
135		- className="absolute left-0 w-full rounded-3xl border border-gray-300 bg-[#F0F0F0CC] backdrop-blur-[80px] px-6 py-3 flex items-center gap-2"
136		- style={{
137		- top: 'calc(100% + 24px)',
138		- boxShadow: '0px 4px 30px 0px #0000001A',
139		- }}
140		- >
141		- <Icon icon={info} size={24} />
142		- <span className="text-sm font-medium leading-5 text-gray-900">
143		- {errorMessage}
144		- </span>
145		- </div>
146		- ) : null}
	97	+ <>
	98	+ <Page
	99	+ parts={{
	100	+ logo: <Logo name={partnerName} src={activeLogo() ?? partnerLogo} />,
	101	+ graphic: <LoaderGraphic src={loaderImage()} />,
	102	+ status: <StatusMessage message={currentMessage} />,
	103	+ }}
	104	+ has={{ card: true }}
	105	+ />
	106	+ <WaitingOverlay
	107	+ show={stalling}
	108	+ icon={<Icon icon={info} size={32} />}
	109	+ message={launchStrings().stalled}
	110	+ note={launchStrings().stalledNote}
	111	+ />
	112	+ <WaitingOverlay
	113	+ show={!stalling && Boolean(errorMessage)}
	114	+ icon={<Icon icon={info} size={32} />}
	115	+ message={errorMessage}
	116	+ />
147	117	{loadAdmin ? <AdminLoader /> : null}
148		- </div>
	118	+ </>
149	119	);
150	120	};
151	121
152	122	// iframe that loads the admin in the background to make sure
		@@ -153,9 +123,9 @@
153	123	// all php functions that require admin context work properly.
154	124	const AdminLoader = () => (
155	125	<iframe
156	126	title="Admin Loader"
157		- src={adminUrl}
	127	+ src={window.extSharedData.adminUrl}
158	128	style={{ display: 'none' }}
159	129	sandbox="allow-same-origin allow-scripts allow-forms"
160	130	/>
161	131	);