← All changes | src/AutoLaunch/components/CreatingSite.jsx +49 -75 3.1.1 → trunk View file →

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