1a710aa3c6
Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
123 lines
4.0 KiB
TypeScript
123 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { DataConsentField } from "@/components/forms/DataConsentField";
|
|
import { dataConsent } from "@/content/consent";
|
|
|
|
export function PartnershipInquiryForm() {
|
|
const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");
|
|
const [error, setError] = useState("");
|
|
const [consent, setConsent] = useState(false);
|
|
|
|
async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
|
|
e.preventDefault();
|
|
if (!consent) {
|
|
setError(dataConsent.errorMessage);
|
|
return;
|
|
}
|
|
|
|
setStatus("loading");
|
|
setError("");
|
|
|
|
const form = e.currentTarget;
|
|
const data = new FormData(form);
|
|
|
|
try {
|
|
const res = await fetch("/api/inquiry", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
intent: "partnership",
|
|
firstName: data.get("firstName"),
|
|
lastName: data.get("lastName"),
|
|
email: data.get("email"),
|
|
company: data.get("company"),
|
|
message: data.get("message") || undefined,
|
|
consent: true,
|
|
}),
|
|
});
|
|
const json = await res.json();
|
|
if (!res.ok || !json.ok) {
|
|
throw new Error(json.error || "Something went wrong");
|
|
}
|
|
setStatus("success");
|
|
form.reset();
|
|
setConsent(false);
|
|
} catch (err) {
|
|
setStatus("error");
|
|
setError(err instanceof Error ? err.message : "Failed to send");
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="rounded-2xl bg-white p-6 shadow-xl md:p-8">
|
|
<h3 className="text-xl font-bold text-foreground">Request Partnership Information</h3>
|
|
<form onSubmit={onSubmit} className="mt-6 space-y-4">
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="firstName">
|
|
First name <span className="text-destructive">*</span>
|
|
</Label>
|
|
<Input id="firstName" name="firstName" required placeholder="Jane" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="lastName">
|
|
Last name <span className="text-destructive">*</span>
|
|
</Label>
|
|
<Input id="lastName" name="lastName" required placeholder="Doe" />
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="partnership-email">
|
|
Email <span className="text-destructive">*</span>
|
|
</Label>
|
|
<Input
|
|
id="partnership-email"
|
|
name="email"
|
|
type="email"
|
|
required
|
|
placeholder="you@company.com"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="company">
|
|
Company name <span className="text-destructive">*</span>
|
|
</Label>
|
|
<Input id="company" name="company" required placeholder="Your organization" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="message">Message (optional)</Label>
|
|
<Textarea
|
|
id="message"
|
|
name="message"
|
|
rows={3}
|
|
placeholder="Tell us about your partnership goals…"
|
|
/>
|
|
</div>
|
|
<DataConsentField
|
|
id="partnership-consent"
|
|
checked={consent}
|
|
onCheckedChange={setConsent}
|
|
/>
|
|
{error && <p className="text-sm text-destructive">{error}</p>}
|
|
{status === "success" && (
|
|
<p className="text-sm text-[#1a5c38]">
|
|
Thank you! We received your request and will be in touch.
|
|
</p>
|
|
)}
|
|
<Button
|
|
type="submit"
|
|
className="w-full rounded-lg bg-[#ffb300] py-6 text-base font-semibold text-[#0f0404] hover:bg-[#ffb300]/90"
|
|
disabled={status === "loading"}
|
|
>
|
|
{status === "loading" ? "Sending…" : "Next"}
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|