Sutrena + Next.js

"use client";
import { useState } from "react";

// Step 1: Create the form via API (run once):
// curl -X POST https://sutrena.com/api/forms \
//   -H "Authorization: Bearer st_trial_abc123" \
//   -H "Content-Type: application/json" \
//   -d '{
//     "name": "Beta Feedback",
//     "fields": [
//       { "name": "email", "label": "Email", "type": "email", "required": true },
//       { "name": "feature", "label": "Feature", "type": "select",
//         "options": ["Dashboard", "API", "Templates", "Webhooks"], "required": true },
//       { "name": "rating", "label": "Rating (1-5)", "type": "select",
//         "options": ["1", "2", "3", "4", "5"], "required": true },
//       { "name": "feedback", "label": "Feedback", "type": "textarea" }
//     ],
//     "createDashboard": true
//   }'

const FORM_ID = "frm_your_id";

export default function BetaFeedback() {
  const [status, setStatus] = useState<"idle" | "sending" | "sent" | "error">(
    "idle"
  );

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus("sending");

    const data = Object.fromEntries(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(data),
      }
    );

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

  if (status === "sent") return <p>Thanks for your feedback!</p>;

  return (
    <form onSubmit={onSubmit} className="space-y-4 max-w-md">
      <input name="email" type="email" placeholder="Email" required
        className="w-full border p-2 rounded" />
      <select name="feature" required className="w-full border p-2 rounded">
        <option value="">Which feature?</option>
        <option value="Dashboard">Dashboard</option>
        <option value="API">API</option>
        <option value="Templates">Templates</option>
        <option value="Webhooks">Webhooks</option>
      </select>
      <select name="rating" required className="w-full border p-2 rounded">
        <option value="">Rating</option>
        {[1, 2, 3, 4, 5].map((n) => (
          <option key={n} value={n}>{n}</option>
        ))}
      </select>
      <textarea name="feedback" placeholder="Your feedback" rows={4}
        className="w-full border p-2 rounded" />
      <button type="submit" disabled={status === "sending"}
        className="bg-black text-white px-6 py-2 rounded">
        {status === "sending" ? "Sending..." : "Submit"}
      </button>
      {status === "error" && (
        <p className="text-red-600">Something went wrong. Please try again.</p>
      )}
    </form>
  );
}