Sutrena + Clerk

"use client";
import { useUser } from "@clerk/nextjs";
import { useState } from "react";

export default function FeatureRequest() {
  const { user } = useUser();
  const [status, setStatus] = useState<"idle" | "sending" | "sent">("idle");

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus("sending");
    const formData = Object.fromEntries(new FormData(e.currentTarget));

    const res = await fetch(
      "https://sutrena.com/api/forms/frm_your_id/submit",
      {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          ...formData,
          user_id: user?.id,
          user_email: user?.primaryEmailAddress?.emailAddress,
        }),
      }
    );

    setStatus(res.ok ? "sent" : "idle");
  }

  if (!user) return <p>Please sign in to submit a feature request.</p>;
  if (status === "sent") return <p>Thanks! Your request has been recorded.</p>;

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="title">Feature title</label>
      <input id="title" name="title" required />

      <label htmlFor="category">Category</label>
      <select id="category" name="category" required>
        <option value="">Select</option>
        <option value="Integration">Integration</option>
        <option value="UI/UX">UI/UX</option>
        <option value="Performance">Performance</option>
        <option value="New Feature">New Feature</option>
      </select>

      <label htmlFor="description">Description</label>
      <textarea id="description" name="description" rows={4} required />

      <button type="submit" disabled={status === "sending"}>
        {status === "sending" ? "Submitting..." : "Submit Request"}
      </button>
    </form>
  );
}

// Sutrena form fields (created via API):
// { "name": "title", "type": "text", "required": true }
// { "name": "category", "type": "select", "options": ["Integration", "UI/UX", "Performance", "New Feature"], "required": true }
// { "name": "description", "type": "textarea", "required": true }
// { "name": "user_id", "type": "hidden" }
// { "name": "user_email", "type": "hidden" }
//
// Set uniqueBy: "user_id" to allow one vote per user per form,
// or omit it to allow multiple submissions per user.