Launch a micro-SaaS in a weekend

{
  "name": "Customer Requests",
  "fields": [
    {
      "name": "user_id",
      "type": "hidden"
    },
    {
      "name": "request",
      "label": "Your Request",
      "type": "textarea",
      "required": true
    },
    {
      "name": "priority",
      "label": "Priority",
      "type": "select",
      "options": [
        "Low",
        "Medium",
        "High"
      ],
      "required": true
    }
  ]
}

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

const FORM_ID = "frm_YOUR_FORM_ID";

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

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    if (!user) return;
    setStatus("sending");

    const fd = new FormData(e.currentTarget);
    const res = await fetch(
      `https://sutrena.com/api/forms/${FORM_ID}/submit`,
      {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          user_id: user.id,
          request: fd.get("request"),
          priority: fd.get("priority"),
        }),
      }
    );

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

  if (status === "sent") {
    return <p>Request submitted. We will get back to you soon.</p>;
  }

  return (
    <form onSubmit={handleSubmit}>
      <textarea name="request" placeholder="Describe your request..." required />
      <select name="priority" required>
        <option value="">Select priority</option>
        <option value="Low">Low</option>
        <option value="Medium">Medium</option>
        <option value="High">High</option>
      </select>
      <button type="submit" disabled={status === "sending" || !user}>
        {status === "sending" ? "Submitting..." : "Submit Request"}
      </button>
    </form>
  );
}