← All changes | src/Shared/components/ProductAccountActivation/SetupComplete.jsx +69 -18 3.1.2 → trunk View file →

		@@ -1,34 +1,85 @@
1	1	import { DialogTitle } from '@headlessui/react';
2		-import { __ } from '@wordpress/i18n';
	2	+import { Spinner } from '@wordpress/components';
	3	+import { __, _n } from '@wordpress/i18n';
3	4	import { check, Icon } from '@wordpress/icons';
	5	+import { ACCOUNT_STATUS } from './usePluginsActivation';
4	6
5	7	const SuccessIcon = () => (
6		- <>
7		- <div className="p-2 rounded-full bg-[#4AB866]/25">
8		- <Icon
9		- icon={check}
10		- className="h-10 w-10 rounded-full bg-[#4AB866] fill-white"
11		- />
12		- </div>
13		- </>
	8	+ <div className="p-2 rounded-full bg-[#4AB866]/25">
	9	+ <Icon
	10	+ icon={check}
	11	+ className="h-10 w-10 rounded-full bg-[#4AB866] fill-white"
	12	+ />
	13	+ </div>
14	14	);
15	15
16		-export const SetupComplete = ({ handleClose }) => {
	16	+const isPending = (plugin) => plugin.status === ACCOUNT_STATUS.pending;
	17	+
	18	+export const SetupComplete = ({ plugins, handleClose }) => {
	19	+ const isRunning = plugins.some(isPending);
	20	+ const accountCount = plugins.length;
	21	+ const heading = isRunning
	22	+ ? _n(
	23	+ 'Setting up your plugin account',
	24	+ 'Setting up your plugin accounts',
	25	+ accountCount,
	26	+ 'extendify-local',
	27	+ )
	28	+ : __('Setup complete', 'extendify-local');
	29	+ const body = isRunning
	30	+ ? _n(
	31	+ 'You can close this window. We will finish creating your account in the background.',
	32	+ 'You can close this window. We will finish creating your accounts in the background.',
	33	+ accountCount,
	34	+ 'extendify-local',
	35	+ )
	36	+ : _n(
	37	+ 'Your plugin account has been set up. Account activation may take a moment to complete.',
	38	+ 'Your plugin accounts have been set up. Account activation may take a moment to complete.',
	39	+ accountCount,
	40	+ 'extendify-local',
	41	+ );
	42	+
17	43	return (
18	44	<div className="px-16 py-10 flex flex-col items-center justify-center">
19	45	<div className="mb-6">
20		- <SuccessIcon />
	46	+ {isRunning ? (
	47	+ <Spinner className="h-10 w-10 text-[#1A5130]" />
	48	+ ) : (
	49	+ <SuccessIcon />
	50	+ )}
21	51	</div>
22	52	<DialogTitle className="text-xl font-semibold text-center text-gray-900 mb-2 font-sans">
23		- {__('Setup complete', 'extendify-local')}
	53	+ {heading}
24	54	</DialogTitle>
25		- <p className="text-center text-gray-700 mb-2 text-base">
26		- {__(
27		- 'Your plugin accounts have been set up. Account activation may take a moment to complete.',
28		- 'extendify-local',
29		- )}
30		- </p>
	55	+ <p className="text-center text-gray-700 mb-2 text-base">{body}</p>
	56	+
	57	+ <div className="w-full mt-6 space-y-3">
	58	+ {plugins.map((plugin) => (
	59	+ <div
	60	+ key={plugin.slug}
	61	+ aria-busy={isPending(plugin)}
	62	+ className="flex items-center gap-3"
	63	+ >
	64	+ <img
	65	+ alt=""
	66	+ src={plugin.image}
	67	+ className="w-6 h-6 rounded-full shrink-0"
	68	+ />
	69	+ <span className="text-sm text-gray-900">{plugin.title}</span>
	70	+ {isPending(plugin) ? (
	71	+ <Spinner className="ml-auto h-5 w-5 text-gray-700" />
	72	+ ) : (
	73	+ <Icon
	74	+ icon={check}
	75	+ className="ml-auto shrink-0 rounded-full bg-[#1A5130] fill-white"
	76	+ />
	77	+ )}
	78	+ </div>
	79	+ ))}
	80	+ </div>
	81	+
31	82	<button
32	83	type="button"
33	84	onClick={handleClose}
34	85	className="mt-6 px-6 py-3 text-base font-medium text-white bg-extendify-main rounded-lg hover:bg-extendify-main-dark focus:outline-none focus:ring-2 focus:ring-extendify-main focus:ring-offset-2"