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

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

185 lines 5.4 KB

Raw Download Zip

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