@vicket/create-support 1.1.1 → 1.1.2

package/templates-tailwind/next/src/app/api/vicket/tickets/route.ts

@@ -1,37 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-
-const VICKET_API_URL = (process.env.VICKET_API_URL || "").replace(/\/+$/, "");
-const VICKET_API_KEY = process.env.VICKET_API_KEY || "";
-
-export async function POST(req: NextRequest) {
-  if (!VICKET_API_URL || !VICKET_API_KEY) {
-    return NextResponse.json(
-      { error: "Missing VICKET_API_URL or VICKET_API_KEY server environment variables." },
-      { status: 500 },
-    );
-  }
-
-  const contentType = req.headers.get("content-type") || "";
-  const headers: HeadersInit = { "X-Api-Key": VICKET_API_KEY };
-  let body: BodyInit;
-
-  if (contentType.includes("multipart/form-data")) {
-    body = await req.blob();
-    headers["Content-Type"] = contentType;
-  } else {
-    body = await req.text();
-    headers["Content-Type"] = "application/json";
-  }
-
-  const upstream = await fetch(`${VICKET_API_URL}/public/support/tickets`, {
-    method: "POST",
-    headers,
-    body,
-  });
-
-  const responseBody = await upstream.arrayBuffer();
-  return new NextResponse(responseBody, {
-    status: upstream.status,
-    headers: { "Content-Type": upstream.headers.get("Content-Type") || "application/json" },
-  });
-}

package/templates-tailwind/next/src/components/vicket/support-page.tsx

