@vicket/create-support 1.1.1 → 1.1.2

package/templates/nuxt/app/components/VicketReplyForm.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { cn, sendReply } from "vicket";
+
+/* ---------------------------------------------- */
+/*  Props & Emits                                  */
+/* ---------------------------------------------- */
+const props = defineProps<{
+  token: string;
+}>();
+
+const emit = defineEmits<{
+  replied: [];
+}>();
+
+/* ---------------------------------------------- */
+/*  Reactive state                                 */
+/* ---------------------------------------------- */
+const content = ref("");
+const files = ref<File[]>([]);
+const isSending = ref(false);
+const error = ref("");
+const success = ref("");
+
+/* ---------------------------------------------- */
+/*  Helpers                                        */
+/* ---------------------------------------------- */
+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 = "";
+};
+
+const submitReply = async () => {
+  error.value = "";
+  success.value = "";
+
+  if (!content.value.trim() && files.value.length === 0) {
+    error.value = "Reply content is required.";
+    return;
+  }
+
+  if (!props.token.trim()) {
+    error.value = "Missing ticket token.";
+    return;
+  }
+
+  isSending.value = true;
+  try {
+    await sendReply(props.token, content.value.trim(), files.value);
+    content.value = "";
+    files.value = [];
+    success.value = "Reply sent.";
+    emit("replied");
+  } catch (replyError) {
+    error.value = replyError instanceof Error ? replyError.message : "Unexpected error.";
+  } finally {
+    isSending.value = false;
+  }
+};
+</script>
+
+<template>
+  <!-- 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>
+  <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>
+
+  <!-- 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>
+</template>

package/templates/nuxt/app/components/VicketSupportContent.vue

@@ -0,0 +1,255 @@
+<script setup lang="ts">
+import type { Template, Article, Faq } from "vicket";
+import { cn, stripHtml, sanitizeHtml } from "vicket";
+
+/* ---------------------------------------------- */
+/*  Props                                          */
+/* ---------------------------------------------- */
+const props = defineProps<{
+  initData?: { website?: { name?: string }; templates: Template[]; articles?: Article[]; faqs?: Faq[] } | null;
+  initError?: string;
+}>();
+
+/* ---------------------------------------------- */
+/*  Reactive state                                 */
+/* ---------------------------------------------- */
+const templates = computed(() => props.initData?.templates || []);
+const articles = computed(() => props.initData?.articles || []);
+const faqs = computed(() => props.initData?.faqs || []);
+const websiteName = computed(() => props.initData?.website?.name || "Support");
+const error = ref(props.initError || "");
+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;
+};
+</script>
+
+<template>
+  <!-- Article viewer -->
+  <div v-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>
+</template>

package/templates/nuxt/app/components/VicketTicketDialog.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { Template, FormValues } from "~/composables/useVicket";
-import { cn, initialFormValues, createTicket } from "~/composables/useVicket";
+import type { Template, FormValues } from "vicket";
+import { cn, initialFormValues, createTicket } from "vicket";
 
 /* ---------------------------------------------- */
 /*  Props & Emits                                  */