Bug Report for Next.js

'use client';

import { useState, type FormEvent } from 'react';

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

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

    const data = new FormData(e.currentTarget);
    data.set('access_key', 'YOUR_ACCESS_KEY');
    data.set('subject', 'New bug report');

    const res = await fetch('https://splitforms.com/api/submit', {
      method: 'POST',
      body: data,
      headers: { Accept: 'application/json' },
    });

    const json = await res.json();
    if (json.success && json.payment_url) {
      // Payment form: finish the payment on the secure Stripe page.
      window.location.href = json.payment_url;
      return;
    }
    setStatus(json.success ? 'sent' : 'error');
    if (json.success) e.currentTarget.reset();
  }

  if (status === 'sent') return <p>Thanks — we&rsquo;ll be in touch.</p>;

  return (
    <form onSubmit={onSubmit}>
      <label htmlFor="title">Short summary *</label>
      <input id="title" type="text" name="title" placeholder="What went wrong?" required />
      <label htmlFor="severity">Severity *</label>
      <select id="severity" name="severity" required>
        <option value="">Choose…</option>
        <option>Critical</option>
        <option>High</option>
        <option>Medium</option>
        <option>Low</option>
      </select>
      <label htmlFor="browser">Browser &amp; OS</label>
      <input id="browser" type="text" name="browser" placeholder="Chrome 120 / macOS" />
      <label htmlFor="steps">Steps to reproduce *</label>
      <textarea id="steps" name="steps" placeholder="1. Go to…
2. Click…
3. See error" required />
      <label htmlFor="email">Your email (so we can follow up) *</label>
      <input id="email" type="email" name="email" placeholder="you@example.com" required />

      <button type="submit" disabled={status === 'sending'}>
        {status === 'sending' ? 'Sending…' : 'Send'}
      </button>

      {status === 'error' && <p>Something went wrong. Try again.</p>}
    </form>
  );
}