@vicket/create-support 1.1.1 → 1.1.2

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

@@ -1,303 +1,17 @@
 <script setup lang="ts">
-import type { Template, Article, Faq } from "~/composables/useVicket";
-import { cn, stripHtml, sanitizeHtml, fetchSupportInit } from "~/composables/useVicket";
+import type { SupportInitResponse } from "vicket";
 
 /* ---------------------------------------------- */
-/*  Reactive state                                 */
+/*  SSR data fetching                              */
 /* ---------------------------------------------- */
-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;
-  }
-});
+const { data: initData, error: fetchError } = await useFetch<SupportInitResponse>('/api/vicket/init');
 </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>
+  <VicketSupportContent
+    :init-data="initData?.data"
+    :init-error="fetchError ? 'Failed to load support data.' : ''"
+  />
 </template>
 
 <style src="~/assets/css/vicket.css"></style>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { TicketThread as TicketThreadType } from "~/composables/useVicket";
+import type { TicketThread as TicketThreadType } from "vicket";
 import {
   cn,
   stripHtml,
@@ -8,24 +8,41 @@ import {
   isFileAnswer,
   formatAnswerText,
   AUTHOR_LABELS,
-  fetchTicketThread,
-  sendReply,
-} from "~/composables/useVicket";
+} from "vicket";
 
 /* ---------------------------------------------- */
 /*  Reactive state                                 */
 /* ---------------------------------------------- */
 const route = useRoute();
 const token = computed(() => String(route.query.token || ""));
-const hasToken = computed(() => token.value.trim().length > 0);
 
-const thread = ref<TicketThreadType | null>(null);
-const content = ref("");
-const files = ref<File[]>([]);
-const isLoading = ref(true);
-const isSending = ref(false);
-const error = ref("");
-const success = ref("");
+/* ---------------------------------------------- */
+/*  SSR data fetching                              */
+/* ---------------------------------------------- */
+const { data: threadRaw, error: fetchError, refresh } = await useFetch<{
+  success?: boolean;
+  error?: string;
+  error_code?: string;
+  data?: TicketThreadType;
+}>(`/api/vicket/ticket`, {
+  query: { token: token.value },
+});
+
+const thread = computed<TicketThreadType | null>(() => {
+  const raw = threadRaw.value;
+  if (!raw?.success || !raw?.data) return null;
+  return raw.data;
+});
+
+const error = ref(
+  fetchError.value
+    ? "Failed to load ticket."
+    : threadRaw.value && !threadRaw.value.success
+      ? (threadRaw.value.error_code === "ticket-link-expired"
+          ? "This link has expired. A new secure link has been sent to your email."
+          : threadRaw.value.error || "Failed to load ticket.")
+      : "",
+);
 
 /* ---------------------------------------------- */
 /*  Computed                                       */