@@ -1,359 +0,0 @@
-"use client";
-
-import { useEffect, useMemo, useState } from "react";
-import type { Template, Article, Faq } from "@/lib/vicket";
-import { fetchInit, sanitizeHtml, stripHtml, cn } from "@/lib/vicket";
-import TicketDialog from "./ticket-dialog";
-
-/* ── Custom hook ─────────────────────────────────── */
-
-function useVicketSupport() {
-  const [templates, setTemplates] = useState<Template[]>([]);
-  const [articles, setArticles] = useState<Article[]>([]);
-  const [faqs, setFaqs] = useState<Faq[]>([]);
-  const [websiteName, setWebsiteName] = useState("Support");
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState("");
-  const [searchQuery, setSearchQuery] = useState("");
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const [selectedArticle, setSelectedArticle] = useState<Article | null>(null);
-
-  useEffect(() => {
-    let isMounted = true;
-    const load = async () => {
-      setIsLoading(true);
-      setError("");
-      try {
-        const data = await fetchInit();
-        if (!isMounted) return;
-        setTemplates(data.templates || []);
-        setArticles(data.articles || []);
-        setFaqs(data.faqs || []);
-        setWebsiteName(data.website?.name || "Support");
-      } catch (loadError) {
-        if (!isMounted) return;
-        setError(loadError instanceof Error ? loadError.message : "Unexpected error.");
-      } finally {
-        if (isMounted) setIsLoading(false);
-      }
-    };
-    load();
-    return () => { isMounted = false; };
-  }, []);
-
-  const filteredArticles = useMemo(() => {
-    if (!searchQuery.trim()) return articles;
-    const q = searchQuery.toLowerCase();
-    return articles.filter(
-      (a) => a.title.toLowerCase().includes(q) || stripHtml(a.content).toLowerCase().includes(q),
-    );
-  }, [articles, searchQuery]);
-
-  const filteredFaqs = useMemo(() => {
-    if (!searchQuery.trim()) return faqs;
-    const q = searchQuery.toLowerCase();
-    return faqs.filter(
-      (f) => f.question.toLowerCase().includes(q) || f.answer.toLowerCase().includes(q),
-    );
-  }, [faqs, searchQuery]);
-
-  const hasContent = articles.length > 0 || faqs.length > 0;
-  const hasResults = filteredArticles.length > 0 || filteredFaqs.length > 0;
-
-  return {
-    templates, websiteName, isLoading, error, setError,
-    searchQuery, setSearchQuery, dialogOpen, setDialogOpen,
-    selectedArticle, setSelectedArticle,
-    filteredArticles, filteredFaqs, hasContent, hasResults,
-  };
-}
-
-/* ── Sub-components ──────────────────────────────── */
-
-function FaqItem({ question, answer }: { question: string; answer: string }) {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <div className="rounded-xl border border-slate-200 bg-white/50 transition-colors hover:bg-white/80">
-      <button
-        type="button"
-        onClick={() => setOpen(!open)}
-        className={cn(
-          "flex w-full cursor-pointer items-center justify-between gap-3 border-none bg-transparent px-4 py-3.5 text-left text-sm font-semibold text-slate-900",
-          open && "text-blue-600",
-        )}
-        aria-expanded={open}
-      >
-        {question}
-        <span className={cn("shrink-0 text-slate-500 transition-transform duration-200", open && "rotate-180")}>
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6" /></svg>
-        </span>
-      </button>
-      <div className={cn("grid grid-rows-[0fr] transition-[grid-template-rows] duration-250", open && "grid-rows-[1fr]")}>
-        <div className="overflow-hidden">
-          <div className="whitespace-pre-wrap px-4 pb-4 text-sm leading-relaxed text-slate-500">
-            {answer}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function Alert({ type, message, onDismiss }: { type: "error" | "success"; message: string; onDismiss?: () => void }) {
-  return (
-    <div
-      className={cn(
-        "flex items-start gap-3 rounded-xl border p-4 text-sm",
-        type === "error" ? "border-red-200 bg-red-50 text-red-900" : "border-green-200 bg-green-50 text-green-900",
-      )}
-      role="alert"
-    >
-      <span className="mt-0.5 shrink-0">
-        {type === "error" ? (
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" /><path d="M12 9v4" /><path d="M12 17h.01" /></svg>
-        ) : (
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
-        )}
-      </span>
-      <span className="flex-1">{message}</span>
-      {onDismiss && (
-        <button type="button" onClick={onDismiss} className="shrink-0 cursor-pointer border-none bg-transparent p-0 opacity-50 transition-opacity hover:opacity-100" aria-label="Dismiss">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg>
-        </button>
-      )}
-    </div>
-  );
-}
-
-function HomeSkeleton() {
-  return (
-    <div>
-      <div className="mx-auto flex max-w-5xl flex-col gap-6 px-6 pt-14 md:flex-row md:items-center md:justify-between">
-        <div className="flex-1">
-          <div className="mb-3 h-9 w-48 rounded-lg animate-pulse bg-slate-200" />
-          <div className="h-5 w-64 rounded-md animate-pulse bg-slate-200" />
-        </div>
-        <div className="h-10 w-40 rounded-full animate-pulse bg-slate-200" />
-      </div>
-      <div className="mx-auto mt-8 max-w-5xl px-6">
-        <div className="h-11 w-full rounded-xl animate-pulse bg-slate-200" />
-      </div>
-      <div className="mx-auto mt-8 grid max-w-5xl grid-cols-1 gap-8 px-6 md:grid-cols-2">
-        <div className="space-y-3">
-          <div className="h-5 w-36 rounded animate-pulse bg-slate-200" />
-          {[1, 2, 3].map((i) => (
-            <div key={i} className="h-20 rounded-xl animate-pulse bg-slate-200" />
-          ))}
-        </div>
-        <div className="space-y-3">
-          <div className="h-5 w-52 rounded animate-pulse bg-slate-200" />
-          {[1, 2, 3].map((i) => (
-            <div key={i} className="h-14 rounded-xl animate-pulse bg-slate-200" />
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/* ── Inline SVG icon paths (for readability) ──── */
-const svgArticle = <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" /><path d="M14 2v6h6" /><path d="M16 13H8" /><path d="M16 17H8" /><path d="M10 9H8" /></svg>;
-const svgArticleSmall = <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" /><path d="M14 2v6h6" /><path d="M16 13H8" /><path d="M16 17H8" /><path d="M10 9H8" /></svg>;
-const svgHelpCircle = <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" /><path d="M12 17h.01" /></svg>;
-const svgMessageCircle16 = <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" /></svg>;
-const svgMessageCircle22 = <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" /></svg>;
-const svgSearch = <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>;
-const svgArrowLeft = <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg>;
-
-/* ── Main component ──────────────────────────────── */
-
-export default function SupportPage() {
-  const {
-    templates, websiteName, isLoading, error, setError,
-    searchQuery, setSearchQuery, dialogOpen, setDialogOpen,
-    selectedArticle, setSelectedArticle,
-    filteredArticles, filteredFaqs, hasContent, hasResults,
-  } = useVicketSupport();
-
-  if (isLoading) {
-    return (
-      <div className="min-h-screen bg-slate-50 font-[system-ui,-apple-system,sans-serif] antialiased">
-        <HomeSkeleton />
-      </div>
-    );
-  }
-
-  if (selectedArticle) {
-    return (
-      <div className="min-h-screen bg-slate-50 font-[system-ui,-apple-system,sans-serif] antialiased">
-        <div className="mx-auto max-w-5xl px-6">
-          <div className="flex flex-col gap-4 pb-8 pt-14 md:flex-row md:items-center md:justify-between">
-            <div>
-              <h1 className="m-0 text-2xl font-bold tracking-tight text-slate-900 md:text-3xl">{websiteName}</h1>
-              <p className="mt-1.5 text-slate-500">How can we help you today?</p>
-            </div>
-            {templates.length > 0 && (
-              <button
-                type="button"
-                className="inline-flex shrink-0 items-center gap-2 !rounded-full border-none bg-blue-600 !px-7 !py-3 text-sm font-semibold text-white cursor-pointer transition-all hover:bg-blue-700 hover:-translate-y-px hover:shadow-lg active:translate-y-0"
-                onClick={() => setDialogOpen(true)}
-              >
-                {svgMessageCircle16}
-                Contact Support
-              </button>
-            )}
-          </div>
-
-          <div className="pb-16">
-            <button
-              type="button"
-              onClick={() => setSelectedArticle(null)}
-              className="-ml-2 mb-4 inline-flex cursor-pointer items-center gap-1.5 rounded-lg border-none bg-transparent px-2 py-1 text-sm font-medium text-slate-500 transition-colors hover:bg-white hover:text-slate-900"
-            >
-              {svgArrowLeft}
-              Back to articles
-            </button>
-
-            <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm md:p-8">
-              <h2 className="m-0 text-xl font-bold tracking-tight text-slate-900 md:text-2xl">{selectedArticle.title}</h2>
-              <div
-                className="vk-message-content mt-5 text-sm leading-relaxed text-slate-500"
-                dangerouslySetInnerHTML={{ __html: sanitizeHtml(selectedArticle.content) }}
-              />
-            </div>
-          </div>
-        </div>
-
-        <style>{`
-          .vk-message-content p { margin-bottom: 0.5rem; }
-          .vk-message-content p:last-child { margin-bottom: 0; }
-          .vk-message-content a { color: #2563eb; text-decoration: underline; }
-          .vk-message-content ul, .vk-message-content ol { margin: 0.25rem 0; padding-left: 1.5rem; }
-          .vk-message-content pre { overflow-x: auto; border-radius: 6px; background: #f8fafc; padding: 0.75rem; font-size: 0.75rem; }
-          .vk-message-content code { font-family: monospace; font-size: 0.85em; }
-        `}</style>
-
-        <TicketDialog open={dialogOpen} onClose={() => setDialogOpen(false)} templates={templates} />
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen bg-slate-50 font-[system-ui,-apple-system,sans-serif] antialiased">
-      <div className="mx-auto max-w-5xl px-6">
-        <div className="flex flex-col gap-4 pb-8 pt-14 md:flex-row md:items-center md:justify-between">
-          <div>
-            <h1 className="m-0 text-2xl font-bold tracking-tight text-slate-900 md:text-3xl">{websiteName}</h1>
-            <p className="mt-1.5 text-slate-500">How can we help you today?</p>
-          </div>
-          {templates.length > 0 && (
-            <div className="flex items-center gap-3">
-              <span className="hidden text-sm text-slate-500 md:block">Can&apos;t find what you&apos;re looking for?</span>
-              <button
-                type="button"
-                className="inline-flex shrink-0 items-center gap-2 !rounded-full border-none bg-blue-600 !px-7 !py-3 text-sm font-semibold text-white cursor-pointer transition-all hover:bg-blue-700 hover:-translate-y-px hover:shadow-lg active:translate-y-0"
-                onClick={() => setDialogOpen(true)}
-              >
-                {svgMessageCircle16}
-                Contact Support
-              </button>
-            </div>
-          )}
-        </div>
-
-        {error && (
-          <div className="pb-4">
-            <Alert type="error" message={error} onDismiss={() => setError("")} />
-          </div>
-        )}
-
-        {hasContent && (
-          <div className="pb-8">
-            <div className="relative">
-              <span className="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-500">{svgSearch}</span>
-              <input
-                type="text"
-                className="w-full rounded-xl border border-slate-200 bg-white py-3 pl-11 pr-4 text-sm text-slate-900 shadow-sm transition-all duration-150 placeholder:text-slate-500/60 focus:border-blue-600 focus:outline-none focus:ring-3 focus:ring-blue-600/10"
-                placeholder="Search articles and FAQs..."
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-              />
-            </div>
-          </div>
-        )}
-
-        {hasResults && (
-          <div className="grid grid-cols-1 gap-10 pb-16 md:grid-cols-2 md:gap-12">
-            {filteredArticles.length > 0 && (
-              <div>
-                <div className="mb-4 flex items-center gap-2">
-                  <span className="text-blue-600">{svgArticle}</span>
-                  <h2 className="m-0 text-base font-bold tracking-tight text-slate-900">Popular Articles</h2>
-                </div>
-                <div className="space-y-1">
-                  {filteredArticles.map((article) => (
-                    <button
-                      key={article.id}
-                      type="button"
-                      className="group flex w-full cursor-pointer items-start gap-3 rounded-xl border border-transparent bg-transparent p-3 text-left transition-all duration-150 hover:border-slate-200 hover:bg-white hover:shadow-sm"
-                      onClick={() => setSelectedArticle(article)}
-                    >
-                      <div className="flex h-9 w-9 min-w-9 items-center justify-center rounded-lg bg-blue-50 text-blue-600">{svgArticleSmall}</div>
-                      <div className="min-w-0 flex-1">
-                        <h3 className="m-0 text-sm font-semibold leading-snug text-slate-900 transition-colors group-hover:text-blue-600">{article.title}</h3>
-                        {article.content && (
-                          <p className="mt-0.5 line-clamp-2 text-xs leading-normal text-slate-500">
-                            {stripHtml(article.content).substring(0, 150)}
-                          </p>
-                        )}
-                      </div>
-                    </button>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {filteredFaqs.length > 0 && (
-              <div>
-                <div className="mb-4 flex items-center gap-2">
-                  <span className="text-blue-600">{svgHelpCircle}</span>
-                  <h2 className="m-0 text-base font-bold tracking-tight text-slate-900">Frequently Asked Questions</h2>
-                </div>
-                <div className="space-y-2">
-                  {filteredFaqs.map((faq) => (
-                    <FaqItem key={faq.id} question={faq.question} answer={faq.answer} />
-                  ))}
-                </div>
-              </div>
-            )}
-          </div>
-        )}
-
-        {searchQuery.trim() && !hasResults && (
-          <div className="pb-16 text-center">
-            <p className="text-sm text-slate-500">No results found for &ldquo;{searchQuery}&rdquo;</p>
-          </div>
-        )}
-
-        {!hasContent && !error && (
-          <div className="pb-16 pt-4 text-center">
-            <div className="mx-auto max-w-sm rounded-2xl border border-slate-200 bg-white p-8 shadow-sm">
-              <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-blue-50 text-blue-600">{svgMessageCircle22}</div>
-              <p className="m-0 text-sm font-medium text-slate-900">Need help? Our team is here for you.</p>
-              <button
-                type="button"
-                className="mt-5 inline-flex items-center gap-2 !rounded-full border-none bg-blue-600 !px-7 !py-3 text-sm font-semibold text-white cursor-pointer transition-all hover:bg-blue-700 hover:-translate-y-px hover:shadow-lg active:translate-y-0"
-                onClick={() => setDialogOpen(true)}
-              >
-                Contact Support
-              </button>
-            </div>
-          </div>
-        )}
-      </div>
-
-      <TicketDialog open={dialogOpen} onClose={() => setDialogOpen(false)} templates={templates} />
-    </div>
-  );
-}