@vicket/create-support 1.1.1

package/templates-tailwind/nuxt/app/composables/use-vicket.ts

@@ -0,0 +1,249 @@
+/* ── Types ─────────────────────────────────────── */
+
+export type TemplateOption = {
+  id: string;
+  label: string;
+  value: string;
+};
+
+export type TemplateQuestion = {
+  id: string;
+  label: string;
+  type: "TEXT" | "TEXTAREA" | "SELECT" | "CHECKBOX" | "DATE" | "FILE";
+  required: boolean;
+  order: number;
+  options?: TemplateOption[];
+};
+
+export type Template = {
+  id: string;
+  name: string;
+  description: string;
+  questions: TemplateQuestion[];
+};
+
+export type Article = {
+  id: string;
+  title: string;
+  slug: string;
+  content: string;
+};
+
+export type Faq = {
+  id: string;
+  question: string;
+  answer: string;
+};
+
+export type SupportInitResponse = {
+  success: boolean;
+  data?: {
+    website?: { name?: string };
+    templates: Template[];
+    articles?: Article[];
+    faqs?: Faq[];
+  };
+  error?: string;
+};
+
+export type FormValues = {
+  email: string;
+  title: string;
+  answers: Record<string, unknown>;
+};
+
+export type Attachment = {
+  id: string;
+  original_filename: string;
+  url: string;
+};
+
+export type Message = {
+  id: string;
+  content: string;
+  author_type: "reporter" | "user" | "system";
+  created_at: string;
+  attachments?: Attachment[];
+};
+
+export type TicketAnswer = {
+  id: string;
+  question_label: string;
+  answer: string;
+  attachments?: Attachment[];
+};
+
+export type TicketThread = {
+  id: string;
+  title: string;
+  status?: { label: string };
+  priority?: { label: string };
+  messages: Message[];
+  answers?: TicketAnswer[];
+};
+
+/* ── Constants ─────────────────────────────────── */
+
+const PROXY_BASE = "/api/vicket";
+
+export const AUTHOR_LABELS: Record<string, string> = {
+  reporter: "You",
+  user: "Support",
+  system: "System",
+};
+
+export const initialFormValues: FormValues = { email: "", title: "", answers: {} };
+
+/* ── Helpers ───────────────────────────────────── */
+
+export function cn(...classes: (string | false | null | undefined)[]): string {
+  return classes.filter(Boolean).join(" ");
+}
+
+export function stripHtml(html: string): string {
+  return html.replace(/<[^>]*>/g, "");
+}
+
+export function sanitizeHtml(html: string): string {
+  return html
+    .replace(/<script[\s\S]*?<\/script>/gi, "")
+    .replace(/\son\w+="[^"]*"/gi, "")
+    .replace(/\son\w+='[^']*'/gi, "")
+    .replace(/href\s*=\s*"javascript:[^"]*"/gi, 'href="#"')
+    .replace(/href\s*=\s*'javascript:[^']*'/gi, "href='#'");
+}
+
+export function formatDate(iso: string): string {
+  try {
+    return new Intl.DateTimeFormat("en", {
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+    }).format(new Date(iso));
+  } catch {
+    return iso;
+  }
+}
+
+export function isFileAnswer(answer: string): boolean {
+  return answer?.includes("__isFile:true") || answer?.includes("map[__isFile");
+}
+
+export function formatAnswerText(value: string): string {
+  if (!value) return "";
+  const trimmed = value.trim();
+  if (trimmed.startsWith("[") && trimmed.endsWith("]")) {
+    const rawItems = trimmed.slice(1, -1).trim();
+    return rawItems.length > 0 ? rawItems.split(/\s+/).join(", ") : "";
+  }
+  return value;
+}
+
+/* ── API (uses Nuxt $fetch) ────────────────────── */
+
+export async function fetchInit(): Promise<NonNullable<SupportInitResponse["data"]>> {
+  const payload = await $fetch<SupportInitResponse>(`${PROXY_BASE}/init`, { method: "GET" });
+  if (!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 (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 fetchThread(token: string): Promise<TicketThread> {
+  const payload = await $fetch<{
+    success?: boolean;
+    error?: string;
+    error_code?: string;
+    data?: TicketThread;
+  }>(`${PROXY_BASE}/thread?token=${encodeURIComponent(token)}`, { method: "GET" });
+
+  if (!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}/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 responsePayload = (await response.json()) as {
+    success?: boolean;
+    error?: string;
+    error_code?: string;
+  };
+  if (!response.ok || !responsePayload?.success) {
+    if (responsePayload?.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(responsePayload?.error || "Failed to send reply.");
+  }
+}

package/templates-tailwind/nuxt/app/pages/support.vue

@@ -0,0 +1,3 @@
+<template>
+  <VicketSupportPage />
+</template>

package/templates-tailwind/nuxt/app/pages/ticket.vue

@@ -0,0 +1,3 @@
+<template>
+  <VicketTicketPage />
+</template>

package/templates-tailwind/nuxt/server/api/vicket/init.get.ts

@@ -0,0 +1,22 @@
+import { defineEventHandler } from "h3";
+
+export default defineEventHandler(async (event) => {
+  const apiUrl = (process.env.VICKET_API_URL || "").replace(/\/+$/, "");
+  const apiKey = process.env.VICKET_API_KEY || "";
+
+  if (!apiUrl || !apiKey) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: "Missing VICKET_API_URL or VICKET_API_KEY environment variable.",
+    });
+  }
+
+  const response = await fetch(`${apiUrl}/public/support/init`, {
+    method: "GET",
+    headers: { "X-Api-Key": apiKey, "Content-Type": "application/json" },
+  });
+
+  const data = await response.json();
+  event.node.res.statusCode = response.status;
+  return data;
+});

package/templates-tailwind/nuxt/server/api/vicket/messages.post.ts

@@ -0,0 +1,56 @@
+import { defineEventHandler, getQuery, readBody, readMultipartFormData } from "h3";
+
+export default defineEventHandler(async (event) => {
+  const apiUrl = (process.env.VICKET_API_URL || "").replace(/\/+$/, "");
+  const apiKey = process.env.VICKET_API_KEY || "";
+
+  if (!apiUrl || !apiKey) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: "Missing VICKET_API_URL or VICKET_API_KEY environment variable.",
+    });
+  }
+
+  const query = getQuery(event);
+  const token = String(query.token || "");
+  const targetUrl = `${apiUrl}/public/support/ticket/messages?token=${encodeURIComponent(token)}`;
+
+  const contentType = event.node.req.headers["content-type"] || "";
+  const isMultipart = contentType.includes("multipart/form-data");
+
+  let fetchOptions: RequestInit;
+
+  if (isMultipart) {
+    const parts = await readMultipartFormData(event);
+    const formData = new FormData();
+
+    if (parts) {
+      for (const part of parts) {
+        if (part.filename) {
+          const blob = new Blob([part.data], { type: part.type || "application/octet-stream" });
+          formData.append(part.name || "file", blob, part.filename);
+        } else {
+          formData.append(part.name || "field", part.data.toString("utf-8"));
+        }
+      }
+    }
+
+    fetchOptions = {
+      method: "POST",
+      headers: { "X-Api-Key": apiKey },
+      body: formData,
+    };
+  } else {
+    const body = await readBody(event);
+    fetchOptions = {
+      method: "POST",
+      headers: { "X-Api-Key": apiKey, "Content-Type": "application/json" },
+      body: body ? JSON.stringify(body) : undefined,
+    };
+  }
+
+  const response = await fetch(targetUrl, fetchOptions);
+  const data = await response.json();
+  event.node.res.statusCode = response.status;
+  return data;
+});

