@vicket/create-support 1.1.1

package/templates/next/src/app/ticket/page.tsx

@@ -0,0 +1,483 @@
+"use client";
+
+import { useSearchParams } from "next/navigation";
+import { type FormEvent, useEffect, useMemo, useState } from "react";
+import "../vicket.css";
+import type { Message, TicketThread } from "../utils/vicket/types";
+import { cn, sanitizeHtml, stripHtml, formatDate, isFileAnswer, formatAnswerText } from "../utils/vicket/utils";
+import { AUTHOR_LABELS, fetchTicketThread, sendReply } from "../utils/vicket/api";
+
+/* ---------------------------------------------- */
+/*  Skeleton loader                               */
+/* ---------------------------------------------- */
+function ThreadSkeleton() {
+  return (
+    <div className="vk-stack vk-animate-in">
+      {/* Header skeleton */}
+      <div>
+        <div className="vk-skeleton" aria-hidden="true">
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+        </div>
+        <div className="vk-compose-files">
+          <span className="vk-skeleton" aria-hidden="true">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+          <span className="vk-skeleton" aria-hidden="true">&nbsp;&nbsp;&nbsp;&nbsp;</span>
+        </div>
+      </div>
+      {/* Messages skeleton */}
+      <div className="vk-section-card">
+        <div className="vk-section-header">
+          <span className="vk-skeleton" aria-hidden="true">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+        </div>
+        {[1, 2, 3].map((i) => (
+          <div key={i} className="vk-message">
+            <div className="vk-avatar vk-skeleton" aria-hidden="true">&nbsp;</div>
+            <div className="vk-message-content">
+              <div className="vk-skeleton" aria-hidden="true">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
+              <div className="vk-skeleton" aria-hidden="true">&nbsp;</div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/* ---------------------------------------------- */
+/*  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>
+  );
+}
+
+/* ---------------------------------------------- */
+/*  Badge component                               */
+/* ---------------------------------------------- */
+function Badge({
+  label,
+  variant,
+}: {
+  label: string;
+  variant?: "status" | "priority" | "id";
+}) {
+  return (
+    <span className={cn("vk-badge", variant || "status")}>
+      {label}
+    </span>
+  );
+}
+
+/* ---------------------------------------------- */
+/*  Avatar                                        */
+/* ---------------------------------------------- */
+function Avatar({ authorType }: { authorType: string }) {
+  return (
+    <div
+      className={cn("vk-avatar", `vk-avatar-${authorType}`)}
+      aria-hidden="true"
+    >
+      {(AUTHOR_LABELS[authorType] || "?")[0]}
+    </div>
+  );
+}
+
+/* ---------------------------------------------- */
+/*  Message item                                  */
+/* ---------------------------------------------- */
+function MessageItem({ message }: { message: Message }) {
+  const isSystem = message.author_type === "system";
+  const isSupport = message.author_type === "user";
+
+  if (isSystem) {
+    return (
+      <div className="vk-message">
+        <Avatar authorType="system" />
+        <div className="vk-message-content">
+          <div className="vk-message-meta">
+            <span className="vk-author-name system">System</span>
+            <span className="vk-message-time">{formatDate(message.created_at)}</span>
+          </div>
+          <p className="vk-system-text">
+            {stripHtml(message.content)}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="vk-message">
+      <Avatar authorType={message.author_type} />
+      <div className="vk-message-content">
+        <div className="vk-message-meta">
+          <span className="vk-author-name">
+            {AUTHOR_LABELS[message.author_type] || message.author_type}
+          </span>
+          <span className="vk-message-time">{formatDate(message.created_at)}</span>
+        </div>
+        <div
+          className={cn(
+            "vk-message-bubble",
+            isSupport && "support",
+          )}
+        >
+          <div
+            className="vk-message-html"
+            dangerouslySetInnerHTML={{
+              __html: sanitizeHtml(message.content),
+            }}
+          />
+        </div>
+        {message.attachments && message.attachments.length > 0 && (
+          <div className="vk-attachments">
+            {message.attachments.map((attachment) => (
+              <a
+                className="vk-attachment"
+                href={attachment.url}
+                key={attachment.id}
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                &#128206; <span>{attachment.original_filename}</span>
+              </a>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/* ---------------------------------------------- */
+/*  Main page                                     */
+/* ---------------------------------------------- */
+export default function TicketPage() {
+  const searchParams = useSearchParams();
+  const token = searchParams.get("token") || "";
+
+  const [thread, setThread] = useState<TicketThread | null>(null);
+  const [content, setContent] = useState("");
+  const [files, setFiles] = useState<File[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSending, setIsSending] = useState(false);
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState("");
+
+  const hasToken = useMemo(() => token.trim().length > 0, [token]);
+
+  const loadThread = async () => {
+    if (!hasToken) {
+      setIsLoading(false);
+      setError("Missing ticket token in URL.");
+      return;
+    }
+
+    setIsLoading(true);
+    setError("");
+    try {
+      const data = await fetchTicketThread(token);
+      setThread(data);
+    } catch (loadError) {
+      setError(loadError instanceof Error ? loadError.message : "Unexpected error.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    void loadThread();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token]);
+
+  const firstReporterMessage = useMemo(() => {
+    if (!thread?.messages || thread.messages.length === 0) return null;
+    const sorted = [...thread.messages].sort(
+      (a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime(),
+    );
+    // Only treat as description if the very first message is from the reporter
+    return sorted[0].author_type === "reporter" ? sorted[0] : null;
+  }, [thread]);
+
+  const sortedMessages = useMemo(() => {
+    if (!thread?.messages) return [];
+    return [...thread.messages]
+      .sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime())
+      .filter((m) => !firstReporterMessage || m.id !== firstReporterMessage.id);
+  }, [thread, firstReporterMessage]);
+
+  const summaryAnswers = useMemo(() => {
+    if (!thread?.answers) return [];
+    return thread.answers.filter((answer) => {
+      if (answer.attachments && answer.attachments.length > 0) return true;
+      if (answer.answer && answer.answer.trim().length > 0) return true;
+      return false;
+    });
+  }, [thread]);
+
+  const removeFile = (index: number) => {
+    setFiles((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const onSubmitReply = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setError("");
+    setSuccess("");
+
+    if (!content.trim() && files.length === 0) {
+      setError("Reply content is required.");
+      return;
+    }
+
+    if (!hasToken) {
+      setError("Missing ticket token.");
+      return;
+    }
+
+    setIsSending(true);
+    try {
+      await sendReply(token, content.trim(), files);
+      setContent("");
+      setFiles([]);
+      setSuccess("Reply sent.");
+      await loadThread();
+    } catch (replyError) {
+      setError(replyError instanceof Error ? replyError.message : "Unexpected error.");
+    } finally {
+      setIsSending(false);
+    }
+  };
+
+  return (
+    <div className="vk-shell">
+      <div className="vk-page vk-animate-in">
+        {/* Back link */}
+        <div className="vk-ticket-badges">
+          <a href="/support" className="vk-back-link">
+            &#8592; Back to support
+          </a>
+        </div>
+
+        {/* Alerts */}
+        {error && (
+          <Alert type="error" message={error} onDismiss={() => setError("")} />
+        )}
+        {success && (
+          <Alert type="success" message={success} onDismiss={() => setSuccess("")} />
+        )}
+
+        {/* Loading */}
+        {isLoading && <ThreadSkeleton />}
+
+        {/* Thread */}
+        {!isLoading && thread && (
+          <div className="vk-stack">
+            {/* Header */}
+            <div>
+              <div className="vk-ticket-header">
+                <h1 className="vk-ticket-title">{thread.title}</h1>
+                {thread.id && (
+                  <Badge label={`#${thread.id.slice(0, 8)}`} variant="id" />
+                )}
+              </div>
+              {((thread.status?.label && thread.status.label.toLowerCase() !== "open") ||
+                (thread.priority?.label && thread.priority.label.toLowerCase() !== "low")) && (
+                <div className="vk-ticket-badges">
+                  {thread.status?.label && thread.status.label.toLowerCase() !== "open" && (
+                    <Badge label={thread.status.label} variant="status" />
+                  )}
+                  {thread.priority?.label && thread.priority.label.toLowerCase() !== "low" && (
+                    <Badge label={thread.priority.label} variant="priority" />
+                  )}
+                </div>
+              )}
+            </div>
+
+            {/* Summary (ticket form answers) */}
+            {summaryAnswers.length > 0 && (
+              <div className="vk-section-card">
+                <div className="vk-section-header">
+                  <span className="vk-section-header-icon">&#128221;</span>
+                  <h2>Summary</h2>
+                </div>
+                <div className="vk-section-body">
+                  <div className="vk-summary-list">
+                    {summaryAnswers.map((answer) => (
+                      <div key={answer.id} className="vk-summary-item">
+                        <p className="vk-summary-label">{answer.question_label || "Question"}</p>
+                        {answer.attachments && answer.attachments.length > 0 ? (
+                          <div className="vk-attachments">
+                            {answer.attachments.map((attachment) => (
+                              <a
+                                className="vk-attachment"
+                                href={attachment.url}
+                                key={attachment.id}
+                                rel="noopener noreferrer"
+                                target="_blank"
+                              >
+                                &#128206; <span>{attachment.original_filename}</span>
+                              </a>
+                            ))}
+                          </div>
+                        ) : isFileAnswer(answer.answer) ? (
+                          <p className="vk-summary-value muted">File uploaded</p>
+                        ) : (
+                          <p className="vk-summary-value">
+                            {formatAnswerText(answer.answer) || "-"}
+                          </p>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Description (first reporter message) */}
+            {firstReporterMessage && (
+              <div className="vk-section-card">
+                <div className="vk-section-header">
+                  <span className="vk-section-header-icon">&#128196;</span>
+                  <h2>Description</h2>
+                </div>
+                <div className="vk-section-body">
+                  <div
+                    className="vk-description-content vk-message-html"
+                    dangerouslySetInnerHTML={{
+                      __html: sanitizeHtml(firstReporterMessage.content),
+                    }}
+                  />
+                  {firstReporterMessage.attachments && firstReporterMessage.attachments.length > 0 && (
+                    <div className="vk-attachments">
+                      {firstReporterMessage.attachments.map((att) => (
+                        <a
+                          key={att.id}
+                          href={att.url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="vk-attachment"
+                        >
+                          &#128206; <span>{att.original_filename}</span>
+                        </a>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {/* Comments card */}
+            <div className="vk-section-card">
+              <div className="vk-section-header">
+                <span className="vk-section-header-icon">&#128172;</span>
+                <h2>Comments</h2>
+              </div>
+
+              {/* Compose area */}
+              <div className="vk-compose">
+                <form className="vk-stack" onSubmit={onSubmitReply}>
+                  <textarea
+                    className="vk-textarea"
+                    value={content}
+                    onChange={(e) => setContent(e.target.value)}
+                    placeholder="Write your reply..."
+                  />
+
+                  <div className="vk-compose-row">
+                    {/* File input */}
+                    <div className="vk-compose-files">
+                      <label className="vk-browse-btn">
+                        &#128206; Browse files
+                        <input
+                          type="file"
+                          multiple
+                          onChange={(e) => {
+                            const newFiles = Array.from(e.target.files || []);
+                            setFiles((prev) => [...prev, ...newFiles]);
+                            e.target.value = "";
+                          }}
+                        />
+                      </label>
+                      {files.map((file, i) => (
+                        <span className="vk-file-chip" key={`${file.name}-${i}`}>
+                          &#128206;
+                          <span className="vk-file-chip-name">{file.name}</span>
+                          <button
+                            type="button"
+                            onClick={() => removeFile(i)}
+                            aria-label={`Remove ${file.name}`}
+                          >
+                            &#10005;
+                          </button>
+                        </span>
+                      ))}
+                    </div>
+
+                    {/* Send */}
+                    <button
+                      className="vk-button primary"
+                      disabled={isSending}
+                      type="submit"
+                    >
+                      {isSending ? (
+                        <>
+                          <span className="vk-spinner" />
+                          Sending...
+                        </>
+                      ) : (
+                        "Send"
+                      )}
+                    </button>
+                  </div>
+                </form>
+              </div>
+
+              {/* Message list */}
+              {sortedMessages.length === 0 ? (
+                <div className="vk-empty-state">
+                  <div className="vk-empty-icon">&#128172;</div>
+                  <p className="vk-empty-text">
+                    No messages yet. Be the first to reply!
+                  </p>
+                </div>
+              ) : (
+                <div className="vk-message-list">
+                  {sortedMessages.map((message, index) => (
+                    <div key={message.id}>
+                      {index > 0 && <hr className="vk-message-divider" />}
+                      <MessageItem message={message} />
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/next/src/app/utils/vicket/api.ts

@@ -0,0 +1,149 @@
+/* ---------------------------------------------- */
+/*  API functions and constants for Vicket pages  */
+/* ---------------------------------------------- */
+
+import type { FormValues, SupportInitResponse, TicketThread } from "./types";
+
+export const PROXY_BASE = "/api/vicket";
+
+export const initialFormValues: FormValues = { email: "", title: "", answers: {} };
+
+export const AUTHOR_LABELS: Record<string, string> = {
+  reporter: "You",
+  user: "Support",
+  system: "System",
+};
+
+export async function fetchSupportInit(): Promise<NonNullable<SupportInitResponse["data"]>> {
+  const response = await fetch(`${PROXY_BASE}/init`, {
+    method: "GET",
+    cache: "no-store",
+    headers: { "Content-Type": "application/json" },
+  });
+  const payload = (await response.json()) as SupportInitResponse;
+
+  if (!response.ok || !payload?.success || !payload?.data) {
+    throw new Error(payload?.error || "Failed to load support data.");
+  }
+
+  return payload.data;
+}
+
+export async function createTicket(body: {
+  email: string;
+  title: string;
+  templateId: string;
+  answers: Record<string, unknown>;
+  hasFiles: boolean;
+  fileQuestionIds: string[];
+}): Promise<{ emailLimitReached?: boolean; warning?: string }> {
+  const payload = {
+    email: body.email,
+    title: body.title,
+    templateId: body.templateId,
+    answers: { ...body.answers },
+  };
+
+  let response: Response;
+  if (body.hasFiles) {
+    const formData = new FormData();
+    const normalizedAnswers: Record<string, unknown> = {};
+    for (const [questionId, answer] of Object.entries(payload.answers)) {
+      if (Array.isArray(answer) && answer.length > 0 && answer[0] instanceof File) {
+        (answer as File[]).forEach((f) => formData.append(`files[${questionId}]`, f));
+        normalizedAnswers[questionId] = "__isFile:true";
+      } else if (answer instanceof File) {
+        formData.append(`files[${questionId}]`, answer);
+        normalizedAnswers[questionId] = "__isFile:true";
+      } else {
+        normalizedAnswers[questionId] = answer;
+      }
+    }
+    formData.append("data", JSON.stringify({ ...payload, answers: normalizedAnswers }));
+    response = await fetch(`${PROXY_BASE}/tickets`, {
+      method: "POST",
+      body: formData,
+    });
+  } else {
+    response = await fetch(`${PROXY_BASE}/tickets`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload),
+    });
+  }
+
+  const responsePayload = (await response.json()) as {
+    error?: string;
+    success?: boolean;
+    data?: { email_limit_reached?: boolean; warning?: string };
+  };
+  if (!response.ok || !responsePayload?.success) {
+    throw new Error(responsePayload?.error || "Failed to create ticket.");
+  }
+
+  return {
+    emailLimitReached: responsePayload.data?.email_limit_reached ?? false,
+    warning: responsePayload.data?.warning,
+  };
+}
+
+export async function fetchTicketThread(token: string): Promise<TicketThread> {
+  const response = await fetch(
+    `${PROXY_BASE}/ticket?token=${encodeURIComponent(token)}`,
+    {
+      method: "GET",
+      cache: "no-store",
+      headers: { "Content-Type": "application/json" },
+    },
+  );
+  const payload = (await response.json()) as {
+    success?: boolean;
+    error?: string;
+    error_code?: string;
+    data?: TicketThread;
+  };
+
+  if (!response.ok || !payload?.success || !payload?.data) {
+    if (payload?.error_code === "ticket-link-expired") {
+      throw new Error("This link has expired. A new secure link has been sent to your email.");
+    }
+    throw new Error(payload?.error || "Failed to load ticket.");
+  }
+
+  return payload.data;
+}
+
+export async function sendReply(token: string, content: string, files: File[]): Promise<void> {
+  const url = `${PROXY_BASE}/ticket/messages?token=${encodeURIComponent(token)}`;
+
+  let response: Response;
+  if (files.length > 0) {
+    const formData = new FormData();
+    formData.append("data", JSON.stringify({ content }));
+    for (const file of files) {
+      formData.append("files", file);
+    }
+    response = await fetch(url, {
+      method: "POST",
+      body: formData,
+    });
+  } else {
+    response = await fetch(url, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ content }),
+    });
+  }
+
+  const payload = (await response.json()) as {
+    success?: boolean;
+    error?: string;
+    error_code?: string;
+  };
+  if (!response.ok || !payload?.success) {
+    if (payload?.error_code === "ticket-link-expired") {
+      throw new Error("This link has expired. A new secure link has been sent to your email.");
+    }
+    throw new Error(payload?.error || "Failed to send reply.");
+  }
+}