@vicket/create-support 1.1.1

package/templates/sveltekit/src/routes/api/vicket/[...path]/+server.ts

@@ -0,0 +1,77 @@
+import { VICKET_API_URL, VICKET_API_KEY } from '$env/static/private';
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+
+const baseUrl = (VICKET_API_URL || '').replace(/\/+$/, '');
+
+export const GET: RequestHandler = async ({ params, url }) => {
+  if (!baseUrl || !VICKET_API_KEY) {
+    return json({ success: false, error: 'Server misconfigured: missing VICKET_API_URL or VICKET_API_KEY.' }, { status: 500 });
+  }
+
+  const path = params.path || '';
+  const query = url.searchParams.toString();
+  const target = `${baseUrl}/public/support/${path}${query ? `?${query}` : ''}`;
+
+  const response = await fetch(target, {
+    method: 'GET',
+    headers: {
+      'X-Api-Key': VICKET_API_KEY,
+      'Content-Type': 'application/json',
+    },
+  });
+
+  const body = await response.text();
+
+  return new Response(body, {
+    status: response.status,
+    headers: {
+      'Content-Type': response.headers.get('Content-Type') || 'application/json',
+    },
+  });
+};
+
+export const POST: RequestHandler = async ({ params, url, request }) => {
+  if (!baseUrl || !VICKET_API_KEY) {
+    return json({ success: false, error: 'Server misconfigured: missing VICKET_API_URL or VICKET_API_KEY.' }, { status: 500 });
+  }
+
+  const path = params.path || '';
+  const query = url.searchParams.toString();
+  const target = `${baseUrl}/public/support/${path}${query ? `?${query}` : ''}`;
+
+  const contentType = request.headers.get('Content-Type') || '';
+  const isFormData = contentType.includes('multipart/form-data');
+
+  let response: Response;
+
+  if (isFormData) {
+    const formData = await request.formData();
+    response = await fetch(target, {
+      method: 'POST',
+      headers: {
+        'X-Api-Key': VICKET_API_KEY,
+      },
+      body: formData,
+    });
+  } else {
+    const body = await request.text();
+    response = await fetch(target, {
+      method: 'POST',
+      headers: {
+        'X-Api-Key': VICKET_API_KEY,
+        'Content-Type': 'application/json',
+      },
+      body,
+    });
+  }
+
+  const responseBody = await response.text();
+
+  return new Response(responseBody, {
+    status: response.status,
+    headers: {
+      'Content-Type': response.headers.get('Content-Type') || 'application/json',
+    },
+  });
+};

package/templates/sveltekit/src/routes/support/+page.svelte

