@vicket/create-support 1.1.1 → 1.1.2

package/templates/next/src/app/support/page.tsx

@@ -1,358 +1,32 @@
-"use client";
-
-import { useEffect, useMemo, useState } from "react";
-import "../vicket.css";
-import type { Article, Faq, Template } from "../utils/vicket/types";
-import { cn, stripHtml, sanitizeHtml } from "../utils/vicket/utils";
-import { fetchSupportInit } from "../utils/vicket/api";
-import TicketDialog from "../components/vicket/TicketDialog";
-
-/* ---------------------------------------------- */
-/*  Skeleton loader                               */
-/* ---------------------------------------------- */
-function HomeSkeleton() {
-  return (
-    <div className="vk-shell">
-      <div className="vk-page vk-animate-in">
-        <div className="vk-hero-row">
-          <div>
-            <div className="vk-skeleton" aria-hidden="true">
-              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-            </div>
-            <div className="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 className="vk-skeleton" aria-hidden="true">
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-          </div>
-        </div>
-        <div className="vk-search-wrap">
-          <div className="vk-skeleton" aria-hidden="true">&nbsp;</div>
-        </div>
-        <div className="vk-content-grid">
-          <div>
-            <div className="vk-skeleton" aria-hidden="true">&nbsp;</div>
-            <div className="vk-skeleton" aria-hidden="true">&nbsp;</div>
-            <div className="vk-skeleton" aria-hidden="true">&nbsp;</div>
-          </div>
-          <div>
-            <div className="vk-skeleton" aria-hidden="true">&nbsp;</div>
-            <div className="vk-skeleton" aria-hidden="true">&nbsp;</div>
-            <div className="vk-skeleton" aria-hidden="true">&nbsp;</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/* ---------------------------------------------- */
-/*  Alert component                               */
-/* ---------------------------------------------- */
-function Alert({
-  type,
-  message,
-  onDismiss,
-}: {
-  type: "error" | "success";
-  message: string;
-  onDismiss?: () => void;
-}) {
-  return (
-    <div
-      className={cn("vk-alert vk-slide-up", type === "error" ? "error" : "success")}
-      role="alert"
-    >
-      <span>{type === "error" ? "\u26A0" : "\u2713"}</span>
-      <span>{message}</span>
-      {onDismiss && (
-        <button
-          type="button"
-          onClick={onDismiss}
-          className="vk-alert-dismiss"
-          aria-label="Dismiss"
-        >
-          &#10005;
-        </button>
-      )}
-    </div>
-  );
-}
-
-/* ---------------------------------------------- */
-/*  FAQ Accordion item                            */
-/* ---------------------------------------------- */
-function FaqItem({ question, answer }: { question: string; answer: string }) {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <div className="vk-faq-item">
-      <button
-        type="button"
-        onClick={() => setOpen(!open)}
-        className="vk-faq-question"
-        aria-expanded={open}
-      >
-        {question}
-        <span className={cn("vk-faq-chevron", open && "open")}>&#9660;</span>
-      </button>
-      <div className={cn("vk-faq-body", open && "open")}>
-        <div>
-          <div className="vk-faq-answer">{answer}</div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/* ---------------------------------------------- */
-/*  Main page                                     */
-/* ---------------------------------------------- */
-export default function SupportPage() {
-  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 fetchSupportInit();
-        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;
-    };
-  }, []);
-
-  /* Filtered articles & FAQs by search query */
-  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;
-
-  /* Loading state */
-  if (isLoading) {
-    return <HomeSkeleton />;
-  }
-
-  /* Article viewer */
-  if (selectedArticle) {
-    return (
-      <div className="vk-shell">
-        <div className="vk-page vk-animate-in">
-          {/* Hero stays visible */}
-          <div className="vk-hero-row">
-            <div>
-              <h1 className="vk-hero-title">{websiteName}</h1>
-              <p className="vk-hero-subtitle">How can we help you today?</p>
-            </div>
-            {templates.length > 0 && (
-              <button
-                type="button"
-                className="vk-button primary pill"
-                onClick={() => setDialogOpen(true)}
-              >
-                &#128172; Contact Support
-              </button>
-            )}
-          </div>
-
-          {/* Article content */}
-          <div className="vk-article-viewer">
-            <button
-              type="button"
-              onClick={() => setSelectedArticle(null)}
-              className="vk-back-button"
-            >
-              &#8592; Back to articles
-            </button>
-
-            <div className="vk-article-viewer-card">
-              <h2 className="vk-article-viewer-title">{selectedArticle.title}</h2>
-              <div
-                className="vk-article-viewer-content vk-message-html"
-                dangerouslySetInnerHTML={{
-                  __html: sanitizeHtml(selectedArticle.content),
-                }}
-              />
-            </div>
-          </div>
-        </div>
-
-        <TicketDialog
-          open={dialogOpen}
-          onClose={() => setDialogOpen(false)}
-          templates={templates}
-        />
-      </div>
-    );
+import { createServerClient } from "vicket/server";
+import type { Template, Article, Faq } from "vicket";
+import SupportContent from "../components/vicket/SupportContent";
+
+export default async function SupportPage() {
+  let templates: Template[] = [];
+  let articles: Article[] = [];
+  let faqs: Faq[] = [];
+  let websiteName = "Support";
+  let initError = "";
+
+  try {
+    const vicket = createServerClient();
+    const data = await vicket.fetchInit();
+    templates = data.templates || [];
+    articles = data.articles || [];
+    faqs = data.faqs || [];
+    websiteName = data.website?.name || "Support";
+  } catch (e) {
+    initError = e instanceof Error ? e.message : "Failed to load support data.";
   }
 
-  /* Home view */
   return (
-    <div className="vk-shell">
-      <div className="vk-page vk-animate-in">
-        {/* Row 1 - Hero */}
-        <div className="vk-hero-row">
-          <div>
-            <h1 className="vk-hero-title">{websiteName}</h1>
-            <p className="vk-hero-subtitle">How can we help you today?</p>
-          </div>
-          {templates.length > 0 && (
-            <div className="vk-hero-cta">
-              <span className="vk-hero-cta-hint">
-                Can&apos;t find what you&apos;re looking for?
-              </span>
-              <button
-                type="button"
-                className="vk-button primary pill"
-                onClick={() => setDialogOpen(true)}
-              >
-                &#128172; Contact Support
-              </button>
-            </div>
-          )}
-        </div>
-
-        {/* Alerts */}
-        {error && (
-          <Alert type="error" message={error} onDismiss={() => setError("")} />
-        )}
-
-        {/* Row 2 - Search bar */}
-        {hasContent && (
-          <div className="vk-search-wrap">
-            <span className="vk-search-icon">&#128269;</span>
-            <input
-              type="text"
-              className="vk-search-input"
-              placeholder="Search articles and FAQs..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-            />
-          </div>
-        )}
-
-        {/* Row 3 - Split content */}
-        {hasResults && (
-          <div className="vk-content-grid">
-            {/* Left: Articles */}
-            {filteredArticles.length > 0 && (
-              <div>
-                <div className="vk-section-title-row">
-                  <span className="vk-section-title-icon">&#128196;</span>
-                  <h2 className="vk-section-title">Popular Articles</h2>
-                </div>
-                <div className="vk-article-list">
-                  {filteredArticles.map((article) => (
-                    <button
-                      key={article.id}
-                      type="button"
-                      className="vk-article-card"
-                      onClick={() => setSelectedArticle(article)}
-                    >
-                      <div className="vk-article-icon" aria-hidden="true">
-                        &#128196;
-                      </div>
-                      <div>
-                        <h3 className="vk-article-title">{article.title}</h3>
-                        {article.content && (
-                          <p className="vk-article-preview">
-                            {stripHtml(article.content).substring(0, 150)}
-                          </p>
-                        )}
-                      </div>
-                    </button>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {/* Right: FAQs */}
-            {filteredFaqs.length > 0 && (
-              <div>
-                <div className="vk-section-title-row">
-                  <span className="vk-section-title-icon">&#10068;</span>
-                  <h2 className="vk-section-title">Frequently Asked Questions</h2>
-                </div>
-                <div className="vk-faq-list">
-                  {filteredFaqs.map((faq) => (
-                    <FaqItem key={faq.id} question={faq.question} answer={faq.answer} />
-                  ))}
-                </div>
-              </div>
-            )}
-          </div>
-        )}
-
-        {/* No search results */}
-        {searchQuery.trim() && !hasResults && (
-          <div className="vk-no-results">
-            No results found for &ldquo;{searchQuery}&rdquo;
-          </div>
-        )}
-
-        {/* Empty state - no articles and no FAQs at all */}
-        {!hasContent && !error && (
-          <div className="vk-cta-card">
-            <div className="vk-cta-icon">&#128172;</div>
-            <p className="vk-cta-text">Need help? Our team is here for you.</p>
-            <button
-              type="button"
-              className="vk-button primary pill"
-              onClick={() => setDialogOpen(true)}
-            >
-              Contact Support
-            </button>
-          </div>
-        )}
-      </div>
-
-      <TicketDialog
-        open={dialogOpen}
-        onClose={() => setDialogOpen(false)}
-        templates={templates}
-      />
-    </div>
+    <SupportContent
+      templates={templates}
+      articles={articles}
+      faqs={faqs}
+      websiteName={websiteName}
+      initialError={initError}
+    />
   );
 }