extendify / src / Shared / components / ProductAccountActivation / SetupPlugins.jsx

SetupPlugins.jsx in Extendify 3.2.1, at src/Shared/components/ProductAccountActivation/SetupPlugins.jsx

199 lines 6.0 KB

Raw Download Zip

1	import {
2	Description,
3	DialogTitle,
4	Field,
5	Input,
6	Label,
7	} from '@headlessui/react';
8	import { __, _n } from '@wordpress/i18n';
9	import { check, chevronRight, external, Icon } from '@wordpress/icons';
10	import { isEmail } from '@wordpress/url';
11	import classNames from 'classnames';
12
13	export const SetupPlugins = ({
14	plugins,
15	setPlugins,
16	handleCreateAccounts,
17	email,
18	setEmail,
19	handleClose,
20	marketingConsent,
21	setMarketingConsent,
22	termsAgreed,
23	setTermsAgreed,
24	}) => {
25	const offeredCount = plugins.length;
26	const isCreateAccountsEnabled =
27	isEmail(email) && termsAgreed && plugins?.some((plugin) => plugin.selected);
28
29	const togglePlugin = (pluginTitle) => {
30	setPlugins(
31	plugins?.map((plugin) => {
32	if (plugin.title !== pluginTitle) {
33	return plugin;
34	}
35
36	return {
37	...plugin,
38	selected: !plugin?.selected,
39	};
40	}),
41	);
42	};
43
44	return (
45	<div className="py-10 px-16">
46	<DialogTitle className="text-2xl font-semibold text-center text-gray-900 mb-10 font-sans">
47	{_n(
48	"Almost done! Let's finish setting up your plugin",
49	"Almost done! Let's finish setting up your plugins",
50	offeredCount,
51	'extendify-local',
52	)}
53	</DialogTitle>
54
55	<div className="space-y-3 mb-8">
56	{plugins?.map((plugin) => {
57	const isSelected = plugin.selected;
58	return (
59	<div
60	key={plugin.title}
61	className={classNames(
62	'w-full flex items-center gap-4 p-4 rounded-lg border-2 text-left transition-colors',
63	isSelected
64	? 'border-[#1A5130] bg-[#1A5130]/5'
65	: 'border-gray-300 bg-white hover:border-gray-400',
66	)}
67	>
68	<div className="shrink-0 self-baseline">
69	<img
70	alt=""
71	src={plugin.image}
72	className="w-8 h-8 rounded-full"
73	/>
74	</div>
75	<div className="flex-1 min-w-0">
76	<div className="font-semibold text-gray-900 mb-1">
77	{plugin.title}
78	</div>
79	<div className="text-sm text-gray-700">
80	{plugin.description}{' '}
81	{plugin.termOfServiceLink && (
82	<a
83	href={plugin.termOfServiceLink}
84	onClick={(e) => e.stopPropagation()}
85	target="_blank"
86	rel="noopener noreferrer"
87	className="text-gray-900 underline hover:underline"
88	>
89	{__('Term of Service', 'extendify-local')}
90	<Icon
91	icon={external}
92	size={18}
93	className="ml-0.5 inline"
94	/>
95	</a>
96	)}
97	</div>
98	</div>
99	<Icon
100	icon={check}
101	onClick={() => togglePlugin(plugin.title)}
102	className={classNames(
103	'shrink-0 rounded-full transition-colors cursor-pointer',
104	isSelected
105	? 'bg-[#1A5130] fill-white'
106	: 'bg-gray-200 fill-transparent',
107	)}
108	/>
109	</div>
110	);
111	})}
112	</div>
113
114	<Field className="mb-8">
115	<Label className="block text-sm font-medium text-gray-900 mb-2">
116	{__('Email address', 'extendify-local')}
117	</Label>
118	<Input
119	required
120	type="email"
121	value={email}
122	onChange={(e) => setEmail(e.target.value)}
123	placeholder="admin@example.com"
124	className="text-gray-900 w-full px-4 py-3 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-extendify-main focus:border-transparent"
125	/>
126	<Description className="mt-2 text-xss text-gray-700">
127	{_n(
128	'This email will be used to create an account with the selected plugin provider. Form protected by reCAPTCHA.',
129	'This email will be used to create accounts with the selected plugin providers. Form protected by reCAPTCHA.',
130	offeredCount,
131	'extendify-local',
132	)}
133	</Description>
134	</Field>
135
136	<label className="flex items-start gap-3 mb-4 cursor-pointer">
137	<input
138	type="checkbox"
139	checked={termsAgreed}
140	onChange={(e) => setTermsAgreed(e.target.checked)}
141	className="mt-0.5 h-4 w-4 shrink-0 rounded border-gray-300 accent-extendify-main focus:ring-extendify-main"
142	/>
143	<span className="text-xs/relaxed text-gray-700">
144	{_n(
145	'I agree to create an account with the selected provider using my email address, and to their applicable Terms of Service.',
146	'I agree to create accounts with the selected providers using my email address, and to their applicable Terms of Service.',
147	offeredCount,
148	'extendify-local',
149	)}
150	</span>
151	</label>
152
153	<label className="flex items-start gap-3 mb-8 cursor-pointer">
154	<input
155	type="checkbox"
156	checked={marketingConsent}
157	onChange={(e) => setMarketingConsent(e.target.checked)}
158	className="mt-0.5 h-4 w-4 shrink-0 rounded border-gray-300 accent-extendify-main focus:ring-extendify-main"
159	/>
160	<span className="text-xs/relaxed text-gray-700">
161	{_n(
162	'I wish to receive communications about news and/or promotions from the selected provider.',
163	'I wish to receive communications about news and/or promotions from selected providers.',
164	offeredCount,
165	'extendify-local',
166	)}
167	</span>
168	</label>
169
170	<div className="flex items-center gap-4">
171	<button
172	type="button"
173	onClick={() => handleClose()}
174	className="px-6 py-3 text-base font-medium text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-extendify-main"
175	>
176	{__('No thanks', 'extendify-local')}
177	</button>
178	<button
179	type="button"
180	onClick={handleCreateAccounts}
181	disabled={!isCreateAccountsEnabled}
182	className={classNames(
183	'ml-auto 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 flex items-center gap-2',
184	{ 'cursor-not-allowed opacity-50': !isCreateAccountsEnabled },
185	)}
186	>
187	{_n(
188	'Create account',
189	'Create accounts',
190	offeredCount,
191	'extendify-local',
192	)}
193	<Icon size={22} icon={chevronRight} className="fill-white" />
194	</button>
195	</div>
196	</div>
197	);
198	};
199