Support org

src/components/support/ticket-create-form.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { Card } from "@/components/ui/card";
+import type { SupportTicketCategory } from "@/types";
+
+const CATEGORIES: SupportTicketCategory[] = [
+  "bug",
+  "feature_request",
+  "question",
+  "billing",
+  "other",
+];
+
+export function TicketCreateForm() {
+  const t = useTranslations("support");
+  const tCommon = useTranslations("common");
+  const router = useRouter();
+
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [category, setCategory] = useState<SupportTicketCategory>("question");
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState("");
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSubmitting(true);
+    setError("");
+    try {
+      const res = await fetch("/api/support/tickets", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ title, description, category }),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || t("createFailed"));
+      }
+      const data = await res.json();
+      // Redirect to the new ticket's detail page so the customer can
+      // see the confirmation state and immediately add follow-ups if
+      // they wish.
+      router.push(`/support/${data.ticket.id}`);
+      router.refresh();
+    } catch (e: any) {
+      setError(e.message);
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Card>
+      <form onSubmit={onSubmit} className="space-y-4">
+        <div>
+          <label className="block text-xs uppercase tracking-wider text-text-muted mb-1">
+            {t("fieldCategory")} <span className="text-red-400">*</span>
+          </label>
+          <select
+            required
+            value={category}
+            onChange={(e) =>
+              setCategory(e.target.value as SupportTicketCategory)
+            }
+            className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary"
+          >
+            {CATEGORIES.map((c) => (
+              <option key={c} value={c}>
+                {t(`category_${c}`)}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div>
+          <label className="block text-xs uppercase tracking-wider text-text-muted mb-1">
+            {t("fieldTitle")} <span className="text-red-400">*</span>
+          </label>
+          <input
+            type="text"
+            required
+            minLength={3}
+            maxLength={200}
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            placeholder={t("titlePlaceholder")}
+            className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary"
+          />
+        </div>
+
+        <div>
+          <label className="block text-xs uppercase tracking-wider text-text-muted mb-1">
+            {t("fieldDescription")} <span className="text-red-400">*</span>
+          </label>
+          <textarea
+            required
+            minLength={10}
+            maxLength={10_000}
+            rows={8}
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder={t("descriptionPlaceholder")}
+            className="w-full px-3 py-2 rounded-lg border border-border bg-surface-2 text-text-primary text-sm focus:outline-none focus:border-text-secondary"
+          />
+          <p className="text-xs text-text-muted mt-1">
+            {t("descriptionHelp")}
+          </p>
+        </div>
+
+        {error && (
+          <div className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2">
+            {error}
+          </div>
+        )}
+
+        <div className="flex justify-end">
+          <button
+            type="submit"
+            disabled={submitting}
+            className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-white hover:bg-accent/90 transition-colors disabled:opacity-50"
+          >
+            {submitting ? tCommon("loading") : t("submitTicket")}
+          </button>
+        </div>
+      </form>
+    </Card>
+  );
+}