"use client"; import { CheckCircle2 } from "lucide-react"; import { useEffect, useId, useRef, useState } from "react"; import type { ChangeEvent, FormEvent, HTMLAttributes, ReactNode } from "react"; export type ContactFormValues = { name: string; email: string; company: string; topic: string; message: string; }; type FieldName = keyof ContactFormValues; type Status = "idle" | "submitting" | "success" | "error"; export type ContactFormSectionProps = Omit, "onSubmit" | "title"> & { title?: string; intro?: ReactNode; /** Contact details or anything else shown beside the form. */ aside?: ReactNode; topics?: string[]; defaultValues?: Partial; /** Resolve to show the success panel. Reject to show a retry message. */ onSubmit: (values: ContactFormValues) => Promise; submitLabel?: string; successTitle?: string; successMessage?: (values: ContactFormValues) => ReactNode; minMessageLength?: number; reducedMotion?: boolean; }; const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/; function cx(...values: Array) { return values.filter(Boolean).join(" "); } const fieldBase = "min-h-11 w-full rounded-md border bg-[#FBFBF8] px-3 text-[15px] text-[#1D211F] outline-none transition-[border-color,box-shadow] motion-reduce:transition-none placeholder:text-[#5E6764] focus-visible:border-[#1E6B64] focus-visible:ring-2 focus-visible:ring-[#1E6B64]/35 disabled:opacity-60 dark:bg-[#232A29] dark:text-[#E9EBE4] dark:placeholder:text-[#A6B0AD] dark:focus-visible:border-[#7FC4BA] dark:focus-visible:ring-[#7FC4BA]/40"; export function ContactFormSection({ title = "Talk to our team", intro = "Tell us what you are working on. We reply within one business day, Monday to Friday.", aside, topics = ["Sales and pricing", "Technical support", "Billing", "Partnerships"], defaultValues, onSubmit, submitLabel = "Send message", successTitle = "Message sent", successMessage = (values) => "Thanks, " + values.name.split(" ")[0] + ". We’ll reply to " + values.email + " within one business day.", minMessageLength = 20, reducedMotion = false, className, ...props }: ContactFormSectionProps) { const id = useId(); const headingId = id + "-heading"; const initial: ContactFormValues = { name: "", email: "", company: "", topic: "", message: "", ...defaultValues }; const [values, setValues] = useState(initial); const [errors, setErrors] = useState>>({}); const [touched, setTouched] = useState>>({}); const [status, setStatus] = useState("idle"); const [summary, setSummary] = useState(""); const formRef = useRef(null); const successRef = useRef(null); const mounted = useRef(true); useEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []); useEffect(() => { if (status === "success") successRef.current?.focus(); }, [status]); const validateField = (field: FieldName, all: ContactFormValues): string | undefined => { const raw = all[field].trim(); if (field === "name" && !raw) return "Enter your name."; if (field === "email") { if (!raw) return "Enter your email address."; if (!emailPattern.test(raw)) return "Enter an email address like ana@empresa.co."; } if (field === "topic" && !raw) return "Choose what your message is about."; if (field === "message") { if (!raw) return "Write a message."; if (raw.length < minMessageLength) return "Add a little more detail, at least " + minMessageLength + " characters."; } return undefined; }; const setField = (field: FieldName, next: string) => { const nextValues = { ...values, [field]: next }; setValues(nextValues); if (touched[field] && errors[field]) setErrors((current) => ({ ...current, [field]: validateField(field, nextValues) })); }; const blurField = (field: FieldName) => { setTouched((current) => ({ ...current, [field]: true })); setErrors((current) => ({ ...current, [field]: validateField(field, values) })); }; const handleSubmit = async (event: FormEvent) => { event.preventDefault(); if (status === "submitting") return; const fields: FieldName[] = ["name", "email", "company", "topic", "message"]; const nextErrors: Partial> = {}; fields.forEach((field) => { const message = validateField(field, values); if (message) nextErrors[field] = message; }); setErrors(nextErrors); setTouched({ name: true, email: true, company: true, topic: true, message: true }); const invalid = fields.filter((field) => nextErrors[field]); if (invalid.length) { setSummary(invalid.length === 1 ? "One field needs attention." : invalid.length + " fields need attention."); formRef.current?.querySelector('[name="' + invalid[0] + '"]')?.focus(); return; } setSummary(""); setStatus("submitting"); try { await onSubmit({ ...values, name: values.name.trim(), email: values.email.trim(), company: values.company.trim(), message: values.message.trim() }); if (mounted.current) setStatus("success"); } catch { if (mounted.current) setStatus("error"); } }; const reset = () => { setValues({ ...initial, name: values.name, email: values.email, company: values.company }); setErrors({}); setTouched({}); setStatus("idle"); }; const fieldProps = (field: FieldName) => ({ id: id + "-" + field, name: field, value: values[field], disabled: status === "submitting", "aria-invalid": errors[field] ? true : undefined, "aria-describedby": id + "-" + field + "-error", onChange: (event: ChangeEvent) => setField(field, event.target.value), onBlur: () => blurField(field), className: cx(fieldBase, errors[field] ? "border-[#A33228] dark:border-[#F0897D]" : "border-[#858B83] dark:border-[#6E7976]"), }); const label = (field: FieldName, text: string, optional = false) => ( {text} {optional ? (optional) : null} ); const errorLine = (field: FieldName) => (

{errors[field] ?? ""}

); return (

{title}

{intro ?

{intro}

: null} {aside ?

{aside}

: null}

{status === "success" ? (

) : (

{label("name", "Full name")} {errorLine("name")}

{label("email", "Work email")} {errorLine("email")}

{label("company", "Company", true)} {errorLine("company")}

{label("topic", "Topic")} {errorLine("topic")}

{label("message", "Message")}

{errorLine("message")}
          </div>
          <div className="flex flex-wrap items-center gap-x-4 gap-y-2 pt-1">
            <button
              type="submit"
              aria-busy={status === "submitting" || undefined}
              disabled={status === "submitting"}
              className="min-h-11 rounded-md bg-[#1E6B64] px-5 text-sm font-medium text-white outline-none transition-colors hover:bg-[#185A54] focus-visible:ring-2 focus-visible:ring-[#1E6B64] focus-visible:ring-offset-2 focus-visible:ring-offset-[#F1F2EC] disabled:cursor-progress disabled:opacity-75 motion-reduce:transition-none dark:bg-[#7FC4BA] dark:text-[#151918] dark:hover:bg-[#9AD3CA] dark:focus-visible:ring-[#7FC4BA] dark:focus-visible:ring-offset-[#1B201F]"
            >
              {status === "submitting" ? "Sending…" : submitLabel}
            </button>
            <p role="status" className="text-sm text-[#535C59] dark:text-[#A6B0AD]">
              {status === "submitting" ? "Sending your message…" : summary}
            </p>
          </div>
          {status === "error" ? (
            <p role="alert" className="rounded-md border border-[#A33228]/40 bg-[#A33228]/[0.06] px-3 py-2.5 text-sm text-[#A33228] dark:border-[#F0897D]/40 dark:bg-[#F0897D]/10 dark:text-[#F0897D]">
              Your message wasn’t sent. Check your connection and try again; nothing you wrote has been lost.
            </p>
          ) : null}
        </form>
      )}
    </section>
  );
}
</article></body></html>