@vicket/create-support 1.1.1

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

@@ -0,0 +1,358 @@
+"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>
+    );
+  }
+
+  /* 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>
+  );
+}