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

Email.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/Email.jsx

68 lines 2.5 KB

Raw Download Zip

1	import { useState, useEffect } from "react";
2	import TextInput from "./TextInput";
3	import FieldWrapper from "./FieldWrapper";
4	import { __ } from "@wordpress/i18n";
5	import { isValidEmail } from "@/utils/validators";
6
7	const Email = ({ field, onChange, value, fieldStatus = () => {} }) => {
8	const [isValid, setIsValid] = useState(false);
9	const [touched, setTouched] = useState(false);
10
11	// Validate and report status on value change.
12	// fieldStatus is intentionally omitted from deps: it originates from Accordion
13	// and uses functional updaters (setFailed) + synchronous Zustand reads,
14	// so a stale closure is safe. Adding it would cause re-fires on every Accordion render.
15	useEffect(() => {
16	if (!value) {
17	setIsValid(false);
18	setTouched(false);
19	// Only report failure if user has interacted with the field
20	// This prevents revoking backend-set _completed on initial render
21	if (touched) {
22	fieldStatus(false);
23	}
24	return;
25	}
26
27	const valid = isValidEmail(value);
28	setIsValid(valid);
29	fieldStatus(valid);
30
31	if (!touched) {
32	setTouched(true);
33	}
34	}, [value]);
35
36	const handleBlur = () => {
37	setTouched(true);
38	};
39
40	return (
41	<FieldWrapper inputId={field.id} label={field.label}>
42	<div className="relative w-full">
43	<TextInput
44	id={field.id}
45	placeholder={__("Enter your e-mail address", "ONBOARDING_WIZARD_TEXT_DOMAIN")}
46	type="email"
47	field={field}
48	onChange={(e) => onChange(e.target.value)}
49	onBlur={handleBlur}
50	value={value}
51	className={`w-full border rounded-md px-3 py-2 focus:outline-none focus:ring-0
52	${touched && isValid === true ? "border-[#046C4E]" : ""}
53	${touched && isValid === false ? "border-red" : ""}`}
54	/>
55
56	{touched && isValid === true && value && (
57	<span className="absolute right-3 top-1/2 -translate-y-1/2 text-[#046C4E]">✔</span>
58	)}
59	{touched && isValid === false && value && (
60	<span className="absolute right-3 top-1/2 -translate-y-1/2 text-red">✖</span>
61	)}
62	</div>
63	</FieldWrapper>
64	);
65	};
66
67	export default Email;
68