@vicket/create-support 1.1.1

package/templates/next/src/app/components/vicket/TicketDialog.tsx

@@ -0,0 +1,514 @@
+"use client";
+
+import { type FormEvent, useMemo, useRef, useState } from "react";
+import type { FormValues, Template } from "../../utils/vicket/types";
+import { cn } from "../../utils/vicket/utils";
+import { createTicket, initialFormValues } from "../../utils/vicket/api";
+
+const MAX_FILES = 3;
+const MAX_FILE_SIZE = 2 * 1024 * 1024; // 2MB
+
+/* ---------------------------------------------- */
+/*  Alert component                               */
+/* ---------------------------------------------- */
+function Alert({
+  type,
+  message,
+  onDismiss,
+}: {
+  type: "error" | "success";
+  message: string;
+  onDismiss?: () => void;
+}) {
+  return (
+    <div
+      className={cn("vk-alert vk-slide-up", type === "error" ? "error" : "success")}
+      role="alert"
+    >
+      <span>{type === "error" ? "\u26A0" : "\u2713"}</span>
+      <span>{message}</span>
+      {onDismiss && (
+        <button
+          type="button"
+          onClick={onDismiss}
+          className="vk-alert-dismiss"
+          aria-label="Dismiss"
+        >
+          &#10005;
+        </button>
+      )}
+    </div>
+  );
+}
+
+/* ---------------------------------------------- */
+/*  File Upload Input (multi-image, up to 3)       */
+/* ---------------------------------------------- */
+function FileUploadInput({
+  files,
+  onChange,
+}: {
+  files: File[];
+  onChange: (files: File[]) => void;
+}) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const ALLOWED_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp"];
+
+  const addFiles = (newFiles: FileList | null) => {
+    if (!newFiles) return;
+    const remaining = MAX_FILES - files.length;
+    if (remaining <= 0) return;
+    const accepted: File[] = [];
+    for (let i = 0; i < Math.min(newFiles.length, remaining); i++) {
+      if (!ALLOWED_TYPES.includes(newFiles[i].type)) continue;
+      if (newFiles[i].size > MAX_FILE_SIZE) continue;
+      accepted.push(newFiles[i]);
+    }
+    if (accepted.length > 0) onChange([...files, ...accepted]);
+  };
+
+  return (
+    <>
+      {files.length > 0 && (
+        <div className="vk-image-grid">
+          {files.map((file, idx) => (
+            <div key={`${file.name}-${idx}`} className="vk-image-thumb">
+              <img src={URL.createObjectURL(file)} alt={file.name} />
+              <button
+                type="button"
+                className="vk-image-thumb-remove"
+                onClick={() => onChange(files.filter((_, i) => i !== idx))}
+                aria-label="Remove"
+              >
+                &#10005;
+              </button>
+              <span className="vk-image-thumb-name">{file.name}</span>
+            </div>
+          ))}
+        </div>
+      )}
+      {files.length < MAX_FILES && (
+        <>
+          <input
+            ref={inputRef}
+            type="file"
+            accept="image/jpeg,image/png,image/gif,image/webp"
+            multiple
+            style={{ display: "none" }}
+            onChange={(e) => {
+              addFiles(e.target.files);
+              e.target.value = "";
+            }}
+          />
+          <button
+            type="button"
+            className="vk-add-image-btn"
+            onClick={() => inputRef.current?.click()}
+          >
+            &#128247; {files.length === 0 ? `Add images (up to ${MAX_FILES})` : `Add more (${MAX_FILES - files.length} remaining)`}
+          </button>
+        </>
+      )}
+    </>
+  );
+}
+
+/* ---------------------------------------------- */
+/*  Ticket Dialog                                  */
+/* ---------------------------------------------- */
+export default function TicketDialog({
+  open,
+  onClose,
+  templates,
+}: {
+  open: boolean;
+  onClose: () => void;
+  templates: Template[];
+}) {
+  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 resetAndClose = () => {
+    setStep("identify");
+    setForm(initialFormValues);
+    setError("");
+    setSelectedTemplateId(templates.length > 0 ? templates[0].id : "");
+    onClose();
+  };
+
+  const canContinue = form.email.trim().length > 0;
+
+  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") {
+        const hasFiles = Array.isArray(value) ? value.length > 0 : value instanceof File;
+        if (!hasFiles) 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) => {
+          const val = form.answers[q.id];
+          return q.type === "FILE" && (val instanceof File || (Array.isArray(val) && val.length > 0));
+        })
+        .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);
+    }
+  };
+
+  if (!open) return null;
+
+  return (
+    <div className="vk-dialog-overlay" onClick={resetAndClose}>
+      <div className="vk-dialog vk-slide-up" onClick={(e) => e.stopPropagation()}>
+        {/* Close button */}
+        <button
+          type="button"
+          onClick={resetAndClose}
+          className="vk-dialog-close"
+          aria-label="Close"
+        >
+          &#10005;
+        </button>
+
+        {/* Success state */}
+        {step === "success" && (
+          <div className="vk-dialog-body vk-slide-up">
+            <div className="vk-success-icon">
+              <span>&#10003;</span>
+            </div>
+            <div className="vk-empty-state">
+              <h2 className="vk-dialog-title">Ticket submitted!</h2>
+              <p className="vk-empty-text">
+                {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="vk-button pill"
+                onClick={resetAndClose}
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Step 1: Identify */}
+        {step === "identify" && (
+          <div className="vk-dialog-body">
+            <h2 className="vk-dialog-title">Submit a request</h2>
+            <p className="vk-dialog-subtitle">
+              We&apos;ll get back to you as soon as possible.
+            </p>
+
+            <div className="vk-stack">
+              {error && (
+                <Alert type="error" message={error} onDismiss={() => setError("")} />
+              )}
+
+              {/* Email */}
+              <div className="vk-field">
+                <label className="vk-label required" htmlFor="vk-dialog-email">
+                  Email
+                </label>
+                <div className="vk-input-icon-wrap">
+                  <span className="vk-input-icon">&#9993;</span>
+                  <input
+                    id="vk-dialog-email"
+                    className="vk-input"
+                    type="email"
+                    placeholder="you@example.com"
+                    value={form.email}
+                    onChange={(e) =>
+                      setForm((prev) => ({ ...prev, email: e.target.value }))
+                    }
+                    required
+                  />
+                </div>
+                <p className="vk-hint">We&apos;ll contact you at this address.</p>
+              </div>
+
+              {/* Template selector */}
+              {templates.length > 1 && (
+                <div className="vk-field">
+                  <p className="vk-label">What can we help you with?</p>
+                  <div className="vk-grid">
+                    {templates.map((template) => (
+                      <button
+                        key={template.id}
+                        type="button"
+                        className={cn(
+                          "vk-radio-card",
+                          selectedTemplateId === template.id && "active",
+                        )}
+                        onClick={() => setSelectedTemplateId(template.id)}
+                      >
+                        <span className="vk-radio-dot">
+                          <span className="vk-radio-dot-inner" />
+                        </span>
+                        <div>
+                          <span className="vk-radio-name">{template.name}</span>
+                          {template.description && (
+                            <span className="vk-radio-description">
+                              {template.description}
+                            </span>
+                          )}
+                        </div>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Continue */}
+              <button
+                type="button"
+                className="vk-button primary full"
+                disabled={!canContinue}
+                onClick={() => {
+                  setError("");
+                  setStep("details");
+                }}
+              >
+                Continue
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Step 2: Details */}
+        {step === "details" && (
+          <div className="vk-dialog-body">
+            <button
+              type="button"
+              className="vk-button ghost"
+              onClick={() => {
+                setError("");
+                setStep("identify");
+              }}
+            >
+              &#8592; Back
+            </button>
+
+            <h2 className="vk-dialog-title">
+              {selectedTemplate?.name || "Ticket details"}
+            </h2>
+
+            <form className="vk-stack" onSubmit={handleSubmit}>
+              {error && (
+                <Alert type="error" message={error} onDismiss={() => setError("")} />
+              )}
+
+              {/* Subject */}
+              <div className="vk-field">
+                <label className="vk-label required" htmlFor="vk-dialog-subject">
+                  Subject
+                </label>
+                <input
+                  id="vk-dialog-subject"
+                  className="vk-input"
+                  type="text"
+                  placeholder="Brief description of your issue"
+                  value={form.title}
+                  onChange={(e) =>
+                    setForm((prev) => ({ ...prev, title: e.target.value }))
+                  }
+                  required
+                />
+              </div>
+
+              {/* Dynamic questions */}
+              {orderedQuestions.map((question) => (
+                <div className="vk-field" key={question.id}>
+                  <label
+                    className={cn(
+                      "vk-label",
+                      question.required && "required",
+                    )}
+                  >
+                    {question.label}
+                  </label>
+
+                  {question.type === "TEXT" && (
+                    <input
+                      className="vk-input"
+                      type="text"
+                      value={String(form.answers[question.id] || "")}
+                      onChange={(e) => updateAnswer(question.id, e.target.value)}
+                    />
+                  )}
+
+                  {question.type === "TEXTAREA" && (
+                    <textarea
+                      className="vk-textarea"
+                      value={String(form.answers[question.id] || "")}
+                      onChange={(e) => updateAnswer(question.id, e.target.value)}
+                    />
+                  )}
+
+                  {question.type === "DATE" && (
+                    <input
+                      className="vk-input"
+                      type="date"
+                      value={String(form.answers[question.id] || "")}
+                      onChange={(e) => updateAnswer(question.id, e.target.value)}
+                    />
+                  )}
+
+                  {question.type === "SELECT" && (
+                    <select
+                      className="vk-select"
+                      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="vk-checkbox-list">
+                      {(question.options || []).map((option) => (
+                        <label className="vk-checkbox-item" key={option.id}>
+                          <input
+                            type="checkbox"
+                            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" && (
+                    <FileUploadInput
+                      files={
+                        Array.isArray(form.answers[question.id])
+                          ? (form.answers[question.id] as File[])
+                          : form.answers[question.id] instanceof File
+                            ? [form.answers[question.id] as File]
+                            : []
+                      }
+                      onChange={(files) => updateAnswer(question.id, files.length > 0 ? files : null)}
+                    />
+                  )}
+                </div>
+              ))}
+
+              {/* Actions */}
+              <button
+                className="vk-button primary full"
+                type="submit"
+                disabled={isSubmitting}
+              >
+                {isSubmitting ? (
+                  <>
+                    <span className="vk-spinner" />
+                    Submitting...
+                  </>
+                ) : (
+                  "Submit"
+                )}
+              </button>
+            </form>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}