@@ -35,7 +52,6 @@ const firstReporterMessage = computed(() => {
   const sorted = [...thread.value.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;
 });
 
@@ -56,76 +72,11 @@ const summaryAnswers = computed(() => {
 });
 
 /* ---------------------------------------------- */
-/*  Helpers                                        */
+/*  Reply callback                                 */
 /* ---------------------------------------------- */
-const removeFile = (index: number) => {
-  files.value = files.value.filter((_, i) => i !== index);
-};
-
-const onFileChange = (event: Event) => {
-  const input = event.target as HTMLInputElement;
-  const newFiles = Array.from(input.files || []);
-  files.value = [...files.value, ...newFiles];
-  input.value = "";
-};
-
-/* ---------------------------------------------- */
-/*  Data loading                                   */
-/* ---------------------------------------------- */
-const loadThread = async () => {
-  if (!hasToken.value) {
-    isLoading.value = false;
-    error.value = "Missing ticket token in URL.";
-    return;
-  }
-
-  isLoading.value = true;
-  error.value = "";
-  try {
-    const data = await fetchTicketThread(token.value);
-    thread.value = data;
-  } catch (loadError) {
-    error.value = loadError instanceof Error ? loadError.message : "Unexpected error.";
-  } finally {
-    isLoading.value = false;
-  }
+const onReplied = async () => {
+  await refresh();
 };
-
-const submitReply = async () => {
-  error.value = "";
-  success.value = "";
-
-  if (!content.value.trim() && files.value.length === 0) {
-    error.value = "Reply content is required.";
-    return;
-  }
-
-  if (!hasToken.value) {
-    error.value = "Missing ticket token.";
-    return;
-  }
-
-  isSending.value = true;
-  try {
-    await sendReply(token.value, content.value.trim(), files.value);
-    content.value = "";
-    files.value = [];
-    success.value = "Reply sent.";
-    await loadThread();
-  } catch (replyError) {
-    error.value = replyError instanceof Error ? replyError.message : "Unexpected error.";
-  } finally {
-    isSending.value = false;
-  }
-};
-
-watch(
-  () => token.value,
-  () => {
-    void loadThread();
-  },
-  { immediate: true },
-);
 </script>
 
 <template>
@@ -138,7 +89,7 @@ watch(
         </NuxtLink>
       </div>
 
-      <!-- Alerts -->
+      <!-- Error alert -->
       <div
         v-if="error"
         :class="cn('vk-alert vk-slide-up', 'error')"
@@ -155,52 +106,9 @@ watch(
           &#10005;
         </button>
       </div>
-      <div
-        v-if="success"
-        :class="cn('vk-alert vk-slide-up', 'success')"
-        role="alert"
-      >
-        <span>&#10003;</span>
-        <span>{{ success }}</span>
-        <button
-          type="button"
-          class="vk-alert-dismiss"
-          aria-label="Dismiss"
-          @click="success = ''"
-        >
-          &#10005;
-        </button>
-      </div>
-
-      <!-- Loading skeleton -->
-      <div v-if="isLoading" class="vk-stack vk-animate-in">
-        <!-- Header skeleton -->
-        <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 class="vk-compose-files">
-            <span class="vk-skeleton" aria-hidden="true">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
-            <span class="vk-skeleton" aria-hidden="true">&nbsp;&nbsp;&nbsp;&nbsp;</span>
-          </div>
-        </div>
-        <!-- Messages skeleton -->
-        <div class="vk-section-card">
-          <div class="vk-section-header">
-            <span class="vk-skeleton" aria-hidden="true">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
-          </div>
-          <div v-for="i in 3" :key="i" class="vk-message">
-            <div class="vk-avatar vk-skeleton" aria-hidden="true">&nbsp;</div>
-            <div class="vk-message-content">
-              <div class="vk-skeleton" aria-hidden="true">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
-              <div class="vk-skeleton" aria-hidden="true">&nbsp;</div>
-            </div>
-          </div>
-        </div>
-      </div>
 
       <!-- Thread -->
-      <div v-if="!isLoading && thread" class="vk-stack">
+      <div v-if="thread" class="vk-stack">
         <!-- Header -->
         <div>
           <div class="vk-ticket-header">
@@ -307,58 +215,8 @@ watch(
             <h2>Comments</h2>
           </div>
 
-          <!-- Compose area -->
-          <div class="vk-compose">
-            <form class="vk-stack" @submit.prevent="submitReply">
-              <textarea
-                v-model="content"
-                class="vk-textarea"
-                placeholder="Write your reply..."
-              />
-
-              <div class="vk-compose-row">
-                <!-- File input -->
-                <div class="vk-compose-files">
-                  <label class="vk-browse-btn">
-                    &#128206; Browse files
-                    <input
-                      type="file"
-                      multiple
-                      @change="onFileChange"
-                    />
-                  </label>
-                  <span
-                    v-for="(file, i) in files"
-                    :key="`${file.name}-${i}`"
-                    class="vk-file-chip"
-                  >
-                    &#128206;
-                    <span class="vk-file-chip-name">{{ file.name }}</span>
-                    <button
-                      type="button"
-                      :aria-label="`Remove ${file.name}`"
-                      @click="removeFile(i)"
-                    >
-                      &#10005;
-                    </button>
-                  </span>
-                </div>
-
-                <!-- Send -->
-                <button
-                  class="vk-button primary"
-                  :disabled="isSending"
-                  type="submit"
-                >
-                  <template v-if="isSending">
-                    <span class="vk-spinner" />
-                    Sending...
-                  </template>
-                  <template v-else>Send</template>
-                </button>
-              </div>
-            </form>
-          </div>
+          <!-- Reply form (client interactive) -->
+          <VicketReplyForm :token="token" @replied="onReplied" />
 
           <!-- Message list -->
           <div v-if="sortedMessages.length === 0" class="vk-empty-state">

package/templates/nuxt/server/api/vicket/[...path].ts

@@ -1,85 +1,2 @@
-import { defineEventHandler, getQuery, readBody, readMultipartFormData, getMethod } 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 path = event.context.params?.path || "";
-  const method = getMethod(event);
-  const query = getQuery(event);
-
-  // Build target URL with query params
-  const queryString = new URLSearchParams(
-    Object.entries(query).reduce<Record<string, string>>((acc, [k, v]) => {
-      if (v !== undefined && v !== null) acc[k] = String(v);
-      return acc;
-    }, {}),
-  ).toString();
-  const targetUrl = `${apiUrl}/public/support/${path}${queryString ? `?${queryString}` : ""}`;
-
-  // Determine content type from the incoming request
-  const contentType = event.node.req.headers["content-type"] || "";
-  const isMultipart = contentType.includes("multipart/form-data");
-
-  let fetchOptions: RequestInit;
-
-  if (method === "GET" || method === "HEAD") {
-    fetchOptions = {
-      method,
-      headers: {
-        "X-Api-Key": apiKey,
-        "Content-Type": "application/json",
-      },
-    };
-  } else if (isMultipart) {
-    // Read raw multipart form data and rebuild a FormData for the upstream request
-    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,
-      headers: {
-        "X-Api-Key": apiKey,
-        // Do NOT set Content-Type for FormData — fetch sets it with boundary automatically
-      },
-      body: formData,
-    };
-  } else {
-    // JSON body
-    const body = await readBody(event);
-    fetchOptions = {
-      method,
-      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();
-
-  // Preserve the upstream status code
-  event.node.res.statusCode = response.status;
-
-  return data;
-});
+import { createVicketProxy } from "vicket/nuxt";
+export default createVicketProxy();