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 trunk, at vendor/team-updraft/lib-onboarding-wizard/Wizard/Onboarding/src/components/Fields/Checkbox.jsx

117 lines 4.4 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	import Tooltip from "../../utils/Tooltip/Tooltip";
10
11	const Checkbox = ({
12	field,
13	onChange,
14	value,
15	}) => {
16
17	const {
18	onboardingData,
19	} = useOnboardingStore();
20
21	const privacy_statement = get_website_url(onboardingData.privacy_statement_url, {
22	utm_source: onboardingData.prefix + '_onboarding',
23	utm_content: 'mailing-list'
24	});
25
26	const privacy_url_label = onboardingData.privacy_url_label;
27
28	const disabled = field.is_lock === true;
29
30	// Force value to false when disabled on mount and when disabled state changes
31	useEffect(() => {
32	if (disabled && value !== false) {
33	onChange(false);
34	}
35	}, [disabled]);
36
37	const tooltipContent = field.tooltip && (
38	typeof field.tooltip.text === 'string' && field.tooltip.text.trim() !== ''
39	) ? field.tooltip : null;
40
41	// Define the label element
42	const labelElement = (
43	<label htmlFor={field.id}
44	className={`font-normal text-md flex items-center gap-1 ${
45	disabled ? "text-[#9FA4A7]" : "text-gray-1000"
46	}`}
47	>
48	<span className="text-gray-1000 font-normal flex">
49	{field.label}
50	</span>
51	</label>
52	);
53
54	// Define the icon element (always rendered if tooltipContent exists)
55	const iconElement = tooltipContent ? (
56	<Icon
57	name={tooltipContent?.icon ?? 'info'}
58	color="gray500"
59	fill="gray500"
60	size={16}
61	className="ml-[-4px]"
62	/>
63	) : null;
64
65	return (
66	<FieldWrapper label={''} inputId={field.id}>
67	<div className="flex flex-col space-y-1">
68	<div className={`flex ${field.show_privacy_link ? "items-start" : "items-center"} gap-2`}>
69	{field.subtype === 'switch'
70	? <SwitchInput
71	label={field.label}
72	onChange={(checked) => !disabled && onChange(!!checked)}
73	value={disabled ? false : !!value}
74	id={field.id}
75	disabled={disabled}
76	/>
77	: <CheckboxInput
78	label={field.label}
79	onChange={(checked) => !disabled && onChange(!!checked)}
80	value={disabled ? false : !!value}
81	id={field.id}
82	disabled={disabled}
83	/>
84	}
85	{window.innerWidth > 768 && tooltipContent && disabled ? ( // If disabled and has tooltip, wrap both label and icon in Tooltip
86	<Tooltip tooltip={tooltipContent} triggerClassName="flex items-center gap-2">
87	{labelElement}
88	{iconElement}
89	</Tooltip>
90	) : (
91	// Otherwise (not disabled, or disabled without tooltip), render label and icon separately,
92	// with tooltip only on the icon if it exists and is not disabled.
93	<>
94	{labelElement}
95	{tooltipContent && ( // Icon always rendered if tooltipContent exists
96	<Tooltip tooltip={tooltipContent}>
97	{iconElement}
98	</Tooltip>
99	)}
100	</>
101	)}
102	</div>
103	</div>
104
105	{field.show_privacy_link && (
106	<div className="text-left ml-8">
107	<a rel="noopener noreferrer nofollow" className="underline text-[var(--teamupdraft-grey-600)] focus:outline-none focus:ring-0"
108	target="_blank"
109	href={privacy_statement}>{privacy_url_label}</a>
110	</div>
111	)}
112
113	</FieldWrapper>
114	);
115	};
116
117	export default Checkbox;