@@ -0,0 +1,316 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import type { Article, Faq, Template } from "$lib/vicket/types";
+  import { cn, stripHtml, sanitizeHtml } from "$lib/vicket/utils";
+  import { fetchSupportInit } from "$lib/vicket/api";
+  import TicketDialog from "$lib/vicket/TicketDialog.svelte";
+
+  /* ---------------------------------------------- */
+  /*  State                                          */
+  /* ---------------------------------------------- */
+  let templates = $state<Template[]>([]);
+  let articles = $state<Article[]>([]);
+  let faqs = $state<Faq[]>([]);
+  let websiteName = $state("Support");
+  let isLoading = $state(true);
+  let error = $state("");
+  let searchQuery = $state("");
+  let dialogOpen = $state(false);
+  let selectedArticle = $state<Article | null>(null);
+
+  /* FAQ open state tracking */
+  let openFaqIds = $state<Set<string>>(new Set());
+
+  /* ---------------------------------------------- */
+  /*  Derived                                        */
+  /* ---------------------------------------------- */
+  let filteredArticles = $derived.by(() => {
+    if (!searchQuery.trim()) return articles;
+    const q = searchQuery.toLowerCase();
+    return articles.filter(
+      (a) => a.title.toLowerCase().includes(q) || stripHtml(a.content).toLowerCase().includes(q),
+    );
+  });
+
+  let filteredFaqs = $derived.by(() => {
+    if (!searchQuery.trim()) return faqs;
+    const q = searchQuery.toLowerCase();
+    return faqs.filter(
+      (f) => f.question.toLowerCase().includes(q) || f.answer.toLowerCase().includes(q),
+    );
+  });
+
+  let hasContent = $derived(articles.length > 0 || faqs.length > 0);
+  let hasResults = $derived(filteredArticles.length > 0 || filteredFaqs.length > 0);
+
+  /* ---------------------------------------------- */
+  /*  Functions                                      */
+  /* ---------------------------------------------- */
+  function toggleFaq(id: string) {
+    const next = new Set(openFaqIds);
+    if (next.has(id)) {
+      next.delete(id);
+    } else {
+      next.add(id);
+    }
+    openFaqIds = next;
+  }
+
+  onMount(() => {
+    const load = async () => {
+      isLoading = true;
+      error = "";
+      try {
+        const data = await fetchSupportInit();
+        templates = data.templates || [];
+        articles = data.articles || [];
+        faqs = data.faqs || [];
+        websiteName = data.website?.name || "Support";
+      } catch (loadError) {
+        error = loadError instanceof Error ? loadError.message : "Unexpected error.";
+      } finally {
+        isLoading = false;
+      }
+    };
+
+    void load();
+  });
+</script>
+
+<!-- --------------------------------------- -->
+<!--  Loading skeleton                       -->
+<!-- --------------------------------------- -->
+{#if isLoading}
+  <div 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                         -->
+<!-- --------------------------------------- -->
+{:else if selectedArticle}
+  <div 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>
+        {#if templates.length > 0}
+          <button
+            type="button"
+            class="vk-button primary pill"
+            onclick={() => (dialogOpen = true)}
+          >
+            &#128172; Contact Support
+          </button>
+        {/if}
+      </div>
+
+      <!-- Article content -->
+      <div class="vk-article-viewer">
+        <button
+          type="button"
+          onclick={() => (selectedArticle = null)}
+          class="vk-back-button"
+        >
+          &#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">
+            {@html sanitizeHtml(selectedArticle.content)}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Ticket dialog (also accessible from article view) -->
+    <TicketDialog open={dialogOpen} onclose={() => (dialogOpen = false)} templates={templates} />
+  </div>
+
+<!-- --------------------------------------- -->
+<!--  Home view                              -->
+<!-- --------------------------------------- -->
+{:else}
+  <div 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>
+        {#if templates.length > 0}
+          <div 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"
+              onclick={() => (dialogOpen = true)}
+            >
+              &#128172; Contact Support
+            </button>
+          </div>
+        {/if}
+      </div>
+
+      <!-- Alerts -->
+      {#if error}
+        <div class={cn("vk-alert vk-slide-up", "error")} role="alert">
+          <span>&#9888;</span>
+          <span>{error}</span>
+          <button
+            type="button"
+            onclick={() => (error = "")}
+            class="vk-alert-dismiss"
+            aria-label="Dismiss"
+          >
+            &#10005;
+          </button>
+        </div>
+      {/if}
+
+      <!-- Row 2 - Search bar -->
+      {#if hasContent}
+        <div class="vk-search-wrap">
+          <span class="vk-search-icon">&#128269;</span>
+          <input
+            type="text"
+            class="vk-search-input"
+            placeholder="Search articles and FAQs..."
+            bind:value={searchQuery}
+          />
+        </div>
+      {/if}
+
+      <!-- Row 3 - Split content -->
+      {#if hasResults}
+        <div class="vk-content-grid">
+          <!-- Left: Articles -->
+          {#if filteredArticles.length > 0}
+            <div>
+              <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">
+                {#each filteredArticles as article (article.id)}
+                  <button
+                    type="button"
+                    class="vk-article-card"
+                    onclick={() => (selectedArticle = article)}
+                  >
+                    <div class="vk-article-icon" aria-hidden="true">
+                      &#128196;
+                    </div>
+                    <div>
+                      <h3 class="vk-article-title">{article.title}</h3>
+                      {#if article.content}
+                        <p class="vk-article-preview">
+                          {stripHtml(article.content).substring(0, 150)}
+                        </p>
+                      {/if}
+                    </div>
+                  </button>
+                {/each}
+              </div>
+            </div>
+          {/if}
+
+          <!-- Right: FAQs -->
+          {#if filteredFaqs.length > 0}
+            <div>
+              <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">
+                {#each filteredFaqs as faq (faq.id)}
+                  <div class="vk-faq-item">
+                    <button
+                      type="button"
+                      onclick={() => toggleFaq(faq.id)}
+                      class="vk-faq-question"
+                      aria-expanded={openFaqIds.has(faq.id)}
+                    >
+                      {faq.question}
+                      <span class={cn("vk-faq-chevron", openFaqIds.has(faq.id) && "open")}>&#9660;</span>
+                    </button>
+                    <div class={cn("vk-faq-body", openFaqIds.has(faq.id) && "open")}>
+                      <div>
+                        <div class="vk-faq-answer">{faq.answer}</div>
+                      </div>
+                    </div>
+                  </div>
+                {/each}
+              </div>
+            </div>
+          {/if}
+        </div>
+      {/if}
+
+      <!-- No search results -->
+      {#if searchQuery.trim() && !hasResults}
+        <div class="vk-no-results">
+          No results found for &ldquo;{searchQuery}&rdquo;
+        </div>
+      {/if}
+
+      <!-- Empty state - no articles and no FAQs at all -->
+      {#if !hasContent && !error}
+        <div 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"
+            onclick={() => (dialogOpen = true)}
+          >
+            Contact Support
+          </button>
+        </div>
+      {/if}
+    </div>
+
+    <!-- Ticket dialog -->
+    <TicketDialog open={dialogOpen} onclose={() => (dialogOpen = false)} templates={templates} />
+  </div>
+{/if}
+
+<style>
+  @import '$lib/vicket.css';
+</style>