@vicket/create-support 1.1.1

package/templates/nuxt/app/composables/useVicket.ts

@@ -0,0 +1,274 @@
+/* ---------------------------------------------- */
+/*  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                                      */
+/* ---------------------------------------------- */
+export 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: {} };
+
+/* ---------------------------------------------- */
+/*  Utilities                                      */
+/* ---------------------------------------------- */
+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 functions                                  */
+/* ---------------------------------------------- */
+export async function fetchSupportInit(): 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 (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 payload = await $fetch<{
+    success?: boolean;
+    error?: string;
+    error_code?: string;
+    data?: TicketThread;
+  }>(`${PROXY_BASE}/ticket?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}/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 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/nuxt/app/pages/support.vue

@@ -0,0 +1,303 @@
+<script setup lang="ts">
+import type { Template, Article, Faq } from "~/composables/useVicket";
+import { cn, stripHtml, sanitizeHtml, fetchSupportInit } from "~/composables/useVicket";
+
+/* ---------------------------------------------- */
+/*  Reactive state                                 */
+/* ---------------------------------------------- */
+const templates = ref<Template[]>([]);
+const articles = ref<Article[]>([]);
+const faqs = ref<Faq[]>([]);
+const websiteName = ref("Support");
+const isLoading = ref(true);
+const error = ref("");
+const searchQuery = ref("");
+const dialogOpen = ref(false);
+const selectedArticle = ref<Article | null>(null);
+
+/* FAQ open state */
+const openFaqIds = ref<Set<string>>(new Set());
+
+/* ---------------------------------------------- */
+/*  Computed                                       */
+/* ---------------------------------------------- */
+const filteredArticles = computed(() => {
+  if (!searchQuery.value.trim()) return articles.value;
+  const q = searchQuery.value.toLowerCase();
+  return articles.value.filter(
+    (a) =>
+      a.title.toLowerCase().includes(q) ||
+      stripHtml(a.content).toLowerCase().includes(q),
+  );
+});
+
+const filteredFaqs = computed(() => {
+  if (!searchQuery.value.trim()) return faqs.value;
+  const q = searchQuery.value.toLowerCase();
+  return faqs.value.filter(
+    (f) =>
+      f.question.toLowerCase().includes(q) ||
+      f.answer.toLowerCase().includes(q),
+  );
+});
+
+const hasContent = computed(() => articles.value.length > 0 || faqs.value.length > 0);
+const hasResults = computed(() => filteredArticles.value.length > 0 || filteredFaqs.value.length > 0);
+
+/* ---------------------------------------------- */
+/*  FAQ accordion                                  */
+/* ---------------------------------------------- */
+const toggleFaq = (id: string) => {
+  const next = new Set(openFaqIds.value);
+  if (next.has(id)) {
+    next.delete(id);
+  } else {
+    next.add(id);
+  }
+  openFaqIds.value = next;
+};
+
+const isFaqOpen = (id: string) => openFaqIds.value.has(id);
+
+/* ---------------------------------------------- */
+/*  Dialog helpers                                 */
+/* ---------------------------------------------- */
+const openDialog = () => {
+  dialogOpen.value = true;
+};
+
+/* ---------------------------------------------- */
+/*  Data loading                                   */
+/* ---------------------------------------------- */
+onMounted(async () => {
+  isLoading.value = true;
+  error.value = "";
+  try {
+    const data = await fetchSupportInit();
+    templates.value = data.templates || [];
+    articles.value = data.articles || [];
+    faqs.value = data.faqs || [];
+    websiteName.value = data.website?.name || "Support";
+  } catch (loadError) {
+    error.value = loadError instanceof Error ? loadError.message : "Unexpected error.";
+  } finally {
+    isLoading.value = false;
+  }
+});
+</script>
+
+<template>
+  <!-- Skeleton loading state -->
+  <div v-if="isLoading" class="vk-shell">
+    <div class="vk-page vk-animate-in">
+      <div class="vk-hero-row">
+        <div>
+          <div class="vk-skeleton" aria-hidden="true">
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+          </div>
+          <div class="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>
+        <div class="vk-skeleton" aria-hidden="true">
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+        </div>
+      </div>
+      <div class="vk-search-wrap">
+        <div class="vk-skeleton" aria-hidden="true">&nbsp;</div>
+      </div>
+      <div class="vk-content-grid">
+        <div>
+          <div class="vk-skeleton" aria-hidden="true">&nbsp;</div>
+          <div class="vk-skeleton" aria-hidden="true">&nbsp;</div>
+          <div class="vk-skeleton" aria-hidden="true">&nbsp;</div>
+        </div>
+        <div>
+          <div class="vk-skeleton" aria-hidden="true">&nbsp;</div>
+          <div class="vk-skeleton" aria-hidden="true">&nbsp;</div>
+          <div class="vk-skeleton" aria-hidden="true">&nbsp;</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Article viewer -->
+  <div v-else-if="selectedArticle" class="vk-shell">
+    <div class="vk-page vk-animate-in">
+      <!-- Hero stays visible -->
+      <div class="vk-hero-row">
+        <div>
+          <h1 class="vk-hero-title">{{ websiteName }}</h1>
+          <p class="vk-hero-subtitle">How can we help you today?</p>
+        </div>
+        <button
+          v-if="templates.length > 0"
+          type="button"
+          class="vk-button primary pill"
+          @click="openDialog"
+        >
+          &#128172; Contact Support
+        </button>
+      </div>
+
+      <!-- Article content -->
+      <div class="vk-article-viewer">
+        <button
+          type="button"
+          class="vk-back-button"
+          @click="selectedArticle = null"
+        >
+          &#8592; Back to articles
+        </button>
+
+        <div class="vk-article-viewer-card">
+          <h2 class="vk-article-viewer-title">{{ selectedArticle.title }}</h2>
+          <div
+            class="vk-article-viewer-content vk-message-html"
+            v-html="sanitizeHtml(selectedArticle.content)"
+          />
+        </div>
+      </div>
+    </div>
+
+    <VicketTicketDialog
+      v-model="dialogOpen"
+      :templates="templates"
+    />
+  </div>
+
+  <!-- Home view -->
+  <div v-else class="vk-shell">
+    <div class="vk-page vk-animate-in">
+      <!-- Row 1 - Hero -->
+      <div class="vk-hero-row">
+        <div>
+          <h1 class="vk-hero-title">{{ websiteName }}</h1>
+          <p class="vk-hero-subtitle">How can we help you today?</p>
+        </div>
+        <div v-if="templates.length > 0" class="vk-hero-cta">
+          <span class="vk-hero-cta-hint">Can't find what you're looking for?</span>
+          <button
+            type="button"
+            class="vk-button primary pill"
+            @click="openDialog"
+          >
+            &#128172; Contact Support
+          </button>
+        </div>
+      </div>
+
+      <!-- Alerts -->
+      <div
+        v-if="error"
+        :class="cn('vk-alert vk-slide-up', 'error')"
+        role="alert"
+      >
+        <span>&#9888;</span>
+        <span>{{ error }}</span>
+        <button
+          type="button"
+          class="vk-alert-dismiss"
+          aria-label="Dismiss"
+          @click="error = ''"
+        >
+          &#10005;
+        </button>
+      </div>
+
+      <!-- Row 2 - Search bar -->
+      <div v-if="hasContent" class="vk-search-wrap">
+        <span class="vk-search-icon">&#128269;</span>
+        <input
+          type="text"
+          class="vk-search-input"
+          placeholder="Search articles and FAQs..."
+          v-model="searchQuery"
+        />
+      </div>
+
+      <!-- Row 3 - Split content -->
+      <div v-if="hasResults" class="vk-content-grid">
+        <!-- Left: Articles -->
+        <div v-if="filteredArticles.length > 0">
+          <div class="vk-section-title-row">
+            <span class="vk-section-title-icon">&#128196;</span>
+            <h2 class="vk-section-title">Popular Articles</h2>
+          </div>
+          <div class="vk-article-list">
+            <button
+              v-for="article in filteredArticles"
+              :key="article.id"
+              type="button"
+              class="vk-article-card"
+              @click="selectedArticle = article"
+            >
+              <div class="vk-article-icon" aria-hidden="true">&#128196;</div>
+              <div>
+                <h3 class="vk-article-title">{{ article.title }}</h3>
+                <p v-if="article.content" class="vk-article-preview">
+                  {{ stripHtml(article.content).substring(0, 150) }}
+                </p>
+              </div>
+            </button>
+          </div>
+        </div>
+
+        <!-- Right: FAQs -->
+        <div v-if="filteredFaqs.length > 0">
+          <div class="vk-section-title-row">
+            <span class="vk-section-title-icon">&#10068;</span>
+            <h2 class="vk-section-title">Frequently Asked Questions</h2>
+          </div>
+          <div class="vk-faq-list">
+            <div
+              v-for="faq in filteredFaqs"
+              :key="faq.id"
+              class="vk-faq-item"
+            >
+              <button
+                type="button"
+                class="vk-faq-question"
+                :aria-expanded="isFaqOpen(faq.id)"
+                @click="toggleFaq(faq.id)"
+              >
+                {{ faq.question }}
+                <span :class="cn('vk-faq-chevron', isFaqOpen(faq.id) && 'open')">&#9660;</span>
+              </button>
+              <div :class="cn('vk-faq-body', isFaqOpen(faq.id) && 'open')">
+                <div>
+                  <div class="vk-faq-answer">{{ faq.answer }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- No search results -->
+      <div v-if="searchQuery.trim() && !hasResults" class="vk-no-results">
+        No results found for &ldquo;{{ searchQuery }}&rdquo;
+      </div>
+
+      <!-- Empty state - no articles and no FAQs at all -->
+      <div v-if="!hasContent && !error" class="vk-cta-card">
+        <div class="vk-cta-icon">&#128172;</div>
+        <p class="vk-cta-text">Need help? Our team is here for you.</p>
+        <button
+          type="button"
+          class="vk-button primary pill"
+          @click="openDialog"
+        >
+          Contact Support
+        </button>
+      </div>
+    </div>
+
+    <VicketTicketDialog
+      v-model="dialogOpen"
+      :templates="templates"
+    />
+  </div>
+</template>
+
+<style src="~/assets/css/vicket.css"></style>