chore: initialize project

src/features/request-demo/ui/request-demo-form.tsx

@@ -0,0 +1,150 @@
+import { Button, Field, Input, NativeSelect, Text, Textarea } from "denjs-ui";
+import { type FormEvent, useMemo, useState } from "react";
+import { useMessages } from "#/shared/lib/i18n";
+import { buildDemoRequestMailto } from "../model/build-demo-request-mailto";
+import { getSpecializationOptions } from "../model/specialization-options";
+
+export function RequestDemoForm() {
+	const m = useMessages();
+	const [submitState, setSubmitState] = useState<
+		"idle" | "sending" | "success" | "error"
+	>("idle");
+	const options = useMemo(() => getSpecializationOptions(m), [m]);
+	const specializationByValue = useMemo(
+		() => Object.fromEntries(options.map((item) => [item.value, item.label])),
+		[options],
+	);
+
+	const onSubmit = (event: FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		if (typeof window === "undefined") {
+			setSubmitState("error");
+			return;
+		}
+
+		setSubmitState("sending");
+
+		try {
+			const formData = new FormData(event.currentTarget);
+			const name = String(formData.get("name") ?? "").trim();
+			const phone = String(formData.get("phone") ?? "").trim();
+			const specializationValue = String(
+				formData.get("specialization") ?? "",
+			).trim();
+			const city = String(formData.get("city") ?? "").trim();
+			const comment = String(formData.get("comment") ?? "").trim();
+			const specialization =
+				specializationByValue[specializationValue] ?? specializationValue;
+
+			window.location.href = buildDemoRequestMailto({
+				name,
+				phone,
+				specialization,
+				city,
+				comment,
+				locale: document.documentElement.lang,
+				pageUrl: window.location.href,
+			});
+			setSubmitState("success");
+		} catch {
+			setSubmitState("error");
+		}
+	};
+
+	return (
+		<form
+			className="rise-in grid gap-3 rounded-2xl border border-[var(--line)] bg-white/75 p-4 sm:grid-cols-2 sm:p-5"
+			style={{ animationDelay: "220ms" }}
+			onSubmit={onSubmit}
+		>
+			<Field label={m.form_name_label()} controlId="demo-name" required>
+				<Input
+					id="demo-name"
+					name="name"
+					placeholder={m.form_name_placeholder()}
+				/>
+			</Field>
+
+			<Field label={m.form_phone_label()} controlId="demo-phone" required>
+				<Input
+					id="demo-phone"
+					type="tel"
+					name="phone"
+					placeholder="+7 (999) 000-00-00"
+				/>
+			</Field>
+
+			<Field
+				label={m.form_specialization_label()}
+				controlId="demo-specialization"
+				required
+			>
+				<NativeSelect
+					id="demo-specialization"
+					name="specialization"
+					options={options}
+				/>
+			</Field>
+
+			<Field label={m.form_city_label()} controlId="demo-city">
+				<Input
+					id="demo-city"
+					name="city"
+					placeholder={m.form_city_placeholder()}
+				/>
+			</Field>
+
+			<Field
+				label={m.form_comment_label()}
+				controlId="demo-comment"
+				className="sm:col-span-2"
+			>
+				<Textarea
+					id="demo-comment"
+					name="comment"
+					rows={4}
+					placeholder={m.form_comment_placeholder()}
+					resizable={false}
+				/>
+			</Field>
+
+			<div className="sm:col-span-2 flex flex-wrap items-center justify-between gap-3 pt-1">
+				<Text
+					as="p"
+					size="sm"
+					tone="muted"
+					className="m-0 max-w-[36ch] text-xs text-[var(--sea-ink-soft)]"
+				>
+					{m.form_privacy_text()}
+				</Text>
+				<Button
+					type="submit"
+					size="large"
+					className="rounded-full"
+					disabled={submitState === "sending"}
+				>
+					{submitState === "sending" ? m.form_submit_busy() : m.form_submit()}
+				</Button>
+
+				{submitState === "success" && (
+					<Text
+						as="p"
+						size="sm"
+						className="m-0 w-full text-xs text-[var(--palm)]"
+					>
+						{m.form_submit_success()}
+					</Text>
+				)}
+				{submitState === "error" && (
+					<Text
+						as="p"
+						size="sm"
+						className="m-0 w-full text-xs text-[var(--coral)]"
+					>
+						{m.form_submit_error()}
+					</Text>
+				)}
+			</div>
+		</form>
+	);
+}