@vicket/create-support 1.1.1

package/templates-tailwind/next/src/components/vicket/ticket-dialog.tsx

@@ -0,0 +1,306 @@
+"use client";
+
+import { type FormEvent, useMemo, useState } from "react";
+import type { Template, FormValues } from "@/lib/vicket";
+import { createTicket, initialFormValues, cn } from "@/lib/vicket";
+
+/* ── Custom hook ─────────────────────────────────── */
+
+function useTicketDialog(templates: Template[], onClose: () => void) {
+  const [step, setStep] = useState<"identify" | "details" | "success">("identify");
+  const [selectedTemplateId, setSelectedTemplateId] = useState(templates.length > 0 ? templates[0].id : "");
+  const [form, setForm] = useState<FormValues>(initialFormValues);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState("");
+  const [emailLimitReached, setEmailLimitReached] = useState(false);
+
+  const selectedTemplate = useMemo(
+    () => templates.find((t) => t.id === selectedTemplateId) || null,
+    [templates, selectedTemplateId],
+  );
+
+  const orderedQuestions = useMemo(
+    () => [...(selectedTemplate?.questions || [])].sort((a, b) => a.order - b.order),
+    [selectedTemplate],
+  );
+
+  const canContinue = form.email.trim().length > 0;
+
+  const resetAndClose = () => {
+    setStep("identify");
+    setForm(initialFormValues);
+    setError("");
+    setSelectedTemplateId(templates.length > 0 ? templates[0].id : "");
+    onClose();
+  };
+
+  const updateAnswer = (questionId: string, value: unknown) => {
+    setForm((prev) => ({ ...prev, answers: { ...prev.answers, [questionId]: value } }));
+  };
+
+  const toggleCheckboxValue = (questionId: string, value: string, checked: boolean) => {
+    const current = Array.isArray(form.answers[questionId]) ? (form.answers[questionId] as string[]) : [];
+    const next = checked ? [...new Set([...current, value])] : current.filter((item) => item !== value);
+    updateAnswer(questionId, next);
+  };
+
+  const validateRequired = () => {
+    if (!selectedTemplate) return "Please select a template.";
+    if (!form.email.trim()) return "Email is required.";
+    if (!form.title.trim()) return "Subject is required.";
+    for (const question of orderedQuestions) {
+      if (!question.required) continue;
+      const value = form.answers[question.id];
+      if (question.type === "CHECKBOX") {
+        if (!Array.isArray(value) || value.length === 0) return `"${question.label}" is required.`;
+        continue;
+      }
+      if (question.type === "FILE") {
+        if (!(value instanceof File)) return `"${question.label}" is required.`;
+        continue;
+      }
+      if (value === null || value === undefined || String(value).trim() === "") return `"${question.label}" is required.`;
+    }
+    return "";
+  };
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setError("");
+    const validationError = validateRequired();
+    if (validationError) { setError(validationError); return; }
+    if (!selectedTemplate) { setError("Template is required."); return; }
+
+    setIsSubmitting(true);
+    try {
+      const fileQuestionIds = orderedQuestions
+        .filter((q) => q.type === "FILE" && form.answers[q.id] instanceof File)
+        .map((q) => q.id);
+
+      const result = await createTicket({
+        email: form.email.trim(),
+        title: form.title.trim(),
+        templateId: selectedTemplate.id,
+        answers: { ...form.answers },
+        hasFiles: fileQuestionIds.length > 0,
+        fileQuestionIds,
+      });
+
+      setEmailLimitReached(result.emailLimitReached ?? false);
+      setStep("success");
+    } catch (submitError) {
+      setError(submitError instanceof Error ? submitError.message : "Unexpected error.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return {
+    step, setStep, selectedTemplateId, setSelectedTemplateId,
+    form, setForm, isSubmitting, error, setError, emailLimitReached,
+    selectedTemplate, orderedQuestions, canContinue,
+    resetAndClose, updateAnswer, toggleCheckboxValue, handleSubmit,
+  };
+}
+
+/* ── Sub-components ──────────────────────────────── */
+
+function Alert({ type, message, onDismiss }: { type: "error" | "success"; message: string; onDismiss?: () => void }) {
+  return (
+    <div
+      className={cn(
+        "flex items-start gap-3 rounded-xl border p-4 text-sm",
+        type === "error" ? "border-red-200 bg-red-50 text-red-900" : "border-green-200 bg-green-50 text-green-900",
+      )}
+      role="alert"
+    >
+      <span className="mt-0.5 shrink-0">
+        {type === "error" ? (
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" /><path d="M12 9v4" /><path d="M12 17h.01" /></svg>
+        ) : (
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
+        )}
+      </span>
+      <span className="flex-1">{message}</span>
+      {onDismiss && (
+        <button type="button" onClick={onDismiss} className="shrink-0 cursor-pointer border-none bg-transparent p-0 opacity-50 transition-opacity hover:opacity-100" aria-label="Dismiss">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg>
+        </button>
+      )}
+    </div>
+  );
+}
+
+/* ── Main component ──────────────────────────────── */
+
+export default function TicketDialog({ open, onClose, templates }: { open: boolean; onClose: () => void; templates: Template[] }) {
+  const {
+    step, setStep, selectedTemplateId, setSelectedTemplateId,
+    form, setForm, isSubmitting, error, setError, emailLimitReached,
+    selectedTemplate, orderedQuestions, canContinue,
+    resetAndClose, updateAnswer, toggleCheckboxValue, handleSubmit,
+  } = useTicketDialog(templates, onClose);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm" onClick={resetAndClose}>
+      <div className="relative mx-4 w-full max-w-lg overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl" onClick={(e) => e.stopPropagation()}>
+        <button type="button" onClick={resetAndClose} className="absolute right-4 top-4 z-10 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg border-none bg-transparent text-slate-500 transition-colors hover:bg-slate-50 hover:text-slate-900" aria-label="Close">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg>
+        </button>
+
+        {step === "success" && (
+          <div className="px-6 py-12 text-center">
+            <div className="mx-auto mb-5 flex h-14 w-14 items-center justify-center rounded-full bg-green-50 text-green-600">
+              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
+            </div>
+            <h2 className="m-0 text-xl font-bold text-slate-900">Ticket submitted!</h2>
+            <p className="mt-2 text-sm text-slate-500">
+              {emailLimitReached
+                ? "Your ticket was created, but the daily email limit for this service has been reached. No confirmation email was sent. Please consider using a self-hosted email delivery setup for unlimited emails."
+                : "Check your email for a secure link to follow your ticket."}
+            </p>
+            <button type="button" className="mt-6 inline-flex items-center gap-2 !rounded-full border border-slate-200 bg-white !px-7 !py-3 text-sm font-semibold text-slate-900 cursor-pointer transition-all hover:border-slate-300 hover:bg-slate-50" onClick={resetAndClose}>Close</button>
+          </div>
+        )}
+
+        {step === "identify" && (
+          <div className="px-6 py-6">
+            <h2 className="m-0 text-lg font-bold text-slate-900">Submit a request</h2>
+            <p className="mt-1 text-sm text-slate-500">We&apos;ll get back to you as soon as possible.</p>
+
+            <div className="mt-5 space-y-5">
+              {error && <Alert type="error" message={error} onDismiss={() => setError("")} />}
+
+              <div className="space-y-1.5">
+                <label className="text-sm font-semibold text-slate-900" htmlFor="vk-dialog-email">Email<span className="text-red-600"> *</span></label>
+                <div className="relative">
+                  <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-500">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><rect width="20" height="16" x="2" y="4" rx="2" /><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" /></svg>
+                  </span>
+                  <input id="vk-dialog-email" className="w-full rounded-lg border border-slate-200 bg-slate-50 py-2.5 pl-10 pr-3 text-sm text-slate-900 transition-all duration-150 placeholder:text-slate-500/60 focus:border-blue-600 focus:outline-none focus:ring-3 focus:ring-blue-600/10" type="email" placeholder="you@example.com" value={form.email} onChange={(e) => setForm((prev) => ({ ...prev, email: e.target.value }))} required />
+                </div>
+                <p className="text-xs text-slate-500">We&apos;ll contact you at this address.</p>
+              </div>
+
+              {templates.length > 1 && (
+                <div className="space-y-2">
+                  <p className="m-0 text-sm font-semibold text-slate-900">What can we help you with?</p>
+                  <div className="grid gap-2">
+                    {templates.map((template) => (
+                      <button
+                        key={template.id}
+                        type="button"
+                        className={cn(
+                          "flex w-full cursor-pointer items-start gap-3 rounded-xl border border-slate-200 bg-slate-50 p-3.5 text-left transition-all duration-150 hover:border-slate-300",
+                          selectedTemplateId === template.id && "!border-blue-600 !bg-blue-50 ring-3 ring-blue-600/12",
+                        )}
+                        onClick={() => setSelectedTemplateId(template.id)}
+                      >
+                        <span className={cn("mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 transition-colors", selectedTemplateId === template.id ? "border-blue-600 bg-blue-600" : "border-slate-300 bg-transparent")}>
+                          {selectedTemplateId === template.id && <span className="block h-1.5 w-1.5 rounded-full bg-white" />}
+                        </span>
+                        <div>
+                          <span className="block text-sm font-semibold text-slate-900">{template.name}</span>
+                          {template.description && <span className="mt-0.5 block text-xs text-slate-500">{template.description}</span>}
+                        </div>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              <button type="button" className="inline-flex w-full items-center justify-center gap-2 rounded-lg border-none bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white cursor-pointer transition-all hover:bg-blue-700 hover:-translate-y-px hover:shadow-lg active:translate-y-0 disabled:opacity-60 disabled:cursor-not-allowed" disabled={!canContinue} onClick={() => { setError(""); setStep("details"); }}>
+                Continue
+              </button>
+            </div>
+          </div>
+        )}
+
+        {step === "details" && (
+          <div className="px-6 py-6">
+            <button type="button" className="-ml-2 -mt-1 mb-3 inline-flex cursor-pointer items-center gap-1 rounded-lg border-none bg-transparent px-2 py-1 text-sm font-medium text-slate-500 transition-colors hover:bg-slate-50 hover:text-slate-900" onClick={() => { setError(""); setStep("identify"); }}>
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg>
+              Back
+            </button>
+
+            <h2 className="m-0 text-lg font-bold text-slate-900">{selectedTemplate?.name || "Ticket details"}</h2>
+
+            <form className="mt-5 space-y-4" onSubmit={handleSubmit}>
+              {error && <Alert type="error" message={error} onDismiss={() => setError("")} />}
+
+              <div className="space-y-1.5">
+                <label className="text-sm font-semibold text-slate-900" htmlFor="vk-dialog-subject">Subject<span className="text-red-600"> *</span></label>
+                <input id="vk-dialog-subject" className="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-900 transition-all duration-150 placeholder:text-slate-500/60 focus:border-blue-600 focus:outline-none focus:ring-3 focus:ring-blue-600/10" type="text" placeholder="Brief description of your issue" value={form.title} onChange={(e) => setForm((prev) => ({ ...prev, title: e.target.value }))} required />
+              </div>
+
+              {orderedQuestions.map((question) => (
+                <div className="space-y-1.5" key={question.id}>
+                  <label className="text-sm font-semibold text-slate-900">{question.label}{question.required && <span className="text-red-600"> *</span>}</label>
+
+                  {question.type === "TEXT" && (
+                    <input className="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-900 transition-all duration-150 focus:border-blue-600 focus:outline-none focus:ring-3 focus:ring-blue-600/10" type="text" value={String(form.answers[question.id] || "")} onChange={(e) => updateAnswer(question.id, e.target.value)} />
+                  )}
+                  {question.type === "TEXTAREA" && (
+                    <textarea className="min-h-[100px] w-full resize-y rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-900 transition-all duration-150 focus:border-blue-600 focus:outline-none focus:ring-3 focus:ring-blue-600/10" value={String(form.answers[question.id] || "")} onChange={(e) => updateAnswer(question.id, e.target.value)} />
+                  )}
+                  {question.type === "DATE" && (
+                    <input className="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-900 transition-all duration-150 focus:border-blue-600 focus:outline-none focus:ring-3 focus:ring-blue-600/10" type="date" value={String(form.answers[question.id] || "")} onChange={(e) => updateAnswer(question.id, e.target.value)} />
+                  )}
+                  {question.type === "SELECT" && (
+                    <select className="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-900 transition-all duration-150 focus:border-blue-600 focus:outline-none focus:ring-3 focus:ring-blue-600/10" value={String(form.answers[question.id] || "")} onChange={(e) => updateAnswer(question.id, e.target.value)}>
+                      <option value="">Select an option</option>
+                      {(question.options || []).map((option) => <option key={option.id} value={option.value}>{option.label}</option>)}
+                    </select>
+                  )}
+                  {question.type === "CHECKBOX" && (
+                    <div className="space-y-2 pt-1">
+                      {(question.options || []).map((option) => (
+                        <label key={option.id} className="flex items-center gap-2.5 text-sm text-slate-900">
+                          <input type="checkbox" className="h-4 w-4 rounded accent-blue-600" checked={Array.isArray(form.answers[question.id]) && (form.answers[question.id] as string[]).includes(option.value)} onChange={(e) => toggleCheckboxValue(question.id, option.value, e.target.checked)} />
+                          <span>{option.label}</span>
+                        </label>
+                      ))}
+                    </div>
+                  )}
+                  {question.type === "FILE" && (
+                    <>
+                      {form.answers[question.id] instanceof File ? (
+                        <div className="flex flex-wrap gap-1.5">
+                          <span className="inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-slate-50 px-3 py-1.5 text-xs text-slate-500">
+                            {(form.answers[question.id] as File).name}
+                            <button type="button" onClick={() => updateAnswer(question.id, null)} className="flex cursor-pointer items-center border-none bg-transparent p-0 text-slate-500 transition-colors hover:text-red-600" aria-label="Remove file">
+                              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg>
+                            </button>
+                          </span>
+                        </div>
+                      ) : (
+                        <input className="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm text-slate-900 transition-all duration-150 focus:border-blue-600 focus:outline-none focus:ring-3 focus:ring-blue-600/10" type="file" accept="image/jpeg,image/png,image/gif,image/webp" onChange={(e) => {
+                          const file = e.target.files?.[0] || null;
+                          if (file && !["image/png","image/jpeg","image/gif","image/webp"].includes(file.type)) { e.target.value = ""; return; }
+                          updateAnswer(question.id, file);
+                        }} />
+                      )}
+                    </>
+                  )}
+                </div>
+              ))}
+
+              <div className="flex items-center gap-3 pt-2">
+                <button className="inline-flex flex-1 items-center justify-center gap-2 rounded-lg border-none bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white cursor-pointer transition-all hover:bg-blue-700 hover:-translate-y-px hover:shadow-lg active:translate-y-0 disabled:opacity-60 disabled:cursor-not-allowed" type="submit" disabled={isSubmitting}>
+                  {isSubmitting ? (
+                    <>
+                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" className="animate-spin"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
+                      Submitting...
+                    </>
+                  ) : "Submit"}
+                </button>
+              </div>
+            </form>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}