wp-optimize / vendor / team-updraft / lib-onboarding-wizard / Wizard / Onboarding / src / components / Fields / Checkbox.jsx

Checkbox.jsx in WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance 4.6.0, at vendor/team-updraft/lib-onboarding-wizard/Wizard/Onboarding/src/components/Fields/Checkbox.jsx

93 lines 3.5 KB

Raw Download Zip

1	import {useEffect} from "react";
2	import FieldWrapper from "@/components/Fields/FieldWrapper";
3	import CheckboxInput from "@/components/Fields/CheckboxInput";
4	import SwitchInput from "@/components/Fields/SwitchInput";
5	import { __ } from "@wordpress/i18n";
6	import {get_website_url} from "@/utils/lib.js";
7	import useOnboardingStore from "@/store/useOnboardingStore";
8	import Icon from '@/utils/Icon';
9
10	const Checkbox = ({
11	field,
12	onChange,
13	value,
14	}) => {
15
16	const {
17	onboardingData,
18	} = useOnboardingStore();
19
20	const privacy_statement = get_website_url(onboardingData.privacy_statement_url, {
21	utm_source: onboardingData.prefix + '_onboarding',
22	utm_content: 'mailing-list'
23	});
24
25	const privacy_url_label = onboardingData.privacy_url_label;
26
27	const disabled = field.is_lock === true;
28
29	// Force value to false when disabled on mount and when disabled state changes
30	useEffect(() => {
31	if (disabled && value !== false) {
32	onChange(false);
33	}
34	}, [disabled]);
35
36	return (
37	<FieldWrapper label={''} inputId={field.id} tooltip={disabled ? field.tooltip : null}>
38	<div className="flex flex-col space-y-1">
39	<div className={`flex ${field.show_privacy_link ? "items-start" : "items-center"} gap-2`}>
40	{field.subtype === 'switch'
41	? <SwitchInput
42	label={field.label}
43	onChange={(checked) => !disabled && onChange(!!checked)}
44	value={disabled ? false : !!value}
45	id={field.id}
46	disabled={disabled}
47	/>
48	: <CheckboxInput
49	label={field.label}
50	onChange={(checked) => !disabled && onChange(!!checked)}
51	value={disabled ? false : !!value}
52	id={field.id}
53	disabled={disabled}
54	/>
55	}
56	<label htmlFor={field.id}
57	className={`font-normal text-md flex items-center gap-1 ${
58	disabled ? "text-[#9FA4A7]" : "text-gray-1000"
59	}`}
60	>
61	<span className="text-gray-1000 font-normal flex">
62	{field.label}
63	</span>
64	</label>
65	{field.tooltip && (
66	typeof field.tooltip.text === 'string' &&
67	field.tooltip.text.trim() !== ''
68	) && (
69	<Icon
70	name={field.tooltip?.icon ?? 'info'}
71	color="gray500"
72	fill="gray500"
73	size={16}
74	tooltip={disabled ? undefined : field.tooltip}
75	className="ml-[-4px]"
76	/>
77	)}
78	</div>
79	</div>
80
81	{field.show_privacy_link && (
82	<div className="text-left ml-8">
83	<a rel="noopener noreferrer nofollow" className="underline text-[var(--teamupdraft-grey-600)] focus:outline-none focus:ring-0"
84	target="_blank"
85	href={privacy_statement}>{privacy_url_label}</a>
86	</div>
87	)}
88
89	</FieldWrapper>
90	);
91	};
92
93	export default Checkbox;