package/templates-tailwind/nuxt/server/api/vicket/thread.get.ts

@@ -0,0 +1,26 @@
+import { defineEventHandler, getQuery } from "h3";
+
+export default defineEventHandler(async (event) => {
+  const apiUrl = (process.env.VICKET_API_URL || "").replace(/\/+$/, "");
+  const apiKey = process.env.VICKET_API_KEY || "";
+
+  if (!apiUrl || !apiKey) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: "Missing VICKET_API_URL or VICKET_API_KEY environment variable.",
+    });
+  }
+
+  const query = getQuery(event);
+  const token = String(query.token || "");
+  const targetUrl = `${apiUrl}/public/support/ticket?token=${encodeURIComponent(token)}`;
+
+  const response = await fetch(targetUrl, {
+    method: "GET",
+    headers: { "X-Api-Key": apiKey, "Content-Type": "application/json" },
+  });
+
+  const data = await response.json();
+  event.node.res.statusCode = response.status;
+  return data;
+});

package/templates-tailwind/nuxt/server/api/vicket/tickets.post.ts

@@ -0,0 +1,53 @@
+import { defineEventHandler, readBody, readMultipartFormData } from "h3";
+
+export default defineEventHandler(async (event) => {
+  const apiUrl = (process.env.VICKET_API_URL || "").replace(/\/+$/, "");
+  const apiKey = process.env.VICKET_API_KEY || "";
+
+  if (!apiUrl || !apiKey) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: "Missing VICKET_API_URL or VICKET_API_KEY environment variable.",
+    });
+  }
+
+  const contentType = event.node.req.headers["content-type"] || "";
+  const isMultipart = contentType.includes("multipart/form-data");
+  const targetUrl = `${apiUrl}/public/support/tickets`;
+
+  let fetchOptions: RequestInit;
+
+  if (isMultipart) {
+    const parts = await readMultipartFormData(event);
+    const formData = new FormData();
+
+    if (parts) {
+      for (const part of parts) {
+        if (part.filename) {
+          const blob = new Blob([part.data], { type: part.type || "application/octet-stream" });
+          formData.append(part.name || "file", blob, part.filename);
+        } else {
+          formData.append(part.name || "field", part.data.toString("utf-8"));
+        }
+      }
+    }
+
+    fetchOptions = {
+      method: "POST",
+      headers: { "X-Api-Key": apiKey },
+      body: formData,
+    };
+  } else {
+    const body = await readBody(event);
+    fetchOptions = {
+      method: "POST",
+      headers: { "X-Api-Key": apiKey, "Content-Type": "application/json" },
+      body: body ? JSON.stringify(body) : undefined,
+    };
+  }
+
+  const response = await fetch(targetUrl, fetchOptions);
+  const data = await response.json();
+  event.node.res.statusCode = response.status;
+  return data;
+});